64 lines
3.4 KiB
JavaScript
64 lines
3.4 KiB
JavaScript
'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 Hero2() {
|
|
const scrollDown = () => {
|
|
window.scrollTo({
|
|
top: window.innerHeight,
|
|
behavior: 'smooth'
|
|
})
|
|
}
|
|
return (
|
|
<div className="relative w-full overflow-hidden h-[80vh] sm:h-[85vh] lg:min-h-screen lg:mt-0 lg:py-0 py-16 lg:px-0 px-6">
|
|
{/* Background Video - Full coverage */}
|
|
<video
|
|
className="absolute inset-0 w-full h-full object-cover z-0"
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
>
|
|
<source src="/videos/main.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
{/* Black Overlay */}
|
|
<div className="absolute inset-0 bg-black opacity-40 z-10"></div>
|
|
|
|
{/* Content */}
|
|
<div className="absolute inset-0 flex items-center justify-center text-center px-6 sm:px-8 md:px-12 lg:px-6 z-20">
|
|
<div className="max-w-sm sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
|
|
<H1 className="text-creme-200 text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl leading-none">
|
|
Nile Cruises,{' '}
|
|
<span className="relative whitespace-nowrap text-gold-500 -mt-1 inline-block">
|
|
<svg
|
|
aria-hidden="true"
|
|
viewBox="0 0 418 42"
|
|
className="absolute top-2/3 left-0 h-[0.45em] sm:h-[0.5em] md:h-[0.55em] lg:h-[0.58em] w-full fill-gold-500/80"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
|
|
</svg>
|
|
<span className="relative">Reimagined</span>
|
|
</span>
|
|
</H1>
|
|
<P className="mt-6 lg:mt-8 leading-relaxed font-medium text-white text-sm sm:text-base md:text-lg px-1 sm:px-2 md:px-0 max-w-xs sm:max-w-sm md:max-w-2xl mx-auto">
|
|
VEDA welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
|
|
Our organic cuisine, cultural activities and dedicated warm hearted crew will make your VEDA cruise an unforgettable experience.
|
|
</P>
|
|
|
|
{/* Chevron Down Button */}
|
|
<div className="mt-6 sm:mt-8 md: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>
|
|
)
|
|
}
|