84 lines
3.4 KiB
TypeScript
84 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { Meteors } from "@/components/ui/Meteors";
|
||
|
||
export default function Hero() {
|
||
return (
|
||
<section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||
{/* Background Image / Video overlay */}
|
||
<div className="absolute inset-0 z-0">
|
||
<div className="absolute inset-0 bg-primary/60 mix-blend-multiply z-10" />
|
||
<div className="absolute inset-0 bg-gradient-to-b from-primary/30 via-transparent to-primary z-10" />
|
||
<img
|
||
src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=80&w=2070&auto=format&fit=crop"
|
||
alt="Luna Cocktail Rooftop Vibe"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
<div className="absolute inset-0 z-20 overflow-hidden">
|
||
<Meteors number={15} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative z-20 text-center px-4 flex flex-col items-center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="mb-6"
|
||
>
|
||
<div className="inline-flex items-center rounded-full border border-accent1/25 bg-accent1/10 px-5 py-2 backdrop-blur-sm overflow-hidden relative">
|
||
<span className="text-accent1 uppercase tracking-[0.25em] text-xs font-semibold relative z-10">
|
||
Muğla'nın En Özel Terası
|
||
</span>
|
||
<span className="pointer-events-none absolute inset-0 animate-shimmer-slide bg-gradient-to-r from-transparent via-white/15 to-transparent" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="font-serif text-5xl md:text-7xl lg:text-8xl text-text-main mb-6 leading-tight max-w-4xl"
|
||
>
|
||
From Sunset <br />
|
||
<span className="text-accent1 italic">to Night</span>
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="text-text-main/80 text-lg md:text-xl font-light mb-10 max-w-xl mx-auto"
|
||
>
|
||
Güneş ufukta kaybolurken müzik yükseliyor, kokteyller doluyor ve gece yeni başlıyor.
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.8 }}
|
||
>
|
||
<a
|
||
href="#contact"
|
||
className="inline-block bg-transparent border border-accent1 text-accent1 hover:bg-accent1 hover:text-primary transition-colors duration-300 px-10 py-4 uppercase tracking-[0.2em] text-sm font-bold"
|
||
>
|
||
Rezervasyon Yap / Book Now
|
||
</a>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Scroll Indicator */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 1.5, duration: 1 }}
|
||
className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2"
|
||
>
|
||
<span className="text-[10px] uppercase tracking-widest text-text-main/50">Scroll</span>
|
||
<div className="w-[1px] h-12 bg-gradient-to-b from-text-main/50 to-transparent" />
|
||
</motion.div>
|
||
</section>
|
||
);
|
||
}
|