Hamburger
This commit is contained in:
Şahan Hasret
@@ -3,243 +3,183 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import Header from "@/components/Header";
|
import Header from "@/components/Header";
|
||||||
import Footer from "@/components/Footer";
|
import Footer from "@/components/Footer";
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
export default function BelgelerPage() {
|
export default function Documents() {
|
||||||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
const [selectedCategory, setSelectedCategory] = useState('all');
|
||||||
|
|
||||||
const categories = [
|
const categories = [
|
||||||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
{ id: 'all', name: 'Tümü', icon: '📁' },
|
||||||
{ id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
|
{ id: 'technical', name: 'Teknik Dokümanlar', icon: '📐' },
|
||||||
{ id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
|
{ id: 'reports', name: 'Raporlar', icon: '📊' },
|
||||||
{ id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
|
{ id: 'permissions', name: 'İzinler', icon: '✅' },
|
||||||
{ id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
|
{ id: 'presentations', name: 'Sunumlar', icon: '📽️' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const documents = [
|
const documents = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "A2 Metro Hattı İhale Şartnamesi",
|
category: 'technical',
|
||||||
category: 'ihale',
|
title: 'A2 Metro Hattı Teknik Şartnamesi',
|
||||||
date: "15 Ocak 2025",
|
description: 'Proje kapsamındaki tüm teknik detaylar',
|
||||||
size: "2.4 MB",
|
date: '15 Ekim 2025',
|
||||||
type: "PDF",
|
size: '12.5 MB',
|
||||||
description: "Metro inşaatı için teknik şartname ve ihale koşulları"
|
type: 'PDF',
|
||||||
|
icon: '📐',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "Proje Teknik Çizimleri",
|
category: 'technical',
|
||||||
category: 'teknik',
|
title: 'İstasyon Mimari Projesi',
|
||||||
date: "10 Şubat 2025",
|
description: 'İstasyon binalarının mimari tasarımı',
|
||||||
size: "15.8 MB",
|
date: '12 Ekim 2025',
|
||||||
type: "DWG",
|
size: '25.8 MB',
|
||||||
description: "Tüm istasyonların teknik mimari çizimleri"
|
type: 'PDF',
|
||||||
|
icon: '🏗️',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: "Çevresel Etki Değerlendirme Raporu",
|
category: 'technical',
|
||||||
category: 'cevresel',
|
title: 'Güvenlik Planı ve Prosedürleri',
|
||||||
date: "5 Mart 2025",
|
description: 'İş güvenliği planı ve acil durum prosedürleri',
|
||||||
size: "4.2 MB",
|
date: '10 Ekim 2025',
|
||||||
type: "PDF",
|
size: '6.8 MB',
|
||||||
description: "Proje çevresel etki analizi ve önlemler"
|
type: 'PDF',
|
||||||
|
icon: '🛡️',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: "2025 Mart Ayı İlerleme Raporu",
|
category: 'technical',
|
||||||
category: 'raporlar',
|
title: 'Malzeme Spesifikasyonları',
|
||||||
date: "1 Nisan 2025",
|
description: 'İnşaatta kullanılacak malzeme detayları',
|
||||||
size: "1.8 MB",
|
date: '8 Ekim 2025',
|
||||||
type: "PDF",
|
size: '9.2 MB',
|
||||||
description: "Aylık proje ilerleme ve istatistikler"
|
type: 'PDF',
|
||||||
|
icon: '🔧',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
title: "Güvenlik Planı ve Prosedürleri",
|
category: 'reports',
|
||||||
category: 'teknik',
|
title: 'ÇED Raporu',
|
||||||
date: "20 Ocak 2025",
|
description: 'Çevresel Etki Değerlendirme',
|
||||||
size: "3.1 MB",
|
date: '5 Ekim 2025',
|
||||||
type: "PDF",
|
size: '8.3 MB',
|
||||||
description: "İnşaat sahası güvenlik protokolleri"
|
type: 'PDF',
|
||||||
|
icon: '🌍',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
title: "İstasyon Tasarım Detayları",
|
category: 'reports',
|
||||||
category: 'teknik',
|
title: 'Eylül 2025 İlerleme Raporu',
|
||||||
date: "8 Şubat 2025",
|
description: 'Aylık proje ilerleme durumu',
|
||||||
size: "8.5 MB",
|
date: '1 Ekim 2025',
|
||||||
type: "PDF",
|
size: '3.2 MB',
|
||||||
description: "İstasyon iç ve dış mekan tasarım detayları"
|
type: 'PDF',
|
||||||
|
icon: '📈',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 7,
|
id: 7,
|
||||||
title: "Finansman Planı",
|
category: 'reports',
|
||||||
category: 'ihale',
|
title: 'Ağustos 2025 İlerleme Raporu',
|
||||||
date: "12 Ocak 2025",
|
description: 'Aylık proje ilerleme durumu',
|
||||||
size: "1.2 MB",
|
date: '1 Eylül 2025',
|
||||||
type: "XLSX",
|
size: '3.1 MB',
|
||||||
description: "Proje bütçe ve finansman dağılımı"
|
type: 'PDF',
|
||||||
|
icon: '📈',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 8,
|
id: 8,
|
||||||
title: "2025 Nisan Ayı İlerleme Raporu",
|
category: 'permissions',
|
||||||
category: 'raporlar',
|
title: 'İnşaat Ruhsatı',
|
||||||
date: "1 Mayıs 2025",
|
description: 'Belediye onaylı inşaat ruhsatı belgesi',
|
||||||
size: "2.1 MB",
|
date: '5 Eylül 2025',
|
||||||
type: "PDF",
|
size: '1.5 MB',
|
||||||
description: "Aylık proje ilerleme ve istatistikler"
|
type: 'PDF',
|
||||||
|
icon: '✅',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 9,
|
id: 9,
|
||||||
title: "Gürültü ve Titreşim Analizi",
|
category: 'permissions',
|
||||||
category: 'cevresel',
|
title: 'Kamulaştırma İzin Belgeleri',
|
||||||
date: "18 Mart 2025",
|
description: 'Proje alanı kamulaştırma işlem belgeleri',
|
||||||
size: "3.8 MB",
|
date: '28 Ağustos 2025',
|
||||||
type: "PDF",
|
size: '4.7 MB',
|
||||||
description: "Çevre gürültü ve titreşim ölçüm sonuçları"
|
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'
|
const filteredDocs = selectedCategory === 'all' ? documents : documents.filter(d => d.category === selectedCategory);
|
||||||
? documents
|
|
||||||
: documents.filter(doc => doc.category === selectedCategory);
|
|
||||||
|
|
||||||
const getFileIcon = (type: string) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'PDF': return '📕';
|
|
||||||
case 'DWG': return '📐';
|
|
||||||
case 'XLSX': return '📊';
|
|
||||||
default: return '📄';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-[#F8F9FA]">
|
<div className="min-h-screen bg-[#003366]">
|
||||||
<Header />
|
<Header />
|
||||||
|
<main className="pt-32 pb-16">
|
||||||
{/* Hero Section */}
|
|
||||||
<div className="bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] py-16">
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="flex items-center space-x-2 text-white/80 text-sm mb-4">
|
<div className="text-center mb-12">
|
||||||
<Link href="/" className="hover:text-white transition-colors">Ana Sayfa</Link>
|
<h1 className="text-4xl font-bold text-white mb-4">Belgeler</h1>
|
||||||
<span>/</span>
|
<p className="text-lg text-white">A2 Metro Hattı proje belgeleri</p>
|
||||||
<span>Belgeler</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-4xl font-bold text-white mb-4">Proje Belgeleri</h1>
|
|
||||||
<p className="text-lg text-white/90 max-w-3xl">
|
<div className="flex justify-center gap-3 mb-12">
|
||||||
A2 Metro Hattı inşaat projesine ait tüm resmi belgeler, teknik dökümanlar ve raporlar.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
||||||
{/* Kategori Filtreleri */}
|
|
||||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-8">
|
|
||||||
<h2 className="text-xl font-bold text-[#004B87] mb-4">Kategoriler</h2>
|
|
||||||
<div className="flex flex-wrap gap-3">
|
|
||||||
{categories.map((cat) => (
|
{categories.map((cat) => (
|
||||||
<button
|
<button
|
||||||
key={cat.id}
|
key={cat.id}
|
||||||
onClick={() => setSelectedCategory(cat.id)}
|
onClick={() => setSelectedCategory(cat.id)}
|
||||||
className={`flex items-center space-x-2 px-5 py-3 rounded-lg font-medium transition-all duration-300 ${
|
className={`px-6 py-3 rounded-full font-semibold ${
|
||||||
selectedCategory === cat.id
|
selectedCategory === cat.id ? 'bg-[#00B4D8] text-white' : 'bg-white text-[#004B87]'
|
||||||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
|
||||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="text-xl">{cat.icon}</span>
|
{cat.icon} {cat.name}
|
||||||
<span>{cat.name}</span>
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Belgeler Listesi */}
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<div className="grid grid-cols-1 gap-6">
|
{filteredDocs.map((doc) => (
|
||||||
{filteredDocs.map((doc) => (
|
<div key={doc.id} className="bg-white rounded-2xl p-6">
|
||||||
<div
|
<div className="text-4xl mb-4">{doc.icon}</div>
|
||||||
key={doc.id}
|
<h3 className="text-xl font-bold text-[#004B87] mb-2">{doc.title}</h3>
|
||||||
className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group"
|
<p className="text-gray-600 text-sm mb-4">{doc.description}</p>
|
||||||
>
|
<div className="text-xs text-gray-500 mb-4">
|
||||||
<div className="p-6 flex items-start space-x-4">
|
<div>{doc.date}</div>
|
||||||
{/* Dosya İkonu */}
|
<div>{doc.size}</div>
|
||||||
<div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl shrink-0 group-hover:scale-110 transition-transform duration-300">
|
|
||||||
{getFileIcon(doc.type)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<button className="w-full bg-[#00B4D8] text-white py-2 rounded-lg">İndir</button>
|
||||||
{/* Belge Bilgileri */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="text-lg font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors">
|
|
||||||
{doc.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 text-sm mb-3">
|
|
||||||
{doc.description}
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-wrap gap-4 text-sm text-gray-500">
|
|
||||||
<div className="flex items-center space-x-1">
|
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
<span>{doc.date}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-1">
|
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
<span>{doc.type}</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-1">
|
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
|
|
||||||
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
|
|
||||||
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
|
|
||||||
</svg>
|
|
||||||
<span>{doc.size}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* İndirme Butonu */}
|
|
||||||
<button className="px-5 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center space-x-2 shrink-0">
|
|
||||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
||||||
</svg>
|
|
||||||
<span className="font-medium">İndir</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Boş Sonuç */}
|
|
||||||
{filteredDocs.length === 0 && (
|
|
||||||
<div className="bg-white rounded-xl shadow-md p-12 text-center">
|
|
||||||
<div className="text-6xl mb-4">📭</div>
|
|
||||||
<h3 className="text-xl font-bold text-gray-700 mb-2">Belge Bulunamadı</h3>
|
|
||||||
<p className="text-gray-500">Bu kategoride henüz belge bulunmamaktadır.</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Bilgilendirme */}
|
|
||||||
<div className="mt-8 bg-blue-50 border-l-4 border-[#00B4D8] p-6 rounded-lg">
|
|
||||||
<div className="flex items-start space-x-3">
|
|
||||||
<svg className="w-6 h-6 text-[#00B4D8] shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-bold text-[#004B87] mb-1">Önemli Not</h3>
|
|
||||||
<p className="text-gray-700 text-sm">
|
|
||||||
Tüm belgeler resmi kaynaklardan alınmıştır. Belgelerin kullanımı ile ilgili sorularınız için
|
|
||||||
<a href="https://www.ankara.bel.tr/" target="_blank" rel="noopener noreferrer" className="text-[#00B4D8] hover:underline ml-1">
|
|
||||||
Ankara Büyükşehir Belediyesi
|
|
||||||
</a> ile iletişime geçebilirsiniz.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
222
app/canli-yayin/page.tsx
Normal file
222
app/canli-yayin/page.tsx
Normal file
@@ -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 (
|
||||||
|
<div className="min-h-screen bg-[#003366]">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main className="pt-32 pb-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Başlık */}
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<div className="flex items-center justify-center space-x-3 mb-4">
|
||||||
|
<div className="w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
|
||||||
|
<h1 className="text-4xl font-bold text-white">Canlı Yayın</h1>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
|
||||||
|
A2 Metro Hattı inşaat çalışmalarını 7/24 canlı izleyin
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ana Video Player */}
|
||||||
|
<div className="bg-white rounded-2xl shadow-2xl overflow-hidden mb-8">
|
||||||
|
{/* Video */}
|
||||||
|
<div className="relative w-full bg-black" style={{ paddingBottom: '56.25%' }}>
|
||||||
|
<iframe
|
||||||
|
className="absolute top-0 left-0 w-full h-full"
|
||||||
|
src={selectedCam.videoUrl}
|
||||||
|
title={selectedCam.name}
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video Bilgileri */}
|
||||||
|
<div className="p-6 lg:p-8">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center space-x-2 mb-2">
|
||||||
|
<span className="px-3 py-1 bg-red-500 text-white text-xs font-semibold rounded-full flex items-center space-x-1">
|
||||||
|
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||||
|
<span>CANLI</span>
|
||||||
|
</span>
|
||||||
|
<span className="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-semibold rounded-full">
|
||||||
|
📍 {selectedCam.location}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold text-[#004B87] mb-2">
|
||||||
|
{selectedCam.name}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center space-x-4 text-sm text-gray-600">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||||
|
<path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{selectedCam.viewers.toLocaleString('tr-TR')} izleyici</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>24/7 Yayında</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Paylaş Butonu */}
|
||||||
|
<button className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors flex items-center space-x-2">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
|
||||||
|
</svg>
|
||||||
|
<span className="font-semibold">Paylaş</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Açıklama */}
|
||||||
|
<div className="bg-gray-50 rounded-lg p-4">
|
||||||
|
<h3 className="font-semibold text-[#004B87] mb-2">Canlı Yayın Hakkında</h3>
|
||||||
|
<p className="text-gray-700 text-sm leading-relaxed">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Diğer Kameralar */}
|
||||||
|
<div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
|
||||||
|
<h3 className="text-2xl font-bold text-[#004B87] mb-6">Diğer Kameralar</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{cameras.map((camera) => (
|
||||||
|
<button
|
||||||
|
key={camera.id}
|
||||||
|
onClick={() => setSelectedCamera(camera.id)}
|
||||||
|
className={`relative rounded-xl overflow-hidden transition-all duration-300 ${
|
||||||
|
selectedCamera === camera.id
|
||||||
|
? 'ring-4 ring-[#00B4D8] shadow-xl scale-105'
|
||||||
|
: 'hover:shadow-lg hover:scale-102'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* Thumbnail */}
|
||||||
|
<div className="aspect-video bg-gray-900 relative">
|
||||||
|
<img
|
||||||
|
src={`https://picsum.photos/400/225?random=${camera.id}`}
|
||||||
|
alt={camera.name}
|
||||||
|
className="w-full h-full object-cover opacity-80"
|
||||||
|
/>
|
||||||
|
{/* CANLI Badge */}
|
||||||
|
<div className="absolute top-2 left-2 px-2 py-1 bg-red-500 text-white text-xs font-semibold rounded flex items-center space-x-1">
|
||||||
|
<div className="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></div>
|
||||||
|
<span>CANLI</span>
|
||||||
|
</div>
|
||||||
|
{/* İzleyici Sayısı */}
|
||||||
|
<div className="absolute bottom-2 right-2 px-2 py-1 bg-black/75 text-white text-xs rounded flex items-center space-x-1">
|
||||||
|
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||||
|
<path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{camera.viewers}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bilgi */}
|
||||||
|
<div className="p-3 bg-white">
|
||||||
|
<h4 className="font-semibold text-[#004B87] text-sm mb-1 line-clamp-2">
|
||||||
|
{camera.name}
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-gray-500 flex items-center">
|
||||||
|
<svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
{camera.location}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* İstatistikler */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
||||||
|
<div className="bg-white rounded-xl p-6 text-center">
|
||||||
|
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg className="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-[#004B87] mb-2">4</h3>
|
||||||
|
<p className="text-gray-600">Aktif Kamera</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl p-6 text-center">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg className="w-8 h-8 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||||
|
<path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-[#004B87] mb-2">4,767</h3>
|
||||||
|
<p className="text-gray-600">Toplam İzleyici</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl p-6 text-center">
|
||||||
|
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg className="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-[#004B87] mb-2">24/7</h3>
|
||||||
|
<p className="text-gray-600">Kesintisiz Yayın</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
282
app/haberler/page.tsx
Normal file
282
app/haberler/page.tsx
Normal file
@@ -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<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);
|
||||||
|
|
||||||
|
const selectedNewsItem = news.find(item => item.id === selectedNews);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[#003366]">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main className="pt-32 pb-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Başlık */}
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h1 className="text-4xl font-bold text-white mb-4">Haberler ve Duyurular</h1>
|
||||||
|
<p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
|
||||||
|
A2 Metro Hattı projesi ile ilgili güncel haberler, duyurular ve etkinlikler
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kategori Filtreleri */}
|
||||||
|
<div className="flex flex-wrap justify-center 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 ${
|
||||||
|
selectedCategory === category.id
|
||||||
|
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||||
|
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>{category.icon}</span>
|
||||||
|
<span>{category.name}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Haber Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{filteredNews.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => 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 */}
|
||||||
|
<div className="relative h-48 overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={item.image}
|
||||||
|
alt={item.title}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
|
||||||
|
/>
|
||||||
|
<div className="absolute top-3 left-3">
|
||||||
|
<span className="px-3 py-1 bg-[#00B4D8] text-white text-xs font-semibold rounded-full">
|
||||||
|
{categories.find(c => c.id === item.category)?.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* İçerik */}
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-center space-x-2 text-xs text-gray-500 mb-3">
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{item.date}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-xl font-bold text-[#004B87] mb-3 line-clamp-2">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-gray-600 text-sm mb-4 line-clamp-3">
|
||||||
|
{item.summary}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
{item.author}
|
||||||
|
</span>
|
||||||
|
<button className="text-[#00B4D8] font-semibold text-sm hover:text-[#004B87] transition-colors">
|
||||||
|
Devamını Oku →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Haber Bulunamadı */}
|
||||||
|
{filteredNews.length === 0 && (
|
||||||
|
<div className="text-center py-16">
|
||||||
|
<div className="text-6xl mb-4">📰</div>
|
||||||
|
<h3 className="text-2xl font-bold text-white mb-2">Henüz Haber Yok</h3>
|
||||||
|
<p className="text-[#F8F9FA]">Bu kategoride henüz haber bulunmuyor.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Haber Detay Modal */}
|
||||||
|
{selectedNewsItem && (
|
||||||
|
<div className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fadeIn">
|
||||||
|
<div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
||||||
|
{/* Görsel */}
|
||||||
|
<div className="relative h-64 md:h-96">
|
||||||
|
<img
|
||||||
|
src={selectedNewsItem.image}
|
||||||
|
alt={selectedNewsItem.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedNews(null)}
|
||||||
|
className="absolute top-4 right-4 w-10 h-10 bg-white rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors shadow-lg"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div className="absolute bottom-4 left-4">
|
||||||
|
<span className="px-4 py-2 bg-[#00B4D8] text-white font-semibold rounded-full">
|
||||||
|
{categories.find(c => c.id === selectedNewsItem.category)?.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* İçerik */}
|
||||||
|
<div className="p-8">
|
||||||
|
<div className="flex items-center space-x-4 text-sm text-gray-500 mb-4">
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{selectedNewsItem.date}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{selectedNewsItem.author}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-3xl font-bold text-[#004B87] mb-6">
|
||||||
|
{selectedNewsItem.title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-gray-700 text-lg leading-relaxed mb-6">
|
||||||
|
{selectedNewsItem.content}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Etiketler */}
|
||||||
|
<div className="flex flex-wrap gap-2 mb-6">
|
||||||
|
{selectedNewsItem.tags.map((tag, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Paylaş */}
|
||||||
|
<div className="border-t pt-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-gray-600 font-semibold">Haberi Paylaş:</span>
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<button className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button className="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center hover:bg-sky-600 transition-colors">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button className="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700 transition-colors">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
286
app/medya/page.tsx
Normal file
286
app/medya/page.tsx
Normal file
@@ -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<number | null>(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 (
|
||||||
|
<div className="min-h-screen bg-[#003366]">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main className="pt-32 pb-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
{/* Başlık */}
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h1 className="text-4xl font-bold text-white mb-4">
|
||||||
|
Medya Galerisi
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
|
||||||
|
A2 Metro Hattı projesi ile ilgili videolar ve fotoğraflar
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Menü */}
|
||||||
|
<div className="flex justify-center space-x-4 mb-8">
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTab('all')}
|
||||||
|
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
|
||||||
|
selectedTab === 'all'
|
||||||
|
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||||
|
: 'bg-white text-[#004B87] hover:bg-gray-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Tümü
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTab('video')}
|
||||||
|
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center 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">
|
||||||
|
<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 ${
|
||||||
|
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">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Medya Grid */}
|
||||||
|
{!selectedMediaItem ? (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{filteredMedia.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => 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 */}
|
||||||
|
<div className="relative h-56 overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={item.thumbnail}
|
||||||
|
alt={item.title}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
{/* Video Badge */}
|
||||||
|
{item.type === 'video' && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors">
|
||||||
|
<div className="w-16 h-16 rounded-full bg-[#00B4D8] flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||||
|
<svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M8 5v14l11-7z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Duration Badge */}
|
||||||
|
{item.type === 'video' && (
|
||||||
|
<div className="absolute bottom-3 right-3 px-2 py-1 bg-black/75 text-white text-xs rounded">
|
||||||
|
{item.duration}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Photo Badge */}
|
||||||
|
{item.type === 'photo' && (
|
||||||
|
<div className="absolute top-3 right-3 px-3 py-1 bg-[#00B4D8] text-white text-xs rounded-full font-semibold">
|
||||||
|
FOTO
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-5">
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
|
||||||
|
</svg>
|
||||||
|
<span>{item.date}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2 group-hover:text-[#00B4D8] transition-colors">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 text-sm line-clamp-2">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* Medya Detayı */
|
||||||
|
<div className="bg-white rounded-2xl shadow-2xl overflow-hidden animate-fadeIn">
|
||||||
|
<div className="p-6 lg:p-8">
|
||||||
|
{/* Geri Butonu */}
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedMedia(null)}
|
||||||
|
className="flex items-center space-x-2 text-[#00B4D8] hover:text-[#004B87] font-semibold mb-6 transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
<span>Galeriye Dön</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Video Player veya Büyük Fotoğraf */}
|
||||||
|
{selectedMediaItem?.type === 'video' ? (
|
||||||
|
<div className="relative w-full mb-6" style={{ paddingBottom: '56.25%' }}>
|
||||||
|
<iframe
|
||||||
|
className="absolute top-0 left-0 w-full h-full rounded-lg"
|
||||||
|
src={selectedMediaItem.videoUrl}
|
||||||
|
title={selectedMediaItem.title}
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mb-6 rounded-lg overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={selectedMediaItem?.thumbnail}
|
||||||
|
alt={selectedMediaItem?.title}
|
||||||
|
className="w-full h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bilgiler */}
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
|
||||||
|
</svg>
|
||||||
|
<span>{selectedMediaItem?.date}</span>
|
||||||
|
{selectedMediaItem?.type === 'video' && (
|
||||||
|
<>
|
||||||
|
<span className="text-gray-300">•</span>
|
||||||
|
<span>{selectedMediaItem?.duration}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-3xl font-bold text-[#004B87] mb-4">
|
||||||
|
{selectedMediaItem?.title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-gray-700 text-lg leading-relaxed">
|
||||||
|
{selectedMediaItem?.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Paylaş */}
|
||||||
|
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<span className="text-sm text-gray-500">Paylaş:</span>
|
||||||
|
<button className="text-[#00B4D8] hover:text-[#004B87] transition-colors">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
749
app/page.tsx
749
app/page.tsx
@@ -12,6 +12,19 @@ export default function Home() {
|
|||||||
const [selectedNews, setSelectedNews] = useState<number | null>(null);
|
const [selectedNews, setSelectedNews] = useState<number | null>(null);
|
||||||
const [showDocuments, setShowDocuments] = useState(false);
|
const [showDocuments, setShowDocuments] = useState(false);
|
||||||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||||||
|
const [showMediaGallery, setShowMediaGallery] = useState(false);
|
||||||
|
const [selectedMediaTab, setSelectedMediaTab] = useState<'all' | 'video' | 'photo'>('all');
|
||||||
|
const [selectedMedia, setSelectedMedia] = useState<number | null>(null);
|
||||||
|
const [showComplaintForm, setShowComplaintForm] = useState(false);
|
||||||
|
const [complaintFormData, setComplaintFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
subject: '',
|
||||||
|
type: 'dilek',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
const [showContact, setShowContact] = useState(false);
|
||||||
|
|
||||||
const categories = [
|
const categories = [
|
||||||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
{ 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 (
|
return (
|
||||||
<div className="min-h-screen bg-[#003366]">
|
<div className="min-h-screen bg-[#003366]">
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
{/* Hero Video Section */}
|
{/* Hero Video Section */}
|
||||||
<div className="relative w-full h-[calc(100vh-80px)]">
|
<div className="relative w-full h-screen pt-20">
|
||||||
{/* Video Background */}
|
{/* Video Background */}
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
<video
|
<video
|
||||||
@@ -253,35 +343,44 @@ export default function Home() {
|
|||||||
<span className="text-[#004B87] font-semibold text-sm">Belgeler</span>
|
<span className="text-[#004B87] font-semibold text-sm">Belgeler</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Basında Biz */}
|
{/* Medya Galerisi */}
|
||||||
<a href="/basinda-biz" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group">
|
<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"
|
||||||
|
>
|
||||||
<div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
<div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
<svg fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
|
<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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-[#004B87] font-semibold text-sm">Basında Biz</span>
|
<span className="text-[#004B87] font-semibold text-sm">Medya Galerisi</span>
|
||||||
</a>
|
</button>
|
||||||
|
|
||||||
{/* Dilek-Şikayet */}
|
{/* Dilek-Şikayet */}
|
||||||
<a href="/dilek-sikayet" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group">
|
<button
|
||||||
|
onClick={() => 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"
|
||||||
|
>
|
||||||
<div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
<div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
<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"/>
|
<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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-[#004B87] font-semibold text-sm">Dilek-Şikayet</span>
|
<span className="text-[#004B87] font-semibold text-sm">Dilek-Şikayet</span>
|
||||||
</a>
|
</button>
|
||||||
|
|
||||||
{/* E-İletişim */}
|
{/* E-İletişim */}
|
||||||
<a href="/e-iletisim" className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group">
|
<button
|
||||||
|
onClick={() => 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"
|
||||||
|
>
|
||||||
<div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
<div className="w-12 h-12 mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||||
<svg fill="currentColor" viewBox="0 0 24 24">
|
<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"/>
|
<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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-[#004B87] font-semibold text-sm">E-İletişim</span>
|
<span className="text-[#004B87] font-semibold text-sm">E-İletişim</span>
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -506,42 +605,42 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Belgeler Listesi */}
|
{/* Belgeler Grid - 3 sütunlu */}
|
||||||
<div className="grid grid-cols-1 gap-4 max-h-[600px] overflow-y-auto">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-h-[600px] overflow-y-auto pr-2">
|
||||||
{filteredDocs.map((doc) => (
|
{filteredDocs.map((doc) => (
|
||||||
<div
|
<div
|
||||||
key={doc.id}
|
key={doc.id}
|
||||||
className="bg-gray-50 rounded-xl p-5 hover:shadow-lg transition-all duration-300 group"
|
className="bg-gray-50 rounded-xl p-5 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group flex flex-col"
|
||||||
>
|
>
|
||||||
<div className="flex items-start space-x-4">
|
{/* Dosya İkonu - Üstte ortalı */}
|
||||||
{/* Dosya İkonu */}
|
<div className="flex justify-center mb-4">
|
||||||
<div className="w-12 h-12 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-lg flex items-center justify-center text-2xl shrink-0 group-hover:scale-110 transition-transform duration-300">
|
<div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl group-hover:scale-110 transition-transform duration-300 shadow-lg">
|
||||||
{getFileIcon(doc.type)}
|
{getFileIcon(doc.type)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Belge Bilgileri */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<h3 className="text-base font-bold text-[#004B87] mb-1 group-hover:text-[#00B4D8] transition-colors">
|
|
||||||
{doc.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600 text-sm mb-2">
|
|
||||||
{doc.description}
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-wrap gap-3 text-xs text-gray-500">
|
|
||||||
<span>📅 {doc.date}</span>
|
|
||||||
<span>📄 {doc.type}</span>
|
|
||||||
<span>💾 {doc.size}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* İndirme Butonu */}
|
|
||||||
<button className="px-4 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center space-x-2 shrink-0 text-sm">
|
|
||||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
||||||
</svg>
|
|
||||||
<span className="font-medium">İndir</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Belge Bilgileri */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-base font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors line-clamp-2 text-center">
|
||||||
|
{doc.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 text-sm mb-3 line-clamp-2 text-center">
|
||||||
|
{doc.description}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap justify-center gap-2 text-xs text-gray-500 mb-4">
|
||||||
|
<span className="px-2 py-1 bg-white rounded-full">📅 {doc.date}</span>
|
||||||
|
<span className="px-2 py-1 bg-white rounded-full">📄 {doc.type}</span>
|
||||||
|
<span className="px-2 py-1 bg-white rounded-full">💾 {doc.size}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* İndirme Butonu - Alt kısımda */}
|
||||||
|
<button className="w-full py-2.5 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center justify-center space-x-2 text-sm font-semibold">
|
||||||
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||||
|
</svg>
|
||||||
|
<span>İndir</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -549,8 +648,578 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* 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="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
|
||||||
|
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="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>
|
||||||
|
<h2 className="text-2xl font-bold text-[#004B87]">Medya Galerisi</h2>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowMediaGallery(false);
|
||||||
|
setSelectedMedia(null);
|
||||||
|
setSelectedMediaTab('all');
|
||||||
|
}}
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* Medya Grid veya Detay */}
|
||||||
|
{selectedMedia === null ? (
|
||||||
|
<>
|
||||||
|
{/* Tab Menü */}
|
||||||
|
<div className="flex justify-center space-x-4 mb-8">
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedMediaTab('all')}
|
||||||
|
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 ${
|
||||||
|
selectedMediaTab === 'all'
|
||||||
|
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||||
|
: 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Tümü
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedMediaTab('video')}
|
||||||
|
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||||||
|
selectedMediaTab === 'video'
|
||||||
|
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||||
|
: 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg className="w-5 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={() => setSelectedMediaTab('photo')}
|
||||||
|
className={`px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center space-x-2 ${
|
||||||
|
selectedMediaTab === 'photo'
|
||||||
|
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||||
|
: 'bg-gray-100 text-[#004B87] hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg className="w-5 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>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Medya Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{filteredMedia.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => 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 */}
|
||||||
|
<div className="relative h-56 overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={item.thumbnail}
|
||||||
|
alt={item.title}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
{/* Video Badge */}
|
||||||
|
{item.type === 'video' && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/40 transition-colors">
|
||||||
|
<div className="w-16 h-16 rounded-full bg-[#00B4D8] flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||||
|
<svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M8 5v14l11-7z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Duration Badge */}
|
||||||
|
{item.type === 'video' && 'duration' in item && (
|
||||||
|
<div className="absolute bottom-3 right-3 px-2 py-1 bg-black/75 text-white text-xs rounded">
|
||||||
|
{item.duration}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* Photo Badge */}
|
||||||
|
{item.type === 'photo' && (
|
||||||
|
<div className="absolute top-3 right-3 px-3 py-1 bg-[#00B4D8] text-white text-xs rounded-full font-semibold">
|
||||||
|
FOTO
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-5">
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
|
||||||
|
</svg>
|
||||||
|
<span>{item.date}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-[#004B87] mb-2 line-clamp-2 group-hover:text-[#00B4D8] transition-colors">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 text-sm line-clamp-2">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
/* Medya Detayı */
|
||||||
|
<div className="animate-fadeIn">
|
||||||
|
{mediaItems.filter(m => m.id === selectedMedia).map((item) => (
|
||||||
|
<div key={item.id}>
|
||||||
|
{/* Geri Butonu */}
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedMedia(null)}
|
||||||
|
className="flex items-center space-x-2 text-[#00B4D8] hover:text-[#004B87] font-semibold mb-6 transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
<span>Galeriye Dön</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Video Player veya Büyük Fotoğraf */}
|
||||||
|
{item.type === 'video' ? (
|
||||||
|
<div className="relative w-full mb-6" style={{ paddingBottom: '56.25%' }}>
|
||||||
|
<iframe
|
||||||
|
className="absolute top-0 left-0 w-full h-full rounded-lg"
|
||||||
|
src={'videoUrl' in item ? item.videoUrl : ''}
|
||||||
|
title={item.title}
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowFullScreen
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mb-6 rounded-lg overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={item.thumbnail}
|
||||||
|
alt={item.title}
|
||||||
|
className="w-full h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bilgiler */}
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
|
||||||
|
</svg>
|
||||||
|
<span>{item.date}</span>
|
||||||
|
{item.type === 'video' && 'duration' in item && (
|
||||||
|
<>
|
||||||
|
<span className="text-gray-300">•</span>
|
||||||
|
<span>{item.duration}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-3xl font-bold text-[#004B87] mb-4">
|
||||||
|
{item.title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-gray-700 text-lg leading-relaxed">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Paylaş */}
|
||||||
|
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<span className="text-sm text-gray-500">Paylaş:</span>
|
||||||
|
<button className="text-[#00B4D8] hover:text-[#004B87] transition-colors">
|
||||||
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedMedia(null)}
|
||||||
|
className="px-6 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors"
|
||||||
|
>
|
||||||
|
Kapat
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 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="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
|
||||||
|
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="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>
|
||||||
|
<h2 className="text-2xl font-bold text-[#004B87]">Dilek ve Şikayet Formu</h2>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowComplaintForm(false);
|
||||||
|
setComplaintFormData({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
subject: '',
|
||||||
|
type: 'dilek',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* Bilgilendirme */}
|
||||||
|
<div className="bg-blue-50 border-l-4 border-[#00B4D8] p-4 mb-6">
|
||||||
|
<div className="flex items-start">
|
||||||
|
<svg className="w-5 h-5 text-[#00B4D8] mt-0.5 mr-3 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-sm text-gray-700">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<form className="space-y-6" onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
alert('Form gönderildi! (Demo)');
|
||||||
|
setShowComplaintForm(false);
|
||||||
|
setComplaintFormData({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
subject: '',
|
||||||
|
type: 'dilek',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
}}>
|
||||||
|
{/* Başvuru Tipi */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-[#004B87] mb-3">
|
||||||
|
Başvuru Tipi <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
value="dilek"
|
||||||
|
checked={complaintFormData.type === 'dilek'}
|
||||||
|
onChange={(e) => setComplaintFormData({...complaintFormData, type: e.target.value})}
|
||||||
|
className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-gray-700">Dilek / Öneri</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="type"
|
||||||
|
value="sikayet"
|
||||||
|
checked={complaintFormData.type === 'sikayet'}
|
||||||
|
onChange={(e) => setComplaintFormData({...complaintFormData, type: e.target.value})}
|
||||||
|
className="w-4 h-4 text-[#00B4D8] border-gray-300 focus:ring-[#00B4D8]"
|
||||||
|
/>
|
||||||
|
<span className="ml-2 text-gray-700">Şikayet</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* İki Sütunlu Alan */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* Ad Soyad */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||||||
|
Ad Soyad <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
required
|
||||||
|
value={complaintFormData.name}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* E-posta */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||||||
|
E-posta <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
required
|
||||||
|
value={complaintFormData.email}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Telefon */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="phone" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||||||
|
Telefon
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phone"
|
||||||
|
value={complaintFormData.phone}
|
||||||
|
onChange={(e) => 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__) ___ __ __"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Konu */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="subject" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||||||
|
Konu <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="subject"
|
||||||
|
required
|
||||||
|
value={complaintFormData.subject}
|
||||||
|
onChange={(e) => 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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mesaj */}
|
||||||
|
<div>
|
||||||
|
<label htmlFor="message" className="block text-sm font-semibold text-[#004B87] mb-2">
|
||||||
|
Mesajınız <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
required
|
||||||
|
rows={6}
|
||||||
|
value={complaintFormData.message}
|
||||||
|
onChange={(e) => setComplaintFormData({...complaintFormData, message: 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 resize-none text-gray-900 placeholder:text-gray-500"
|
||||||
|
placeholder="Lütfen detaylı bilgi veriniz..."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* KVKK Onayı */}
|
||||||
|
<div className="flex items-start">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="kvkk"
|
||||||
|
required
|
||||||
|
className="w-4 h-4 mt-1 text-[#00B4D8] border-gray-300 rounded focus:ring-[#00B4D8]"
|
||||||
|
/>
|
||||||
|
<label htmlFor="kvkk" className="ml-3 text-sm text-gray-700">
|
||||||
|
<span className="text-red-500">*</span> Kişisel verilerimin işlenmesine ilişkin{' '}
|
||||||
|
<a href="#" className="text-[#00B4D8] hover:underline">KVKK Aydınlatma Metni</a>'ni okudum ve kabul ediyorum.
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Butonlar */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="flex-1 px-6 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl flex items-center justify-center space-x-2"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||||
|
</svg>
|
||||||
|
<span>Gönder</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setComplaintFormData({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
subject: '',
|
||||||
|
type: 'dilek',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
|
||||||
|
>
|
||||||
|
Temizle
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 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="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-10 h-10 bg-[#004B87] rounded-lg flex items-center justify-center">
|
||||||
|
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="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>
|
||||||
|
<h2 className="text-2xl font-bold text-[#004B87]">İletişim Bilgileri</h2>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowContact(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 className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
{/* Sol Taraf - İletişim Kartları */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Adres Kartı */}
|
||||||
|
<div className="bg-linear-to-br from-blue-50 to-blue-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<div className="w-16 h-16 bg-[#004B87] rounded-xl flex items-center justify-center shrink-0">
|
||||||
|
<svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-bold text-[#004B87] mb-2">ADRES</h3>
|
||||||
|
<p className="text-gray-700 leading-relaxed">
|
||||||
|
Emniyet Mah. Hipodrom Caddesi No: 5<br />
|
||||||
|
Yenimahalle / Ankara
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* KEP Adresi Kartı */}
|
||||||
|
<div className="bg-linear-to-br from-cyan-50 to-cyan-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<div className="w-16 h-16 bg-[#00B4D8] rounded-xl flex items-center justify-center shrink-0">
|
||||||
|
<svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-bold text-[#004B87] mb-2">KEP ADRESİ</h3>
|
||||||
|
<a
|
||||||
|
href="mailto:ankarabuyuksehirbelediyesi@hs01.kep.tr"
|
||||||
|
className="text-gray-700 hover:text-[#00B4D8] transition-colors break-all"
|
||||||
|
>
|
||||||
|
ankarabuyuksehirbelediyesi@hs01.kep.tr
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Telefon Kartı */}
|
||||||
|
<div className="bg-linear-to-br from-indigo-50 to-indigo-100 rounded-xl p-6 hover:shadow-lg transition-all duration-300">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<div className="w-16 h-16 bg-[#004B87] rounded-xl flex items-center justify-center shrink-0">
|
||||||
|
<svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-bold text-[#004B87] mb-2">TELEFON</h3>
|
||||||
|
<a
|
||||||
|
href="tel:+903125071000"
|
||||||
|
className="text-xl font-semibold text-gray-700 hover:text-[#00B4D8] transition-colors"
|
||||||
|
>
|
||||||
|
+90 (312) 507 10 00
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Çalışma Saatleri */}
|
||||||
|
<div className="bg-linear-to-br from-green-50 to-green-100 rounded-xl p-6">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<div className="w-16 h-16 bg-green-600 rounded-xl flex items-center justify-center shrink-0">
|
||||||
|
<svg className="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-bold text-[#004B87] mb-2">ÇALIŞMA SAATLERİ</h3>
|
||||||
|
<p className="text-gray-700">
|
||||||
|
<strong>Hafta İçi:</strong> 08:30 - 17:30<br />
|
||||||
|
<strong>Hafta Sonu:</strong> Kapalı
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sağ Taraf - Harita */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-xl font-bold text-[#004B87] mb-4">Konum</h3>
|
||||||
|
<div className="rounded-xl overflow-hidden shadow-lg h-[600px]">
|
||||||
|
<iframe
|
||||||
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3059.2326827229665!2d32.8548!3d39.9458!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34f190a9c6b1f%3A0x5d3f8b8a8b8a8b8a!2sEmniyet%2C%20Hipodrom%20Cd.%20No%3A5%2C%2006430%20Yenimahalle%2FAnkara!5e0!3m2!1str!2str!4v1234567890123!5m2!1str!2str"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
style={{ border: 0 }}
|
||||||
|
allowFullScreen
|
||||||
|
loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Haritada Göster Butonu */}
|
||||||
|
<a
|
||||||
|
href="https://maps.app.goo.gl/82STypmZqeSW0mQC6"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-full flex items-center justify-center space-x-2 px-6 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors font-semibold shadow-lg hover:shadow-xl"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||||||
|
</svg>
|
||||||
|
<span>Google Maps'te Aç</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Ana İçerik - Kartlar için üstten boşluk */}
|
{/* 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 ? '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-32'} pb-12`}>
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-3xl font-bold text-white mb-4">
|
<h2 className="text-3xl font-bold text-white mb-4">
|
||||||
Metro Hat Durumları
|
Metro Hat Durumları
|
||||||
|
|||||||
@@ -7,16 +7,12 @@ export default function Footer() {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
{/* Logo ve Bilgi */}
|
{/* Logo ve Bilgi */}
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center space-x-3 mb-4">
|
<div className="mb-4">
|
||||||
<img
|
<img
|
||||||
src="https://www.mamak.bel.tr/images/logo.svg"
|
src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
|
||||||
alt="Mamak Belediyesi Logo"
|
alt="Ankara Büyükşehir Belediyesi"
|
||||||
className="w-12 h-12 object-contain"
|
className="h-16 w-auto object-contain"
|
||||||
/>
|
/>
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-[#48CAE4] text-sm font-semibold uppercase">T.C.</span>
|
|
||||||
<span className="text-white text-lg font-bold">Mamak Belediyesi</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-300 text-sm leading-relaxed">
|
<p className="text-gray-300 text-sm leading-relaxed">
|
||||||
A2 Metro Hattı İnşaat Projesi - Ankara'nın ulaşım altyapısına modern çözümler sunuyoruz.
|
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() {
|
|||||||
<svg className="w-5 h-5 text-[#00B4D8] mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
<svg className="w-5 h-5 text-[#00B4D8] mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
|
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
<span className="text-gray-300 text-sm">Mamak, Ankara</span>
|
<span className="text-gray-300 text-sm">Emniyet, Hipodrom Cd. No:5, 06430 Yenimahalle/Ankara</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center space-x-3">
|
<li className="flex items-center space-x-3">
|
||||||
<svg className="w-5 h-5 text-[#00B4D8] shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
<svg className="w-5 h-5 text-[#00B4D8] shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
|
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
|
||||||
</svg>
|
</svg>
|
||||||
<a href="tel:+903123957500" className="text-gray-300 hover:text-white transition-colors text-sm">
|
<a href="tel:+903124440644" className="text-gray-300 hover:text-white transition-colors text-sm">
|
||||||
0312 395 75 00
|
(0312) 507 10 00
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex items-center space-x-3">
|
<li className="flex items-center space-x-3">
|
||||||
@@ -85,8 +81,8 @@ export default function Footer() {
|
|||||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||||
</svg>
|
</svg>
|
||||||
<a href="mailto:info@mamak.bel.tr" className="text-gray-300 hover:text-white transition-colors text-sm">
|
<a href="mailto:ankarabuyuksehirbelediyesi@hs01.kep.tr" className="text-gray-300 hover:text-white transition-colors text-sm">
|
||||||
info@mamak.bel.tr
|
ankarabuyuksehirbelediyesi@hs01.kep.tr
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -95,21 +91,54 @@ export default function Footer() {
|
|||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<h4 className="text-sm font-semibold mb-3 text-[#48CAE4]">Sosyal Medya</h4>
|
<h4 className="text-sm font-semibold mb-3 text-[#48CAE4]">Sosyal Medya</h4>
|
||||||
<div className="flex space-x-3">
|
<div className="flex space-x-3">
|
||||||
<a href="#" className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors">
|
{/* Facebook */}
|
||||||
|
<a
|
||||||
|
href="https://www.facebook.com/ankarabbld/?locale=tr_TR"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors"
|
||||||
|
aria-label="Facebook"
|
||||||
|
>
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors">
|
{/* Twitter/X */}
|
||||||
|
<a
|
||||||
|
href="https://x.com/ankarabbld?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors"
|
||||||
|
aria-label="Twitter/X"
|
||||||
|
>
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors">
|
{/* Instagram */}
|
||||||
|
<a
|
||||||
|
href="https://www.instagram.com/ankarabbld/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors"
|
||||||
|
aria-label="Instagram"
|
||||||
|
>
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
|
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
{/* LinkedIn */}
|
||||||
|
<a
|
||||||
|
href="https://www.linkedin.com/company/ankara-b%C3%BCy%C3%BCk%C5%9Fehir-belediyesi/?originalSubdomain=tr"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-9 h-9 rounded-full bg-[#00B4D8] hover:bg-[#48CAE4] flex items-center justify-center transition-colors"
|
||||||
|
aria-label="LinkedIn"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -118,7 +147,7 @@ export default function Footer() {
|
|||||||
{/* Alt Bilgi */}
|
{/* Alt Bilgi */}
|
||||||
<div className="border-t border-white/10 mt-8 pt-8 text-center">
|
<div className="border-t border-white/10 mt-8 pt-8 text-center">
|
||||||
<p className="text-gray-400 text-sm">
|
<p className="text-gray-400 text-sm">
|
||||||
© 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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,51 +1,132 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
export default function Header() {
|
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 (
|
return (
|
||||||
<header className="w-full bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] border-b border-[#00B4D8]/40 shadow-lg">
|
<>
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<header className="fixed top-0 left-0 right-0 z-50 bg-[#003366]/70 backdrop-blur-xl shadow-lg border-b border-[#00B4D8]/40">
|
||||||
<div className="flex justify-between items-center h-20">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
{/* Logo - Sol taraf */}
|
<div className="flex justify-between items-center h-20">
|
||||||
<div className="shrink-0">
|
<Link href="/" className="flex items-center">
|
||||||
<Link href="/" className="flex items-center space-x-3">
|
<div className="w-32 h-32">
|
||||||
<div className="w-12 h-12">
|
|
||||||
<img
|
<img
|
||||||
src="https://www.mamak.bel.tr/images/logo.svg"
|
src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
|
||||||
alt="Mamak Belediyesi Logo"
|
alt="Ankara Belediyesi Logo"
|
||||||
className="w-full h-full object-contain"
|
className="w-full h-full object-contain"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-[#48CAE4] text-sm font-semibold uppercase tracking-wider">T.C.</span>
|
|
||||||
<span className="text-white text-xl font-bold">Mamak Belediyesi</span>
|
|
||||||
</div>
|
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sağ taraf - Arama ve İletişim */}
|
<button
|
||||||
<div className="flex items-center space-x-3">
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||||
{/* Arama butonu */}
|
className="relative flex flex-col items-center justify-center w-14 h-14 rounded-xl bg-linear-to-br from-[#004B87] to-[#00B4D8] hover:shadow-xl transition-all duration-300 transform hover:scale-110 overflow-hidden group"
|
||||||
<button className="p-2.5 rounded-full border-2 border-white text-white hover:bg-[#00B4D8] hover:border-[#00B4D8] transition-colors">
|
|
||||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Bize Ulaşın - Ankara Belediyesi */}
|
|
||||||
<a
|
|
||||||
href="https://www.ankara.bel.tr/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex items-center space-x-2 px-4 py-2.5 rounded-lg bg-[#00B4D8] text-white hover:bg-[#48CAE4] transition-colors shadow-lg"
|
|
||||||
>
|
>
|
||||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
<span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? 'rotate-45 translate-y-2' : ''}`}></span>
|
||||||
</svg>
|
<span className={`block w-7 h-0.5 bg-white my-1.5 transition-all duration-300 relative z-10 ${isMenuOpen ? 'opacity-0 scale-0' : ''}`}></span>
|
||||||
<span className="text-sm font-medium">Bize Ulaşın</span>
|
<span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? '-rotate-45 -translate-y-2' : ''}`}></span>
|
||||||
</a>
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Full Screen Overlay Menu */}
|
||||||
|
<div className={`fixed inset-0 z-60 transition-all duration-500 ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||||
|
onClick={() => setIsMenuOpen(false)}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div className={`absolute top-0 right-0 h-full w-full md:w-[550px] bg-linear-to-br from-[#003366] via-[#004B87] to-[#005f99] shadow-2xl transform transition-transform duration-500 ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
|
||||||
|
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDEzNEgxMnYxMmgyNHYtMTJ6bTAtMThIMTJ2MTJoMjR2LTEyem0wLTE4SDEydjEyaDI0Vjk4em0wLTE4SDEydjEyaDI0Vjgwem0wLTE4SDEydjEyaDI0VjYyem0yNCAxMDhoLTEydjEyaDEydi0xMnptMC0xOGgtMTJ2MTJoMTJ2LTEyem0wLTE4aC0xMnYxMmgxMnYtMTJ6bTAtMThoLTEydjEyaDEyVjk4em0wLTE4aC0xMnYxMmgxMlY4MHptMC0xOGgtMTJ2MTJoMTJWNjJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-30"></div>
|
||||||
|
|
||||||
|
<div className="relative flex flex-col h-full">
|
||||||
|
<div className="flex justify-between items-center p-8 border-b border-white/20">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-1">Menü</h2>
|
||||||
|
<p className="text-white/70 text-sm">A2 Metro Hattı Projesi</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsMenuOpen(false)}
|
||||||
|
className="w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all duration-300 hover:rotate-90"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex-1 overflow-y-auto p-8 space-y-3">
|
||||||
|
{menuItems.map((item, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={item.href}
|
||||||
|
target={item.external ? '_blank' : undefined}
|
||||||
|
rel={item.external ? 'noopener noreferrer' : undefined}
|
||||||
|
onClick={() => !item.external && setIsMenuOpen(false)}
|
||||||
|
className="group block p-5 rounded-2xl bg-white/5 hover:bg-white/15 backdrop-blur-sm border border-white/10 hover:border-white/30 transition-all duration-300 transform hover:scale-105 hover:shadow-xl"
|
||||||
|
style={{ animationDelay: `${index * 50}ms` }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="shrink-0 w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center text-3xl group-hover:scale-110 transition-transform duration-300">
|
||||||
|
{item.icon}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-bold text-white group-hover:text-[#00B4D8] transition-colors">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-white/70 group-hover:text-white/90 transition-colors">
|
||||||
|
{item.desc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<svg className="w-6 h-6 text-white/50 group-hover:text-white group-hover:translate-x-2 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="p-8 border-t border-white/20">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="text-white/70 text-xs mb-2">Sosyal Medya</p>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
{[
|
||||||
|
{ 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) => (
|
||||||
|
<a
|
||||||
|
key={i}
|
||||||
|
href={social.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all hover:scale-110"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d={social.icon} />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user