ok

src/app/story/page.jsx

@@ -4,6 +4,10 @@ import { Header } from '@/components/Header'
 import Story from '@/components/Story'
 import Story2 from '@/components/Story2'
 import Team from '@/components/Team'
+import { Hero3 } from '@/components/Hero3'
+import { Hero4 } from '@/components/Hero4'
+import { Hero5 } from '@/components/Hero5'
+
 
 
 
@@ -12,8 +16,9 @@ export default function OurStory() {
     <>
       <Header />
       <main>
-        <Story />
+        <Hero3 />
-        <Story2 />
+        <Hero4 />
+        <Hero5 />
         <Team />
       </main>
       <Footer />

src/components/Header.jsx

@@ -82,9 +82,19 @@ function MobileNavigation() {
 export function Header() {
   const pathname = usePathname()
   const isHomepage = pathname === '/'
+  const isStoryPage = pathname === '/story'
+  
+  const headerClasses = clsx(
+    {
+      'bg-transparent': isHomepage,
+      'bg-[#492b06]': !isHomepage && !isStoryPage,
+      'bg-transparent backdrop-blur-sm': isStoryPage,
+      'fixed top-0 left-0 right-0 z-50': isStoryPage,
+    }
+  )
   
   return (
-    <header className={isHomepage ? 'bg-transparent' : 'bg-[#1d0f02]'}>
+    <header className={headerClasses}>
       <nav className="relative z-50 flex items-center py-2 lg:py-4">
         {/* Logo and Navigation Container - Left and Center */}
         <div className="flex-1 max-w-7xl ml-3 mx-0 lg:px-4 px-6">

src/components/Hero3.jsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Button } from '@/components/Button'
+import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+
+export function Hero3() {
+  const scrollDown = () => {
+    // Scroll to Hero4 (2nd section) - account for Hero3's 90vh height
+    window.scrollTo({
+      top: window.innerHeight * 0.9,
+      behavior: 'smooth'
+    })
+  }
+  return (
+    <div className="relative w-full overflow-hidden mt-0">
+      {/* Background Image - Extended to cover header */}
+      <img
+        src="/images/hero_story1.jpg"
+        alt="Hero Story Background"
+        className="w-full h-auto object-cover block relative z-0"
+      />
+      
+      {/* Black Overlay */}
+      <div className="absolute inset-0 bg-black opacity-50"></div>
+      
+      {/* Content */}
+      <div className="absolute inset-0 lg:top-32 flex items-start justify-start text-start px-4 lg:px-8 z-20">
+        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full">
+          <H2 className="text-white">Our Story</H2>
+          <P className="mt-4 text-white">THE TALE OF SACRED ENERGIES OF THE NILE</P>
+          <PS className="mt-6 text-white">
+            Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating authentic, zen, art dahabeya to feel and experience in a unique way the mystical and the deep wisdom of the Nile.
+          </PS>
+          <PS className="mt-4 text-white">
+            Their dream was to offer a sanctuary for the body, mind, and soul, a safe space to open yourself to new experiences, and allow the sacredness of the Nile to flow through you, to step back in the past, to align with the now helping you to reconnect with your true essence. A sanctuary for the body, mind, and soul, a safe space.
+          </PS>
+          
+          {/* Chevron Down Button */}
+          <div className="mt-8 flex justify-start">
+            <ChevronDownIcon 
+              onClick={scrollDown}
+              className="h-12 w-12 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Hero4.jsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Button } from '@/components/Button'
+import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+
+export function Hero4() {
+  const scrollDown = () => {
+    // Scroll to Hero5 (3rd section) - account for Hero3 + Hero4 heights
+    const hero3Height = window.innerHeight * 0.9; // Hero3 is 90vh
+    const hero4Height = document.querySelector('img[src="/images/hero_story2.jpg"]')?.offsetHeight || window.innerHeight;
+    window.scrollTo({
+      top: hero3Height + hero4Height,
+      behavior: 'smooth'
+    })
+  }
+  return (
+    <div className="relative w-full overflow-hidden  mt-0">
+      {/* Background Image - Extended to cover header */}
+      <img
+        src="/images/hero_story2.jpg"
+        alt="Hero Story Background"
+        className="w-full h-auto object-cover block relative z-0"
+      />
+      
+      {/* Black Overlay */}
+      <div className="absolute inset-0 bg-black opacity-50"></div>
+      
+      {/* Content */}
+      <div className="absolute inset-0 lg:top-32 flex items-start justify-start text-start px-4 lg:px-8 z-20">
+        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full">
+          <PS className=" text-white">
+            We are unique in the market as the cruises are designed to provide for a private, personalised and wellness experience on the River Nile. Families, communities or dedicated groups up to sixty people can sail the Nile together discovering her hidden treasures. The Nile is a powerful natural energy source, and the boats are designed to help you align with its frequencies to feel the magic carried by sacred waters of the Nile.
+          </PS>
+          <PS className="mt-6 text-white">
+            Frequencies are the new currency. Our mission is to help you recognize and align with different frequencies, creating a deeply fulfilling life in tune with your soul's gifts. Self-knowledge and self-mastery are the keys to fully opening your heart. By understanding and resonating with these frequencies, you can achieve a life of harmony and fulfillment.
+          </PS>
+          
+          {/* Chevron Down Button */}
+          <div className="mt-8 flex justify-start">
+            <ChevronDownIcon 
+              onClick={scrollDown}
+              className="h-12 w-12 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Hero5.jsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Button } from '@/components/Button'
+import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import { ChevronUpIcon } from '@heroicons/react/24/outline'
+
+export function Hero5() {
+  return (
+    <div className="relative w-full overflow-hidden  mt-0">
+      {/* Background Image - Extended to cover header */}
+      <img
+        src="/images/hero_story3.jpg"
+        alt="Hero Story Background"
+        className="w-full h-auto object-cover block relative z-0"
+      />
+      
+      {/* Black Overlay */}
+      <div className="absolute inset-0 bg-black opacity-50"></div>
+      
+      {/* Content */}
+      <div className="absolute inset-0 lg:top-32 flex items-start justify-start text-start px-4 lg:px-8 z-20">
+        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full">
+          <PS className=" text-white">
+            Are you ready to step out of your comfort zone and embrace these changes? Can you let the new energies flow through you and break free from outdated programs to welcome new wisdom?
+          </PS>
+          <PS className="mt-6 text-white">
+            Together, let us open new gates of consciousness and expand the flow of unconditional love. The magical energy of the Nile is ready to flow through us, uniting us in a heartbeat. Home is calling you, inviting you to a journey of inner discovery and profound connection.
+          </PS>
+           <H4 className="text-base mt-8 font-semibold leading-7 italic text-gold-600">With Love,</H4>
+              <H4 className="text-base font-semibold leading-7 text-white">Kristof & Isabelle</H4>
+          </div>
+        </div>
+      </div>
+  )
+}

src/components/Team.jsx

@@ -29,43 +29,47 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="bg-transparent py-12 md:py-32 lg:py-12">
+      <div className="relative py-12 lg:py-24" style={{backgroundImage: 'url(/images/4.jpg)', backgroundSize: 'cover', backgroundPosition: 'center'}}>
-        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
+        {/* Dark overlay for better text readability */}
-          <div className="mx-auto max-w-2xl lg:mx-0">
+        <div className="absolute inset-0 bg-black opacity-50"></div>
-            <H2 className="">Our People</H2>
+        <div className="relative z-10">
-            <PS className="mt-4">
+          <div className="mx-auto grid max-w-8xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
-            We are a dynamic family of individuals from diverse cultural backgrounds and varied expertise, united by our passion in spirituality and dedication delivering heartfelt and authentic Nile experiences for our guests.
+            <div className="mx-auto max-w-2xl lg:mx-0">
-            </PS>
+              <H2 className="text-white">Our People</H2>
+              <PS className="mt-4 text-white">
+              We are a dynamic family of individuals from diverse cultural backgrounds and varied expertise, united by our passion in spirituality and dedication delivering heartfelt and authentic Nile experiences for our guests.
+              </PS>
+            </div>
+            <ul
+              role="list"
+              className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2"
+            >
+              {people.map((person) => (
+                <li key={person.name}>
+                  <img alt="" src={person.imageUrl} className="aspect-[4/3] w-full  object-cover" />
+                  <div className="flex items-center gap-x-3 mt-6">
+                    <H3 className="flex-1 text-white">{person.name}</H3>
+                    <a href={person.Url} className="text-gray-300 hover:text-white" target='_blank' rel="noopener noreferrer">
+                      <span className="sr-only">Website</span>
+                      <svg fill="none" stroke='white' strokeWidth="3" viewBox="0 0 64 64" width="25" height="25">
+                      <path d="M39.93 55.72a24.86 24.86 0 1116.93-23.57 37.24 37.24 0 01-.73 6M37.86 51.1A47 47 0 0732 56.7"></path>
+                      <path d="M32 7a34.14 34.14 0 0111.57 23 34.07 34.07 0 01.09 4.85M32 7a34.09 34.09 0 00-11.69 25.46c0 16.2 7.28 21 11.66 24.24"></path>
+                      <path d="M10.37 19.9L53.75 19.9"></path>
+                      <path d="M32 6.99L32 56.7"></path>
+                      <path d="M11.05 45.48L37.04 45.48"></path>
+                      <path d="M7.14 32.46L56.86 31.85"></path>
+                      <path d="M53.57 57L58 52.56l-8-8 4.55-2.91a.38.38 0 00-.12-.7l-15.29-3.58a.39.39 0 00-.46.46L42 53.41a.39.39 0 00.71.13L45.57 49z"></path>
+                      </svg>
+                    </a>
+                  </div>
+                  <PS className="font-medium text-white">{person.role}</PS>
+                  <PXXS className="mt-4 text-white">{person.bio}</PXXS>
+                  <PXXS className="mt-2 text-white">{person.bio2}</PXXS>
+                  <PXXS className="mt-2 text-white">{person.bio3}</PXXS>
+                </li>
+              ))}
+            </ul>
           </div>
-          <ul
-            role="list"
-            className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2"
-          >
-            {people.map((person) => (
-              <li key={person.name}>
-                <img alt="" src={person.imageUrl} className="aspect-[4/4] w-full  object-cover" />
-                <div className="flex items-center gap-x-3 mt-6">
-                  <H3 className="flex-1">{person.name}</H3>
-                  <a href={person.Url} className="text-gray-400 hover:text-gray-500" target='_blank' rel="noopener noreferrer">
-                    <span className="sr-only">Website</span>
-                    <svg fill="none" stroke='gray' strokeWidth="3" viewBox="0 0 64 64" width="25" height="25">
-                    <path d="M39.93 55.72a24.86 24.86 0 1116.93-23.57 37.24 37.24 0 01-.73 6M37.86 51.1A47 47 0 0732 56.7"></path>
-                    <path d="M32 7a34.14 34.14 0 0111.57 23 34.07 34.07 0 01.09 4.85M32 7a34.09 34.09 0 00-11.69 25.46c0 16.2 7.28 21 11.66 24.24"></path>
-                    <path d="M10.37 19.9L53.75 19.9"></path>
-                    <path d="M32 6.99L32 56.7"></path>
-                    <path d="M11.05 45.48L37.04 45.48"></path>
-                    <path d="M7.14 32.46L56.86 31.85"></path>
-                    <path d="M53.57 57L58 52.56l-8-8 4.55-2.91a.38.38 0 00-.12-.7l-15.29-3.58a.39.39 0 00-.46.46L42 53.41a.39.39 0 00.71.13L45.57 49z"></path>
-                    </svg>
-                  </a>
-                </div>
-                <PS className="font-medium">{person.role}</PS>
-                <PXXS className="mt-4">{person.bio}</PXXS>
-                <PXXS className="mt-2">{person.bio2}</PXXS>
-                <PXXS className="mt-2">{person.bio3}</PXXS>
-              </li>
-            ))}
-          </ul>
         </div>
       </div>
     )