ok

src/components/Hero4.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 Hero4() {
+  const scrollDown = () => {
+    // Scroll to Hero5 (3rd section) - account for Hero3 + Hero4 heights
+    const hero3Height = window.innerHeight * 0.9; // Hero3 is 90vh
+    const hero4Height = document.querySelector('img[src="/images/hero_story2.jpg"]')?.offsetHeight || window.innerHeight;
+    window.scrollTo({
+      top: hero3Height + hero4Height,
+      behavior: 'smooth'
+    })
+  }
+  return (
+    <div className="relative w-full overflow-hidden  mt-0">
+      {/* Background Image - Extended to cover header */}
+      <img
+        src="/images/hero_story2.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">
+          <PS className=" text-white">
+            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">
+            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>
+          
+          {/* 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>
+  )
+}