121 lines
6.1 KiB
TypeScript
121 lines
6.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative h-screen flex flex-col items-center justify-center overflow-hidden">
|
|
{/* Video Background */}
|
|
<div className="absolute inset-0 z-0">
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
poster="/assets/images/aerial-view.mov" // Fallback image
|
|
aria-label="Aerial view of Bangalore showcasing premium real estate locations"
|
|
>
|
|
<source src="/assets/images/aerial-view.mov" type="video/mp4" />
|
|
{/* Note: This is a placeholder video. Replace with your Bangalore drone shot. */}
|
|
</video>
|
|
|
|
|
|
</div>
|
|
|
|
{/* Location Pins (Decorative) */}
|
|
<div className="absolute inset-0 z-10 pointer-events-none hidden md:block">
|
|
{/* Pin 1: Hebbal */}
|
|
<motion.div
|
|
className="absolute top-[30%] left-[20%]"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
>
|
|
<div className="flex flex-col items-center animate-bounce" style={{ animationDuration: '3s' }}>
|
|
<div className="bg-white/90 backdrop-blur-md px-3 py-1 rounded-lg shadow-lg mb-2">
|
|
<span className="text-xs font-bold text-black">Hebbal</span>
|
|
</div>
|
|
<div className="w-4 h-4 bg-primary rounded-full border-2 border-white shadow-lg relative">
|
|
<div className="absolute inset-0 bg-primary rounded-full animate-ping opacity-75"></div>
|
|
</div>
|
|
<div className="h-16 w-0.5 bg-gradient-to-b from-white/50 to-transparent"></div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Pin 2: Airport */}
|
|
<motion.div
|
|
className="absolute top-[20%] right-[25%]"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.5 }}
|
|
>
|
|
<div className="flex flex-col items-center animate-bounce" style={{ animationDuration: '4s', animationDelay: '1s' }}>
|
|
<div className="bg-white/90 backdrop-blur-md px-3 py-1 rounded-lg shadow-lg mb-2">
|
|
<span className="text-xs font-bold text-black">Airport</span>
|
|
</div>
|
|
<div className="w-4 h-4 bg-primary rounded-full border-2 border-white shadow-lg relative">
|
|
<div className="absolute inset-0 bg-primary rounded-full animate-ping opacity-75"></div>
|
|
</div>
|
|
<div className="h-24 w-0.5 bg-gradient-to-b from-white/50 to-transparent"></div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Pin 3: Whitefield */}
|
|
<motion.div
|
|
className="absolute bottom-[30%] right-[15%]"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.8 }}
|
|
>
|
|
<div className="flex flex-col items-center animate-bounce" style={{ animationDuration: '3.5s', animationDelay: '0.5s' }}>
|
|
<div className="bg-white/90 backdrop-blur-md px-3 py-1 rounded-lg shadow-lg mb-2">
|
|
<span className="text-xs font-bold text-black">Whitefield</span>
|
|
</div>
|
|
<div className="w-4 h-4 bg-primary rounded-full border-2 border-white shadow-lg relative">
|
|
<div className="absolute inset-0 bg-primary rounded-full animate-ping opacity-75"></div>
|
|
</div>
|
|
<div className="h-12 w-0.5 bg-gradient-to-b from-white/50 to-transparent"></div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="relative z-20 max-w-5xl mx-auto px-6 text-center"
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1, delay: 0.3 }}
|
|
>
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-6 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> */}
|
|
|
|
|
|
</motion.div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<motion.div
|
|
className="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 0.8, y: [0, 10, 0] }}
|
|
transition={{
|
|
opacity: { duration: 1, delay: 1.5 },
|
|
y: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
|
|
}}
|
|
>
|
|
<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>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|