Copilot Alınacak

app/iletisim/page.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+export default function Contact() {
+  return (
+    <div className="min-h-screen bg-[#003366]">
+      <Header />
+
+      <main className="pt-32 pb-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Başlık */}
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-white mb-4">
+              İletişim
+            </h1>
+            <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
+              A2 Metro Hattı projesi hakkında bilgi almak için bizimle iletişime geçebilirsiniz
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Sol Taraf - İletişim Kartları */}
+            <div className="space-y-6">
+              {/* Adres Kartı */}
+              <div className="bg-linear-to-br from-blue-50 to-blue-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                <div className="flex items-start space-x-4">
+                  <div className="w-16 h-16 bg-[#004B87] rounded-xl flex items-center justify-center shrink-0">
+                    <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-bold text-[#004B87] mb-2">ADRES</h3>
+                    <p className="text-gray-700 leading-relaxed">
+                      Emniyet Mah. Hipodrom Caddesi No: 5<br />
+                      Yenimahalle / Ankara
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* KEP Adresi Kartı */}
+              <div className="bg-linear-to-br from-cyan-50 to-cyan-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                <div className="flex items-start space-x-4">
+                  <div className="w-16 h-16 bg-[#00B4D8] rounded-xl flex items-center justify-center shrink-0">
+                    <svg className="w-8 h-8 text-white" 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>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-bold text-[#004B87] mb-2">KEP ADRESİ</h3>
+                    <a
+                      href="mailto:ankarabuyuksehirbelediyesi@hs01.kep.tr"
+                      className="text-gray-700 hover:text-[#00B4D8] transition-colors break-all"
+                    >
+                      ankarabuyuksehirbelediyesi@hs01.kep.tr
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              {/* Telefon Kartı */}
+              <div className="bg-linear-to-br from-indigo-50 to-indigo-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
+                <div className="flex items-start space-x-4">
+                  <div className="w-16 h-16 bg-[#004B87] rounded-xl flex items-center justify-center shrink-0">
+                    <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                    </svg>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-bold text-[#004B87] mb-2">TELEFON</h3>
+                    <a
+                      href="tel:+903125071000"
+                      className="text-xl font-semibold text-gray-700 hover:text-[#00B4D8] transition-colors"
+                    >
+                      +90 (312) 507 10 00
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              {/* Çalışma Saatleri */}
+              <div className="bg-linear-to-br from-green-50 to-green-100 rounded-xl p-6">
+                <div className="flex items-start space-x-4">
+                  <div className="w-16 h-16 bg-green-600 rounded-xl flex items-center justify-center shrink-0">
+                    <svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-lg font-bold text-[#004B87] mb-2">ÇALIŞMA SAATLERİ</h3>
+                    <p className="text-gray-700">
+                      <strong>Hafta İçi:</strong> 08:30 - 17:30<br />
+                      <strong>Hafta Sonu:</strong> Kapalı
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Sağ Taraf - Harita */}
+            <div className="space-y-4">
+              <h3 className="text-xl font-bold text-white mb-4">Konum</h3>
+              <div className="rounded-xl overflow-hidden shadow-lg h-[600px]">
+                <iframe
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3059.2326827229665!2d32.8548!3d39.9458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34f190a9c6b1f%3A0x5d3f8b8a8b8a8b8a!2sEmniyet%2C%20Hipodrom%20Cd.%20No%3A5%2C%2006430%20Yenimahalle%2FAnkara!5e0!3m2!1str!2str!4v1234567890123!5m2!1str!2str"
+                  width="100%"
+                  height="100%"
+                  style={{ border: 0 }}
+                  allowFullScreen
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                ></iframe>
+              </div>
+
+              {/* Haritada Göster Butonu */}
+              <a
+                href="https://maps.app.goo.gl/82STypmZqeSW0mQC6"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl"
+              >
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
+                </svg>
+                <span>Google Maps'te Aç</span>
+              </a>
+            </div>
+          </div>
+
+          {/* İletişim Formu Bölümü */}
+          <div className="mt-16">
+            <div className="bg-white rounded-2xl shadow-2xl p-8">
+              <div className="text-center mb-8">
+                <h2 className="text-3xl font-bold text-[#004B87] mb-4">
+                  Bize Ulaşın
+                </h2>
+                <p className="text-gray-600 max-w-2xl mx-auto">
+                  A2 Metro Hattı projesi hakkında sorularınız için aşağıdaki formu doldurabilir veya doğrudan bizimle iletişime geçebilirsiniz.
+                </p>
+              </div>
+
+              <form className="max-w-2xl mx-auto space-y-6" onSubmit={(e) => {
+                e.preventDefault();
+                alert('Mesajınız gönderildi! (Demo)');
+              }}>
+                {/* İki Sütunlu Alan */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {/* Ad Soyad */}
+                  <div>
+                    <label htmlFor="contact-name" className="block text-sm font-semibold text-[#004B87] mb-2">
+                      Ad Soyad <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      id="contact-name"
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                      placeholder="Adınız ve Soyadınız"
+                    />
+                  </div>
+
+                  {/* E-posta */}
+                  <div>
+                    <label htmlFor="contact-email" className="block text-sm font-semibold text-[#004B87] mb-2">
+                      E-posta <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="email"
+                      id="contact-email"
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                      placeholder="ornek@email.com"
+                    />
+                  </div>
+
+                  {/* Telefon */}
+                  <div>
+                    <label htmlFor="contact-phone" className="block text-sm font-semibold text-[#004B87] mb-2">
+                      Telefon
+                    </label>
+                    <input
+                      type="tel"
+                      id="contact-phone"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                      placeholder="0(5__) ___ __ __"
+                    />
+                  </div>
+
+                  {/* Konu */}
+                  <div>
+                    <label htmlFor="contact-subject" className="block text-sm font-semibold text-[#004B87] mb-2">
+                      Konu <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      id="contact-subject"
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all text-gray-900 placeholder:text-gray-500"
+                      placeholder="Mesaj konusu"
+                    />
+                  </div>
+                </div>
+
+                {/* Mesaj */}
+                <div>
+                  <label htmlFor="contact-message" className="block text-sm font-semibold text-[#004B87] mb-2">
+                    Mesajınız <span className="text-red-500">*</span>
+                  </label>
+                  <textarea
+                    id="contact-message"
+                    required
+                    rows={6}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#00B4D8] focus:border-transparent outline-none transition-all resize-none text-gray-900 placeholder:text-gray-500"
+                    placeholder="Lütfen mesajınızı yazınız..."
+                  ></textarea>
+                </div>
+
+                {/* KVKK Onayı */}
+                <div className="flex items-start">
+                  <input
+                    type="checkbox"
+                    id="contact-kvkk"
+                    required
+                    className="w-4 h-4 mt-1 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
+                  />
+                  <label htmlFor="contact-kvkk" className="ml-3 text-sm text-gray-700">
+                    <span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
+                    <a href="#" className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</a>'ni okudum ve kabul ediyorum.
+                  </label>
+                </div>
+
+                {/* Gönder Butonu */}
+                <div className="text-center pt-4">
+                  <button
+                    type="submit"
+                    className="px-8 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl flex items-center justify-center space-x-2 mx-auto"
+                  >
+                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                    </svg>
+                    <span>Gönder</span>
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

app/page.tsx

@@ -301,7 +301,7 @@ export default function Home() {
         </div>
 
         {/* Alt Menü Kartları - Slide üzerine bindiriyor (yarısı üstte) */}
-        <div className="absolute bottom-0 left-0 right-0 xz-20 translate-y-1/2">
+        <div className="absolute bottom-0 left-0 right-0 z-20 translate-y-3/4">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
               {/* Canlı Yayın */}
@@ -1224,7 +1224,7 @@ export default function Home() {
           <h2 className="text-3xl font-bold text-white mb-4">
             Metro Hat Durumları
           </h2>
-          <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
+          <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto mb-8">
             Ankara Metro hatları ve durak bilgileri. Metro treni şu anda hangi durakta görebilirsiniz.
           </p>
         </div>

app/sss/page.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState } from 'react';
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+export default function FAQ() {
+  const [openFAQ, setOpenFAQ] = useState<number | null>(null);
+
+  const faqs = [
+    {
+      id: 1,
+      question: 'A2 Metro Hattı projesi ne zaman tamamlanacak?',
+      answer: 'A2 Metro Hattı projesinin 2026 yılı sonunda tamamlanması planlanmaktadır. Proje, Dikimevi-Natoyolu güzergâhında 6.5 kilometre uzunluğunda ve 5 istasyonlu bir metro hattı inşasını kapsamaktadır.'
+    },
+    {
+      id: 2,
+      question: 'Metro hattı hangi istasyonları kapsayacak?',
+      answer: 'A2 Metro Hattı aşağıdaki istasyonları içerecektir: Dikimevi İstasyonu, Tuzluçayır İstasyonu, Natoyolu İstasyonu ve diğer ara istasyonlar. Toplam 5 istasyon bulunacaktır.'
+    },
+    {
+      id: 3,
+      question: 'İnşaat çalışmaları sırasında trafik nasıl etkilenecek?',
+      answer: 'İnşaat çalışmaları sırasında geçici trafik düzenlemeleri uygulanacaktır. Alternatif güzergâhlar belirlenecek ve yönlendirme levhaları yerleştirilecektir. Vatandaşlarımızın anlayışına sığınıyoruz.'
+    },
+    {
+      id: 4,
+      question: 'Proje maliyeti ne kadar?',
+      answer: 'A2 Metro Hattı projesinin toplam maliyeti yaklaşık 2.5 milyar TL olarak belirlenmiştir. Bu maliyet, tünel kazısı, istasyon inşaatı, ray döşeme ve elektrik-elektronik sistemleri kapsamaktadır.'
+    },
+    {
+      id: 5,
+      question: 'Çevreye etkisi ne olacak?',
+      answer: 'Proje, çevre dostu teknolojiler kullanılarak gerçekleştirilmektedir. Çevresel Etki Değerlendirme (ÇED) raporu hazırlanmış ve gerekli izinler alınmıştır. İnşaat sırasında toz kontrolü ve gürültü önleme tedbirleri uygulanacaktır.'
+    },
+    {
+      id: 6,
+      question: 'İstasyonlar hangi özelliklere sahip olacak?',
+      answer: 'İstasyonlar modern mimari tasarımla, enerji verimliliği, erişilebilirlik ve güvenlik ön planda tutularak inşa edilecektir. Güneş enerjisi panelleri, LED aydınlatma ve akıllı havalandırma sistemleri kullanılacaktır.'
+    },
+    {
+      id: 7,
+      question: 'İnşaatta hangi teknolojiler kullanılacak?',
+      answer: 'Proje kapsamında TBM (Tunnel Boring Machine) tünel açma makinesi kullanılacaktır. Bu teknoloji sayesinde kazı çalışmaları daha hızlı ve güvenli şekilde gerçekleştirilecektir.'
+    },
+    {
+      id: 8,
+      question: 'Proje ilerleme durumu nasıl takip edilebilir?',
+      answer: 'Bu web sitesi üzerinden canlı yayın, haberler ve medya galerisi bölümlerinden proje ilerleme durumunu takip edebilirsiniz. Ayrıca aylık ilerleme raporları yayınlanmaktadır.'
+    },
+    {
+      id: 9,
+      question: 'İş güvenliği nasıl sağlanacak?',
+      answer: 'İnşaat alanında uluslararası standartlarda iş güvenliği tedbirleri uygulanmaktadır. Düzenli güvenlik eğitimleri verilir ve acil durum prosedürleri hazırlanmıştır.'
+    },
+    {
+      id: 10,
+      question: 'Vatandaşlar proje hakkında nasıl bilgi alabilir?',
+      answer: 'Bu web sitesi, sosyal medya hesapları ve tanıtım etkinlikleri aracılığıyla proje hakkında detaylı bilgi alınabilir. Ayrıca iletişim bölümünden sorularınızı iletebilirsiniz.'
+    }
+  ];
+
+  const toggleFAQ = (id: number) => {
+    setOpenFAQ(openFAQ === id ? null : id);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#003366]">
+      <Header />
+
+      <main className="pt-32 pb-16">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Başlık */}
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold text-white mb-4">
+              Sıkça Sorulan Sorular
+            </h1>
+            <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
+              A2 Metro Hattı projesi hakkında merak ettiğiniz soruların cevapları
+            </p>
+          </div>
+
+          {/* SSS Listesi */}
+          <div className="space-y-4">
+            {faqs.map((faq) => (
+              <div
+                key={faq.id}
+                className="bg-white rounded-xl shadow-lg overflow-hidden"
+              >
+                <button
+                  onClick={() => toggleFAQ(faq.id)}
+                  className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors"
+                >
+                  <h3 className="text-lg font-semibold text-[#004B87] pr-4">
+                    {faq.question}
+                  </h3>
+                  <svg
+                    className={`w-6 h-6 text-[#00B4D8] transform transition-transform duration-200 ${
+                      openFAQ === faq.id ? 'rotate-180' : ''
+                    }`}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+
+                {openFAQ === faq.id && (
+                  <div className="px-6 pb-4">
+                    <div className="border-t border-gray-200 pt-4">
+                      <p className="text-gray-700 leading-relaxed">
+                        {faq.answer}
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* İletişim CTA */}
+          <div className="mt-12 text-center">
+            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
+              <h3 className="text-xl font-bold text-white mb-4">
+                Başka Sorunuz Mu Var?
+              </h3>
+              <p className="text-[#F8F9FA] mb-6">
+                Yukarıdaki sorular dışında merak ettiğiniz konular için bizimle iletişime geçebilirsiniz.
+              </p>
+              <a
+                href="/#iletisim"
+                className="inline-block bg-[#00B4D8] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[#0099B8] transition-colors"
+              >
+                İletişime Geç
+              </a>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

components/Footer.tsx

@@ -22,40 +22,51 @@ export default function Footer() {
           {/* 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 className="grid grid-cols-2 gap-2">
+              <Link href="/" className="text-gray-300 hover:text-white transition-colors text-xs flex items-center space-x-2 p-2 rounded hover:bg-white/10">
+                <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>Ana Sayfa</span>
+              </Link>
+              <Link href="/canli-yayin" className="text-gray-300 hover:text-white transition-colors text-xs flex items-center space-x-2 p-2 rounded hover:bg-white/10">
+                <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>Canlı Yayın</span>
+              </Link>
+              <Link href="/haberler" className="text-gray-300 hover:text-white transition-colors text-xs flex items-center space-x-2 p-2 rounded hover:bg-white/10">
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clipRule="evenodd" />
+                </svg>
+                <span>Haberler</span>
+              </Link>
+              <Link href="/medya" className="text-gray-300 hover:text-white transition-colors text-xs flex items-center space-x-2 p-2 rounded hover:bg-white/10">
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+                </svg>
+                <span>Medya Galerisi</span>
+              </Link>
+              <Link href="/sss" className="text-gray-300 hover:text-white transition-colors text-xs flex items-center space-x-2 p-2 rounded hover:bg-white/10">
+                <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>SSS</span>
+              </Link>
+              <Link href="/belgeler" className="text-gray-300 hover:text-white transition-colors text-xs flex items-center space-x-2 p-2 rounded hover:bg-white/10">
+                <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-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
+                </svg>
+                <span>Belgeler</span>
+              </Link>
+              <Link href="/iletisim" className="text-gray-300 hover:text-white transition-colors text-xs flex items-center space-x-2 p-2 rounded hover:bg-white/10">
+                <svg className="w-4 h-4" 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>
+                <span>İletişim</span>
+              </Link>
+            </div>
           </div>
 
           {/* İletişim Bilgileri */}

components/Header.tsx

@@ -8,8 +8,10 @@ export default function Header() {
     { href: '/', icon: '🏠', title: 'Ana Sayfa', desc: 'Projeye genel bakış' },
     { href: '/canli-yayin', icon: '📹', title: 'Canlı Yayın', desc: 'İnşaatı canlı izleyin' },
     { href: '/haberler', icon: '📰', title: 'Haberler', desc: 'Güncel haberler' },
+    { href: '/medya', icon: '📸', title: 'Medya Galerisi', desc: 'Videolar ve fotoğraflar' },
+    { href: '/sss', icon: '❓', title: 'Sıkça Sorulan Sorular', desc: 'SSS ve cevaplar' },
     { href: '/belgeler', icon: '📄', title: 'Belgeler', desc: 'Teknik dokümanlar' },
-    { href: '/#iletisim', icon: '📧', title: 'İletişim', desc: 'Bize ulaşın' },
+    { href: '/iletisim', icon: '📧', title: 'İletişim', desc: 'Bize ulaşın' },
     { href: 'https://www.ankara.bel.tr/', icon: '🏛️', title: 'Ankara Belediyesi', desc: 'Resmi web sitesi', external: true },
   ];