84 lines
4.1 KiB
TypeScript
84 lines
4.1 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from "framer-motion";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowRight, Phone, MessageCircle } from "lucide-react";
|
||
import { siteConfig } from "@/lib/data";
|
||
|
||
export function Hero() {
|
||
const handleWhatsApp = () => {
|
||
const message = encodeURIComponent("Merhaba, vinç kiralama ve nakliyat hizmetleriniz hakkında bilgi almak istiyorum.");
|
||
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
|
||
};
|
||
|
||
return (
|
||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
|
||
{/* Background with Grid and Noise */}
|
||
<div className="absolute inset-0 z-0">
|
||
<div className="absolute inset-0 bg-background/40 backdrop-blur-sm z-10" />
|
||
<Image
|
||
src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
|
||
alt="Industrial crane"
|
||
fill
|
||
priority
|
||
sizes="100vw"
|
||
className="object-cover grayscale brightness-50"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/20 z-20" />
|
||
<div className="grid-pattern absolute inset-0 opacity-20 z-30" />
|
||
</div>
|
||
|
||
<div className="relative z-40 max-w-7xl mx-auto px-6 md:px-12 w-full text-center md:text-left">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="max-w-4xl"
|
||
>
|
||
<span className="inline-block font-label text-xs md:text-sm font-bold text-primary tracking-[0.4em] uppercase mb-6 bg-primary/10 px-4 py-2 border-l-2 border-primary">
|
||
Endüstriyel Güç & Mühendislik
|
||
</span>
|
||
<h1 className="font-headline text-6xl md:text-9xl font-black text-white uppercase leading-[0.85] tracking-tighter mb-8">
|
||
AYDOĞAN <br/>
|
||
<span className="text-stroke text-transparent">NAKLİYAT</span> <br/>
|
||
<span className="text-primary">VİNÇ</span>
|
||
</h1>
|
||
<p className="font-body text-lg md:text-2xl text-on-surface-variant max-w-2xl mb-12 leading-relaxed">
|
||
Muğla Dalaman merkezli, 500 tona kadar kaldırma kapasitesi ve uzman mühendislik kadrosuyla ağır nakliyat ve vinç çözümleri.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-6">
|
||
<Link
|
||
href="/hizmetler"
|
||
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] flex items-center justify-center gap-3 group"
|
||
>
|
||
Hizmetlerimiz
|
||
<ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
|
||
</Link>
|
||
<button
|
||
onClick={handleWhatsApp}
|
||
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 flex items-center justify-center gap-3"
|
||
>
|
||
<MessageCircle className="w-6 h-6" />
|
||
Teklif Alın
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Side Status Indicators */}
|
||
<div className="absolute right-12 bottom-12 hidden xl:flex flex-col gap-8 z-40">
|
||
<div className="flex flex-col items-end">
|
||
<span className="font-headline text-5xl font-black text-white leading-none">500T</span>
|
||
<span className="font-label text-[10px] uppercase tracking-widest text-primary font-bold">Max Kapasite</span>
|
||
</div>
|
||
<div className="flex flex-col items-end">
|
||
<span className="font-headline text-5xl font-black text-white leading-none">24/7</span>
|
||
<span className="font-label text-[10px] uppercase tracking-widest text-primary font-bold">Aktif Operasyon</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|