56 lines
2.8 KiB
TypeScript
56 lines
2.8 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative h-screen flex flex-col items-center justify-center overflow-hidden">
|
|
{/* Background Image */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/hero-image.jpg"
|
|
alt="Sky and Soil Properties"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
{/* Overlay */}
|
|
<div className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-[2px]"></div>
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-6 animate-fade-in drop-shadow-lg">
|
|
Sky and Soil <br className="hidden md:block" />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300">
|
|
Bangalore.
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-gray-100 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 drop-shadow-md" style={{ animationDelay: "0.2s" }}>
|
|
Premium properties in North Bengaluru. Experience the perfect blend of nature and luxury.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-slide-up opacity-0" style={{ animationDelay: "0.4s" }}>
|
|
<Link
|
|
href="#projects"
|
|
className="px-8 py-4 text-base font-medium text-primary bg-white rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:scale-95"
|
|
>
|
|
Explore Projects
|
|
</Link>
|
|
<button
|
|
className="px-8 py-4 text-base font-medium text-white border border-white/30 bg-white/10 backdrop-blur-sm rounded-full hover:bg-white/20 transition-all shadow-sm hover:shadow-md active:scale-95"
|
|
>
|
|
Book a Site Visit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce z-10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-white/80">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|