Admin Paneli ve Responsive
This commit is contained in:
@@ -143,23 +143,25 @@ export default function Documents() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#003366]">
|
||||
<Header />
|
||||
<main className="pt-32 pb-16">
|
||||
<main className="pt-24 md:pt-32 pb-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">Belgeler</h1>
|
||||
<p className="text-lg text-white">A2 Metro Hattı proje belgeleri</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-3 mb-12">
|
||||
<div className="flex flex-wrap justify-center gap-2 md:gap-3 mb-12">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={`px-6 py-3 rounded-full font-semibold ${
|
||||
selectedCategory === cat.id ? 'bg-[#00B4D8] text-white' : 'bg-white text-[#004B87]'
|
||||
className={`px-3 py-2 md:px-6 md:py-3 rounded-full font-semibold text-sm md:text-base transition-all ${
|
||||
selectedCategory === cat.id ? 'bg-[#00B4D8] text-white shadow-lg scale-105' : 'bg-white text-[#004B87] hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
{cat.icon} {cat.name}
|
||||
<span className="mr-1">{cat.icon}</span>
|
||||
<span className="hidden sm:inline">{cat.name}</span>
|
||||
<span className="sm:hidden">{cat.name.split(' ')[0]}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -49,7 +49,7 @@ export default function LiveStream() {
|
||||
<div className="min-h-screen bg-[#003366]">
|
||||
<Header />
|
||||
|
||||
<main className="pt-32 pb-16">
|
||||
<main className="pt-24 md: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">
|
||||
|
||||
@@ -4,98 +4,23 @@ import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import { newsData, categories } from '@/data/news';
|
||||
|
||||
export default function News() {
|
||||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||||
const [selectedNews, setSelectedNews] = useState<number | null>(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);
|
||||
? newsData
|
||||
: newsData.filter(item => item.category === selectedCategory);
|
||||
|
||||
const selectedNewsItem = news.find(item => item.id === selectedNews);
|
||||
const selectedNewsItem = newsData.find(item => item.id === selectedNews);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#003366]">
|
||||
<Header />
|
||||
|
||||
<main className="pt-32 pb-16">
|
||||
<main className="pt-24 md: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">
|
||||
@@ -106,12 +31,12 @@ export default function News() {
|
||||
</div>
|
||||
|
||||
{/* Kategori Filtreleri */}
|
||||
<div className="flex flex-wrap justify-center gap-3 mb-12">
|
||||
<div className="flex flex-wrap justify-center gap-2 md:gap-3 mb-12">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setSelectedCategory(category.id)}
|
||||
className={`px-6 py-3 rounded-full font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||||
className={`px-4 py-2 md:px-6 md:py-3 rounded-full font-semibold text-sm md:text-base transition-all duration-300 flex items-center space-x-2 ${
|
||||
selectedCategory === category.id
|
||||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function Contact() {
|
||||
<div className="min-h-screen bg-[#003366]">
|
||||
<Header />
|
||||
|
||||
<main className="pt-32 pb-16">
|
||||
<main className="pt-24 md: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">
|
||||
|
||||
@@ -94,7 +94,7 @@ export default function MediaGallery() {
|
||||
<div className="min-h-screen bg-[#003366]">
|
||||
<Header />
|
||||
|
||||
<main className="pt-32 pb-16">
|
||||
<main className="pt-24 md: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">
|
||||
@@ -107,10 +107,10 @@ export default function MediaGallery() {
|
||||
</div>
|
||||
|
||||
{/* Tab Menü */}
|
||||
<div className="flex justify-center space-x-4 mb-8">
|
||||
<div className="flex flex-wrap justify-center gap-2 md:gap-4 mb-8">
|
||||
<button
|
||||
onClick={() => setSelectedTab('all')}
|
||||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
|
||||
className={`px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-all duration-300 ${
|
||||
selectedTab === 'all'
|
||||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||||
@@ -120,26 +120,26 @@ export default function MediaGallery() {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedTab('video')}
|
||||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||||
className={`px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-all duration-300 flex items-center space-x-1 md:space-x-2 ${
|
||||
selectedTab === 'video'
|
||||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-4 h-4 md:w-5 md:h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
|
||||
</svg>
|
||||
<span>Videolar</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedTab('photo')}
|
||||
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||||
className={`px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-all duration-300 flex items-center space-x-1 md:space-x-2 ${
|
||||
selectedTab === 'photo'
|
||||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-4 h-4 md:w-5 md:h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
|
||||
</svg>
|
||||
<span>Fotoğraflar</span>
|
||||
|
||||
275
app/page.tsx
275
app/page.tsx
@@ -1,10 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Header from "@/components/Header";
|
||||
import MetroLine from "@/components/MetroLine";
|
||||
import Footer from "@/components/Footer";
|
||||
import { newsData } from '@/data/news';
|
||||
|
||||
// Hero Slider Data - Component dışında tanımla
|
||||
const heroSlides = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Ankara Metro Altyapı Projelerinde Öncü Çözümler',
|
||||
description: 'Ankara Büyükşehir Belediyesi ile birlikte, modern teknoloji ve mühendislik uzmanlığımızla başkentin ulaşım ağını inşa ediyor, geleceğin metro sistemlerini bugünden hayata geçiriyoruz.',
|
||||
buttonText: 'Detayları Gör',
|
||||
buttonLink: '#proje-detay'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'A2 Metro Hattı İnşaatında Son Aşamaya Gelindi',
|
||||
description: '15 istasyonlu A2 Metro Hattı projemiz %75 tamamlandı. 2026 yılında hizmete açılacak modern metro hattımız, günlük 300 bin yolcuya hizmet verecek.',
|
||||
buttonText: 'İlerlemeyi İzle',
|
||||
buttonLink: '#metro-hatti'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Çevre Dostu Metro Teknolojileri',
|
||||
description: 'Yenilenebilir enerji kaynakları ve sürdürülebilir inşaat teknikleri ile çevre dostu metro projelerine imza atıyoruz. Karbon emisyonunu %40 azaltan yenilikçi çözümlerimiz.',
|
||||
buttonText: 'Yeşil Projeler',
|
||||
buttonLink: '#cevre'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Güvenli İnşaat, Güvenli Gelecek',
|
||||
description: 'ISO 45001 sertifikalı iş güvenliği sistemlerimiz ile 2000+ çalışanımızın güvenliğini en üst düzeyde tutuyoruz. Sıfır iş kazası hedefiyle çalışıyoruz.',
|
||||
buttonText: 'Güvenlik Önlemleri',
|
||||
buttonLink: '#guvenlik'
|
||||
}
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const [showLiveStream, setShowLiveStream] = useState(false);
|
||||
@@ -25,6 +59,23 @@ export default function Home() {
|
||||
message: ''
|
||||
});
|
||||
const [showContact, setShowContact] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
// Modal açıldığında yukarı kaydır
|
||||
useEffect(() => {
|
||||
if (showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm || showContact) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}, [showLiveStream, showNews, showDocuments, showMediaGallery, showComplaintForm, showContact]);
|
||||
|
||||
// Auto slider
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % 4); // 4 slide var
|
||||
}, 10000); // 10 saniyede bir değiş
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
||||
@@ -131,40 +182,8 @@ export default function Home() {
|
||||
}
|
||||
};
|
||||
|
||||
const newsData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Dikimevi Metro Hattı İnşaatında Yeni Aşama",
|
||||
date: "20 Ekim 2025",
|
||||
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."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Metro İstasyonlarında Modern Tasarım",
|
||||
date: "18 Ekim 2025",
|
||||
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."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Çevre Dostu Metro Projesi",
|
||||
date: "15 Ekim 2025",
|
||||
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."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Metro Hattı 2026'da Hizmete Girecek",
|
||||
date: "12 Ekim 2025",
|
||||
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."
|
||||
}
|
||||
];
|
||||
// Featured news (ana sayfada gösterilecek haberler)
|
||||
const featuredNews = newsData.filter(news => news.featured).slice(0, 4);
|
||||
|
||||
const mediaItems = [
|
||||
{
|
||||
@@ -248,7 +267,7 @@ export default function Home() {
|
||||
<Header />
|
||||
|
||||
{/* Hero Video Section */}
|
||||
<div className="relative w-full h-screen pt-20">
|
||||
<div className="relative w-full h-[60vh] md:h-screen pt-20">
|
||||
{/* Video Background */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<video
|
||||
@@ -269,126 +288,173 @@ export default function Home() {
|
||||
<div className="relative z-10 h-full flex items-center">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
Ankara Metro Altyapı Projelerinde Öncü Çözümler
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-[#F8F9FA] mb-8 leading-relaxed">
|
||||
Ankara Büyükşehir Belediyesi ile birlikte, modern teknoloji ve mühendislik uzmanlığımızla başkentin ulaşım ağını inşa ediyor, geleceğin metro sistemlerini bugünden hayata geçiriyoruz.
|
||||
</p>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="px-8 py-4 bg-[#00B4D8] text-white font-semibold rounded-lg hover:bg-[#48CAE4] transition-all duration-300 shadow-lg shadow-[#00B4D8]/30 flex items-center justify-center space-x-2">
|
||||
<span>Detayları Gör</span>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-[#004B87] transition-all duration-300">
|
||||
Tüm Duyuruları Gör
|
||||
</button>
|
||||
{/* Slider Content */}
|
||||
<div className="relative">
|
||||
{heroSlides.map((slide, index) => (
|
||||
<div
|
||||
key={slide.id}
|
||||
className={`transition-all duration-700 ${
|
||||
index === currentSlide
|
||||
? 'opacity-100 translate-x-0'
|
||||
: 'opacity-0 absolute inset-0 translate-x-full pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
<h1 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white mb-4 md:mb-6 leading-tight">
|
||||
{slide.title}
|
||||
</h1>
|
||||
<p className="text-base md:text-lg lg:text-xl text-[#F8F9FA] mb-6 md:mb-8 leading-relaxed">
|
||||
{slide.description}
|
||||
</p>
|
||||
|
||||
{/* Action Buttons - Mobilde gizle */}
|
||||
<div className="hidden md:flex flex-col sm:flex-row gap-4">
|
||||
<button className="px-8 py-4 bg-[#00B4D8] text-white font-semibold rounded-lg hover:bg-[#48CAE4] transition-all duration-300 shadow-lg shadow-[#00B4D8]/30 flex items-center justify-center space-x-2">
|
||||
<span>{slide.buttonText}</span>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-[#004B87] transition-all duration-300">
|
||||
Tüm Duyuruları Gör
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination Dots */}
|
||||
<div className="flex space-x-3 mt-12">
|
||||
<button className="w-3 h-3 rounded-full bg-white"></button>
|
||||
<button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
|
||||
<button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
|
||||
<button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
|
||||
{/* Pagination Dots & Navigation */}
|
||||
<div className="hidden md:flex items-center justify-between mt-12">
|
||||
{/* Dots */}
|
||||
<div className="flex space-x-3">
|
||||
{heroSlides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`h-3 rounded-full transition-all duration-300 ${
|
||||
index === currentSlide
|
||||
? 'w-8 bg-white'
|
||||
: 'w-3 bg-white/30 hover:bg-white/50'
|
||||
}`}
|
||||
aria-label={`Slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Arrow Navigation */}
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => setCurrentSlide((prev) => (prev - 1 + 4) % 4)}
|
||||
className="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-all backdrop-blur-sm"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentSlide((prev) => (prev + 1) % 4)}
|
||||
className="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-all backdrop-blur-sm"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alt Menü Kartları - Slide üzerine bindiriyor (yarısı üstte) */}
|
||||
<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">
|
||||
{/* Alt Menü Kartları - Mobilde normal akış, Desktop'ta overlay */}
|
||||
<div className="relative md:absolute md:bottom-0 md:left-0 md:right-0 z-20 md:translate-y-3/4 bg-[#003366] md:bg-transparent py-6 md:py-0">
|
||||
<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-3 md:gap-4">
|
||||
{/* Canlı Yayın */}
|
||||
<button
|
||||
onClick={() => setShowLiveStream(!showLiveStream)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Canlı Yayın</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Canlı Yayın</span>
|
||||
</button>
|
||||
|
||||
{/* Haberler */}
|
||||
<button
|
||||
onClick={() => setShowNews(!showNews)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Haberler</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Haberler</span>
|
||||
</button>
|
||||
|
||||
{/* Belgeler */}
|
||||
<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"
|
||||
className="bg-white rounded-xl p-4 md: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">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md: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>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Belgeler</span>
|
||||
</button>
|
||||
|
||||
{/* Medya Galerisi */}
|
||||
<button
|
||||
onClick={() => setShowMediaGallery(!showMediaGallery)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Medya Galerisi</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Medya Galerisi</span>
|
||||
</button>
|
||||
|
||||
{/* Dilek-Şikayet */}
|
||||
<button
|
||||
onClick={() => setShowComplaintForm(!showComplaintForm)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Dilek-Şikayet</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Dilek-Şikayet</span>
|
||||
</button>
|
||||
|
||||
{/* E-İletişim */}
|
||||
<button
|
||||
onClick={() => setShowContact(!showContact)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">E-İletişim</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">E-İletişim</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Canlı Yayın Video Bölümü */}
|
||||
{showLiveStream && (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-8">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 md: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">
|
||||
@@ -425,7 +491,7 @@ export default function Home() {
|
||||
|
||||
{/* Haberler Bölümü */}
|
||||
{showNews && (
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream ? 'pt-8' : 'pt-32'} pb-8`}>
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream ? 'pt-8' : 'pt-8 md: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">
|
||||
@@ -436,20 +502,31 @@ export default function Home() {
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#004B87]">Son Haberler</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowNews(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 className="flex items-center space-x-3">
|
||||
<Link
|
||||
href="/haberler"
|
||||
className="px-4 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#0096C7] transition-all font-semibold text-sm flex items-center space-x-2"
|
||||
>
|
||||
<span>Tümünü Gör</span>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setShowNews(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>
|
||||
</div>
|
||||
|
||||
{/* Haberler Grid veya Detay */}
|
||||
{selectedNews === null ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{newsData.map((news) => (
|
||||
{featuredNews.map((news) => (
|
||||
<div key={news.id} className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
{/* Haber Görseli */}
|
||||
<div className="h-48 overflow-hidden">
|
||||
@@ -568,7 +645,7 @@ export default function Home() {
|
||||
|
||||
{/* 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={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews ? 'pt-8' : 'pt-8 md: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">
|
||||
@@ -654,7 +731,7 @@ export default function Home() {
|
||||
|
||||
{/* Medya Galerisi Bölümü */}
|
||||
{showMediaGallery && (
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments ? 'pt-8' : 'pt-32'} pb-8`}>
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments ? 'pt-8' : 'pt-8 md: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">
|
||||
@@ -872,7 +949,7 @@ export default function Home() {
|
||||
|
||||
{/* Dilek-Şikayet Formu */}
|
||||
{showComplaintForm && (
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery ? 'pt-8' : 'pt-32'} pb-8`}>
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery ? 'pt-8' : 'pt-8 md: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">
|
||||
@@ -1091,7 +1168,7 @@ export default function Home() {
|
||||
|
||||
{/* E-İletişim Bölümü */}
|
||||
{showContact && (
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm ? 'pt-8' : 'pt-32'} pb-8`}>
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm ? 'pt-8' : 'pt-8 md: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">
|
||||
@@ -1227,7 +1304,7 @@ export default function Home() {
|
||||
)}
|
||||
|
||||
{/* 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 || showDocuments || showMediaGallery || showComplaintForm || showContact ? 'pt-8' : 'pt-32'} pb-12`}>
|
||||
<main className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm || showContact ? 'pt-8' : 'pt-8 md:pt-32'} pb-12`}>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
Metro Hat Durumları
|
||||
|
||||
1115
app/yonetim-paneli-a2m-secure/dashboard/page.tsx
Normal file
1115
app/yonetim-paneli-a2m-secure/dashboard/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
101
app/yonetim-paneli-a2m-secure/page.tsx
Normal file
101
app/yonetim-paneli-a2m-secure/page.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function AdminLogin() {
|
||||
const router = useRouter();
|
||||
const [credentials, setCredentials] = useState({ username: '', password: '' });
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
// Basit auth - production'da backend ile yapılmalı
|
||||
if (credentials.username === 'admin' && credentials.password === 'A2Metro2025!') {
|
||||
localStorage.setItem('admin_token', 'authenticated');
|
||||
router.push('/yonetim-paneli-a2m-secure/dashboard');
|
||||
} else {
|
||||
setError('Kullanıcı adı veya şifre hatalı');
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-br from-[#003366] via-[#004B87] to-[#005f99] flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDEzNEgxMnYxMmgyNHYtMTJ6bTAtMThIMTJ2MTJoMjR2LTEyem0wLTE4SDEydjEyaDI0Vjk4em0wLTE4SDEydjEyaDI0Vjgwem0wLTE4SDEydjEyaDI0VjYyem0yNCAxMDhoLTEydjEyaDEydi0xMnptMC0xOGgtMTJ2MTJoMTJ2LTEyem0wLTE4aC0xMnYxMmgxMnYtMTJ6bTAtMThoLTEydjEyaDEyVjk4em0wLTE4aC0xMnYxMmgxMlY4MHptMC0xOGgtMTJ2MTJoMTJWNjJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-30"></div>
|
||||
|
||||
<div className="relative z-10 w-full max-w-md">
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-8">
|
||||
{/* Logo ve Başlık */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-linear-to-br from-[#004B87] to-[#00B4D8] rounded-xl mb-4">
|
||||
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-[#004B87] mb-2">Yönetim Paneli</h1>
|
||||
<p className="text-gray-600 text-sm">A2 Metro Hattı İnşaat Projesi</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="username" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||||
Kullanıcı Adı
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
value={credentials.username}
|
||||
onChange={(e) => setCredentials({ ...credentials, username: 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="Kullanıcı adınızı girin"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||||
Şifre
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={credentials.password}
|
||||
onChange={(e) => setCredentials({ ...credentials, password: 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="Şifrenizi girin"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-linear-to-r from-[#004B87] to-[#00B4D8] text-white py-3 rounded-lg font-semibold hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-xs text-gray-500">
|
||||
© 2025 Ankara Büyükşehir Belediyesi
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -111,6 +111,7 @@ export default function Header() {
|
||||
{[
|
||||
{ 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: 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z', url: 'https://www.instagram.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) => (
|
||||
<a
|
||||
|
||||
@@ -53,28 +53,28 @@ export default function MetroLine() {
|
||||
const progressPercentage = (currentStation / (totalStations - 1)) * 100;
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-8 lg:p-12">
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-4 md:p-8 lg:p-12">
|
||||
{/* Proje Başlığı */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 rounded-full bg-[#F59E0B] flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 md:mb-8 gap-4">
|
||||
<div className="flex items-center space-x-3 md:space-x-4">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 rounded-full bg-[#F59E0B] flex items-center justify-center shrink-0">
|
||||
<svg className="w-5 h-5 md:w-6 md:h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M13 3v6h3l-4 5-4-5h3V3m-1 11v7h-1c-1.1 0-2-.9-2-2v-5h3m10 0v5c0 1.1-.9 2-2 2h-1v-7h3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[#004B87]">A2 Metro Hattı İnşaatı</h3>
|
||||
<p className="text-[#6B7280]">Abidin Paşa - Natoyolu</p>
|
||||
<h3 className="text-lg md:text-2xl font-bold text-[#004B87]">A2 Metro Hattı İnşaatı</h3>
|
||||
<p className="text-sm md:text-base text-[#6B7280]">Abidin Paşa - Natoyolu</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-[#6B7280]">İnşaat Durumu</p>
|
||||
<p className="text-2xl font-bold text-[#F59E0B]">{Math.round(progressPercentage)}%</p>
|
||||
<div className="text-left md:text-right">
|
||||
<p className="text-xs md:text-sm text-[#6B7280]">İnşaat Durumu</p>
|
||||
<p className="text-xl md:text-2xl font-bold text-[#F59E0B]">{Math.round(progressPercentage)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metro Hat ve İnşaat Çizgisi */}
|
||||
<div className="relative mb-4">
|
||||
{/* Metro Hat ve İnşaat Çizgisi - Desktop */}
|
||||
<div className="hidden md:block relative mb-4">
|
||||
{/* Gri arka plan hattı (tüm hat) */}
|
||||
<div className="absolute top-6 left-0 right-0 h-2 bg-gray-300 rounded-full"></div>
|
||||
|
||||
@@ -83,8 +83,8 @@ export default function MetroLine() {
|
||||
style={{width: `${progressPercentage}%`}}>
|
||||
</div>
|
||||
|
||||
{/* Duraklar Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6 relative">
|
||||
{/* Duraklar Grid - Desktop */}
|
||||
<div className="grid grid-cols-4 lg:grid-cols-8 gap-6 relative">
|
||||
{stations.map((station, index) => (
|
||||
<div key={index} className="flex flex-col items-center">
|
||||
<div className={`relative z-10 rounded-full flex items-center justify-center mb-3 transition-all duration-500 ${getStationStyle(index, station.status)}`}>
|
||||
@@ -123,23 +123,84 @@ export default function MetroLine() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metro Hat - Mobil (Dikey Liste) */}
|
||||
<div className="md:hidden space-y-3">
|
||||
{stations.map((station, index) => (
|
||||
<div key={index} className={`flex items-center space-x-3 p-3 rounded-lg transition-all duration-500 ${
|
||||
index === currentStation ? 'bg-[#F59E0B]/10 border-2 border-[#F59E0B]' :
|
||||
station.status === 'completed' ? 'bg-green-50 border border-green-200' :
|
||||
'bg-gray-50 border border-gray-200'
|
||||
}`}>
|
||||
{/* İkon */}
|
||||
<div className={`rounded-full flex items-center justify-center transition-all duration-500 shrink-0 ${
|
||||
index === currentStation ? 'w-12 h-12 bg-[#F59E0B]' :
|
||||
station.status === 'completed' ? 'w-10 h-10 bg-green-500' :
|
||||
'w-10 h-10 bg-gray-300'
|
||||
}`}>
|
||||
{index === currentStation ? (
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/>
|
||||
</svg>
|
||||
) : station.status === 'completed' ? (
|
||||
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bilgi */}
|
||||
<div className="flex-1">
|
||||
<h4 className={`font-bold text-sm ${
|
||||
index === currentStation ? 'text-[#F59E0B]' :
|
||||
station.status === 'completed' ? 'text-green-700' :
|
||||
'text-gray-600'
|
||||
}`}>
|
||||
{station.name}
|
||||
</h4>
|
||||
<p className={`text-xs ${
|
||||
index === currentStation ? 'text-[#F59E0B]' :
|
||||
station.status === 'completed' ? 'text-green-600' :
|
||||
'text-gray-500'
|
||||
}`}>
|
||||
{index === currentStation ? '🚇 Metro Burada' :
|
||||
station.status === 'completed' ? '✓ Tamamlandı' :
|
||||
'◯ Planlı'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bağlantı çizgisi (son istasyon hariç) */}
|
||||
{index < stations.length - 1 && (
|
||||
<div className={`absolute left-8 w-0.5 h-8 ${
|
||||
index < currentStation ? 'bg-green-500' :
|
||||
index === currentStation ? 'bg-[#F59E0B]' :
|
||||
'bg-gray-300'
|
||||
}`} style={{ top: '100%', marginLeft: '-1px' }}></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Alt Bilgi */}
|
||||
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||
<div className="flex flex-wrap gap-6 justify-center text-sm">
|
||||
<div className="mt-6 md:mt-8 pt-4 md:pt-6 border-t border-gray-200">
|
||||
<div className="flex flex-col md:flex-row flex-wrap gap-3 md:gap-6 justify-center text-xs md:text-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-5 h-5 rounded-full bg-green-500 border-2 border-white flex items-center justify-center">
|
||||
<svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-green-500 border-2 border-white flex items-center justify-center shrink-0">
|
||||
<svg className="w-2 h-2 md:w-3 md:h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#6B7280]">Tamamlandı</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-5 h-5 rounded-full bg-[#F59E0B] border-2 border-white"></div>
|
||||
<div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-[#F59E0B] border-2 border-white shrink-0"></div>
|
||||
<span className="text-[#6B7280]">İnşaat Halinde (Metro Burada)</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-5 h-5 rounded-full bg-gray-300 border-2 border-dashed border-gray-400"></div>
|
||||
<div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-gray-300 border-2 border-dashed border-gray-400 shrink-0"></div>
|
||||
<span className="text-[#6B7280]">Planlanan</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
144
data/documents.ts
Normal file
144
data/documents.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
export interface Document {
|
||||
id: number;
|
||||
title: string;
|
||||
category: 'ihale' | 'teknik' | 'cevresel' | 'raporlar' | 'guvenlik';
|
||||
date: string;
|
||||
size: string;
|
||||
type: 'PDF' | 'DWG' | 'XLSX' | 'DOCX';
|
||||
description: string;
|
||||
downloadUrl?: string;
|
||||
featured?: boolean;
|
||||
}
|
||||
|
||||
export const documentsData: Document[] = [
|
||||
{
|
||||
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ı",
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
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",
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
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 Ekim Ayı İlerleme Raporu",
|
||||
category: 'raporlar',
|
||||
date: "1 Kasım 2025",
|
||||
size: "1.8 MB",
|
||||
type: "PDF",
|
||||
description: "Aylık proje ilerleme ve istatistikler",
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Güvenlik Planı ve Prosedürleri",
|
||||
category: 'guvenlik',
|
||||
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 Eylül Ayı İlerleme Raporu",
|
||||
category: 'raporlar',
|
||||
date: "1 Ekim 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ı"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "İş Güvenliği Risk Analizi",
|
||||
category: 'guvenlik',
|
||||
date: "5 Şubat 2025",
|
||||
size: "2.7 MB",
|
||||
type: "PDF",
|
||||
description: "İnşaat sahası risk değerlendirme raporu"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "Elektrik ve Mekanik Sistem Şartnamesi",
|
||||
category: 'teknik',
|
||||
date: "15 Mart 2025",
|
||||
size: "6.3 MB",
|
||||
type: "PDF",
|
||||
description: "Metro elektrik ve mekanik sistemler teknik şartnamesi"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: "Su Yönetimi Planı",
|
||||
category: 'cevresel',
|
||||
date: "10 Nisan 2025",
|
||||
size: "2.2 MB",
|
||||
type: "PDF",
|
||||
description: "İnşaat sahası su kullanımı ve yönetimi"
|
||||
}
|
||||
];
|
||||
|
||||
export const documentCategories = [
|
||||
{ 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: 'guvenlik', name: 'Güvenlik Belgeleri', icon: '🛡️' },
|
||||
];
|
||||
|
||||
export const getFileIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'PDF': return '📕';
|
||||
case 'DWG': return '📐';
|
||||
case 'XLSX': return '📊';
|
||||
case 'DOCX': return '📄';
|
||||
default: return '📄';
|
||||
}
|
||||
};
|
||||
115
data/media.ts
Normal file
115
data/media.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
export interface MediaItem {
|
||||
id: number;
|
||||
type: 'video' | 'photo';
|
||||
title: string;
|
||||
thumbnail: string;
|
||||
videoUrl?: string;
|
||||
date: string;
|
||||
duration?: string;
|
||||
description: string;
|
||||
category?: string;
|
||||
featured?: boolean;
|
||||
}
|
||||
|
||||
export const mediaData: MediaItem[] = [
|
||||
{
|
||||
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: '20 Ekim 2025',
|
||||
duration: '5:32',
|
||||
description: 'A2 Metro Hattı projesinin genel tanıtımı ve istasyonların detayları',
|
||||
category: 'Tanıtım',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'photo',
|
||||
title: 'Dikimevi İstasyonu İnşaat Çalışmaları',
|
||||
thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
|
||||
date: '18 Ekim 2025',
|
||||
description: 'Dikimevi metro istasyonunda devam eden kazı ve inşaat çalışmaları',
|
||||
category: 'İnşaat',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'photo',
|
||||
title: 'Tuzluçayır İstasyonu Temel Atma',
|
||||
thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
|
||||
date: '15 Ekim 2025',
|
||||
description: 'Tuzluçayır istasyonunun temel atma töreni anları',
|
||||
category: 'Etkinlik'
|
||||
},
|
||||
{
|
||||
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: '12 Ekim 2025',
|
||||
duration: '8:15',
|
||||
description: 'Ekim ayı metro inşaatı ilerleme raporu ve gelecek hedefler',
|
||||
category: 'Rapor'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 'photo',
|
||||
title: 'Modern İstasyon Tasarımları',
|
||||
thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
|
||||
date: '10 Ekim 2025',
|
||||
description: 'Yeni nesil metro istasyonlarının modern iç mekan tasarımları',
|
||||
category: 'Tasarım'
|
||||
},
|
||||
{
|
||||
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: '8 Ekim 2025',
|
||||
duration: '6:45',
|
||||
description: 'Metro projesinde kullanılan çevre dostu teknolojiler ve sürdürülebilir yaklaşımlar',
|
||||
category: 'Çevre'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
type: 'photo',
|
||||
title: 'İşçi Güvenliği Eğitimi',
|
||||
thumbnail: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
|
||||
date: '5 Ekim 2025',
|
||||
description: 'İnşaat sahalarında iş güvenliği eğitimleri',
|
||||
category: 'Güvenlik'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
type: 'photo',
|
||||
title: 'Ray Döşeme Çalışmaları',
|
||||
thumbnail: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg',
|
||||
date: '1 Ekim 2025',
|
||||
description: 'Metro hattında ray döşeme işlemlerinin başlaması',
|
||||
category: 'İnşaat'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
type: 'video',
|
||||
title: 'TBM Makinesi Tünel Kazısı',
|
||||
thumbnail: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
|
||||
videoUrl: 'https://www.youtube.com/embed/b9q88QDEcKg',
|
||||
date: '28 Eylül 2025',
|
||||
duration: '4:20',
|
||||
description: 'Dev tünel açma makinesinin çalışma anları',
|
||||
category: 'Teknoloji'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
type: 'photo',
|
||||
title: 'Gece Vardiyası Çalışmaları',
|
||||
thumbnail: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
|
||||
date: '25 Eylül 2025',
|
||||
description: 'İnşaat sahalarında 7/24 devam eden çalışmalar',
|
||||
category: 'İnşaat'
|
||||
}
|
||||
];
|
||||
162
data/metroStations.ts
Normal file
162
data/metroStations.ts
Normal file
@@ -0,0 +1,162 @@
|
||||
export interface MetroStation {
|
||||
id: number;
|
||||
name: string;
|
||||
status: 'completed' | 'in-progress' | 'planned';
|
||||
progress: number;
|
||||
startDate: string;
|
||||
expectedCompletion: string;
|
||||
actualCompletion?: string;
|
||||
connections?: string[];
|
||||
features: string[];
|
||||
dailyCapacity: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
export const metroStations: MetroStation[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dikimevi',
|
||||
status: 'in-progress',
|
||||
progress: 75,
|
||||
startDate: '15 Ocak 2024',
|
||||
expectedCompletion: '30 Haziran 2026',
|
||||
connections: ['M1', 'M3'],
|
||||
features: ['Aktarma İstasyonu', 'Otopark', 'Engelsiz Erişim'],
|
||||
dailyCapacity: '50,000',
|
||||
image: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Tuzluçayır',
|
||||
status: 'in-progress',
|
||||
progress: 65,
|
||||
startDate: '1 Şubat 2024',
|
||||
expectedCompletion: '15 Temmuz 2026',
|
||||
connections: [],
|
||||
features: ['Modern Tasarım', 'Güneş Enerjisi', 'Güvenlik Sistemleri'],
|
||||
dailyCapacity: '35,000',
|
||||
image: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Yenimahalle',
|
||||
status: 'in-progress',
|
||||
progress: 55,
|
||||
startDate: '15 Mart 2024',
|
||||
expectedCompletion: '30 Ağustos 2026',
|
||||
connections: ['M2'],
|
||||
features: ['Aktarma Merkezi', 'Ticari Alan', 'Otopark'],
|
||||
dailyCapacity: '45,000',
|
||||
image: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Demetevler',
|
||||
status: 'in-progress',
|
||||
progress: 45,
|
||||
startDate: '1 Nisan 2024',
|
||||
expectedCompletion: '15 Eylül 2026',
|
||||
connections: [],
|
||||
features: ['Modern Mimari', 'LED Aydınlatma', 'Havalandırma'],
|
||||
dailyCapacity: '30,000',
|
||||
image: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Akköprü',
|
||||
status: 'in-progress',
|
||||
progress: 40,
|
||||
startDate: '15 Nisan 2024',
|
||||
expectedCompletion: '30 Eylül 2026',
|
||||
connections: [],
|
||||
features: ['Geniş Peronlar', 'Asansör', 'Güvenlik Kameraları'],
|
||||
dailyCapacity: '28,000',
|
||||
image: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'Şentepe',
|
||||
status: 'planned',
|
||||
progress: 25,
|
||||
startDate: '1 Mayıs 2024',
|
||||
expectedCompletion: '15 Ekim 2026',
|
||||
connections: [],
|
||||
features: ['Çevre Dostu', 'Akıllı Sistemler', 'Engelsiz Erişim'],
|
||||
dailyCapacity: '25,000',
|
||||
image: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'Atatürk',
|
||||
status: 'planned',
|
||||
progress: 20,
|
||||
startDate: '15 Mayıs 2024',
|
||||
expectedCompletion: '30 Ekim 2026',
|
||||
connections: ['M1', 'M4'],
|
||||
features: ['Ana Aktarma', 'AVM Bağlantısı', 'Geniş Alan'],
|
||||
dailyCapacity: '60,000',
|
||||
image: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Sıhhiye',
|
||||
status: 'planned',
|
||||
progress: 15,
|
||||
startDate: '1 Haziran 2024',
|
||||
expectedCompletion: '15 Kasım 2026',
|
||||
connections: ['M2', 'M3'],
|
||||
features: ['Merkezi Konum', 'Hastane Bağlantısı', 'Yüksek Kapasite'],
|
||||
dailyCapacity: '55,000',
|
||||
image: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'Kızılay',
|
||||
status: 'planned',
|
||||
progress: 10,
|
||||
startDate: '15 Haziran 2024',
|
||||
expectedCompletion: '30 Kasım 2026',
|
||||
connections: ['M1', 'M2', 'M3', 'M4'],
|
||||
features: ['Merkez İstasyon', 'Çok Katlı', 'Tüm Hatlar'],
|
||||
dailyCapacity: '80,000',
|
||||
image: 'https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: 'Kocatepe',
|
||||
status: 'planned',
|
||||
progress: 5,
|
||||
startDate: '1 Temmuz 2024',
|
||||
expectedCompletion: '15 Aralık 2026',
|
||||
connections: [],
|
||||
features: ['Modern Tasarım', 'Ticari Birimler', 'Güvenlik'],
|
||||
dailyCapacity: '22,000',
|
||||
image: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg'
|
||||
}
|
||||
];
|
||||
|
||||
export const getStatusColor = (status: MetroStation['status']) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'bg-green-500';
|
||||
case 'in-progress':
|
||||
return 'bg-blue-500';
|
||||
case 'planned':
|
||||
return 'bg-yellow-500';
|
||||
default:
|
||||
return 'bg-gray-500';
|
||||
}
|
||||
};
|
||||
|
||||
export const getStatusText = (status: MetroStation['status']) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return 'Tamamlandı';
|
||||
case 'in-progress':
|
||||
return 'Devam Ediyor';
|
||||
case 'planned':
|
||||
return 'Planlanıyor';
|
||||
default:
|
||||
return 'Bilinmiyor';
|
||||
}
|
||||
};
|
||||
114
data/news.ts
Normal file
114
data/news.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
export interface NewsItem {
|
||||
id: number;
|
||||
category: 'construction' | 'announcements' | 'events';
|
||||
title: string;
|
||||
summary: string;
|
||||
image: string;
|
||||
date: string;
|
||||
author: string;
|
||||
content: string;
|
||||
tags: string[];
|
||||
featured?: boolean; // Ana sayfada gösterilecek mi
|
||||
}
|
||||
|
||||
export const newsData: NewsItem[] = [
|
||||
{
|
||||
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://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
|
||||
date: '20 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. İnşaat ekiplerimiz 7/24 çalışarak projeyi zamanında tamamlamak için büyük çaba gösteriyor.',
|
||||
tags: ['Metro', 'İnşaat', 'A2 Hattı'],
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category: 'announcements',
|
||||
title: 'Yeni İstasyon Tasarımları Açıklandı',
|
||||
summary: 'Modern ve çevre dostu istasyon tasarımları kamuoyuyla paylaşıldı.',
|
||||
image: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
|
||||
date: '18 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. Yolcu konforunu artıracak modern bekleme alanları ve engelsiz erişim imkanları sunulacak.',
|
||||
tags: ['Tasarım', 'Sürdürülebilirlik', 'İstasyon'],
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
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://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
|
||||
date: '15 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. Dikimevi istasyonu günlük 50 bin yolcu kapasitesine sahip olacak.',
|
||||
tags: ['Tören', 'Dikimevi', 'Milestone'],
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
category: 'announcements',
|
||||
title: 'Metro Hattı 2026\'da Hizmete Girecek',
|
||||
summary: 'A2 Metro Hattı\'nın ilk etabının 2026 yılı sonunda hizmete girmesi planlanıyor.',
|
||||
image: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg',
|
||||
date: '12 Ekim 2025',
|
||||
author: 'Ankara Büyükşehir Belediyesi',
|
||||
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.',
|
||||
tags: ['2026', 'Açılış', 'Milestone'],
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
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://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg',
|
||||
date: '8 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ı. Etkinliğe büyük ilgi gösterildi.',
|
||||
tags: ['Tanıtım', 'Etkinlik', 'Halkla İlişkiler']
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
category: 'announcements',
|
||||
title: 'Trafik Düzenlemesi Duyurusu',
|
||||
summary: 'İnşaat nedeniyle bazı yollarda geçici trafik düzenlemeleri yapılacak.',
|
||||
image: 'https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg',
|
||||
date: '5 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. Detaylı bilgi için belediyemizin web sitesini ziyaret edebilirsiniz.',
|
||||
tags: ['Trafik', 'Duyuru', 'Koordinasyon']
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
category: 'construction',
|
||||
title: 'TBM Makinesi Tünele Girdi',
|
||||
summary: 'Dev tünel açma makinesi (TBM) çalışmalara başladı.',
|
||||
image: 'https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg',
|
||||
date: '1 Ekim 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. Makine, en son teknoloji sensörlerle donatılmış durumda.',
|
||||
tags: ['TBM', 'Tünel', 'Teknoloji']
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
category: 'events',
|
||||
title: 'İş Güvenliği Eğitimi Tamamlandı',
|
||||
summary: '500+ çalışan iş güvenliği eğitiminden geçti.',
|
||||
image: 'https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg',
|
||||
date: '28 Eylül 2025',
|
||||
author: 'İnsan Kaynakları',
|
||||
content: 'A2 Metro Hattı projesinde çalışan tüm personel için kapsamlı iş güvenliği eğitimleri düzenlendi. ISO 45001 standartlarına uygun eğitimlerde, inşaat sahası güvenliği, ekipman kullanımı ve acil durum prosedürleri anlatıldı. Sıfır iş kazası hedefiyle çalışıyoruz.',
|
||||
tags: ['İş Güvenliği', 'Eğitim', 'ISO 45001']
|
||||
}
|
||||
];
|
||||
|
||||
export const categories = [
|
||||
{ id: 'all', name: 'Tümü', icon: '📰' },
|
||||
{ id: 'construction', name: 'İnşaat', icon: '🏗️' },
|
||||
{ id: 'announcements', name: 'Duyurular', icon: '📢' },
|
||||
{ id: 'events', name: 'Etkinlikler', icon: '🎉' },
|
||||
];
|
||||
Reference in New Issue
Block a user