first commit

components/CTASection.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function CTASection() {
+  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>
+
+      <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>
+
+        <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>
+      </div>
+    </section>
+  );
+}

components/FleetSection.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+const VEHICLES = [
+  {
+    title: "Liebherr LTM 1100",
+    category: "Mobil Teleskopik Vinç",
+    specs: [
+      { label: "Kapasite", value: "100 TON" },
+      { label: "Bom Uzunluğu", value: "60 METRE" },
+    ],
+    status: "Mevcut",
+    statusColor: "bg-primary text-on-primary",
+    image: "https://lh3.googleusercontent.com/aida-public/AB6AXuDz5b4r2KouL9upv0olAupqoFkF2Irw10VTeLh8XSl4F94ujjrHJ6keKViHybvoJlR3RgL-WrvsCYDjKNuVYUdALEH7KEjvZmZm40mxJWzQGN_aFUEllY41CpcYxAmHjiyrkgTKgEh9qZuDQ62Pzi-sffDKM9dv8bNg3YWH-ypFworfKyQiaXgLS0wucMj9LpVlzzl2zXrKv6WTv8hJr986CWoKM8b1mTI8ajgq_2oF9vltwrfrZDT8LYEKtgGSmIM84AAlzqZXwMU",
+  },
+  {
+    title: "Hiyap 75 Ton",
+    category: "Kamyon Üstü Vinç",
+    specs: [
+      { label: "Kapasite", value: "75 TON" },
+      { label: "Erişim", value: "35 METRE" },
+    ],
+    status: "Mevcut",
+    statusColor: "bg-primary text-on-primary",
+    image: "https://lh3.googleusercontent.com/aida-public/AB6AXuCTUgbJ7VOHrnV2PY8AX4lAxBfdbp3hP7HdMRv4RJsWYQv6_coiWlqlodtyBjta-2PoSZnOXc1pKQHpbZGS9_6VLIUPyZ-sUH15ENiBjf466dq7GpPBHpS1uqFXm44tK_ZJ0okneK2mtHwo5h459sPzZ5iXakBitbs70sI0X86VQm2dePia2r1weEXW6Znhn8pOcB_hwLybrmfyEhr-b47X20UbQrbSFp2WCIGZUv4IsAlgn775KDuQH96BvaSLC56kOZG8Q5S9Tu0",
+  },
+  {
+    title: "Teleskopik Platform",
+    category: "Yüksek İrtifa Erişimi",
+    specs: [
+      { label: "Yükseklik", value: "45 METRE" },
+      { label: "Sepet Kapasitesi", value: "300 KG" },
+    ],
+    status: "Bakımda",
+    statusColor: "bg-error-container text-white",
+    image: "https://lh3.googleusercontent.com/aida-public/AB6AXuBfXE8_qXbdFXu-5NJjxR_il3lZOkzp6NaLTMMtNr_1_dO0ohKzutRHZLm3Rs3xuwheOE_PUWTDxIavnRfKcdCpASPX9AlxSuZFWaZKax5RWmgLnIBk-ojo_XghFLjC1ES1ACDK-PdB901GE3AxkMj-lWSFkbU8PaUhJ9XxizBHb4BVtvej64-5uXmm9e99Cax1_Xs8_Hm9L7uR8PRX5teGng9Q1gxbGbFCAQw5WG3cZrPESDEbj4osSFEwW8lokMlO0uB9xsaGZxw",
+  },
+];
+
+export function FleetSection() {
+  return (
+    <section className="py-24 md:py-32 bg-surface-container-low overflow-hidden" id="Fleet">
+      <div className="px-6 md:px-12 mb-16 md:mb-24 flex flex-col md:flex-row justify-between items-start md:items-end gap-8">
+        <div>
+          <h2 className="font-headline text-5xl md:text-8xl font-bold tracking-tighter text-stroke uppercase leading-none">Makine Parkuru</h2>
+          <h3 className="font-headline text-3xl md:text-5xl font-bold text-white -mt-4 md:-mt-8">Modern ve Güçlü Filo</h3>
+        </div>
+        <div className="flex gap-2">
+          <div className="h-1 w-12 bg-primary"></div>
+          <div className="h-1 w-4 bg-primary/30"></div>
+          <div className="h-1 w-4 bg-primary/30"></div>
+        </div>
+      </div>
+      
+      <div className="flex gap-6 md:gap-12 overflow-x-auto no-scrollbar px-6 md:px-12 pb-12 cursor-grab active:cursor-grabbing">
+        {VEHICLES.map((v, idx) => (
+          <motion.div 
+            key={v.title}
+            initial={{ opacity: 0, x: 50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ delay: idx * 0.1, duration: 0.6 }}
+            viewport={{ once: true }}
+            className="min-w-[320px] md:min-w-[500px] bg-surface-container-lowest flex flex-col group shadow-2xl"
+          >
+            <div className="h-64 md:h-96 overflow-hidden relative">
+              <img 
+                className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 group-hover:scale-105" 
+                src={v.image} 
+                alt={v.title} 
+              />
+              <div className={cn("absolute top-0 left-0 px-4 py-2 font-label text-[10px] font-bold uppercase tracking-widest", v.statusColor)}>
+                {v.status}
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-transparent to-transparent opacity-60"></div>
+            </div>
+            <div className="p-8 md:p-12">
+              <div className="flex justify-between items-start mb-8">
+                <div>
+                  <h4 className="font-headline text-2xl md:text-3xl font-bold text-white mb-2 uppercase tracking-tight">{v.title}</h4>
+                  <span className="font-label text-xs text-primary uppercase tracking-[0.2em] font-bold">{v.category}</span>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-px bg-outline-variant/20">
+                {v.specs.map(spec => (
+                  <div key={spec.label} className="bg-surface-container-lowest p-6 transition-colors hover:bg-surface-container-low">
+                    <span className="block font-label text-[10px] text-on-surface-variant uppercase mb-2 tracking-widest">{spec.label}</span>
+                    <span className="font-headline font-bold text-xl md:text-2xl text-white">{spec.value}</span>
+                  </div>
+                ))}
+              </div>
+              <button className="w-full mt-8 py-4 font-headline font-bold uppercase tracking-widest text-xs border border-white/5 hover:bg-white hover:text-black transition-all">
+                Teknik Katalog
+              </button>
+            </div>
+          </motion.div>
+        ))}
+        {/* Visual cue for more items */}
+        <div className="min-w-[100px] flex items-center justify-center">
+             <span className="font-headline text-white/10 text-9xl font-black select-none">NEXT</span>
+        </div>
+      </div>
+
+      <div className="px-6 md:px-12 mt-8 flex items-center gap-4">
+        <span className="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Kaydırarak inceleyin</span>
+        <div className="h-px flex-1 bg-white/5"></div>
+      </div>
+    </section>
+  );
+}

components/FloatingWhatsApp.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { MessageCircle } from "lucide-react";
+import { motion } from "framer-motion";
+
+export function FloatingWhatsApp() {
+  return (
+    <div className="fixed bottom-6 right-6 md:bottom-10 md:right-10 z-[110]">
+      <motion.a
+        href="https://wa.me/905XXXXXXXXX"
+        target="_blank"
+        rel="noopener noreferrer"
+        whileHover={{ x: -4, y: -4 }}
+        whileTap={{ scale: 0.95 }}
+        className="bg-[#25D366] text-white w-14 h-14 md:w-20 md:h-20 flex items-center justify-center shadow-[10px_10px_0px_0px_rgba(0,0,0,0.5)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,0.5)] transition-all rounded-none relative group"
+      >
+        <MessageCircle size={32} fill="currentColor" className="text-white md:scale-125" />
+        <span className="absolute right-full mr-4 bg-surface-container-highest text-white px-4 py-2 text-[10px] uppercase tracking-widest font-black opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+            Hemen Whatsapp'tan Yazın
+        </span>
+      </motion.a>
+    </div>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,68 @@
+import Link from "next/link";
+
+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>
+        </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>
+      </div>
+    </footer>
+  );
+}

components/Hero.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function Hero() {
+  return (
+    <section className="relative h-screen w-full flex items-center overflow-hidden bg-background">
+      {/* 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/AB6AXuCLXU-xpLyEH2Y_iMlpzL1U0DoDchOaBY8PKcSBT2U3v11rmlCAjjeP2-9STqyYMt43TFAM0jM-OZpBGmr0OX46suuzs38u_O-xYRzRHGYy9gFF7VOKIirFizFPLHtGLg8i9xxv30qrQuCfb8zx7DZ4iq04mAPl2uZZIhCtA6dxWSaZxJD4_lj3OZeekkyGVHlO18LQalVXg63CfNEu913EGtwTEEKMclHSCZo2yRRwAB1xnh0R3YBuuiJiUYADnGVKv2G7VD_pAL4" 
+          alt="Heavy duty crane in Dalaman"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent"></div>
+      </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 
+          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"
+        >
+          Dalaman’ın Güçlü <br />
+          Çözüm Ortağı: <span className="text-primary">Aydoğan Vinç</span>
+        </motion.h1>
+
+        <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>
+        </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>
+    </section>
+  );
+}

components/JsonLd.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+export const JsonLd = () => {
+  const businessSchema = {
+    "@context": "https://schema.org",
+    "@type": "LocalBusiness",
+    "name": "Aydoğan Nakliyat Vinç",
+    "image": "https://aydogannakliyatvinc.com/logo.png", // Varsa gerçek logo URL'si
+    "@id": "https://aydogannakliyatvinc.com",
+    "url": "https://aydogannakliyatvinc.com",
+    "telephone": "+902526920000",
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "Merkez Mah. Sanayi Sitesi No: 42",
+      "addressLocality": "Dalaman",
+      "addressRegion": "Muğla",
+      "postalCode": "48770",
+      "addressCountry": "TR"
+    },
+    "geo": {
+      "@type": "GeoCoordinates",
+      "latitude": 36.7644,
+      "longitude": 28.8028
+    },
+    "openingHoursSpecification": {
+      "@type": "OpeningHoursSpecification",
+      "dayOfWeek": [
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+        "Sunday"
+      ],
+      "opens": "00:00",
+      "closes": "23:59"
+    },
+    "sameAs": [
+      "https://www.facebook.com/aydogannakliyatvinc", // Örnek sosyal medya linkleri
+      "https://www.instagram.com/aydogannakliyatvinc"
+    ],
+    "areaServed": [
+      {
+        "@type": "City",
+        "name": "Dalaman"
+      },
+      {
+        "@type": "City",
+        "name": "Muğla"
+      },
+      {
+        "@type": "State",
+        "name": "Ege Bölgesi"
+      },
+      {
+        "@type": "Country",
+        "name": "Türkiye"
+      }
+    ]
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(businessSchema) }}
+    />
+  );
+};

components/LoadMeterSection.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const METERS = [
+  { label: "Ağır Yük Transferi", value: 85 },
+  { label: "Mobil Vinç Operasyonları", value: 95 },
+];
+
+export function LoadMeterSection() {
+  return (
+    <section className="py-24 md:py-32 px-6 md:px-12 bg-surface flex flex-col items-center">
+      <div className="w-full max-w-5xl">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-16 md:mb-24"
+        >
+          <span className="font-label text-xs uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Operasyonel Güç</span>
+          <h3 className="font-headline text-3xl md:text-5xl font-bold uppercase tracking-tight text-white text-balance leading-none">Projeleriniz İçin Optimum Güç Hesabı</h3>
+        </motion.div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
+          {METERS.map((m, idx) => (
+            <div key={m.label} className="flex flex-col">
+              <div className="flex justify-between font-label text-[10px] md:text-xs uppercase tracking-[0.2em] mb-6 font-bold">
+                <span className="text-white/60">{m.label}</span>
+                <span className="text-primary">{m.value}% Verimlilik</span>
+              </div>
+              <div className="h-4 md:h-6 w-full bg-surface-container-highest relative overflow-hidden">
+                <motion.div 
+                  initial={{ width: 0 }}
+                  whileInView={{ width: `${m.value}%` }}
+                  transition={{ duration: 1.5, delay: idx * 0.3, ease: "circOut" }}
+                  viewport={{ once: true }}
+                  className="h-full bg-primary relative"
+                >
+                    <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_75%,transparent_75%,transparent)] bg-[length:20px_20px]"></div>
+                </motion.div>
+              </div>
+              <p className="mt-4 text-xs text-on-surface-variant font-body leading-relaxed max-w-xs uppercase tracking-tighter">Sektör standartlarının üzerinde performans ve güvenlik marjı.</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+const NAV_LINKS = [
+  { name: "Hizmetler", href: "/hizmetler" },
+  { name: "Filomuz", href: "/filomuz" },
+  { name: "Hakkımızda", href: "/hakkimizda" },
+  { name: "İletişim", href: "/iletisim" },
+];
+
+export function Navbar() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <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"
+      )}
+    >
+      {/* Logo */}
+      <Link href="/" className="text-xl md:text-2xl font-black tracking-tighter text-primary">
+        AYDOĞAN <span className="text-white">NAKLİYAT</span>
+      </Link>
+
+      {/* Desktop Links */}
+      <div className="hidden md:flex items-center gap-12">
+        {NAV_LINKS.map((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"
+          >
+            {link.name}
+          </Link>
+        ))}
+      </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
+        </button>
+      </div>
+
+      {/* Mobile Menu Toggle */}
+      <button
+        className="md:hidden text-white focus:outline-none p-2"
+        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+        aria-label="Menu toggle"
+      >
+        {mobileMenuOpen ? <X size={32} /> : <Menu size={32} />}
+      </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>
+          </>
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+}

components/ServicesPreview.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Hammer, Truck, Building2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+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",
+  },
+  {
+    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",
+  },
+];
+
+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
+            )}
+          >
+            <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>
+            </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>
+    </section>
+  );
+}

components/StatsGrid.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const STATS = [
+  { label: "Maksimum Kapasite", value: "150T" },
+  { label: "Teknik Destek", value: "24/7" },
+  { label: "Modern Filo", value: "15+" },
+  { label: "Güvenlik Kaydı", value: "100%" },
+];
+
+export function StatsGrid() {
+  return (
+    <section className="grid grid-cols-2 md:grid-cols-4 bg-surface-container-lowest">
+      {STATS.map((stat, idx) => (
+        <motion.div 
+          key={stat.label}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ delay: idx * 0.1, duration: 0.5 }}
+          viewport={{ once: true }}
+          className={cn(
+            "p-8 md:p-16 flex flex-col justify-center transition-colors hover:bg-surface-container-low group",
+            idx % 2 === 0 ? "bg-surface-container-lowest" : "bg-surface-container/30"
+          )}
+        >
+          <span className="text-primary font-headline text-4xl md:text-6xl font-black mb-2 group-hover:scale-105 transition-transform origin-left">{stat.value}</span>
+          <span className="font-label text-[10px] md:text-xs uppercase tracking-[0.2em] text-on-surface-variant font-bold">{stat.label}</span>
+        </motion.div>
+      ))}
+    </section>
+  );
+}
+
+import { cn } from "@/lib/utils";