39 lines
1.9 KiB
TypeScript
39 lines
1.9 KiB
TypeScript
export default function Hero() {
|
|
return (
|
|
<section className="relative h-screen w-full overflow-hidden bg-midnight">
|
|
{/* Background Overlay */}
|
|
<div className="absolute inset-0 bg-black/40 z-10" />
|
|
|
|
{/* Hero Image */}
|
|
<div className="absolute inset-0 bg-[url('/hero-yacht.png')] bg-cover bg-center scale-105 animate-[zoom_20s_infinite_alternate]">
|
|
{/* Animated background for a premium feel */}
|
|
</div>
|
|
|
|
<div className="relative z-20 h-full flex flex-col items-center justify-center text-center px-4">
|
|
<span className="text-gold luxury-text text-sm mb-6 fade-in-up tracking-[0.4em]">Exclusivity Redefined</span>
|
|
<h1 className="text-white text-6xl md:text-8xl lg:text-9xl mb-8 fade-in-up font-serif" style={{ animationDelay: '0.2s' }}>
|
|
The Pinnacle of <br />
|
|
<span className="italic">Aegean Luxury</span>
|
|
</h1>
|
|
<div className="w-24 h-px bg-gold fade-in-up mb-8" style={{ animationDelay: '0.4s' }}></div>
|
|
<p className="text-sand text-lg md:text-xl luxury-text fade-in-up" style={{ animationDelay: '0.6s' }}>
|
|
Since 1980
|
|
</p>
|
|
|
|
<div className="mt-16 fade-in-up flex flex-col md:row gap-6" style={{ animationDelay: '0.8s' }}>
|
|
<button className="btn-gold">Explore the Fleet</button>
|
|
<button className="btn-hollow !text-white !border-white hover:!bg-white hover:!text-midnight">Our Destinations</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 animate-bounce cursor-pointer opacity-50 hover:opacity-100 transition-opacity">
|
|
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M19 14l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|