fix: activate all broken buttons and links across the site with WhatsApp integration
This commit is contained in:
@@ -1,74 +1,82 @@
|
||||
"use client";
|
||||
'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 h-screen w-full flex items-center overflow-hidden bg-background">
|
||||
{/* Background Image & Overlay */}
|
||||
<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">
|
||||
<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-background/40 backdrop-blur-sm z-10" />
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Industrial crane"
|
||||
fill
|
||||
priority
|
||||
className="object-cover grayscale brightness-50"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
|
||||
<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-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
|
||||
<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, 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"
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-4xl"
|
||||
>
|
||||
Dalaman’ın Güçlü <br />
|
||||
Çözüm Ortağı: <span className="text-primary">Aydoğan Vinç</span>
|
||||
</motion.h1>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Bottom Gradient Texture */}
|
||||
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-background to-transparent"></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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user