diff --git a/app/belgeler/page.tsx b/app/belgeler/page.tsx index 4affd95..f3269a1 100644 --- a/app/belgeler/page.tsx +++ b/app/belgeler/page.tsx @@ -3,243 +3,183 @@ 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('all'); +export default function Documents() { + const [selectedCategory, setSelectedCategory] = useState('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: '📊' }, + { id: 'all', name: 'Tümü', icon: '📁' }, + { id: 'technical', name: 'Teknik Dokümanlar', icon: '📐' }, + { id: 'reports', name: 'Raporlar', icon: '📊' }, + { id: 'permissions', name: 'İzinler', icon: '✅' }, + { id: 'presentations', name: 'Sunumlar', 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ı" + category: 'technical', + title: 'A2 Metro Hattı Teknik Şartnamesi', + description: 'Proje kapsamındaki tüm teknik detaylar', + date: '15 Ekim 2025', + size: '12.5 MB', + type: 'PDF', + icon: '📐', }, { 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" + category: 'technical', + title: 'İstasyon Mimari Projesi', + description: 'İstasyon binalarının mimari tasarımı', + date: '12 Ekim 2025', + size: '25.8 MB', + type: 'PDF', + icon: '🏗️', }, { 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" + category: 'technical', + title: 'Güvenlik Planı ve Prosedürleri', + description: 'İş güvenliği planı ve acil durum prosedürleri', + date: '10 Ekim 2025', + size: '6.8 MB', + type: 'PDF', + icon: '🛡️', }, { 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" + category: 'technical', + title: 'Malzeme Spesifikasyonları', + description: 'İnşaatta kullanılacak malzeme detayları', + date: '8 Ekim 2025', + size: '9.2 MB', + type: 'PDF', + icon: '🔧', }, { 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" + category: 'reports', + title: 'ÇED Raporu', + description: 'Çevresel Etki Değerlendirme', + date: '5 Ekim 2025', + size: '8.3 MB', + type: 'PDF', + icon: '🌍', }, { 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ı" + category: 'reports', + title: 'Eylül 2025 İlerleme Raporu', + description: 'Aylık proje ilerleme durumu', + date: '1 Ekim 2025', + size: '3.2 MB', + type: 'PDF', + icon: '📈', }, { 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ı" + category: 'reports', + title: 'Ağustos 2025 İlerleme Raporu', + description: 'Aylık proje ilerleme durumu', + date: '1 Eylül 2025', + size: '3.1 MB', + type: 'PDF', + icon: '📈', }, { 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" + category: 'permissions', + title: 'İnşaat Ruhsatı', + description: 'Belediye onaylı inşaat ruhsatı belgesi', + date: '5 Eylül 2025', + size: '1.5 MB', + type: 'PDF', + icon: '✅', }, { 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ı" + category: 'permissions', + title: 'Kamulaştırma İzin Belgeleri', + description: 'Proje alanı kamulaştırma işlem belgeleri', + date: '28 Ağustos 2025', + size: '4.7 MB', + type: 'PDF', + icon: '📋', + }, + { + id: 10, + category: 'permissions', + title: 'Çalışma İzin Belgeleri', + description: 'İlgili kurumlardan alınan çalışma izinleri', + date: '15 Ağustos 2025', + size: '2.8 MB', + type: 'PDF', + icon: '📄', + }, + { + id: 11, + category: 'presentations', + title: 'A2 Metro Hattı Tanıtım Sunumu', + description: 'Genel tanıtım ve proje özeti sunumu', + date: '20 Eylül 2025', + size: '15.6 MB', + type: 'PPTX', + icon: '📽️', + }, + { + id: 12, + category: 'presentations', + title: 'Teknik Altyapı Sunumu', + description: 'Tünel ve istasyon altyapı detayları', + date: '15 Eylül 2025', + size: '22.4 MB', + type: 'PPTX', + icon: '🎯', }, ]; - 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 filteredDocs = selectedCategory === 'all' ? documents : documents.filter(d => d.category === selectedCategory); return ( -
+
- - {/* Hero Section */} -
+
-
- Ana Sayfa - / - Belgeler +
+

Belgeler

+

A2 Metro Hattı proje belgeleri

-

Proje Belgeleri

-

- A2 Metro Hattı inşaat projesine ait tüm resmi belgeler, teknik dökümanlar ve raporlar. -

-
-
- - {/* Main Content */} -
- {/* Kategori Filtreleri */} -
-

Kategoriler

-
+ +
{categories.map((cat) => ( ))}
-
- {/* Belgeler Listesi */} -
- {filteredDocs.map((doc) => ( -
-
- {/* Dosya İkonu */} -
- {getFileIcon(doc.type)} +
+ {filteredDocs.map((doc) => ( +
+
{doc.icon}
+

{doc.title}

+

{doc.description}

+
+
{doc.date}
+
{doc.size}
- - {/* Belge Bilgileri */} -
-

- {doc.title} -

-

- {doc.description} -

-
-
- - - - {doc.date} -
-
- - - - {doc.type} -
-
- - - - - - {doc.size} -
-
-
- - {/* İndirme Butonu */} - +
-
- ))} -
- - {/* Boş Sonuç */} - {filteredDocs.length === 0 && ( -
-
📭
-

Belge Bulunamadı

-

Bu kategoride henüz belge bulunmamaktadır.

-
- )} - - {/* Bilgilendirme */} -
-
- - - -
-

Önemli Not

-

- Tüm belgeler resmi kaynaklardan alınmıştır. Belgelerin kullanımı ile ilgili sorularınız için - - Ankara Büyükşehir Belediyesi - ile iletişime geçebilirsiniz. -

-
+ ))}
-
- +
); diff --git a/app/canli-yayin/page.tsx b/app/canli-yayin/page.tsx new file mode 100644 index 0000000..9d906c4 --- /dev/null +++ b/app/canli-yayin/page.tsx @@ -0,0 +1,222 @@ +'use client'; + +import { useState } from 'react'; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +export default function LiveStream() { + const [selectedCamera, setSelectedCamera] = useState(1); + + const cameras = [ + { + id: 1, + name: 'Dikimevi İstasyonu - Ana Giriş', + location: 'Dikimevi', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1', + status: 'online', + viewers: 1243 + }, + { + id: 2, + name: 'Tuzluçayır İstasyonu - İnşaat Sahası', + location: 'Tuzluçayır', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1', + status: 'online', + viewers: 856 + }, + { + id: 3, + name: 'A2 Metro Hattı - Tünel Kazı Çalışması', + location: 'Mamak', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1', + status: 'online', + viewers: 2134 + }, + { + id: 4, + name: 'İstasyon Binası İç Mekan', + location: 'Dikimevi', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1', + status: 'online', + viewers: 534 + } + ]; + + const selectedCam = cameras.find(cam => cam.id === selectedCamera) || cameras[0]; + + return ( +
+
+ +
+
+ {/* Başlık */} +
+
+
+

Canlı Yayın

+
+

+ A2 Metro Hattı inşaat çalışmalarını 7/24 canlı izleyin +

+
+ + {/* Ana Video Player */} +
+ {/* Video */} +
+ +
+ + {/* Video Bilgileri */} +
+
+
+
+ +
+ CANLI + + + 📍 {selectedCam.location} + +
+

+ {selectedCam.name} +

+
+
+ + + + + {selectedCam.viewers.toLocaleString('tr-TR')} izleyici +
+
+ + + + 24/7 Yayında +
+
+
+ + {/* Paylaş Butonu */} + +
+ + {/* Açıklama */} +
+

Canlı Yayın Hakkında

+

+ A2 Metro Hattı inşaat çalışmalarını şeffaflık ilkesi doğrultusunda 7/24 canlı olarak yayınlıyoruz. + İnşaat ilerlemesini takip edebilir, çalışmaların her aşamasını görebilirsiniz. +

+
+
+
+ + {/* Diğer Kameralar */} +
+

Diğer Kameralar

+
+ {cameras.map((camera) => ( + + ))} +
+
+ + {/* İstatistikler */} +
+
+
+ + + +
+

4

+

Aktif Kamera

+
+ +
+
+ + + + +
+

4,767

+

Toplam İzleyici

+
+ +
+
+ + + +
+

24/7

+

Kesintisiz Yayın

+
+
+
+
+ +
+
+ ); +} diff --git a/app/haberler/page.tsx b/app/haberler/page.tsx new file mode 100644 index 0000000..310a717 --- /dev/null +++ b/app/haberler/page.tsx @@ -0,0 +1,282 @@ +'use client'; + +import { useState } from 'react'; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +export default function News() { + const [selectedCategory, setSelectedCategory] = useState('all'); + const [selectedNews, setSelectedNews] = useState(null); + + const categories = [ + { id: 'all', name: 'Tümü', icon: '📰' }, + { id: 'construction', name: 'İnşaat', icon: '🏗️' }, + { id: 'announcements', name: 'Duyurular', icon: '📢' }, + { id: 'events', name: 'Etkinlikler', icon: '🎉' }, + ]; + + const news = [ + { + id: 1, + category: 'construction', + title: 'A2 Metro Hattı Kazı Çalışmaları Hızla İlerliyor', + summary: 'Dikimevi-Natoyolu Metro Hattı inşaat çalışmaları planlandığı gibi devam ediyor.', + image: 'https://picsum.photos/800/450?random=1', + date: '15 Ekim 2025', + author: 'Ankara Büyükşehir Belediyesi', + content: 'A2 Metro Hattı kapsamında Dikimevi-Natoyolu güzergâhında yürütülen kazı çalışmaları planlandığı şekilde devam ediyor. 6.5 kilometre uzunluğundaki hat üzerinde 5 istasyon inşa edilecek. Proje, Ankara\'nın ulaşım altyapısına önemli bir katkı sağlayacak.', + tags: ['Metro', 'İnşaat', 'A2 Hattı'] + }, + { + id: 2, + category: 'announcements', + title: 'Yeni İstasyon Tasarımları Açıklandı', + summary: 'Modern ve çevre dostu istasyon tasarımları kamuoyuyla paylaşıldı.', + image: 'https://picsum.photos/800/450?random=2', + date: '12 Ekim 2025', + author: 'Proje Yönetimi', + content: 'A2 Metro Hattı istasyonlarının mimari tasarımları tamamlandı. Tasarımlarda enerji verimliliği, erişilebilirlik ve modern estetik ön planda tutuldu. İstasyonlarda güneş enerjisi panelleri, LED aydınlatma ve akıllı havalandırma sistemleri kullanılacak.', + tags: ['Tasarım', 'Sürdürülebilirlik', 'İstasyon'] + }, + { + id: 3, + category: 'construction', + title: 'Dikimevi İstasyonu Temel Atma Töreni Gerçekleştirildi', + summary: 'Dikimevi İstasyonu\'nun temel atma töreni büyük bir coşkuyla yapıldı.', + image: 'https://picsum.photos/800/450?random=3', + date: '8 Ekim 2025', + author: 'Ankara Büyükşehir Belediyesi', + content: 'A2 Metro Hattı\'nın önemli duraklarından biri olan Dikimevi İstasyonu\'nun temel atma töreni gerçekleştirildi. Törene Ankara Büyükşehir Belediye Başkanı, milletvekilleri ve bölge sakinleri katıldı. İstasyonun 2026 yılı sonunda hizmete girmesi planlanıyor.', + tags: ['Tören', 'Dikimevi', 'Milestone'] + }, + { + id: 4, + category: 'events', + title: 'Metro Projesi Tanıtım Günleri Düzenlendi', + summary: 'Vatandaşlarımız proje hakkında detaylı bilgi aldı.', + image: 'https://picsum.photos/800/450?random=4', + date: '5 Ekim 2025', + author: 'Halkla İlişkiler', + content: 'A2 Metro Hattı Projesi\'ni tanıtmak amacıyla düzenlenen etkinlikte vatandaşlar, proje yetkilileriyle bir araya geldi. Etkinlikte 3D animasyonlar, maketler ve interaktif sunumlarla proje detayları anlatıldı. Vatandaşların soruları cevaplandı.', + tags: ['Tanıtım', 'Etkinlik', 'Halkla İlişkiler'] + }, + { + id: 5, + category: 'announcements', + title: 'Trafik Düzenlemesi Duyurusu', + summary: 'İnşaat nedeniyle bazı yollarda geçici trafik düzenlemeleri yapılacak.', + image: 'https://picsum.photos/800/450?random=5', + date: '1 Ekim 2025', + author: 'Ulaşım Koordinasyon', + content: 'A2 Metro Hattı inşaatı kapsamında Dikimevi-Tuzluçayır güzergâhında geçici trafik düzenlemeleri uygulanacak. Alternatif güzergâhlar belirlenmiş olup, yönlendirme levhaları yerleştirilmiştir. Vatandaşlarımızın anlayışına sığınıyoruz.', + tags: ['Trafik', 'Duyuru', 'Koordinasyon'] + }, + { + id: 6, + category: 'construction', + title: 'TBM Makinesi Tünele Girdi', + summary: 'Dev tünel açma makinesi (TBM) çalışmalara başladı.', + image: 'https://picsum.photos/800/450?random=6', + date: '28 Eylül 2025', + author: 'İnşaat Ekibi', + content: 'A2 Metro Hattı tünel kazı çalışmalarında kullanılacak TBM (Tunnel Boring Machine) makinesi tünele girdi. 120 metrelik dev makine, günde ortalama 15 metre ilerleme kaydedecek. TBM teknolojisi sayesinde kazı çalışmaları daha hızlı ve güvenli şekilde yapılıyor.', + tags: ['TBM', 'Tünel', 'Teknoloji'] + } + ]; + + const filteredNews = selectedCategory === 'all' + ? news + : news.filter(item => item.category === selectedCategory); + + const selectedNewsItem = news.find(item => item.id === selectedNews); + + return ( +
+
+ +
+
+ {/* Başlık */} +
+

Haberler ve Duyurular

+

+ A2 Metro Hattı projesi ile ilgili güncel haberler, duyurular ve etkinlikler +

+
+ + {/* Kategori Filtreleri */} +
+ {categories.map((category) => ( + + ))} +
+ + {/* Haber Grid */} +
+ {filteredNews.map((item) => ( +
setSelectedNews(item.id)} + className="bg-white rounded-2xl shadow-lg overflow-hidden cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl" + > + {/* Görsel */} +
+ {item.title} +
+ + {categories.find(c => c.id === item.category)?.name} + +
+
+ + {/* İçerik */} +
+
+ + + + {item.date} +
+ +

+ {item.title} +

+ +

+ {item.summary} +

+ +
+ + {item.author} + + +
+
+
+ ))} +
+ + {/* Haber Bulunamadı */} + {filteredNews.length === 0 && ( +
+
📰
+

Henüz Haber Yok

+

Bu kategoride henüz haber bulunmuyor.

+
+ )} +
+
+ + {/* Haber Detay Modal */} + {selectedNewsItem && ( +
+
+ {/* Görsel */} +
+ {selectedNewsItem.title} + +
+ + {categories.find(c => c.id === selectedNewsItem.category)?.name} + +
+
+ + {/* İçerik */} +
+
+
+ + + + {selectedNewsItem.date} +
+
+ + + + {selectedNewsItem.author} +
+
+ +

+ {selectedNewsItem.title} +

+ +

+ {selectedNewsItem.content} +

+ + {/* Etiketler */} +
+ {selectedNewsItem.tags.map((tag, index) => ( + + #{tag} + + ))} +
+ + {/* Paylaş */} +
+
+ Haberi Paylaş: +
+ + + +
+
+
+
+
+
+ )} + +
+
+ ); +} diff --git a/app/medya/page.tsx b/app/medya/page.tsx new file mode 100644 index 0000000..c7b5073 --- /dev/null +++ b/app/medya/page.tsx @@ -0,0 +1,286 @@ +'use client'; + +import { useState } from 'react'; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +export default function MediaGallery() { + const [selectedTab, setSelectedTab] = useState<'all' | 'video' | 'photo'>('all'); + const [selectedMedia, setSelectedMedia] = useState(null); + + const mediaItems = [ + { + id: 1, + type: 'video', + title: 'A2 Metro Hattı Genel Tanıtım', + thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg', + date: '15 Ekim 2025', + duration: '5:32', + description: 'A2 Metro Hattı projesinin genel tanıtımı ve istasyonların detayları' + }, + { + id: 2, + type: 'photo', + title: 'Dikimevi İstasyonu İnşaat Çalışmaları', + thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg', + date: '12 Ekim 2025', + description: 'Dikimevi metro istasyonunda devam eden kazı ve inşaat çalışmaları' + }, + { + id: 3, + type: 'photo', + title: 'Tuzluçayır İstasyonu Temel Atma', + thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg', + date: '10 Ekim 2025', + description: 'Tuzluçayır istasyonunun temel atma töreni anları' + }, + { + id: 4, + type: 'video', + title: 'Metro İnşaatı İlerleme Raporu', + thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg', + date: '8 Ekim 2025', + duration: '8:15', + description: 'Ekim ayı metro inşaatı ilerleme raporu ve gelecek hedefler' + }, + { + id: 5, + type: 'photo', + title: 'Modern İstasyon Tasarımları', + thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg', + date: '5 Ekim 2025', + description: 'Yeni nesil metro istasyonlarının modern iç mekan tasarımları' + }, + { + id: 6, + type: 'video', + title: 'Çevre Dostu Metro Projesi', + thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg', + date: '1 Ekim 2025', + duration: '6:45', + description: 'Metro projesinde kullanılan çevre dostu teknolojiler ve sürdürülebilir yaklaşımlar' + }, + { + id: 7, + type: 'photo', + title: 'İşçi Güvenliği Eğitimi', + thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg', + date: '28 Eylül 2025', + description: 'İnşaat sahalarında iş güvenliği eğitimleri' + }, + { + id: 8, + type: 'photo', + title: 'Ray Döşeme Çalışmaları', + thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg', + date: '25 Eylül 2025', + description: 'Metro hattında ray döşeme işlemlerinin başlaması' + }, + ]; + + const filteredMedia = selectedTab === 'all' + ? mediaItems + : mediaItems.filter(item => item.type === selectedTab); + + const selectedMediaItem = selectedMedia !== null + ? mediaItems.find(item => item.id === selectedMedia) + : null; + + return ( +
+
+ +
+
+ {/* Başlık */} +
+

+ Medya Galerisi +

+

+ A2 Metro Hattı projesi ile ilgili videolar ve fotoğraflar +

+
+ + {/* Tab Menü */} +
+ + + +
+ + {/* Medya Grid */} + {!selectedMediaItem ? ( +
+ {filteredMedia.map((item) => ( +
setSelectedMedia(item.id)} + className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 cursor-pointer group" + > + {/* Thumbnail */} +
+ {item.title} + {/* Video Badge */} + {item.type === 'video' && ( +
+
+ + + +
+
+ )} + {/* Duration Badge */} + {item.type === 'video' && ( +
+ {item.duration} +
+ )} + {/* Photo Badge */} + {item.type === 'photo' && ( +
+ FOTO +
+ )} +
+ + {/* Content */} +
+
+ + + + {item.date} +
+

+ {item.title} +

+

+ {item.description} +

+
+
+ ))} +
+ ) : ( + /* Medya Detayı */ +
+
+ {/* Geri Butonu */} + + + {/* Video Player veya Büyük Fotoğraf */} + {selectedMediaItem?.type === 'video' ? ( +
+ +
+ ) : ( +
+ {selectedMediaItem?.title} +
+ )} + + {/* Bilgiler */} +
+ + + + {selectedMediaItem?.date} + {selectedMediaItem?.type === 'video' && ( + <> + • + {selectedMediaItem?.duration} + + )} +
+ +

+ {selectedMediaItem?.title} +

+ +

+ {selectedMediaItem?.description} +

+ + {/* Paylaş */} +
+
+
+ Paylaş: + +
+
+
+
+
+ )} +
+
+ +
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 4067b9c..f7ab4fa 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -12,6 +12,19 @@ export default function Home() { const [selectedNews, setSelectedNews] = useState(null); const [showDocuments, setShowDocuments] = useState(false); const [selectedCategory, setSelectedCategory] = useState('all'); + const [showMediaGallery, setShowMediaGallery] = useState(false); + const [selectedMediaTab, setSelectedMediaTab] = useState<'all' | 'video' | 'photo'>('all'); + const [selectedMedia, setSelectedMedia] = useState(null); + const [showComplaintForm, setShowComplaintForm] = useState(false); + const [complaintFormData, setComplaintFormData] = useState({ + name: '', + email: '', + phone: '', + subject: '', + type: 'dilek', + message: '' + }); + const [showContact, setShowContact] = useState(false); const categories = [ { id: 'all', name: 'Tümü', icon: '📋' }, @@ -153,12 +166,89 @@ export default function Home() { } ]; + const mediaItems = [ + { + id: 1, + type: 'video', + title: 'A2 Metro Hattı Genel Tanıtım', + thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg', + date: '15 Ekim 2025', + duration: '5:32', + description: 'A2 Metro Hattı projesinin genel tanıtımı ve istasyonların detayları' + }, + { + id: 2, + type: 'photo', + title: 'Dikimevi İstasyonu İnşaat Çalışmaları', + thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg', + date: '12 Ekim 2025', + description: 'Dikimevi metro istasyonunda devam eden kazı ve inşaat çalışmaları' + }, + { + id: 3, + type: 'photo', + title: 'Tuzluçayır İstasyonu Temel Atma', + thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg', + date: '10 Ekim 2025', + description: 'Tuzluçayır istasyonunun temel atma töreni anları' + }, + { + id: 4, + type: 'video', + title: 'Metro İnşaatı İlerleme Raporu', + thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg', + date: '8 Ekim 2025', + duration: '8:15', + description: 'Ekim ayı metro inşaatı ilerleme raporu ve gelecek hedefler' + }, + { + id: 5, + type: 'photo', + title: 'Modern İstasyon Tasarımları', + thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg', + date: '5 Ekim 2025', + description: 'Yeni nesil metro istasyonlarının modern iç mekan tasarımları' + }, + { + id: 6, + type: 'video', + title: 'Çevre Dostu Metro Projesi', + thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg', + videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg', + date: '1 Ekim 2025', + duration: '6:45', + description: 'Metro projesinde kullanılan çevre dostu teknolojiler ve sürdürülebilir yaklaşımlar' + }, + { + id: 7, + type: 'photo', + title: 'İşçi Güvenliği Eğitimi', + thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg', + date: '28 Eylül 2025', + description: 'İnşaat sahalarında iş güvenliği eğitimleri' + }, + { + id: 8, + type: 'photo', + title: 'Ray Döşeme Çalışmaları', + thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg', + date: '25 Eylül 2025', + description: 'Metro hattında ray döşeme işlemlerinin başlaması' + }, + ]; + + const filteredMedia = selectedMediaTab === 'all' + ? mediaItems + : mediaItems.filter(item => item.type === selectedMediaTab); + return (
{/* Hero Video Section */} -
+
{/* Video Background */}
@@ -506,42 +605,42 @@ export default function Home() {
- {/* Belgeler Listesi */} -
+ {/* Belgeler Grid - 3 sütunlu */} +
{filteredDocs.map((doc) => (
-
- {/* Dosya İkonu */} -
+ {/* Dosya İkonu - Üstte ortalı */} +
+
{getFileIcon(doc.type)}
- - {/* Belge Bilgileri */} -
-

- {doc.title} -

-

- {doc.description} -

-
- 📅 {doc.date} - 📄 {doc.type} - 💾 {doc.size} -
-
- - {/* İndirme Butonu */} -
+ + {/* Belge Bilgileri */} +
+

+ {doc.title} +

+

+ {doc.description} +

+
+ 📅 {doc.date} + 📄 {doc.type} + 💾 {doc.size} +
+
+ + {/* İndirme Butonu - Alt kısımda */} +
))}
@@ -549,8 +648,578 @@ export default function Home() {
)} + {/* Medya Galerisi Bölümü */} + {showMediaGallery && ( +
+
+
+
+
+ + + +
+

Medya Galerisi

+
+ +
+ + {/* Medya Grid veya Detay */} + {selectedMedia === null ? ( + <> + {/* Tab Menü */} +
+ + + +
+ + {/* Medya Grid */} +
+ {filteredMedia.map((item) => ( +
setSelectedMedia(item.id)} + className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-2 cursor-pointer group" + > + {/* Thumbnail */} +
+ {item.title} + {/* Video Badge */} + {item.type === 'video' && ( +
+
+ + + +
+
+ )} + {/* Duration Badge */} + {item.type === 'video' && 'duration' in item && ( +
+ {item.duration} +
+ )} + {/* Photo Badge */} + {item.type === 'photo' && ( +
+ FOTO +
+ )} +
+ + {/* Content */} +
+
+ + + + {item.date} +
+

+ {item.title} +

+

+ {item.description} +

+
+
+ ))} +
+ + ) : ( + /* Medya Detayı */ +
+ {mediaItems.filter(m => m.id === selectedMedia).map((item) => ( +
+ {/* Geri Butonu */} + + + {/* Video Player veya Büyük Fotoğraf */} + {item.type === 'video' ? ( +
+ +
+ ) : ( +
+ {item.title} +
+ )} + + {/* Bilgiler */} +
+ + + + {item.date} + {item.type === 'video' && 'duration' in item && ( + <> + • + {item.duration} + + )} +
+ +

+ {item.title} +

+ +

+ {item.description} +

+ + {/* Paylaş */} +
+
+
+ Paylaş: + +
+ +
+
+
+ ))} +
+ )} +
+
+ )} + + {/* Dilek-Şikayet Formu */} + {showComplaintForm && ( +
+
+
+
+
+ + + +
+

Dilek ve Şikayet Formu

+
+ +
+ + {/* Bilgilendirme */} +
+
+ + + +

+ A2 Metro Hattı projesi ile ilgili dilek, öneri ve şikayetlerinizi bu form aracılığıyla iletebilirsiniz. Başvurularınız en kısa sürede değerlendirilecektir. +

+
+
+ + {/* Form */} +
{ + e.preventDefault(); + alert('Form gönderildi! (Demo)'); + setShowComplaintForm(false); + setComplaintFormData({ + name: '', + email: '', + phone: '', + subject: '', + type: 'dilek', + message: '' + }); + }}> + {/* Başvuru Tipi */} +
+ +
+ + +
+
+ + {/* İki Sütunlu Alan */} +
+ {/* Ad Soyad */} +
+ + setComplaintFormData({...complaintFormData, name: e.target.value})} + 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" + /> +
+ + {/* E-posta */} +
+ + setComplaintFormData({...complaintFormData, email: e.target.value})} + 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" + /> +
+ + {/* Telefon */} +
+ + setComplaintFormData({...complaintFormData, phone: e.target.value})} + 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__) ___ __ __" + /> +
+ + {/* Konu */} +
+ + setComplaintFormData({...complaintFormData, subject: e.target.value})} + 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="Başvuru konusu" + /> +
+
+ + {/* Mesaj */} +
+ + +
+ + {/* KVKK Onayı */} +
+ + +
+ + {/* Butonlar */} +
+ + +
+
+
+
+ )} + + {/* E-İletişim Bölümü */} + {showContact && ( +
+
+
+
+
+ + + +
+

İletişim Bilgileri

+
+ +
+ +
+ {/* Sol Taraf - İletişim Kartları */} +
+ {/* Adres Kartı */} +
+
+
+ + + + +
+
+

ADRES

+

+ Emniyet Mah. Hipodrom Caddesi No: 5
+ Yenimahalle / Ankara +

+
+
+
+ + {/* KEP Adresi Kartı */} +
+
+
+ + + +
+ +
+
+ + {/* Telefon Kartı */} +
+
+
+ + + +
+ +
+
+ + {/* Çalışma Saatleri */} +
+
+
+ + + +
+
+

ÇALIŞMA SAATLERİ

+

+ Hafta İçi: 08:30 - 17:30
+ Hafta Sonu: Kapalı +

+
+
+
+
+ + {/* Sağ Taraf - Harita */} +
+

Konum

+
+ +
+ + {/* Haritada Göster Butonu */} + + + + + Google Maps'te Aç + +
+
+
+
+ )} + {/* Ana İçerik - Kartlar için üstten boşluk */} -
+

Metro Hat Durumları diff --git a/components/Footer.tsx b/components/Footer.tsx index 5275671..d6ea422 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -7,16 +7,12 @@ export default function Footer() {
{/* Logo ve Bilgi */}
-
+
Mamak Belediyesi Logo -
- T.C. - Mamak Belediyesi -

A2 Metro Hattı İnşaat Projesi - Ankara'nın ulaşım altyapısına modern çözümler sunuyoruz. @@ -70,14 +66,14 @@ export default function Footer() { - Mamak, Ankara + Emniyet, Hipodrom Cd. No:5, 06430 Yenimahalle/Ankara

  • - - 0312 395 75 00 + + (0312) 507 10 00
  • @@ -85,8 +81,8 @@ export default function Footer() { - - info@mamak.bel.tr + + ankarabuyuksehirbelediyesi@hs01.kep.tr
    • @@ -95,21 +91,54 @@ export default function Footer() {
    @@ -118,7 +147,7 @@ export default function Footer() { {/* Alt Bilgi */}

    - © 2025 T.C. Mamak Belediyesi - A2 Metro Hattı İnşaat Projesi. Tüm hakları saklıdır. + © 2025 T.C. Ankara Büyükşehir Belediyesi - A2 Metro Hattı İnşaat Projesi. Tüm hakları saklıdır.

    diff --git a/components/Header.tsx b/components/Header.tsx index c3b0ce2..0f2c729 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,51 +1,132 @@ +import { useState } from 'react'; import Link from 'next/link'; export default function Header() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const menuItems = [ + { 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: '/belgeler', icon: '📄', title: 'Belgeler', desc: 'Teknik dokümanlar' }, + { 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 }, + ]; + return ( -
    -
    -
    - {/* Logo - Sol taraf */} -
    - -
    + <> +
    + +
    + + {/* Full Screen Overlay Menu */} +
    +
    setIsMenuOpen(false)} + >
    + +
    +
    + +
    +
    +
    +

    Menü

    +

    A2 Metro Hattı Projesi

    +
    + +
    + + + +
    +
    +
    +

    Sosyal Medya

    +
    + {[ + { icon: 'M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z', url: 'https://twitter.com/Ankara_BB' }, + { icon: 'M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z', url: 'https://www.facebook.com/ankarabb' }, + { icon: 'M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z M4 2a2 2 0 100 4 2 2 0 000-4z', url: 'https://www.linkedin.com/company/ankara-bb' }, + ].map((social, i) => ( + + + + + + ))} +
    +
    +
    +
    -
    + ); }