first commit

app/filomuz/page.tsx

@@ -0,0 +1,123 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
+import { CTASection } from "@/components/CTASection";
+import { LoadMeterSection } from "@/components/LoadMeterSection";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+import { Metadata } from "next";
+import { FLEET_ITEMS } from "@/lib/data";
+
+export const metadata: Metadata = {
+  title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
+  description: "300 tondan 500 tona kadar mobil vinçler, sepetli platformlar ve hiyap vinçlerden oluşan modern araç filomuzla hizmetinizdeyiz.",
+};
+
+const FLEET_CATEGORIES = ["Hepsi", "Mobil Vinç", "Sepetli Platform", "Hiyap", "Kule Vinç"];
+
+export default function FleetPage() {
+  return (
+    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
+      <Navbar />
+      
+      {/* Hero Section */}
+      <header className="relative h-[70vh] flex items-end overflow-hidden bg-surface-container-lowest">
+        <div className="absolute inset-0 z-0">
+          <Image 
+            src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
+            alt="Heavy crane"
+            fill
+            className="object-cover grayscale opacity-60"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
+        </div>
+        <div className="relative z-10 w-full px-8 pb-16">
+          <div className="max-w-7xl mx-auto">
+            <span className="text-primary font-headline font-bold text-sm tracking-[0.3em] uppercase mb-4 block">
+              PREZİSYONEL GÜÇ
+            </span>
+            <h1 className="text-6xl md:text-8xl font-black text-on-surface uppercase tracking-tighter leading-none mb-6">
+              MAKİNE <br/><span className="text-primary">PARKURUMUZ</span>
+            </h1>
+            <div className="w-24 h-2 bg-primary"></div>
+          </div>
+        </div>
+      </header>
+
+      {/* Filter System */}
+      <section className="bg-surface-container border-y border-outline-variant/10">
+        <div className="max-w-7xl mx-auto px-8 py-6">
+          <div className="flex flex-wrap items-center gap-4">
+            <span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
+            {FLEET_CATEGORIES.map((category, index) => (
+              <button 
+                key={index}
+                className={cn(
+                  "px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
+                  index === 0 
+                    ? "bg-primary text-on-primary" 
+                    : "bg-surface-container-highest text-on-surface-variant hover:text-primary"
+                )}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Fleet Grid */}
+      <section className="max-w-7xl mx-auto px-8 py-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
+          {FLEET_ITEMS.map((item, index) => (
+            <div 
+              key={index}
+              className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
+            >
+              <div className="aspect-[4/3] overflow-hidden relative">
+                <Image 
+                  src={item.image}
+                  alt={item.name}
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-110"
+                />
+                <div className={cn(
+                  "absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
+                  item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
+                )}>
+                  {item.status}
+                </div>
+              </div>
+              <div className="p-8 flex-1 flex flex-col">
+                <h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
+                  {item.name}
+                </h3>
+                <p className="text-on-surface-variant text-sm mb-6 font-light">
+                  {item.description}
+                </p>
+                <div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
+                  <div>
+                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
+                    <span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
+                  </div>
+                  <div>
+                    <span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
+                    <span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
+                  </div>
+                </div>
+                <button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
+                  İncele
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <LoadMeterSection />
+      <CTASection />
+      <Footer />
+      <FloatingWhatsApp />
+    </main>
+  );
+}

app/globals.css

@@ -1,26 +1,98 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #131313;
+  --foreground: #E5E2E1;
+  --primary: #FFD700; /* Industrial Yellow */
+  --primary-container: #FFD700;
+  --on-primary: #3A3000;
+  --surface: #131313;
+  --surface-container: #20201F;
+  --surface-container-low: #1C1B1B;
+  --surface-container-high: #2A2A2A;
+  --surface-container-highest: #353535;
+  --surface-container-lowest: #0E0E0E;
+  --on-surface-variant: #D0C6AB;
+  --outline-variant: #4D4732;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-primary: var(--primary);
+  --color-primary-container: var(--primary-container);
+  --color-on-primary: var(--on-primary);
+  --color-surface: var(--surface);
+  --color-surface-container: var(--surface-container);
+  --color-surface-container-low: var(--surface-container-low);
+  --color-surface-container-high: var(--surface-container-high);
+  --color-surface-container-highest: var(--surface-container-highest);
+  --color-surface-container-lowest: var(--surface-container-lowest);
+  --color-on-surface-variant: var(--on-surface-variant);
+  --color-outline-variant: var(--outline-variant);
+  
+  --font-headline: var(--font-space-grotesk), sans-serif;
+  --font-body: var(--font-inter), sans-serif;
+  --font-label: var(--font-inter), sans-serif;
+
+  --radius-none: 0px;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+  --radius-2xl: 0px;
+  --radius-3xl: 0px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #131313;
+    --foreground: #E5E2E1;
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-body), Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-headline);
+}
+
+.text-stroke {
+  -webkit-text-stroke: 1px rgba(255, 215, 0, 0.3);
+  color: transparent;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+@layer utilities {
+  .noise-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0.05;
+    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
 }

app/hakkimizda/page.tsx

@@ -0,0 +1,177 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
+import { CTASection } from "@/components/CTASection";
+import Image from "next/image";
+import { Shield, Zap, Target, Users, Rocket, Eye } from "lucide-react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Hakkımızda | Aydoğan Nakliyat Vinç Kurumsal",
+  description: "20 yılı aşkın tecrübemizle Dalaman ve Muğla bölgesinin lider vinç ve nakliyat firmasıyız. Vizyonumuz, misyonumuz ve profesyonel ekibimiz hakkında bilgi alın.",
+};
+
+const VALUES = [
+  {
+    title: "Güvenlik",
+    description: "Sıfır kaza politikasıyla, tüm operasyonlarımızda uluslararası güvenlik standartlarını uyguluyoruz.",
+    icon: <Shield className="w-10 h-10 text-primary" />
+  },
+  {
+    title: "Hız",
+    description: "Zamanın değerini biliyoruz. En karmaşık projeleri bile belirlenen takvim dahilinde tamamlıyoruz.",
+    icon: <Zap className="w-10 h-10 text-primary" />
+  },
+  {
+    title: "Hassasiyet",
+    description: "Milimetrik hesaplamalarla, en değerli yüklerinizi en ufak bir zarar görmeden taşıyoruz.",
+    icon: <Target className="w-10 h-10 text-primary" />
+  },
+  {
+    title: "Müşteri Odaklılık",
+    description: "Her projenin kendine has ihtiyaçları vardır. Size özel esnek ve akılcı çözümler üretiyoruz.",
+    icon: <Users className="w-10 h-10 text-primary" />
+  }
+];
+
+const STATS = [
+  { label: "Yıllık Tecrübe", value: "20+" },
+  { label: "Tamamlanan Proje", value: "1500+" },
+  { label: "Modern Araç Filosu", value: "25+" },
+  { label: "Maksimum Kapasite", value: "500t" }
+];
+
+export default function AboutPage() {
+  return (
+    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
+      <Navbar />
+      
+      {/* Hero Section */}
+      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
+        <div className="absolute inset-0 z-0">
+          <Image 
+            src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
+            alt="Crane at sunset"
+            fill
+            className="object-cover grayscale opacity-60"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-surface/40 to-surface/90"></div>
+        </div>
+        <div className="relative z-10 text-center px-4">
+          <h1 className="text-primary text-6xl md:text-8xl font-headline font-black tracking-tighter uppercase">
+            Hakkımızda
+          </h1>
+          <div className="h-1 w-24 bg-primary mx-auto mt-4 mb-6"></div>
+          <p className="text-on-surface text-lg md:text-xl max-w-2xl mx-auto font-light tracking-wide uppercase">
+            Dalaman'ın güvenilir çözüm ortağı: Tecrübe, güç ve hassasiyetle yükseliyoruz.
+          </p>
+        </div>
+      </section>
+
+      {/* Our Story */}
+      <section className="py-24 px-8 md:px-16 bg-surface">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="relative">
+            <div className="absolute -top-4 -left-4 w-24 h-24 border-t-4 border-l-4 border-primary"></div>
+            <div className="relative aspect-[4/3] w-full overflow-hidden">
+              <Image 
+                src="https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
+                alt="Crane operation"
+                fill
+                className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
+              />
+            </div>
+            <div className="absolute -bottom-8 -right-8 bg-primary p-8 hidden md:block">
+              <p className="text-on-primary font-headline font-black text-4xl">20+</p>
+              <p className="text-on-primary text-xs uppercase font-bold tracking-widest">Yıllık Tecrübe</p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <span className="text-primary font-headline text-sm uppercase tracking-[0.3em]">Kurumsal Kimliğimiz</span>
+            <h2 className="text-4xl md:text-5xl font-headline font-bold text-on-surface leading-none uppercase">
+              Dalaman'ın Gücü, Sizin Güveniniz.
+            </h2>
+            <p className="text-on-surface-variant text-lg leading-relaxed">
+              Aydoğan Nakliyat Vinç olarak, Dalaman ve çevresinde uzun yıllardır güvenilirlik ve tecrübeyle hizmet vermekteyiz. Sektördeki köklü geçmişimizle, her projede en yüksek standartları hedefliyoruz.
+            </p>
+            <p className="text-on-surface-variant text-lg leading-relaxed">
+              Ağır yük nakliyatından hassas vinç operasyonlarına kadar, modern filomuz ve uzman kadromuzla projelerinizin her aşamasında yanınızdayız. Mühendislik odaklı yaklaşımımızla, en zorlu coğrafi koşullarda bile kusursuz hizmet sağlıyoruz.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Core Values */}
+      <section className="py-24 bg-surface-container-low border-y border-outline-variant/10">
+        <div className="max-w-7xl mx-auto px-8 md:px-16">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-headline font-bold text-white uppercase tracking-wider">Temel Değerlerimiz</h2>
+            <div className="w-16 h-1 bg-primary mx-auto mt-4"></div>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-outline-variant/20">
+            {VALUES.map((value, index) => (
+              <div 
+                key={index}
+                className="bg-surface-container p-8 border-b-4 border-transparent hover:border-primary transition-all group"
+              >
+                <div className="mb-6 transition-transform group-hover:scale-110 duration-300">
+                  {value.icon}
+                </div>
+                <h3 className="text-xl font-headline font-bold text-white mb-3 uppercase tracking-tight">
+                  {value.title}
+                </h3>
+                <p className="text-on-surface-variant text-sm leading-relaxed">
+                  {value.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Mission & Vision */}
+      <section className="py-24 px-8 md:px-16 bg-surface">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20 border border-outline-variant/20">
+          <div className="bg-surface-container-high p-12 lg:p-20">
+            <div className="flex items-center gap-4 mb-8">
+              <div className="w-12 h-12 bg-primary flex items-center justify-center">
+                <Rocket className="w-6 h-6 text-on-primary" />
+              </div>
+              <h2 className="text-3xl font-headline font-bold text-white uppercase tracking-tight">Misyonumuz</h2>
+            </div>
+            <p className="text-on-surface-variant text-lg leading-relaxed italic">
+              "Modern teknolojiyi geleneksel iş ahlakıyla birleştirerek, Dalaman bölgesindeki altyapı ve inşaat projelerine en güvenilir, en hızlı ve en profesyonel lojistik ve vinç desteğini sağlamak."
+            </p>
+          </div>
+          <div className="bg-surface-container-lowest p-12 lg:p-20">
+            <div className="flex items-center gap-4 mb-8">
+              <div className="w-12 h-12 bg-primary flex items-center justify-center">
+                <Eye className="w-6 h-6 text-on-primary" />
+              </div>
+              <h2 className="text-3xl font-headline font-bold text-white uppercase tracking-tight">Vizyonumuz</h2>
+            </div>
+            <p className="text-on-surface-variant text-lg leading-relaxed">
+              "Sektörde yenilikçi çözümlerimiz ve sarsılmaz güvenilirliğimizle, sadece Dalaman'da değil, tüm Ege ve Akdeniz bölgesinde ağır nakliyat ve vinç hizmetlerinde lider marka olmak."
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <section className="py-20 bg-primary">
+        <div className="max-w-7xl mx-auto px-8 md:px-16 flex flex-wrap justify-between gap-12 text-on-primary">
+          {STATS.map((stat, index) => (
+            <div key={index} className="flex flex-col items-center md:items-start">
+              <span className="text-5xl font-headline font-black">{stat.value}</span>
+              <span className="text-xs font-bold uppercase tracking-widest opacity-80">{stat.label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <CTASection />
+      <Footer />
+      <FloatingWhatsApp />
+    </main>
+  );
+}

app/hizmetler/page.tsx

@@ -0,0 +1,170 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
+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ç"],
+};
+
+const FEATURES = [
+  {
+    id: "01",
+    title: "Hassas Mühendislik",
+    description: "Her kaldırma operasyonu için detaylı simülasyon ve planlama.",
+    icon: <Shield className="w-6 h-6" />
+  },
+  {
+    id: "02",
+    title: "Sertifikalı Operatörler",
+    description: "Uluslararası standartlarda eğitim almış uzman teknik ekip.",
+    icon: <Zap className="w-6 h-6" />
+  },
+  {
+    id: "03",
+    title: "7/24 Teknik Destek",
+    description: "Kesintisiz operasyon için anında müdahale ve destek hizmeti.",
+    icon: <Clock className="w-6 h-6" />
+  }
+];
+
+const STATS = [
+  { label: "Max Kapasite", value: "500T", highlighted: true },
+  { label: "Yıllık Deneyim", value: "15+", highlighted: false },
+  { label: "İş Güvenliği", value: "100%", highlighted: false },
+  { label: "Aktif Operasyon", value: "24/7", highlighted: true }
+];
+
+export default function ServicesPage() {
+  return (
+    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
+      <Navbar />
+      
+      {/* Hero Section */}
+      <section className="relative h-[60vh] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10">
+        <div className="absolute inset-0 z-0">
+          <Image 
+            src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
+            alt="Cranes at sunset"
+            fill
+            className="object-cover opacity-40 grayscale"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div>
+        </div>
+        <div className="relative z-10 max-w-4xl">
+          <p className="text-primary font-headline font-bold tracking-[0.2em] uppercase mb-4 text-sm">
+            Endüstriyel Güç ve Mühendislik Çözümleri
+          </p>
+          <h1 className="text-7xl md:text-9xl font-black font-headline tracking-tighter text-on-surface leading-[0.9] uppercase">
+            Hizmetlerimiz
+          </h1>
+          <div className="mt-8 flex gap-4">
+            <div className="h-1 w-24 bg-primary"></div>
+          </div>
+        </div>
+      </section>
+
+      {/* Services Grid */}
+      <section className="py-24 px-8 md:px-16 bg-surface">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
+          {SERVICES.map((service, index) => (
+            <div 
+              key={index}
+              className="group relative bg-surface-container-low hover:bg-surface-container transition-all duration-500 overflow-hidden"
+            >
+              <div className="p-12 flex flex-col h-full min-h-[500px] justify-between relative z-10">
+                <div>
+                  <div className="mb-8">
+                    {index === 0 && <Settings className="w-12 h-12 text-primary" />}
+                    {index === 1 && <ArrowUp className="w-12 h-12 text-primary" />}
+                    {index === 2 && <Truck className="w-12 h-12 text-primary" />}
+                    {index === 3 && <Compass className="w-12 h-12 text-primary" />}
+                  </div>
+                  <h3 className="text-4xl font-headline font-black uppercase text-on-surface mb-6 tracking-tight">
+                    {service.title}
+                  </h3>
+                  <p className="text-on-surface-variant font-body text-lg leading-relaxed max-w-md">
+                    {service.description}
+                  </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">
+                    Teklif Al
+                    <ArrowRight className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+              {/* Subtle Background Image for Card */}
+              <div className="absolute right-0 bottom-0 w-1/2 h-full opacity-5 pointer-events-none grayscale group-hover:opacity-10 transition-opacity">
+                <Image 
+                  src={service.image}
+                  alt={service.title}
+                  fill
+                  className="object-contain object-right-bottom"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Why Choose Us */}
+      <section className="py-24 px-8 md:px-16 bg-surface-container-lowest border-y border-outline-variant/10">
+        <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
+          <div>
+            <h2 className="text-5xl font-headline font-black uppercase mb-8 leading-tight">
+              Neden AYDOĞAN NAKLİYAT?
+            </h2>
+            <p className="text-on-surface-variant font-body text-xl mb-12 leading-relaxed">
+              Endüstriyel operasyonlarda güvenlik bir seçenek değil, zorunluluktur. Mühendislik odaklı yaklaşımımızla riskleri minimize ediyoruz.
+            </p>
+            <div className="space-y-12">
+              {FEATURES.map((feature) => (
+                <div key={feature.id} className="flex gap-6">
+                  <div className="text-primary text-5xl font-black font-headline">{feature.id}</div>
+                  <div>
+                    <h4 className="text-xl font-headline font-bold uppercase mb-2">{feature.title}</h4>
+                    <p className="text-on-surface-variant text-sm">{feature.description}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-2 gap-4">
+            {STATS.map((stat, index) => (
+              <div 
+                key={index}
+                className={cn(
+                  "bg-surface-container-high p-8 flex flex-col justify-center transition-all hover:translate-y-[-4px]",
+                  stat.highlighted && "border-l-4 border-primary"
+                )}
+              >
+                <span className={cn(
+                  "text-5xl font-black font-headline mb-2",
+                  stat.highlighted ? "text-primary" : "text-on-surface"
+                )}>
+                  {stat.value}
+                </span>
+                <span className="text-xs uppercase tracking-widest font-bold opacity-60">
+                  {stat.label}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <CTASection />
+      <Footer />
+      <FloatingWhatsApp />
+    </main>
+  );
+}

app/iletisim/page.tsx

@@ -0,0 +1,175 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
+import Image from "next/image";
+import { MapPin, Phone, Mail, ArrowRight, Navigation } from "lucide-react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "İletişim | Dalaman, Muğla Vinç ve Nakliyat",
+  description: "Aydoğan Nakliyat operasyon merkezine ulaşın. Dalaman Sanayi Sitesi'nde 7/24 hizmet veriyoruz. Teklif almak için bizi arayın.",
+};
+
+export default function ContactPage() {
+  return (
+    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
+      <Navbar />
+      
+      {/* Hero Section */}
+      <section className="relative h-[40vh] min-h-[300px] flex items-center justify-start px-12 pt-20 overflow-hidden bg-surface-container-lowest">
+        <div className="absolute inset-0 opacity-40 z-0">
+          <Image 
+            src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?q=80&w=2070&auto=format&fit=crop"
+            alt="Industrial machinery"
+            fill
+            className="object-cover grayscale"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent"></div>
+        </div>
+        <div className="relative z-10 max-w-4xl">
+          <h1 className="text-6xl md:text-8xl font-black uppercase tracking-tighter text-on-surface mb-2">
+            İletişim
+          </h1>
+          <div className="h-1 w-24 bg-primary"></div>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <main className="grid grid-cols-1 lg:grid-cols-2 gap-0 min-h-[600px] bg-outline-variant/5">
+        {/* Left Column: Contact Details */}
+        <section className="bg-surface-container p-12 lg:p-24 flex flex-col justify-center">
+          <h2 className="text-3xl font-bold tracking-tighter uppercase mb-12 text-on-surface">Operasyon Merkezi</h2>
+          <div className="space-y-12">
+            {/* Address */}
+            <div className="flex items-start gap-6 group">
+              <div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
+                <MapPin className="w-8 h-8" />
+              </div>
+              <div>
+                <p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">Adres</p>
+                <p className="text-xl font-medium text-on-surface leading-snug">
+                  Merkez Mah. Sanayi Sitesi No: 42<br/>Dalaman / Muğla
+                </p>
+              </div>
+            </div>
+            {/* Phone */}
+            <div className="flex items-start gap-6 group">
+              <div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
+                <Phone className="w-8 h-8" />
+              </div>
+              <div>
+                <p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">Telefon</p>
+                <p className="text-3xl font-black text-on-surface tracking-tighter">
+                  +90 252 692 00 00
+                </p>
+              </div>
+            </div>
+            {/* Email */}
+            <div className="flex items-start gap-6 group">
+              <div className="bg-surface-container-high p-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
+                <Mail className="w-8 h-8" />
+              </div>
+              <div>
+                <p className="text-[10px] uppercase tracking-[0.3em] text-on-surface-variant mb-1 font-bold">E-Posta</p>
+                <p className="text-xl font-medium text-on-surface">
+                  info@aydogannakliyat.com
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          {/* Social/Status Indicators */}
+          <div className="mt-20 flex flex-wrap gap-4">
+            <div className="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
+              <span className="w-2 h-2 bg-primary animate-pulse"></span> 
+              7/24 Aktif Operasyon
+            </div>
+            <div className="px-4 py-2 bg-surface-container-lowest border border-outline-variant/15 text-[10px] font-bold uppercase tracking-widest flex items-center gap-2">
+              <span className="w-2 h-2 bg-primary"></span> 
+              Muğla & Çevresi
+            </div>
+          </div>
+        </section>
+
+        {/* Right Column: Contact Form */}
+        <section className="bg-surface-container-low p-12 lg:p-24 flex flex-col justify-center border-l border-outline-variant/10">
+          <h2 className="text-3xl font-bold tracking-tighter uppercase mb-8 text-on-surface">Teklif Talebi & Mesaj</h2>
+          <form action="#" className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-2">
+                <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Adınız Soyadınız</label>
+                <input 
+                  className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
+                  placeholder="Ahmet Yılmaz" 
+                  type="text"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">E-Posta</label>
+                <input 
+                  className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
+                  placeholder="ahmet@example.com" 
+                  type="email"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Telefon Numarası</label>
+              <input 
+                className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
+                placeholder="+90 5xx xxx xx xx" 
+                type="tel"
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">Mesajınız / İş Detayları</label>
+              <textarea 
+                className="w-full bg-surface-container-lowest border-0 border-b-2 border-outline-variant focus:border-primary focus:ring-0 text-on-surface p-4 transition-all" 
+                placeholder="Taşıma yükü, mesafe ve tarih bilgisi belirtiniz..." 
+                rows={4}
+              ></textarea>
+            </div>
+            <button 
+              className="w-full bg-primary text-on-primary py-5 text-xl font-black uppercase tracking-widest hover:brightness-110 transition-all active:scale-[0.98]" 
+              type="submit"
+            >
+              Gönder
+            </button>
+          </form>
+        </section>
+      </main>
+
+      {/* Map Section */}
+      <section className="w-full h-[500px] bg-surface-container-lowest relative overflow-hidden">
+        <div className="absolute inset-0 z-0">
+          <Image 
+            src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?q=80&w=2066&auto=format&fit=crop"
+            alt="Dalaman map mockup"
+            fill
+            className="object-cover grayscale contrast-125 brightness-50 opacity-80"
+          />
+        </div>
+        <div className="absolute inset-0 bg-surface/20"></div>
+        <div className="relative z-10 h-full flex items-center justify-center px-4">
+          <div className="bg-surface p-8 border-l-4 border-primary max-w-sm shadow-2xl">
+            <Navigation className="text-primary w-10 h-10 mb-4" />
+            <h3 className="text-2xl font-black uppercase tracking-tighter text-on-surface mb-2">Lokasyonumuz</h3>
+            <p className="text-on-surface-variant leading-relaxed mb-6 italic text-sm">
+              Dalaman Sanayi Sitesi'nin kalbinde, tüm Ege ve Akdeniz bölgesine hızlı erişim noktasındayız.
+            </p>
+            <a 
+              className="text-primary font-bold uppercase tracking-widest text-xs flex items-center gap-2 hover:gap-4 transition-all" 
+              href="https://maps.google.com"
+              target="_blank"
+            >
+              Yol Tarifi Al <ArrowRight className="w-4 h-4" />
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+      <FloatingWhatsApp />
+    </main>
+  );
+}

app/layout.tsx

@@ -1,20 +1,58 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Space_Grotesk, Inter } from "next/font/google";
 import "./globals.css";
+import { JsonLd } from "@/components/JsonLd";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const spaceGrotesk = Space_Grotesk({
+  variable: "--font-space-grotesk",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  metadataBase: new URL("https://aydogannakliyatvinc.com"), // Gerçek domain ile değiştirilmeli
+  title: {
+    default: "Aydoğan Nakliyat Vinç | Dalaman, Muğla, Ege Bölgesi",
+    template: "%s | Aydoğan Nakliyat Vinç"
+  },
+  description: "Muğla Dalaman merkezli profesyonel vinç kiralama ve ağır nakliyat hizmetleri. 7/24 tekne taşıma, konteyner nakliyesi ve tüm Türkiye geneli ağır yük çözümleri.",
+  keywords: ["vinç kiralama", "nakliyat", "muğla vinç", "dalaman vinç", "ağır nakliyat", "tekne taşıma", "konteyner taşıma", "ege bölgesi vinç", "türkiye geneli nakliyat"],
+  authors: [{ name: "Aydoğan Nakliyat" }],
+  creator: "Aydoğan Nakliyat",
+  publisher: "Aydoğan Nakliyat",
+  formatDetection: {
+    email: false,
+    address: true,
+    telephone: true,
+  },
+  openGraph: {
+    title: "Aydoğan Nakliyat Vinç | Dalaman, Muğla, Ege Bölgesi",
+    description: "Profesyonel vinç kiralama ve ağır nakliyat hizmetleri. 7/24 güvenilir çözümler.",
+    url: "https://aydogannakliyatvinc.com",
+    siteName: "Aydoğan Nakliyat Vinç",
+    locale: "tr_TR",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Aydoğan Nakliyat Vinç | Dalaman, Muğla, Ege Bölgesi",
+    description: "Profesyonel vinç kiralama ve ağır nakliyat hizmetleri.",
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
 };
 
 export default function RootLayout({
@@ -24,10 +62,14 @@ export default function RootLayout({
 }>) {
   return (
     <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      lang="tr"
+      className={`${spaceGrotesk.variable} ${inter.variable} h-full antialiased dark`}
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col relative">
+        <JsonLd />
+        <div className="noise-overlay" />
+        {children}
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -1,65 +1,31 @@
-import Image from "next/image";
+import { Navbar } from "@/components/Navbar";
+import { Hero } from "@/components/Hero";
+import { StatsGrid } from "@/components/StatsGrid";
+import { ServicesPreview } from "@/components/ServicesPreview";
+import { FleetSection } from "@/components/FleetSection";
+import { LoadMeterSection } from "@/components/LoadMeterSection";
+import { CTASection } from "@/components/CTASection";
+import { Footer } from "@/components/Footer";
+import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Aydoğan Nakliyat Vinç | Dalaman, Muğla Vinç Kiralama",
+  description: "Dalaman ve Muğla genelinde 7/24 vinç kiralama, ağır nakliyat, tekne taşıma ve konteyner nakliyesi. Güçlü filo, uzman kadro ve uygun fiyatlı çözümler.",
+};
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
+      <Navbar />
+      <Hero />
+      <StatsGrid />
+      <ServicesPreview />
+      <FleetSection />
+      <LoadMeterSection />
+      <CTASection />
+      <Footer />
+      <FloatingWhatsApp />
+    </main>
   );
 }

app/robots.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/private/',
+    },
+    sitemap: 'https://aydogannakliyatvinc.com/sitemap.xml',
+  };
+}

app/sitemap.ts

@@ -0,0 +1,38 @@
+import { MetadataRoute } from 'next';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = 'https://aydogannakliyatvinc.com';
+  
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/hizmetler`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/filomuz`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/hakkimizda`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.5,
+    },
+    {
+      url: `${baseUrl}/iletisim`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.6,
+    },
+  ];
+}