pok

src/components/Hero.jsx

@@ -1,56 +1,26 @@
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
-import { Logo } from '@/components/Logo'
+import Image from 'next/image'
 
 export function Hero() {
   return (
-    <section className="relative w-full lg:h-screen bg-transparent h-[550px] lg:mt-0 mt-0">
-      {/* Background Video */}
-      <div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-[#FEFFF6] opacity-25">
-        <iframe
-          src="https://player.vimeo.com/video/1112045863?autoplay=1&loop=1&muted=1&controls=0&background=1&quality=auto&responsive=1"
-          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-0"
-          allow="autoplay; fullscreen; picture-in-picture"
-          style={{
-            width: '300%',
-            height: '300%',
-            minWidth: '100vw',
-            minHeight: '100vh',
-            objectFit: 'cover',
-            pointerEvents: 'none',
-            border: 'none'
-          }}
-          title="VEDA Background Video"
-        ></iframe>
-      </div>
-
-      {/* Welcome Content Overlay */}
-      <div className="bg-transparent py-6 mt-0 absolute top-16 sm:top-32 left-0 right-0 z-10">
-        <div className="mx-auto max-w-7xl px-6 sm:px-6 lg:px-6">
-          <div className="flex items-start justify-start mb-4">
-            <Logo className="h-8 sm:h-12 w-auto" />
-          </div>
-          <div className="mx-auto max-w-5xl lg:mx-0 mt-4 sm:mt-6">
-            <h2 className="text-xl/5 font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
-              Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
-            </h2>
-            <h2 className="mt-2 text-lg sm:text-2xl font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
-              Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
-              </h2>
-          </div>
-           <div className="mx-auto max-w-3xl lg:mx-0">
-            <p className="mt-4 sm:mt-6 text-2xl font-semibold tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-700 lg:text-4xl">
-              Nile Cruises, Reimagined. 
-            </p>
-            <Button href="/story" color="blue" className="mt-6 lg:mt-8">
-              <span className="font-semibold tracking-wide">
-                Read Our Story
-              </span>
-            </Button>
-            </div>
+    <div className="mx-auto max-w-7xl px-6 lg:px-8 -z-10 -mt-10">
+      {/* Background Image with opacity to show sand background */}
+      <div className="relative overflow-hidden pt-16">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <img
+            alt="App screenshot"
+            src="/images/hero.jpg"
+            width={2432}
+            height={1442}
+          />
+          <div aria-hidden="true" className="relative">
+            <div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
           </div>
         </div>
-    </section>
+      </div> 
+    </div>
   )
 }
+1