ok

src/app/experiences/page.jsx

@@ -38,7 +38,6 @@ export default function ExperiencesPage() {
     <>
       <Header />
       <main>
-        <HeroJourney />
         <Experiences onExperienceSelect={setSelectedExperience} />
         {renderSelectedComponent()}
         <Carousel />

src/components/Boat.jsx

@@ -100,7 +100,7 @@ function TestimonialCard({
     <motion.div
       ref={ref}
       {...props}
-      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent overflow-hidden sm:w-80 lg:w-96"
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent overflow-hidden lg:w-96"
       style={{ aspectRatio: '360/460' }}
     >
       {/* Image Section */}
@@ -162,7 +162,7 @@ export function Boat() {
   }
 
   return (
-    <div className="pt-24 pb-12 bg-transparent">
+    <div className="pt-16 pb-6 bg-transparent">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
           {/* Text Content - Left Side */}
@@ -186,7 +186,7 @@ export function Boat() {
             <div
               ref={scrollRef}
               className={clsx([
-                'flex gap-8 pl-6 pr-6 lg:pl-0 lg:pr-8',
+                'flex gap-8 pl-6 pr-6 lg:pl-0 lg:pr-2',
                 '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                 'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
                 'pb-8',

src/components/Footer.jsx

@@ -3,7 +3,7 @@ import { Logo2 } from '@/components/Logo2'
 
 export function Footer() {
   return (
-    <footer className="bg-transparent border-gray-300 border-t-[1px]">
+    <footer className="bg-darksand border-gray-300 border-t-[1px]">
       <Container>
         <div className="flex items-center justify-between py-6">
           <Logo2 className="h-8 w-auto" />

src/components/Header.jsx

@@ -84,7 +84,7 @@ export function Header() {
   const isStoryPage = pathname === '/story'
   
   const headerClasses = clsx(
-    'bg-bg-sand',
+    'bg-darksand',
     {
       'fixed top-0 left-0 right-0 z-50': isStoryPage,
     }

src/components/Hero3.jsx

@@ -28,11 +28,11 @@ export function Hero3() {
       />
       
       {/* Black Overlay (mobile only) */}
-      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>
+      <div className="absolute inset-0  lg:hidden"></div>
       
       {/* Content */}
       <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-start justify-start text-start px-4 lg:px-0 z-20">
-        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-10">
+        <div className="max-w-xs sm:max-w-md  lg:max-w-lg w-full lg:pt-12">
           <H2 className=" ">Our Story</H2>
           <P className="mt-4  ">THE TALE OF SACRED ENERGIES OF THE NILE</P>
           <PS className="mt-6  ">
@@ -41,14 +41,6 @@ export function Hero3() {
           <PS className="mt-4  ">
             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   animate-pulse cursor-pointer hover:opacity-75 transition duration-200"
-            />
-          </div>
         </div>
       </div>
     </div>

src/components/Hero4.jsx

@@ -26,23 +26,16 @@ export function Hero4() {
         className="w-full h-auto object-cover block relative z-0 lg:hidden"
       />
 
-      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>
+      <div className="absolute inset-0  lg:hidden"></div>
 
       <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-start justify-start text-start px-4 lg:px-0 z-20">
-        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-10">
+        <div className="max-w-xs sm:max-w-md lg:max-w-lg w-full lg:pt-4">
           <PS className=" ">
             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  ">
+          <PS className="mt-4">
             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>
-
-          <div className="mt-8 flex justify-start">
-            <ChevronDownIcon
-              onClick={scrollDown}
-              className="h-12 w-12   animate-pulse cursor-pointer hover:opacity-75 transition duration-200"
-            />
-          </div>
         </div>
       </div>
     </div>

src/components/Hero5.jsx

@@ -19,14 +19,14 @@ export function Hero5() {
         className="w-full h-auto object-cover block relative z-0 lg:hidden"
       />
 
-      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>
+      <div className="absolute inset-0  lg:hidden"></div>
 
       <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-start justify-start text-start px-4 lg:px-0 z-20">
-        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-10">
+        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-lg w-full lg:pt-4">
           <PS className=" ">
             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  ">
+          <PS className="mt-4 ">
             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>

src/components/StorySticky.jsx

@@ -50,15 +50,15 @@ export default function StorySticky({ children }) {
   }, [children]);
 
   return (
-    <section className="mx-auto max-w-7xl px-4 lg:px-0 py-0 lg:py-12">
+    <section className="lg:pt-12">
       {/* Mobile: render as-is */}
-      <div className="lg:hidden">{children}</div>
+      <div className="lg:hidden px-4">{children}</div>
 
-      {/* Desktop: 2-col layout with sticky media */}
-      <div className="hidden lg:grid lg:grid-cols-12 lg:gap-12" ref={containerRef}>
-        {/* Sticky left media */}
-        <div className="relative lg:col-span-6">
-          <div className="sticky top-0 h-screen overflow-hidden">
+      {/* Desktop: Full-width layout with sticky media */}
+      <div className="hidden lg:flex" ref={containerRef}>
+        {/* Sticky left media - extends to left edge */}
+        <div className="w-1/2 relative">
+          <div className="sticky top-0 h-auto overflow-hidden">
             <div className="absolute inset-0">
               {sections.map((s, i) => (
                 <div
@@ -80,7 +80,7 @@ export default function StorySticky({ children }) {
                       className="object-cover"
                     />
                   ) : (
-                    <div className="w-full h-full bg-neutral-200" />
+                    <div className="w-full h-full bg-bg-sand" />
                   )}
                   <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/25 via-transparent to-transparent" />
                 </div>
@@ -89,9 +89,11 @@ export default function StorySticky({ children }) {
           </div>
         </div>
 
-        {/* Right column = the original heroes (but with their own media hidden via lg:hidden) */}
-        <div className="lg:col-span-6 flex flex-col gap-24">
-          {children}
+        {/* Right column = the original heroes with proper container */}
+        <div className="w-1/2 flex flex-col gap-4">
+          <div className="mx-auto max-w-7xl px-2">
+            {children}
+          </div>
         </div>
       </div>
     </section>