From 4c54b0a9dde5b1b133cdc0450f93f9bb4ee0f74e Mon Sep 17 00:00:00 2001
From: ayrisdev <ayris.dev@gmail.com>
Date: Sun, 12 Apr 2026 13:38:13 +0300
Subject: [PATCH] fix: activate all broken buttons and links across the site
 with WhatsApp integration

---
 app/hizmetler/page.tsx         |  23 +++--
 components/CTASection.tsx      | 113 +++++++++++-----------
 components/Footer.tsx          | 165 +++++++++++++++++++++------------
 components/Hero.tsx            | 118 ++++++++++++-----------
 components/Navbar.tsx          | 159 ++++++++++++++++++-------------
 components/ServicesPreview.tsx | 136 +++++++++++++--------------
 6 files changed, 400 insertions(+), 314 deletions(-)

diff --git a/app/hizmetler/page.tsx b/app/hizmetler/page.tsx
index 4e7286e..f9a35f9 100644
--- a/app/hizmetler/page.tsx
+++ b/app/hizmetler/page.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Navbar } from "@/components/Navbar";
 import { Footer } from "@/components/Footer";
 import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
@@ -5,14 +7,7 @@ import { CTASection } from "@/components/CTASection";
 import { Settings, ArrowUp, Truck, Compass, ArrowRight, Shield, Zap, Clock } from "lucide-react";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
-import { Metadata } from "next";
-import { SERVICES } from "@/lib/data";
-
-export const metadata: Metadata = {
-  title: "Muğla Vinç Kiralama ve Ağır Nakliyat Hizmetleri",
-  description: "Dalaman merkezli 500 tona kadar mobil vinç kiralama, sepetli platform, ağır nakliyat ve proje taşımacılığı. Ege Bölgesi ve Türkiye geneli profesyonel çözümler.",
-  keywords: ["muğla vinç kiralama", "dalaman vinç kiralama", "sepetli platform", "ağır nakliyat muğla", "proje taşımacılığı", "fethiye vinç", "ortaca vinç"],
-};
+import { SERVICES, siteConfig } from "@/lib/data";
 
 const FEATURES = [
   {
@@ -43,6 +38,11 @@ const STATS = [
 ];
 
 export default function ServicesPage() {
+  const handleWhatsApp = (serviceTitle: string) => {
+    const message = encodeURIComponent(`Merhaba, ${serviceTitle} hizmetiniz hakkında bilgi ve teklif almak istiyorum.`);
+    window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
+  };
+
   return (
     <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
       <Navbar />
@@ -95,9 +95,12 @@ export default function ServicesPage() {
                   </p>
                 </div>
                 <div className="mt-12">
-                  <button className="flex items-center gap-4 bg-primary text-on-primary px-8 py-4 font-headline font-bold uppercase hover:brightness-110 transition-all">
+                  <button 
+                    onClick={() => handleWhatsApp(service.title)}
+                    className="flex items-center gap-4 bg-primary text-on-primary px-8 py-4 font-headline font-bold uppercase hover:brightness-110 transition-all group"
+                  >
                     Teklif Al
-                    <ArrowRight className="w-5 h-5" />
+                    <ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
                   </button>
                 </div>
               </div>
diff --git a/components/CTASection.tsx b/components/CTASection.tsx
index dd69dbb..884ef29 100644
--- a/components/CTASection.tsx
+++ b/components/CTASection.tsx
@@ -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ü ağı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>
   );
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 1e5efc2..b31f3c1 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,66 +1,117 @@
+'use client';
+
 import Link from "next/link";
+import { Facebook, Instagram, Twitter, MapPin, Phone, Mail, ArrowUpRight } from "lucide-react";
+import { siteConfig } from "@/lib/data";
+
+const QUICK_LINKS = [
+  { name: "Hizmetlerimiz", href: "/hizmetler" },
+  { name: "Makine Parkuru", href: "/filomuz" },
+  { name: "Kurumsal", href: "/hakkimizda" },
+  { name: "İletişim", href: "/iletisim" },
+];
+
+const SERVICES = [
+  { name: "Mobil Vinç Kiralama", href: "/hizmetler" },
+  { name: "Sepetli Platform", href: "/hizmetler" },
+  { name: "Ağır Nakliyat", href: "/hizmetler" },
+  { name: "Proje Taşımacılığı", href: "/hizmetler" },
+];
 
 export function Footer() {
   return (
-    <footer className="w-full py-24 px-6 md:px-12 grid grid-cols-1 md:grid-cols-4 gap-12 bg-surface-container-lowest relative overflow-hidden">
-      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
-      
-      <div className="col-span-1 md:col-span-1">
-        <div className="text-2xl font-black text-white mb-8 tracking-tighter">
-            AYDOĞAN <span className="text-primary">VINÇ</span>
+    <footer className="bg-surface-container-lowest pt-24 pb-12 border-t border-outline-variant/10">
+      <div className="max-w-7xl mx-auto px-6 md:px-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-20">
+          {/* Brand Column */}
+          <div className="flex flex-col gap-8">
+            <Link href="/" className="flex flex-col items-start group">
+              <span className="font-headline text-3xl font-black text-white tracking-tighter leading-none group-hover:text-primary transition-colors">
+                AYDOĞAN
+              </span>
+              <span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase -mt-1 group-hover:text-white transition-colors">
+                Nakliyat & Vinç
+              </span>
+            </Link>
+            <p className="text-on-surface-variant text-sm leading-relaxed">
+              20 yılı aşkın tecrübemizle, Dalaman ve tüm Türkiye genelinde ağır lojistik ve kaldırma çözümleri sunuyoruz.
+            </p>
+            <div className="flex gap-4">
+              <a href={siteConfig.social.facebook} target="_blank" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
+                <Facebook size={18} />
+              </a>
+              <a href={siteConfig.social.instagram} target="_blank" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
+                <Instagram size={18} />
+              </a>
+              <a href="#" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
+                <Twitter size={18} />
+              </a>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">Hızlı Erişim</h4>
+            <ul className="flex flex-col gap-4">
+              {QUICK_LINKS.map((link) => (
+                <li key={link.name}>
+                  <Link href={link.href} className="text-on-surface-variant hover:text-primary transition-colors text-sm flex items-center gap-2 group">
+                    <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Services */}
+          <div>
+            <h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">Hizmetlerimiz</h4>
+            <ul className="flex flex-col gap-4">
+              {SERVICES.map((link) => (
+                <li key={link.name}>
+                  <Link href={link.href} className="text-on-surface-variant hover:text-primary transition-colors text-sm">
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Contact Details */}
+          <div>
+            <h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">İletişim</h4>
+            <div className="flex flex-col gap-6">
+              <div className="flex items-start gap-4">
+                <MapPin size={18} className="text-primary shrink-0" />
+                <p className="text-on-surface-variant text-sm leading-snug">
+                  {siteConfig.contact.address}
+                </p>
+              </div>
+              <div className="flex items-center gap-4">
+                <Phone size={18} className="text-primary shrink-0" />
+                <a href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`} className="text-on-surface-variant hover:text-primary transition-colors text-sm font-bold">
+                  {siteConfig.contact.phone}
+                </a>
+              </div>
+              <div className="flex items-center gap-4">
+                <Mail size={18} className="text-primary shrink-0" />
+                <a href={`mailto:${siteConfig.contact.email}`} className="text-on-surface-variant hover:text-primary transition-colors text-sm">
+                  {siteConfig.contact.email}
+                </a>
+              </div>
+            </div>
+          </div>
         </div>
-        <p className="text-on-surface-variant font-label text-[10px] md:text-xs leading-loose uppercase tracking-widest max-w-xs">
-          Ağır sanayi ve inşaat sektöründe güvenin simgesi. Modern ekipmanlarımız ve uzman kadromuzla Dalaman'ın en güçlü ortağıyız.
-        </p>
-      </div>
-      
-      <div className="md:pl-12">
-        <h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Merkez Ofis</h4>
-        <ul className="space-y-4">
-          <li><span className="text-white font-label text-[10px] uppercase tracking-widest leading-relaxed">Merkez Mah. Sanayi Sitesi No: 42 Dalaman / Muğla</span></li>
-          <li><span className="text-white font-label text-[10px] uppercase tracking-widest">T: +90 252 692 XX XX</span></li>
-        </ul>
-      </div>
 
-      <div className="md:pl-12">
-        <h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hizmetler</h4>
-        <ul className="space-y-4">
-          {[
-            { name: "Mobil Vinç Kiralama", href: "/hizmetler" },
-            { name: "Sepetli Platform", href: "/hizmetler" },
-            { name: "Lojistik Çözümleri", href: "/hizmetler" }
-          ].map(item => (
-             <li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
-          ))}
-        </ul>
-      </div>
-
-      <div className="md:pl-12">
-        <h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hızlı Menü</h4>
-        <ul className="space-y-4">
-          {[
-            { name: "Hakkımızda", href: "/hakkimizda" },
-            { name: "Makine Parkuru", href: "/filomuz" },
-            { name: "İletişim", href: "/iletisim" },
-            { name: "KVKK", href: "#" }
-          ].map(item => (
-             <li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
-          ))}
-        </ul>
-      </div>
-
-      <div className="col-span-full mt-12 pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8">
-        <span className="text-on-surface-variant/40 font-label text-[10px] uppercase tracking-[0.2em]">© 2024 Aydoğan Nakliyat Vinç. Tüm Hakları Saklıdır.</span>
-        <div className="flex gap-8">
-          <a href="#" className="text-white/40 hover:text-primary transition-colors">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
-          </a>
-          <a href="#" className="text-white/40 hover:text-primary transition-colors">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
-          </a>
-          <a href="#" className="text-white/40 hover:text-primary transition-colors">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
-          </a>
+        <div className="pt-12 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-8">
+          <p className="text-on-surface-variant text-[10px] uppercase tracking-widest font-bold">
+            © {new Date().getFullYear()} {siteConfig.name}. Tüm hakları saklıdır.
+          </p>
+          <div className="flex gap-8">
+            <a href="#" className="text-on-surface-variant hover:text-white text-[10px] uppercase tracking-widest font-bold transition-colors">KVKK Aydınlatma Metni</a>
+            <a href="#" className="text-on-surface-variant hover:text-white text-[10px] uppercase tracking-widest font-bold transition-colors">Gizlilik Politikası</a>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 7bb1934..b37c4f5 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -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>
   );
 }
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 6600c8e..b0a4807 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,12 +1,14 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
-import { Menu, X } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
+import { usePathname } from "next/navigation";
+import { Menu, X, Phone, MessageCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { siteConfig } from "@/lib/data";
 
 const NAV_LINKS = [
+  { name: "Anasayfa", href: "/" },
   { name: "Hizmetler", href: "/hizmetler" },
   { name: "Filomuz", href: "/filomuz" },
   { name: "Hakkımızda", href: "/hakkimizda" },
@@ -16,36 +18,48 @@ const NAV_LINKS = [
 export function Navbar() {
   const [isScrolled, setIsScrolled] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
 
   useEffect(() => {
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 20);
+      setIsScrolled(window.scrollY > 50);
     };
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  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 (
-    <nav
+    <nav 
       className={cn(
-        "fixed top-0 left-0 w-full z-[100] flex justify-between items-center px-6 md:px-12 py-6 transition-all duration-300",
-        isScrolled
-          ? "bg-surface-container-lowest/80 backdrop-blur-xl border-b border-outline-variant/15"
-          : "bg-transparent"
+        "fixed top-0 left-0 w-full z-[100] transition-all duration-500 px-6 md:px-12 py-6 flex justify-between items-center",
+        isScrolled ? "bg-background/95 backdrop-blur-md py-4 border-b border-white/5 shadow-2xl" : "bg-transparent"
       )}
     >
-      {/* Logo */}
-      <Link href="/" className="text-xl md:text-2xl font-black tracking-tighter text-primary">
-        AYDOĞAN <span className="text-white">NAKLİYAT</span>
+      {/* Logo Area */}
+      <Link href="/" className="flex flex-col items-start group">
+        <span className="font-headline text-2xl md:text-3xl font-black text-white tracking-tighter leading-none group-hover:text-primary transition-colors">
+          AYDOĞAN
+        </span>
+        <span className="font-label text-[10px] md:text-xs text-primary font-bold tracking-[0.3em] uppercase -mt-1 group-hover:text-white transition-colors">
+          Nakliyat & Vinç
+        </span>
       </Link>
 
-      {/* Desktop Links */}
-      <div className="hidden md:flex items-center gap-12">
+      {/* Desktop Navigation */}
+      <div className="hidden lg:flex items-center gap-12">
         {NAV_LINKS.map((link) => (
-          <Link
+          <Link 
             key={link.name}
             href={link.href}
-            className="font-headline uppercase tracking-widest text-xs font-bold text-white/60 hover:text-primary transition-all duration-300"
+            className={cn(
+              "font-headline text-xs font-bold uppercase tracking-[0.2em] transition-all hover:text-primary relative py-2",
+              pathname === link.href ? "text-primary after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-primary" : "text-white/70"
+            )}
           >
             {link.name}
           </Link>
@@ -53,64 +67,81 @@ export function Navbar() {
       </div>
 
       {/* CTA Button */}
-      <div className="hidden md:flex items-center gap-4">
-        <button className="bg-primary-container text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all rounded-none ring-offset-2 focus:ring-2 focus:ring-primary">
-          Teklif Alın
+      <div className="hidden lg:flex items-center gap-6">
+        <button 
+          onClick={handleWhatsApp}
+          className="bg-primary text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all flex items-center gap-2"
+        >
+          <MessageCircle className="w-4 h-4" />
+          Hızlı Teklif
         </button>
       </div>
 
       {/* Mobile Menu Toggle */}
       <button
-        className="md:hidden text-white focus:outline-none p-2"
+        className="lg:hidden text-white p-2 hover:bg-white/5 transition-colors"
         onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-        aria-label="Menu toggle"
       >
-        {mobileMenuOpen ? <X size={32} /> : <Menu size={32} />}
+        {mobileMenuOpen ? <X /> : <Menu />}
       </button>
 
       {/* Mobile Menu Overlay */}
-      <AnimatePresence>
-        {mobileMenuOpen && (
-          <>
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className="fixed inset-0 bg-black/60 backdrop-blur-md md:hidden z-[-1]"
-              onClick={() => setMobileMenuOpen(false)}
-            />
-            <motion.div
-              initial={{ x: "100%" }}
-              animate={{ x: 0 }}
-              exit={{ x: "100%" }}
-              transition={{ type: "spring", damping: 25, stiffness: 200 }}
-              className="fixed top-0 right-0 h-screen w-[85%] bg-surface-container-highest flex flex-col p-12 md:hidden shadow-2xl z-[101]"
-            >
-              <div className="flex justify-between items-center mb-16">
-                <span className="font-headline font-black text-xl text-primary">MENÜ</span>
-                <button onClick={() => setMobileMenuOpen(false)}>
-                  <X size={32} className="text-white" />
-                </button>
-              </div>
-              <div className="flex flex-col gap-10">
-                {NAV_LINKS.map((link) => (
-                  <Link
-                    key={link.name}
-                    href={link.href}
-                    className="font-headline text-3xl font-bold text-white uppercase tracking-tighter hover:text-primary transition-colors"
-                    onClick={() => setMobileMenuOpen(false)}
-                  >
-                    {link.name}
-                  </Link>
-                ))}
-                <button className="mt-10 bg-primary-container text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl rounded-none shadow-[8px_8px_0px_0px_rgba(0,0,0,0.5)] active:shadow-none transition-all">
-                  Hızlı Teklif
-                </button>
-              </div>
-            </motion.div>
-          </>
+      <div 
+        className={cn(
+          "fixed inset-0 bg-background/98 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500",
+          mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
         )}
-      </AnimatePresence>
+      >
+        <div className="flex justify-between items-center mb-16">
+          <div className="flex flex-col">
+            <span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span>
+            <span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase">Nakliyat & Vinç</span>
+          </div>
+          <button 
+            onClick={() => setMobileMenuOpen(false)}
+            className="p-4 bg-white/5 text-white"
+          >
+            <X size={32} />
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-8">
+          {NAV_LINKS.map((link, idx) => (
+            <Link 
+              key={link.name}
+              href={link.href}
+              onClick={() => setMobileMenuOpen(false)}
+              className={cn(
+                "font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4",
+                pathname === link.href ? "text-primary" : "text-white/60"
+              )}
+              style={{ transitionDelay: `${idx * 50}ms` }}
+            >
+              {link.name}
+            </Link>
+          ))}
+        </div>
+
+        <div className="mt-auto flex flex-col gap-4">
+          <button 
+            onClick={() => {
+              handleWhatsApp();
+              setMobileMenuOpen(false);
+            }}
+            className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all"
+          >
+            <MessageCircle className="w-6 h-6" />
+            HIZLI TEKLİF AL
+          </button>
+          <a 
+            href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
+            className="w-full border border-white/10 text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3"
+          >
+            <Phone className="w-5 h-5" />
+            {siteConfig.contact.phone}
+          </a>
+        </div>
+      </div>
     </nav>
   );
 }
diff --git a/components/ServicesPreview.tsx b/components/ServicesPreview.tsx
index ddf5ccc..2ac95af 100644
--- a/components/ServicesPreview.tsx
+++ b/components/ServicesPreview.tsx
@@ -1,91 +1,83 @@
-"use client";
+'use client';
 
 import { motion } from "framer-motion";
-import { Hammer, Truck, Building2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
 
 const SERVICES = [
   {
-    id: "01",
-    title: "Mobil Vinç",
-    description: "Hızlı kurulum ve yüksek hareket kabiliyeti ile şantiye alanlarında esnek çözümler.",
-    icon: Hammer,
-    bg: "bg-surface-container",
-  },
-  {
-    id: "02",
     title: "Ağır Nakliyat",
-    description: "Standart dışı ölçülere sahip yüklerin özel ekipmanlarla güvenli taşımacılığı.",
-    icon: Truck,
-    bg: "bg-surface-container-high",
+    description: "Gabari dışı yüklerin özel low-bed araçlarla taşınması.",
+    image: "https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?q=80&w=2070&auto=format&fit=crop"
   },
   {
-    id: "03",
-    title: "Sepetli Platform",
-    description: "Yüksek irtifa çalışmalarında personel güvenliğini ön plana çıkaran ekipmanlar.",
-    icon: Building2,
-    bg: "bg-surface-container-highest",
+    title: "Mobil Vinç",
+    description: "300-500 ton kapasiteli teleskopik vinç çözümleri.",
+    image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
   },
+  {
+    title: "Sepetli Platform",
+    description: "75 metreye kadar yüksek irtifa çalışma alanları.",
+    image: "https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
+  }
 ];
 
 export function ServicesPreview() {
   return (
-    <section className="py-24 md:py-32 px-6 md:px-12 bg-surface" id="Services">
-      <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 md:mb-24 gap-8">
-        <motion.div 
-          initial={{ opacity: 0, x: -20 }}
-          whileInView={{ opacity: 1, x: 0 }}
-          viewport={{ once: true }}
-          className="max-w-3xl"
-        >
-          <span className="font-label text-xs md:text-sm uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Hizmetlerimiz</span>
-          <h2 className="font-headline text-4xl md:text-7xl font-bold tracking-tighter text-white leading-[0.9] text-balance">Yükünüz Ne Olursa Olsun, Güç Bizim İşimiz.</h2>
-        </motion.div>
-        <motion.div 
-          initial={{ opacity: 0, x: 20 }}
-          whileInView={{ opacity: 1, x: 0 }}
-          viewport={{ once: true }}
-          className="text-left md:text-right"
-        >
-          <p className="text-on-surface-variant font-body text-base md:text-lg max-w-sm">Mühendislik temelli yaklaşımımızla en zorlu projelerinizde profesyonel destek sağlıyoruz.</p>
-        </motion.div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-3">
-        {SERVICES.map((service, index) => (
-          <motion.div
-            key={service.title}
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ delay: index * 0.1, duration: 0.6 }}
-            viewport={{ once: true }}
-            className={cn(
-              "group relative aspect-square overflow-hidden p-8 md:p-16 transition-all duration-500",
-              service.bg
-            )}
+    <section className="py-24 bg-surface text-on-surface">
+      <div className="max-w-7xl mx-auto px-6 md:px-12">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-16">
+          <div className="max-w-2xl">
+            <span className="font-label text-xs uppercase tracking-[0.4em] text-primary font-bold mb-4 block">Uzmanlık Alanlarımız</span>
+            <h2 className="font-headline text-5xl md:text-8xl font-black uppercase leading-none tracking-tighter">
+              Büyük Yüklerin <br/> <span className="text-primary">Kusursuz</span> Taşıyıcısı
+            </h2>
+          </div>
+          <Link 
+            href="/hizmetler"
+            className="group flex items-center gap-4 text-on-surface font-headline font-bold uppercase tracking-widest text-sm"
           >
-            <div className="relative z-10 h-full flex flex-col justify-between">
-              <service.icon className="w-12 h-12 md:w-16 md:h-16 text-primary group-hover:scale-110 transition-transform duration-500" strokeWidth={1} />
-              <div>
-                <h3 className="font-headline text-2xl md:text-4xl font-bold mb-4 uppercase leading-none">{service.title}</h3>
-                <p className="text-on-surface-variant text-sm md:text-base leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">{service.description}</p>
-              </div>
-            </div>
-            
-            {/* Number Background */}
-            <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity pointer-events-none">
-              <span className="font-headline text-[12rem] font-black leading-none">{service.id}</span>
+            Tüm Hizmetler 
+            <div className="bg-primary p-4 text-on-primary group-hover:translate-x-4 transition-transform">
+              <ArrowRight size={20} />
             </div>
+          </Link>
+        </div>
 
-            {/* Hover Overlay */}
-            <div className="absolute inset-0 bg-primary translate-y-full group-hover:translate-y-0 transition-transform duration-500 flex flex-col items-center justify-center gap-6 p-8">
-              <p className="text-on-primary text-center font-body font-medium leading-tight">Profesyonel operasyonel destek ve kiralama seçenekleri için.</p>
-              <button className="text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all">
-                Detaylar
-              </button>
-            </div>
-          </motion.div>
-        ))}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-px bg-outline-variant/20">
+          {SERVICES.map((service, idx) => (
+            <motion.div
+              key={service.title}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: idx * 0.1 }}
+              viewport={{ once: true }}
+              className="group relative h-[600px] overflow-hidden flex flex-col justify-end p-12"
+            >
+              <Image 
+                src={service.image}
+                alt={service.title}
+                fill
+                className="object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-1000 z-0"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent z-10" />
+              
+              <div className="relative z-20">
+                <h3 className="font-headline text-4xl font-black text-white uppercase mb-4 tracking-tighter">{service.title}</h3>
+                <p className="font-body text-on-surface-variant mb-8 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500">
+                  {service.description}
+                </p>
+                <Link 
+                  href="/hizmetler"
+                  className="bg-primary text-on-primary font-headline font-black text-2xl uppercase underline underline-offset-8 hover:tracking-widest transition-all"
+                >
+                  Detaylar
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
       </div>
     </section>
   );