50 lines
2.2 KiB
JavaScript
50 lines
2.2 KiB
JavaScript
import Image from 'next/image'
|
|
|
|
import { Button } from '@/components/Button'
|
|
import { Container } from '@/components/Container'
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative w-full lg:h-screen h-[550px] lg:mt-0 mt-0">
|
|
{/* Background Video */}
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="absolute top-0 left-0 w-full lg:h-full h-[550px] object-cover z-0 bg-[#FEFFF6] opacity-25"
|
|
>
|
|
<source src="/videos/hero4.MP4" type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
{/* 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">
|
|
<Image src="/images/logos/veda_logo_dark.svg" alt="VEDA" width={200} height={60} className="h-8 sm:h-12 w-auto" unoptimized />
|
|
</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>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|