Files
aydogannakliyat/components/CTASection.tsx

69 lines
3.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
'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="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="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.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>
);
}