Belgeler ve Footer

app/belgeler/page.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { useState } from 'react';
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import Link from "next/link";
+
+export default function BelgelerPage() {
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  const categories = [
+    { id: 'all', name: 'Tümü', icon: '📋' },
+    { id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
+    { id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
+    { id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
+    { id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
+  ];
+
+  const documents = [
+    {
+      id: 1,
+      title: "A2 Metro Hattı İhale Şartnamesi",
+      category: 'ihale',
+      date: "15 Ocak 2025",
+      size: "2.4 MB",
+      type: "PDF",
+      description: "Metro inşaatı için teknik şartname ve ihale koşulları"
+    },
+    {
+      id: 2,
+      title: "Proje Teknik Çizimleri",
+      category: 'teknik',
+      date: "10 Şubat 2025",
+      size: "15.8 MB",
+      type: "DWG",
+      description: "Tüm istasyonların teknik mimari çizimleri"
+    },
+    {
+      id: 3,
+      title: "Çevresel Etki Değerlendirme Raporu",
+      category: 'cevresel',
+      date: "5 Mart 2025",
+      size: "4.2 MB",
+      type: "PDF",
+      description: "Proje çevresel etki analizi ve önlemler"
+    },
+    {
+      id: 4,
+      title: "2025 Mart Ayı İlerleme Raporu",
+      category: 'raporlar',
+      date: "1 Nisan 2025",
+      size: "1.8 MB",
+      type: "PDF",
+      description: "Aylık proje ilerleme ve istatistikler"
+    },
+    {
+      id: 5,
+      title: "Güvenlik Planı ve Prosedürleri",
+      category: 'teknik',
+      date: "20 Ocak 2025",
+      size: "3.1 MB",
+      type: "PDF",
+      description: "İnşaat sahası güvenlik protokolleri"
+    },
+    {
+      id: 6,
+      title: "İstasyon Tasarım Detayları",
+      category: 'teknik',
+      date: "8 Şubat 2025",
+      size: "8.5 MB",
+      type: "PDF",
+      description: "İstasyon iç ve dış mekan tasarım detayları"
+    },
+    {
+      id: 7,
+      title: "Finansman Planı",
+      category: 'ihale',
+      date: "12 Ocak 2025",
+      size: "1.2 MB",
+      type: "XLSX",
+      description: "Proje bütçe ve finansman dağılımı"
+    },
+    {
+      id: 8,
+      title: "2025 Nisan Ayı İlerleme Raporu",
+      category: 'raporlar',
+      date: "1 Mayıs 2025",
+      size: "2.1 MB",
+      type: "PDF",
+      description: "Aylık proje ilerleme ve istatistikler"
+    },
+    {
+      id: 9,
+      title: "Gürültü ve Titreşim Analizi",
+      category: 'cevresel',
+      date: "18 Mart 2025",
+      size: "3.8 MB",
+      type: "PDF",
+      description: "Çevre gürültü ve titreşim ölçüm sonuçları"
+    },
+  ];
+
+  const filteredDocs = selectedCategory === 'all' 
+    ? documents 
+    : documents.filter(doc => doc.category === selectedCategory);
+
+  const getFileIcon = (type: string) => {
+    switch (type) {
+      case 'PDF': return '📕';
+      case 'DWG': return '📐';
+      case 'XLSX': return '📊';
+      default: return '📄';
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#F8F9FA]">
+      <Header />
+
+      {/* Hero Section */}
+      <div className="bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center space-x-2 text-white/80 text-sm mb-4">
+            <Link href="/" className="hover:text-white transition-colors">Ana Sayfa</Link>
+            <span>/</span>
+            <span>Belgeler</span>
+          </div>
+          <h1 className="text-4xl font-bold text-white mb-4">Proje Belgeleri</h1>
+          <p className="text-lg text-white/90 max-w-3xl">
+            A2 Metro Hattı inşaat projesine ait tüm resmi belgeler, teknik dökümanlar ve raporlar.
+          </p>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        {/* Kategori Filtreleri */}
+        <div className="bg-white rounded-2xl shadow-lg p-6 mb-8">
+          <h2 className="text-xl font-bold text-[#004B87] mb-4">Kategoriler</h2>
+          <div className="flex flex-wrap gap-3">
+            {categories.map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => setSelectedCategory(cat.id)}
+                className={`flex items-center space-x-2 px-5 py-3 rounded-lg font-medium transition-all duration-300 ${
+                  selectedCategory === cat.id
+                    ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                <span className="text-xl">{cat.icon}</span>
+                <span>{cat.name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Belgeler Listesi */}
+        <div className="grid grid-cols-1 gap-6">
+          {filteredDocs.map((doc) => (
+            <div
+              key={doc.id}
+              className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group"
+            >
+              <div className="p-6 flex items-start space-x-4">
+                {/* Dosya İkonu */}
+                <div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl shrink-0 group-hover:scale-110 transition-transform duration-300">
+                  {getFileIcon(doc.type)}
+                </div>
+
+                {/* Belge Bilgileri */}
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-lg font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors">
+                    {doc.title}
+                  </h3>
+                  <p className="text-gray-600 text-sm mb-3">
+                    {doc.description}
+                  </p>
+                  <div className="flex flex-wrap gap-4 text-sm text-gray-500">
+                    <div className="flex items-center space-x-1">
+                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
+                      </svg>
+                      <span>{doc.date}</span>
+                    </div>
+                    <div className="flex items-center space-x-1">
+                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
+                      </svg>
+                      <span>{doc.type}</span>
+                    </div>
+                    <div className="flex items-center space-x-1">
+                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
+                        <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
+                        <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
+                      </svg>
+                      <span>{doc.size}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* İndirme Butonu */}
+                <button className="px-5 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center space-x-2 shrink-0">
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                  </svg>
+                  <span className="font-medium">İndir</span>
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Boş Sonuç */}
+        {filteredDocs.length === 0 && (
+          <div className="bg-white rounded-xl shadow-md p-12 text-center">
+            <div className="text-6xl mb-4">📭</div>
+            <h3 className="text-xl font-bold text-gray-700 mb-2">Belge Bulunamadı</h3>
+            <p className="text-gray-500">Bu kategoride henüz belge bulunmamaktadır.</p>
+          </div>
+        )}
+
+        {/* Bilgilendirme */}
+        <div className="mt-8 bg-blue-50 border-l-4 border-[#00B4D8] p-6 rounded-lg">
+          <div className="flex items-start space-x-3">
+            <svg className="w-6 h-6 text-[#00B4D8] shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+            </svg>
+            <div>
+              <h3 className="font-bold text-[#004B87] mb-1">Önemli Not</h3>
+              <p className="text-gray-700 text-sm">
+                Tüm belgeler resmi kaynaklardan alınmıştır. Belgelerin kullanımı ile ilgili sorularınız için 
+                <a href="https://www.ankara.bel.tr/" target="_blank" rel="noopener noreferrer" className="text-[#00B4D8] hover:underline ml-1">
+                  Ankara Büyükşehir Belediyesi
+                </a> ile iletişime geçebilirsiniz.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  );
+}

app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Ankara Metro - A2 Hattı İnşaat Projesi",
-  description: "Generated by create next app",
+  description: "Ankara Büyükşehir Belediyesi A2 Metro Hattı inşaat projesi - Dikimevi Metro Hattı",
 };
 
 export default function RootLayout({
@@ -23,9 +23,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="tr" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        suppressHydrationWarning
       >
         {children}
       </body>

app/page.tsx

@@ -1,20 +1,129 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import Header from "@/components/Header";
 import MetroLine from "@/components/MetroLine";
+import Footer from "@/components/Footer";
 
 export default function Home() {
   const [showLiveStream, setShowLiveStream] = useState(false);
   const [showNews, setShowNews] = useState(false);
   const [selectedNews, setSelectedNews] = useState<number | null>(null);
+  const [showDocuments, setShowDocuments] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  const categories = [
+    { id: 'all', name: 'Tümü', icon: '📋' },
+    { id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
+    { id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
+    { id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
+    { id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
+  ];
+
+  const documents = [
+    {
+      id: 1,
+      title: "A2 Metro Hattı İhale Şartnamesi",
+      category: 'ihale',
+      date: "15 Ocak 2025",
+      size: "2.4 MB",
+      type: "PDF",
+      description: "Metro inşaatı için teknik şartname ve ihale koşulları"
+    },
+    {
+      id: 2,
+      title: "Proje Teknik Çizimleri",
+      category: 'teknik',
+      date: "10 Şubat 2025",
+      size: "15.8 MB",
+      type: "DWG",
+      description: "Tüm istasyonların teknik mimari çizimleri"
+    },
+    {
+      id: 3,
+      title: "Çevresel Etki Değerlendirme Raporu",
+      category: 'cevresel',
+      date: "5 Mart 2025",
+      size: "4.2 MB",
+      type: "PDF",
+      description: "Proje çevresel etki analizi ve önlemler"
+    },
+    {
+      id: 4,
+      title: "2025 Mart Ayı İlerleme Raporu",
+      category: 'raporlar',
+      date: "1 Nisan 2025",
+      size: "1.8 MB",
+      type: "PDF",
+      description: "Aylık proje ilerleme ve istatistikler"
+    },
+    {
+      id: 5,
+      title: "Güvenlik Planı ve Prosedürleri",
+      category: 'teknik',
+      date: "20 Ocak 2025",
+      size: "3.1 MB",
+      type: "PDF",
+      description: "İnşaat sahası güvenlik protokolleri"
+    },
+    {
+      id: 6,
+      title: "İstasyon Tasarım Detayları",
+      category: 'teknik',
+      date: "8 Şubat 2025",
+      size: "8.5 MB",
+      type: "PDF",
+      description: "İstasyon iç ve dış mekan tasarım detayları"
+    },
+    {
+      id: 7,
+      title: "Finansman Planı",
+      category: 'ihale',
+      date: "12 Ocak 2025",
+      size: "1.2 MB",
+      type: "XLSX",
+      description: "Proje bütçe ve finansman dağılımı"
+    },
+    {
+      id: 8,
+      title: "2025 Nisan Ayı İlerleme Raporu",
+      category: 'raporlar',
+      date: "1 Mayıs 2025",
+      size: "2.1 MB",
+      type: "PDF",
+      description: "Aylık proje ilerleme ve istatistikler"
+    },
+    {
+      id: 9,
+      title: "Gürültü ve Titreşim Analizi",
+      category: 'cevresel',
+      date: "18 Mart 2025",
+      size: "3.8 MB",
+      type: "PDF",
+      description: "Çevre gürültü ve titreşim ölçüm sonuçları"
+    },
+  ];
+
+  const filteredDocs = selectedCategory === 'all' 
+    ? documents 
+    : documents.filter(doc => doc.category === selectedCategory);
+
+  const getFileIcon = (type: string) => {
+    switch (type) {
+      case 'PDF': return '📕';
+      case 'DWG': return '📐';
+      case 'XLSX': return '📊';
+      default: return '📄';
+    }
+  };
 
   const newsData = [
     {
       id: 1,
       title: "Dikimevi Metro Hattı İnşaatında Yeni Aşama",
       date: "20 Ekim 2025",
-      image: "https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?w=800&h=600&fit=crop",
+      image: "https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg",
       summary: "A2 Metro Hattı Tuzluçayır istasyonunda kazı çalışmaları tamamlandı. İnşaat ekipleri bir sonraki faza geçiş için hazırlıklara başladı.",
       content: "A2 Metro Hattı Tuzluçayır istasyonunda yapılan kazı çalışmaları başarıyla tamamlandı. İnşaat ekipleri, istasyonun temel atma ve beton dökme aşaması için hazırlıklara başladı. Proje yetkililerinin açıklamasına göre, çalışmalar planlanan takvime uygun olarak ilerliyor. İstasyonun 2026 yılı sonunda hizmete girmesi hedefleniyor. Modern teknolojilerle donatılacak istasyonda yolcu konforunu artıracak birçok yenilik bulunacak."
     },
@@ -22,7 +131,7 @@ export default function Home() {
       id: 2,
       title: "Metro İstasyonlarında Modern Tasarım",
       date: "18 Ekim 2025",
-      image: "https://images.unsplash.com/photo-1581579438747-1dc8d17bbce4?w=800&h=600&fit=crop",
+      image: "https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg",
       summary: "Yeni metro istasyonları çağdaş mimari anlayışı ve yolcu konforunu ön planda tutan tasarımlarla hayata geçiriliyor.",
       content: "Ankara metro projesi kapsamında inşa edilen istasyonlar, çağdaş mimari anlayışı ile dikkat çekiyor. İstasyonlarda doğal ışık kullanımı maksimize edilirken, enerji verimliliği de göz önünde bulunduruluyor. Geniş peronlar, modern bekleme alanları ve engelli erişimine uygun tasarım, yolcu memnuniyetini artıracak önemli detaylar arasında yer alıyor."
     },
@@ -30,7 +139,7 @@ export default function Home() {
       id: 3,
       title: "Çevre Dostu Metro Projesi",
       date: "15 Ekim 2025",
-      image: "https://images.unsplash.com/photo-1531825168889-e600e4998162?w=800&h=600&fit=crop",
+      image: "https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg",
       summary: "Metro inşaatında kullanılan malzemeler ve yöntemler çevre standartlarına uygun olarak seçiliyor.",
       content: "Ankara metro inşaatında çevre dostu malzemeler ve sürdürülebilir inşaat yöntemleri kullanılıyor. Kazı çalışmalarından çıkan topraklar geri dönüştürülüyor, inşaat atıkları ayrıştırılarak değerlendiriliyor. Proje, yeşil bina sertifikası almayı hedefliyor. Ayrıca, metro hatları elektrikli sistemle çalışacağı için karbon emisyonunu azaltacak."
     },
@@ -38,7 +147,7 @@ export default function Home() {
       id: 4,
       title: "Metro Hattı 2026'da Hizmete Girecek",
       date: "12 Ekim 2025",
-      image: "https://images.unsplash.com/photo-1568502802862-8dfb70d44c30?w=800&h=600&fit=crop",
+      image: "https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg",
       summary: "A2 Metro Hattı'nın ilk etabının 2026 yılı sonunda hizmete girmesi planlanıyor.",
       content: "Ankara Büyükşehir Belediyesi yetkilileri, A2 Metro Hattı'nın ilk etabının 2026 yılı sonunda hizmete açılacağını duyurdu. 8 istasyondan oluşan hat, günlük 100 bin yolcuya hizmet verecek. Modern trenler, konforlu istasyonlar ve güvenli sistem ile Ankara'nın ulaşım altyapısına önemli bir katkı sağlayacak. İlk etabın ardından hatın genişletilmesi planlanıyor."
     }
@@ -132,14 +241,17 @@ export default function Home() {
               </button>
 
               {/* Belgeler */}
-              <a href="/belgeler" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group">
+              <button
+                onClick={() => setShowDocuments(!showDocuments)}
+                className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
+              >
                 <div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
                   <svg fill="currentColor" viewBox="0 0 24 24">
                     <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                   </svg>
                 </div>
                 <span className="text-[#004B87] font-semibold text-sm">Belgeler</span>
-              </a>
+              </button>
 
               {/* Basında Biz */}
               <a href="/basinda-biz" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group">
@@ -351,8 +463,94 @@ export default function Home() {
         </div>
       )}
 
+      {/* Belgeler Bölümü */}
+      {showDocuments && (
+        <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews ? 'pt-8' : 'pt-32'} pb-8`}>
+          <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center space-x-3">
+                <div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
+                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
+                  </svg>
+                </div>
+                <h2 className="text-2xl font-bold text-[#004B87]">Proje Belgeleri</h2>
+              </div>
+              <button 
+                onClick={() => setShowDocuments(false)}
+                className="text-gray-500 hover:text-red-500 transition-colors"
+              >
+                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            {/* Kategori Filtreleri */}
+            <div className="mb-6">
+              <div className="flex flex-wrap gap-3">
+                {categories.map((cat) => (
+                  <button
+                    key={cat.id}
+                    onClick={() => setSelectedCategory(cat.id)}
+                    className={`flex items-center space-x-2 px-4 py-2 rounded-lg font-medium transition-all duration-300 ${
+                      selectedCategory === cat.id
+                        ? 'bg-[#00B4D8] text-white shadow-lg scale-105'
+                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    }`}
+                  >
+                    <span className="text-lg">{cat.icon}</span>
+                    <span className="text-sm">{cat.name}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Belgeler Listesi */}
+            <div className="grid grid-cols-1 gap-4 max-h-[600px] overflow-y-auto">
+              {filteredDocs.map((doc) => (
+                <div
+                  key={doc.id}
+                  className="bg-gray-50 rounded-xl p-5 hover:shadow-lg transition-all duration-300 group"
+                >
+                  <div className="flex items-start space-x-4">
+                    {/* Dosya İkonu */}
+                    <div className="w-12 h-12 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-lg flex items-center justify-center text-2xl shrink-0 group-hover:scale-110 transition-transform duration-300">
+                      {getFileIcon(doc.type)}
+                    </div>
+
+                    {/* Belge Bilgileri */}
+                    <div className="flex-1 min-w-0">
+                      <h3 className="text-base font-bold text-[#004B87] mb-1 group-hover:text-[#00B4D8] transition-colors">
+                        {doc.title}
+                      </h3>
+                      <p className="text-gray-600 text-sm mb-2">
+                        {doc.description}
+                      </p>
+                      <div className="flex flex-wrap gap-3 text-xs text-gray-500">
+                        <span>📅 {doc.date}</span>
+                        <span>📄 {doc.type}</span>
+                        <span>💾 {doc.size}</span>
+                      </div>
+                    </div>
+
+                    {/* İndirme Butonu */}
+                    <button className="px-4 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center space-x-2 shrink-0 text-sm">
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                      </svg>
+                      <span className="font-medium">İndir</span>
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Ana İçerik - Kartlar için üstten boşluk */}
-      <main className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews ? 'pt-8' : 'pt-32'} pb-12`}>
+      <main className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments ? 'pt-8' : 'pt-32'} pb-12`}>
         <div className="text-center mb-16">
           <h2 className="text-3xl font-bold text-white mb-4">
             Metro Hat Durumları
@@ -365,6 +563,9 @@ export default function Home() {
         {/* Metro İnşaat Projesi - Animasyonlu */}
         <MetroLine />
       </main>
+
+      {/* Footer */}
+      <Footer />
     </div>
   );
 }

components/Footer.tsx

@@ -0,0 +1,127 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] text-white mt-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Logo ve Bilgi */}
+          <div>
+            <div className="flex items-center space-x-3 mb-4">
+              <img 
+                src="https://www.mamak.bel.tr/images/logo.svg" 
+                alt="Mamak Belediyesi Logo"
+                className="w-12 h-12 object-contain"
+              />
+              <div className="flex flex-col">
+                <span className="text-[#48CAE4] text-sm font-semibold uppercase">T.C.</span>
+                <span className="text-white text-lg font-bold">Mamak Belediyesi</span>
+              </div>
+            </div>
+            <p className="text-gray-300 text-sm leading-relaxed">
+              A2 Metro Hattı İnşaat Projesi - Ankara'nın ulaşım altyapısına modern çözümler sunuyoruz.
+            </p>
+          </div>
+
+          {/* Hızlı Linkler */}
+          <div>
+            <h3 className="text-lg font-bold mb-4 text-[#48CAE4]">Hızlı Erişim</h3>
+            <ul className="space-y-2">
+              <li>
+                <a href="https://www.ankara.bel.tr/" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white transition-colors text-sm flex items-center space-x-2">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+                  </svg>
+                  <span>Ankara Büyükşehir Belediyesi</span>
+                </a>
+              </li>
+              <li>
+                <a href="https://www.mamak.bel.tr/" target="_blank" rel="noopener noreferrer" className="text-gray-300 hover:text-white transition-colors text-sm flex items-center space-x-2">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+                  </svg>
+                  <span>Mamak Belediyesi</span>
+                </a>
+              </li>
+              <li>
+                <Link href="#" className="text-gray-300 hover:text-white transition-colors text-sm flex items-center space-x-2">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
+                  </svg>
+                  <span>Proje Videoları</span>
+                </Link>
+              </li>
+              <li>
+                <Link href="#" className="text-gray-300 hover:text-white transition-colors text-sm flex items-center space-x-2">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+                  </svg>
+                  <span>Sıkça Sorulan Sorular</span>
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* İletişim Bilgileri */}
+          <div>
+            <h3 className="text-lg font-bold mb-4 text-[#48CAE4]">İletişim</h3>
+            <ul className="space-y-3">
+              <li className="flex items-start space-x-3">
+                <svg className="w-5 h-5 text-[#00B4D8] mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
+                </svg>
+                <span className="text-gray-300 text-sm">Mamak, Ankara</span>
+              </li>
+              <li className="flex items-center space-x-3">
+                <svg className="w-5 h-5 text-[#00B4D8] shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
+                </svg>
+                <a href="tel:+903123957500" className="text-gray-300 hover:text-white transition-colors text-sm">
+                  0312 395 75 00
+                </a>
+              </li>
+              <li className="flex items-center space-x-3">
+                <svg className="w-5 h-5 text-[#00B4D8] shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                </svg>
+                <a href="mailto:info@mamak.bel.tr" className="text-gray-300 hover:text-white transition-colors text-sm">
+                  info@mamak.bel.tr
+                </a>
+              </li>
+            </ul>
+
+            {/* Sosyal Medya */}
+            <div className="mt-6">
+              <h4 className="text-sm font-semibold mb-3 text-[#48CAE4]">Sosyal Medya</h4>
+              <div className="flex space-x-3">
+                <a href="#" className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <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="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+                  </svg>
+                </a>
+                <a href="#" className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors">
+                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Alt Bilgi */}
+        <div className="border-t border-white/10 mt-8 pt-8 text-center">
+          <p className="text-gray-400 text-sm">
+            © 2025 T.C. Mamak Belediyesi - A2 Metro Hattı İnşaat Projesi. Tüm hakları saklıdır.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Header.tsx

@@ -8,47 +8,41 @@ export default function Header() {
           {/* Logo - Sol taraf */}
           <div className="shrink-0">
             <Link href="/" className="flex items-center space-x-3">
-              <div className="text-[#00B4D8]">
+              <div className="w-12 h-12">
-                <svg className="w-12 h-12" viewBox="0 0 50 50" fill="currentColor">
+                <img 
-                  <path d="M25 5L5 15v20l20 10 20-10V15L25 5zm0 3.5L42 18v14l-17 8.5L8 32V18l17-9.5z"/>
+                  src="https://www.mamak.bel.tr/images/logo.svg" 
-                  <path d="M25 15l-10 5v10l10 5 10-5V20l-10-5zm0 3l7 3.5v7L25 32l-7-3.5v-7l7-3.5z"/>
+                  alt="Mamak Belediyesi Logo"
-                </svg>
+                  className="w-full h-full object-contain"
+                />
               </div>
               <div className="flex flex-col">
-                <span className="text-[#48CAE4] text-sm font-semibold uppercase tracking-wider">Ankara</span>
+                <span className="text-[#48CAE4] text-sm font-semibold uppercase tracking-wider">T.C.</span>
-                <span className="text-white text-xl font-bold">Büyükşehir Belediyesi</span>
+                <span className="text-white text-xl font-bold">Mamak Belediyesi</span>
               </div>
             </Link>
           </div>
 
-          {/* Sağ taraf - Dil, Hava Durumu, Arama ve Menü */}
+          {/* Sağ taraf - Arama ve İletişim */}
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-3">
-            {/* Dil seçimi */}
-            <button className="text-white text-sm font-semibold hover:text-[#48CAE4] transition-colors">
-              TR
-            </button>
-
-            {/* Hava durumu */}
-            <div className="flex items-center space-x-2 text-white">
-              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-              </svg>
-              <span className="text-sm font-medium">10°C</span>
-            </div>
-
             {/* Arama butonu */}
-            <button className="p-2 rounded-full border-2 border-white text-white hover:bg-[#00B4D8] hover:border-[#00B4D8] transition-colors">
+            <button className="p-2.5 rounded-full border-2 border-white text-white hover:bg-[#00B4D8] hover:border-[#00B4D8] transition-colors">
               <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
               </svg>
             </button>
 
-            {/* Menü butonu */}
+            {/* Bize Ulaşın - Ankara Belediyesi */}
-            <button className="p-3 rounded-lg bg-[#00B4D8] text-white hover:bg-[#48CAE4] transition-colors shadow-lg">
+            <a 
-              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              href="https://www.ankara.bel.tr/"
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center space-x-2 px-4 py-2.5 rounded-lg bg-[#00B4D8] text-white hover:bg-[#48CAE4] transition-colors shadow-lg"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
-            </button>
+              <span className="text-sm font-medium">Bize Ulaşın</span>
+            </a>
           </div>
         </div>
       </div>