edit

src/components/Story.jsx

@@ -1,10 +1,7 @@
 import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
+import { P, H2, H3, PS, PXS } from '@/components/text'
 
-const features = [
-
-]
-
-export default function NewFeatures() {
+export default function Story() {
   return (
     <div className="overflow-hidden bg-bg-sand pb-0 pt-12 lg:pt-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -19,19 +16,19 @@ export default function NewFeatures() {
         </div>
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
-              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">OUR STORY</p>
-              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-200">
+              <H2>Our Story</H2>
+              <PS>
               THE TALE OF SACRED ENERGIES OF THE NILE
-              </p>
-              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              </PS>
+              <PS>
               Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating clean, unique, and high-energy boats for people to experience its sacred energies.
-              </p>
-              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              </PS>
+              <PS>
               Their goal is to offer a sanctuary for the body, mind, and spirit, a safe space to open yourself to new experiences, and allow these sacred energies to enter your consciousness, helping you reconnect with your true essence.
-              </p>
-              <p className="mt-4 text-lg leading-7 font-light text-gray-500">
+              </PS>
+              <PS>
               We are in unique times, marked by the energies of the Aquarian Age. As chaotic as these times may seem, they bring a shift in energies and an opportunity for transformation. The Nile is a powerful energy vortex, and we are here to help you align with its frequencies.
-              </p>
+              </PS>  
             </div>
           </div>
         </div>

src/components/text.jsx

@@ -74,7 +74,7 @@ export function PS({ className, children, ...props }) {
   return (
     <p
       className={clsx(
-        'text-base text-gray-700 font-extralight leading-snug',
+        'mt-4 text-base lg:text-base text-gray-600 font-extralight leading-snug',
         className
       )}
       {...props}