From ddd0892ae74350742e8c207b081f39e0ff33c536 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 28 Aug 2025 16:24:11 +0200
Subject: [PATCH] ok

---
 src/app/story/page.jsx         |  2 ++
 src/components/Footer.jsx      |  2 +-
 src/components/Header.jsx      |  2 +-
 src/components/Hero3.jsx       | 10 +---------
 src/components/Hero4.jsx       |  9 +--------
 src/components/Hero5.jsx       |  2 +-
 src/components/StorySticky.jsx | 14 ++++++++------
 src/components/Team.jsx        | 18 +++++++++---------
 8 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/src/app/story/page.jsx b/src/app/story/page.jsx
index 551d101..d3a3606 100644
--- a/src/app/story/page.jsx
+++ b/src/app/story/page.jsx
@@ -4,6 +4,7 @@ import { Hero3 } from '@/components/Hero3'
 import { Hero4 } from '@/components/Hero4'
 import { Hero5 } from '@/components/Hero5'
 import StorySticky from '@/components/StorySticky'
+import Team from '@/components/Team'
 
 export default function OurStory() {
   return (
@@ -15,6 +16,7 @@ export default function OurStory() {
           <Hero4 />
           <Hero5 />
         </StorySticky>
+        <Team />
       </main>
       <Footer />
     </>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 1f93a6a..f436698 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,7 +3,7 @@ import { Logo2 } from '@/components/Logo2'
 
 export function Footer() {
   return (
-    <footer className="bg-darksand border-gray-300 border-t-[1px]">
+    <footer className="bg-bg-sand border-gray-300 border-t-[1px]">
       <Container>
         <div className="flex items-center justify-between py-6">
           <Logo2 className="h-8 w-auto" />
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 3dcc907..e6ec0d4 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -84,7 +84,7 @@ export function Header() {
   const isStoryPage = pathname === '/story'
   
   const headerClasses = clsx(
-    'bg-darksand',
+    'bg-bg-sand',
     {
       'fixed top-0 left-0 right-0 z-50': isStoryPage,
     }
diff --git a/src/components/Hero3.jsx b/src/components/Hero3.jsx
index bcfaa67..c981999 100644
--- a/src/components/Hero3.jsx
+++ b/src/components/Hero3.jsx
@@ -31,7 +31,7 @@ export function Hero3() {
 
       {/* 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 md:max-w-2xl lg:max-w-2xl w-full lg:pt-0">
           <H2 className="text-white lg:text-black">Our Story</H2>
           <P className="mt-4 text-white lg:text-neutral-800">THE TALE OF SACRED ENERGIES OF THE NILE</P>
           <PS className="mt-6 text-white lg:text-neutral-700">
@@ -40,14 +40,6 @@ export function Hero3() {
           <PS className="mt-4 text-white lg:text-neutral-700">
             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 lg:text-black animate-pulse cursor-pointer hover:opacity-75 transition duration-200"
-            />
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Hero4.jsx b/src/components/Hero4.jsx
index 8e04516..eb21b18 100644
--- a/src/components/Hero4.jsx
+++ b/src/components/Hero4.jsx
@@ -28,20 +28,13 @@ export function Hero4() {
       <div className="absolute inset-0 bg-black opacity-50 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-2xl w-full lg:pt-4">
           <PS className="text-white lg:text-neutral-700">
             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 lg:text-neutral-700">
             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 text-white lg:text-black animate-pulse cursor-pointer hover:opacity-75 transition duration-200"
-            />
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Hero5.jsx b/src/components/Hero5.jsx
index 30cedd2..acbff5c 100644
--- a/src/components/Hero5.jsx
+++ b/src/components/Hero5.jsx
@@ -19,7 +19,7 @@ export function Hero5() {
       <div className="absolute inset-0 bg-black opacity-50 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-2xl w-full lg:pt-4">
           <PS className="text-white lg:text-neutral-700">
             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>
diff --git a/src/components/StorySticky.jsx b/src/components/StorySticky.jsx
index ba9200f..3ee2ef1 100644
--- a/src/components/StorySticky.jsx
+++ b/src/components/StorySticky.jsx
@@ -50,15 +50,15 @@ export default function StorySticky({ children }) {
   }, [children]);
 
   return (
-    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-0 lg:py-12">
+    <section className="mx-auto max-w-7xl lg:px-0 px-6  py-0 lg:py-0">
       {/* Mobile: render as-is */}
       <div className="lg:hidden">{children}</div>
 
       {/* Desktop: 2-col layout with sticky media */}
-      <div className="hidden lg:grid lg:grid-cols-12 lg:gap-8" ref={containerRef}>
+      <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-28 h-[75vh] rounded-2xl overflow-hidden shadow-lg">
+          <div className="sticky top-24 h-[65vh] 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-[50vh] bg-bg-sand" />
                   )}
                   <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/25 via-transparent to-transparent" />
                 </div>
@@ -90,8 +90,10 @@ export default function StorySticky({ children }) {
         </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}
+        <div className="lg:col-span-6 flex flex-col justify-center items-center min-h-screen">
+          <div className="h-[50vh] overflow-y-auto px-4 py-6 lg:py-0 space-y-6 max-w-2xl">
+            {children}
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/components/Team.jsx b/src/components/Team.jsx
index b4608bf..4e2e6e1 100644
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -29,14 +29,14 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="relative py-12 lg:py-24" style={{backgroundImage: 'url(/images/4.jpg)', backgroundSize: 'cover', backgroundPosition: 'center'}}>
+      <div className="relative py-12 lg:py-24">
         {/* Dark overlay for better text readability */}
-        <div className="absolute inset-0 bg-black opacity-50"></div>
+        <div className="absolute inset-0"></div>
         <div className="relative z-10">
           <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">
             <div className="mx-auto max-w-2xl lg:mx-0">
-              <H2 className="text-white">Our People</H2>
-              <PS className="mt-4 text-white">
+              <H2 className=" ">Our People</H2>
+              <PS className="mt-4  ">
               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>
@@ -48,13 +48,13 @@ const people = [
                 <li key={person.name}>
                   <img alt="" src={person.imageUrl} className="aspect-[4/3] w-5/6 object-cover" />
                   <div className="flex items-center gap-x-4 mt-6">
-                    <H3 className="flex-1 text-white">{person.name}</H3>
+                    <H3 className="flex-1  ">{person.name}</H3>
                   </div>
                   <div className="w-5/6">
-                    <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>
+                    <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>
                   </div>
                 </li>
               ))}