ok

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