ok

src/app/experiences/page.jsx

@@ -14,6 +14,7 @@ import FFVid from '@/components/FreeflowVideo'
 import { Experiences } from '@/components/Experiences'
 import Carousel from '@/components/Carousel'
 import { Testimonials } from '@/components/Testimonials'
+import { HeroJourney } from '@/components/HeroJourney'
 
 export default function ExperiencesPage() {
   const [selectedExperience, setSelectedExperience] = useState('retreats')
@@ -37,6 +38,7 @@ export default function ExperiencesPage() {
     <>
       <Header />
       <main>
+        <HeroJourney />
         <Experiences onExperienceSelect={setSelectedExperience} />
         {renderSelectedComponent()}
         <Carousel />

src/components/Experiences.jsx

@@ -5,7 +5,6 @@ export function Experiences({ onExperienceSelect }) {
   return (           
     <div className="bg-transparent">    
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 mt-16">
-         <H2 className="mb-8">Discover a path to wellbeing that is uniquely yours.</H2>
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
           {/* Photo 1 - Left large image */}
           <div className="flex lg:col-span-2 lg:row-span-2">

src/components/Header.jsx

@@ -83,11 +83,12 @@ export function Header() {
   const pathname = usePathname()
   const isHomepage = pathname === '/'
   const isStoryPage = pathname === '/story'
+  const isExperiencesPage = pathname === '/experiences'
   
   const headerClasses = clsx(
     {
-      'bg-transparent': isHomepage,
-      'bg-[#1e0f01]': !isHomepage && !isStoryPage,
+      'bg-transparent': isHomepage || isExperiencesPage,
+      'bg-[#1e0f01]': !isHomepage && !isStoryPage && !isExperiencesPage,
       'bg-transparent backdrop-blur-sm': isStoryPage,
       'fixed top-0 left-0 right-0 z-50': isStoryPage,
     }

src/components/HeroJourney.jsx

@@ -0,0 +1,44 @@
+'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 HeroJourney() {
+  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-40">
+      {/* Background Image - Extended to cover header */}
+      <img
+        src="/images/journeyhero.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 flex items-center justify-center text-center px-4 sm:px-6 z-20">
+              <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
+                <H2 className="text-white">
+                  Discover a path to wellbeing that is uniquely yours...
+                </H2>
+                {/* Chevron Down Button */}
+                <div className="mt-10 flex justify-center">
+                  <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>
+  )
+}