ok

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>
+  )
+}