75 lines
3.4 KiB
TypeScript
75 lines
3.4 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
|
||
export function Hero() {
|
||
return (
|
||
<section className="relative h-screen w-full flex items-center overflow-hidden bg-background">
|
||
{/* Background Image & Overlay */}
|
||
<div className="absolute inset-0 z-0">
|
||
<img
|
||
className="w-full h-full object-cover"
|
||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4"
|
||
alt="Heavy duty crane in Dalaman"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
||
</div>
|
||
|
||
<div className="relative z-10 px-6 md:px-12 max-w-6xl">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
className="mb-8 flex items-center gap-4"
|
||
>
|
||
<span className="h-[2px] w-8 md:w-12 bg-primary"></span>
|
||
<span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold">Dalaman / Muğla</span>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="font-headline text-[clamp(2.5rem,8vw,5.5rem)] font-bold leading-[0.9] tracking-tighter text-white mb-8 text-balance"
|
||
>
|
||
Dalaman’ın Güçlü <br />
|
||
Çözüm Ortağı: <span className="text-primary">Aydoğan Vinç</span>
|
||
</motion.h1>
|
||
|
||
<motion.ul
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 1, delay: 0.5 }}
|
||
className="space-y-4 mb-16"
|
||
>
|
||
{["Ağır Nakliyat", "Sepetli Platform", "Mobil Vinç Kiralama"].map((item, idx) => (
|
||
<li key={item} className="flex items-center gap-4 group">
|
||
<span className="w-2 h-2 bg-primary"></span>
|
||
<span className="font-headline text-lg md:text-2xl uppercase tracking-wider text-on-surface-variant group-hover:text-white transition-colors cursor-default">
|
||
{item}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</motion.ul>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.8 }}
|
||
className="flex flex-col sm:flex-row gap-4"
|
||
>
|
||
<button className="bg-primary text-on-primary px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:brightness-110 transition-all rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px]">
|
||
Hizmet Alın
|
||
</button>
|
||
<button className="bg-surface-container-high text-white px-10 py-5 font-headline font-black uppercase tracking-widest text-lg hover:bg-white hover:text-black transition-all rounded-none border-b-2 border-primary/50">
|
||
Filomuz
|
||
</button>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Bottom Gradient Texture */}
|
||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></div>
|
||
</section>
|
||
);
|
||
}
|