fix: activate all broken buttons and links across the site with WhatsApp integration

This commit is contained in:
2026-04-12 13:38:13 +03:00
parent ec069d5c48
commit 4c54b0a9dd
6 changed files with 400 additions and 314 deletions

View File

@@ -1,66 +1,67 @@
"use client";
'use client';
import { motion } from "framer-motion";
import { ArrowRight, MessageCircle } from "lucide-react";
import { siteConfig } from "@/lib/data";
export function CTASection() {
const handleWhatsApp = () => {
const message = encodeURIComponent("Merhaba, nakliyat ve vinç hizmetleriniz için teklif almak istiyorum.");
window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
};
return (
<section className="relative py-40 px-12 overflow-hidden bg-background" id="Contact">
{/* 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/AB6AXuBfGw5gCmOA1OaPBLY-dOl2wTGviHc5c2Xn05kgak1sHagc64z3vjbl8Ov1KBLQPkoLFdv0ktOtczfX5VEdrujgg8rgBnw40Bzc7Ai836w4QATDFGTdmpO9aHk3s7nLib4yerxLzG1woNJ2SChKlZ831GmYaHOH6NJYOf-N-zjb8Tc2086UpH97RBMUqb7yXw-kdpvj7u-er1ujBxir2hi5WVWKuX_kMdJ-aM-co4c8AfQpo_sO32TcwzB93hhlq6eGc8m23YMoJfU"
alt="Construction site at night"
/>
<div className="absolute inset-0 bg-neutral-900/80 backdrop-blur-sm"></div>
</div>
<section className="py-24 md:py-40 bg-background relative overflow-hidden">
{/* Background Graphic Elements */}
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-30" />
<div className="absolute -bottom-24 -right-24 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
<div className="absolute -top-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
<div className="relative z-10 text-center max-w-4xl mx-auto px-6">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="mb-12 inline-flex items-center gap-4 bg-primary/10 px-6 py-2 border border-primary/20"
>
<span className="w-2 h-2 bg-primary animate-pulse"></span>
<span className="font-label text-[10px] uppercase tracking-widest text-primary font-black">7/24 Acil Müdahale</span>
</motion.div>
<div className="max-w-7xl mx-auto px-6 md:px-12 relative z-10">
<div className="flex flex-col lg:flex-row items-center justify-between gap-16">
<div className="max-w-3xl text-center lg:text-left">
<motion.span
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
className="font-label text-xs md:text-sm font-bold text-primary tracking-[0.5em] uppercase mb-6 block"
>
Projenizi Birlikte Yükseltelim
</motion.span>
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
className="font-headline text-5xl md:text-8xl font-black text-white uppercase leading-[0.9] tracking-tighter mb-8"
>
Güçlü Filo, <br/>
<span className="text-primary">Kesintisiz</span> Operasyon
</motion.h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="font-body text-lg md:text-2xl text-on-surface-variant leading-relaxed"
>
Her türlü ır yük ve yüksek irtifa projeleriniz için profesyonel mühendislik çözümleri sunuyoruz. Dalaman'dan tüm Türkiye'ye 7/24 hizmetinizdeyiz.
</motion.p>
</div>
<motion.h2
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="font-headline text-4xl md:text-8xl font-bold text-white mb-8 leading-[0.85] tracking-tighter text-balance"
>
Sıradaki Büyük Projeniz İçin Hazır mısınız?
</motion.h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
viewport={{ once: true }}
className="text-lg md:text-2xl text-on-surface-variant mb-16 max-w-2xl mx-auto leading-relaxed"
>
Dalaman ve çevresinde profesyonel vinç ve nakliyat çözümleri için hemen fiyat teklifi alın.
</motion.p>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.4 }}
viewport={{ once: true }}
className="flex flex-col md:flex-row gap-0 max-w-2xl mx-auto"
>
<input
className="bg-surface-container-lowest border-none font-headline font-bold uppercase tracking-widest px-10 py-6 text-base w-full focus:ring-0 focus:border-b-4 focus:border-primary outline-none transition-all placeholder:text-white/20"
placeholder="Telefon Numaranız"
type="text"
/>
<button className="bg-primary text-on-primary font-headline font-black uppercase tracking-widest px-12 py-6 text-xl hover:brightness-110 active:scale-95 transition-all rounded-none shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none whitespace-nowrap">
Sizi Arayalım
</button>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
className="flex flex-col gap-6"
>
<button
onClick={handleWhatsApp}
className="bg-primary text-on-primary font-headline font-black uppercase tracking-widest px-12 py-6 text-xl hover:brightness-110 active:scale-95 transition-all rounded-none shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none whitespace-nowrap flex items-center justify-center gap-4 group"
>
ŞİMDİ TEKLİF ALIN
<MessageCircle className="w-6 h-6 group-hover:rotate-12 transition-transform" />
</button>
<p className="text-center font-label text-[10px] uppercase tracking-widest text-on-surface-variant font-bold">
Ortalama yanıt süresi: 15 Dakika
</p>
</motion.div>
</div>
</div>
</section>
);