Hamburger
This commit is contained in:
Şahan Hasret
@@ -3,243 +3,183 @@
|
||||
import { useState } from 'react';
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function BelgelerPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||||
export default function Documents() {
|
||||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
||||
{ id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
|
||||
{ id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
|
||||
{ id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
|
||||
{ id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
|
||||
{ id: 'all', name: 'Tümü', icon: '📁' },
|
||||
{ id: 'technical', name: 'Teknik Dokümanlar', icon: '📐' },
|
||||
{ id: 'reports', name: 'Raporlar', icon: '📊' },
|
||||
{ id: 'permissions', name: 'İzinler', icon: '✅' },
|
||||
{ id: 'presentations', name: 'Sunumlar', icon: '📽️' },
|
||||
];
|
||||
|
||||
const documents = [
|
||||
{
|
||||
id: 1,
|
||||
title: "A2 Metro Hattı İhale Şartnamesi",
|
||||
category: 'ihale',
|
||||
date: "15 Ocak 2025",
|
||||
size: "2.4 MB",
|
||||
type: "PDF",
|
||||
description: "Metro inşaatı için teknik şartname ve ihale koşulları"
|
||||
category: 'technical',
|
||||
title: 'A2 Metro Hattı Teknik Şartnamesi',
|
||||
description: 'Proje kapsamındaki tüm teknik detaylar',
|
||||
date: '15 Ekim 2025',
|
||||
size: '12.5 MB',
|
||||
type: 'PDF',
|
||||
icon: '📐',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Proje Teknik Çizimleri",
|
||||
category: 'teknik',
|
||||
date: "10 Şubat 2025",
|
||||
size: "15.8 MB",
|
||||
type: "DWG",
|
||||
description: "Tüm istasyonların teknik mimari çizimleri"
|
||||
category: 'technical',
|
||||
title: 'İstasyon Mimari Projesi',
|
||||
description: 'İstasyon binalarının mimari tasarımı',
|
||||
date: '12 Ekim 2025',
|
||||
size: '25.8 MB',
|
||||
type: 'PDF',
|
||||
icon: '🏗️',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Çevresel Etki Değerlendirme Raporu",
|
||||
category: 'cevresel',
|
||||
date: "5 Mart 2025",
|
||||
size: "4.2 MB",
|
||||
type: "PDF",
|
||||
description: "Proje çevresel etki analizi ve önlemler"
|
||||
category: 'technical',
|
||||
title: 'Güvenlik Planı ve Prosedürleri',
|
||||
description: 'İş güvenliği planı ve acil durum prosedürleri',
|
||||
date: '10 Ekim 2025',
|
||||
size: '6.8 MB',
|
||||
type: 'PDF',
|
||||
icon: '🛡️',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "2025 Mart Ayı İlerleme Raporu",
|
||||
category: 'raporlar',
|
||||
date: "1 Nisan 2025",
|
||||
size: "1.8 MB",
|
||||
type: "PDF",
|
||||
description: "Aylık proje ilerleme ve istatistikler"
|
||||
category: 'technical',
|
||||
title: 'Malzeme Spesifikasyonları',
|
||||
description: 'İnşaatta kullanılacak malzeme detayları',
|
||||
date: '8 Ekim 2025',
|
||||
size: '9.2 MB',
|
||||
type: 'PDF',
|
||||
icon: '🔧',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Güvenlik Planı ve Prosedürleri",
|
||||
category: 'teknik',
|
||||
date: "20 Ocak 2025",
|
||||
size: "3.1 MB",
|
||||
type: "PDF",
|
||||
description: "İnşaat sahası güvenlik protokolleri"
|
||||
category: 'reports',
|
||||
title: 'ÇED Raporu',
|
||||
description: 'Çevresel Etki Değerlendirme',
|
||||
date: '5 Ekim 2025',
|
||||
size: '8.3 MB',
|
||||
type: 'PDF',
|
||||
icon: '🌍',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "İstasyon Tasarım Detayları",
|
||||
category: 'teknik',
|
||||
date: "8 Şubat 2025",
|
||||
size: "8.5 MB",
|
||||
type: "PDF",
|
||||
description: "İstasyon iç ve dış mekan tasarım detayları"
|
||||
category: 'reports',
|
||||
title: 'Eylül 2025 İlerleme Raporu',
|
||||
description: 'Aylık proje ilerleme durumu',
|
||||
date: '1 Ekim 2025',
|
||||
size: '3.2 MB',
|
||||
type: 'PDF',
|
||||
icon: '📈',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Finansman Planı",
|
||||
category: 'ihale',
|
||||
date: "12 Ocak 2025",
|
||||
size: "1.2 MB",
|
||||
type: "XLSX",
|
||||
description: "Proje bütçe ve finansman dağılımı"
|
||||
category: 'reports',
|
||||
title: 'Ağustos 2025 İlerleme Raporu',
|
||||
description: 'Aylık proje ilerleme durumu',
|
||||
date: '1 Eylül 2025',
|
||||
size: '3.1 MB',
|
||||
type: 'PDF',
|
||||
icon: '📈',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "2025 Nisan Ayı İlerleme Raporu",
|
||||
category: 'raporlar',
|
||||
date: "1 Mayıs 2025",
|
||||
size: "2.1 MB",
|
||||
type: "PDF",
|
||||
description: "Aylık proje ilerleme ve istatistikler"
|
||||
category: 'permissions',
|
||||
title: 'İnşaat Ruhsatı',
|
||||
description: 'Belediye onaylı inşaat ruhsatı belgesi',
|
||||
date: '5 Eylül 2025',
|
||||
size: '1.5 MB',
|
||||
type: 'PDF',
|
||||
icon: '✅',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Gürültü ve Titreşim Analizi",
|
||||
category: 'cevresel',
|
||||
date: "18 Mart 2025",
|
||||
size: "3.8 MB",
|
||||
type: "PDF",
|
||||
description: "Çevre gürültü ve titreşim ölçüm sonuçları"
|
||||
category: 'permissions',
|
||||
title: 'Kamulaştırma İzin Belgeleri',
|
||||
description: 'Proje alanı kamulaştırma işlem belgeleri',
|
||||
date: '28 Ağustos 2025',
|
||||
size: '4.7 MB',
|
||||
type: 'PDF',
|
||||
icon: '📋',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
category: 'permissions',
|
||||
title: 'Çalışma İzin Belgeleri',
|
||||
description: 'İlgili kurumlardan alınan çalışma izinleri',
|
||||
date: '15 Ağustos 2025',
|
||||
size: '2.8 MB',
|
||||
type: 'PDF',
|
||||
icon: '📄',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
category: 'presentations',
|
||||
title: 'A2 Metro Hattı Tanıtım Sunumu',
|
||||
description: 'Genel tanıtım ve proje özeti sunumu',
|
||||
date: '20 Eylül 2025',
|
||||
size: '15.6 MB',
|
||||
type: 'PPTX',
|
||||
icon: '📽️',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
category: 'presentations',
|
||||
title: 'Teknik Altyapı Sunumu',
|
||||
description: 'Tünel ve istasyon altyapı detayları',
|
||||
date: '15 Eylül 2025',
|
||||
size: '22.4 MB',
|
||||
type: 'PPTX',
|
||||
icon: '🎯',
|
||||
},
|
||||
];
|
||||
|
||||
const filteredDocs = selectedCategory === 'all'
|
||||
? documents
|
||||
: documents.filter(doc => doc.category === selectedCategory);
|
||||
|
||||
const getFileIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'PDF': return '📕';
|
||||
case 'DWG': return '📐';
|
||||
case 'XLSX': return '📊';
|
||||
default: return '📄';
|
||||
}
|
||||
};
|
||||
const filteredDocs = selectedCategory === 'all' ? documents : documents.filter(d => d.category === selectedCategory);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F8F9FA]">
|
||||
<div className="min-h-screen bg-[#003366]">
|
||||
<Header />
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="bg-linear-to-r from-[#003366] via-[#004B87] to-[#003366] py-16">
|
||||
<main className="pt-32 pb-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center space-x-2 text-white/80 text-sm mb-4">
|
||||
<Link href="/" className="hover:text-white transition-colors">Ana Sayfa</Link>
|
||||
<span>/</span>
|
||||
<span>Belgeler</span>
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">Belgeler</h1>
|
||||
<p className="text-lg text-white">A2 Metro Hattı proje belgeleri</p>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold text-white mb-4">Proje Belgeleri</h1>
|
||||
<p className="text-lg text-white/90 max-w-3xl">
|
||||
A2 Metro Hattı inşaat projesine ait tüm resmi belgeler, teknik dökümanlar ve raporlar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Kategori Filtreleri */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 mb-8">
|
||||
<h2 className="text-xl font-bold text-[#004B87] mb-4">Kategoriler</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
|
||||
<div className="flex justify-center gap-3 mb-12">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setSelectedCategory(cat.id)}
|
||||
className={`flex items-center space-x-2 px-5 py-3 rounded-lg font-medium transition-all duration-300 ${
|
||||
selectedCategory === cat.id
|
||||
? 'bg-[#00B4D8] text-white shadow-lg scale-105'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
||||
className={`px-6 py-3 rounded-full font-semibold ${
|
||||
selectedCategory === cat.id ? 'bg-[#00B4D8] text-white' : 'bg-white text-[#004B87]'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">{cat.icon}</span>
|
||||
<span>{cat.name}</span>
|
||||
{cat.icon} {cat.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Belgeler Listesi */}
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{filteredDocs.map((doc) => (
|
||||
<div
|
||||
key={doc.id}
|
||||
className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group"
|
||||
>
|
||||
<div className="p-6 flex items-start space-x-4">
|
||||
{/* Dosya İkonu */}
|
||||
<div className="w-16 h-16 bg-linear-to-br from-[#00B4D8] to-[#004B87] rounded-xl flex items-center justify-center text-3xl shrink-0 group-hover:scale-110 transition-transform duration-300">
|
||||
{getFileIcon(doc.type)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredDocs.map((doc) => (
|
||||
<div key={doc.id} className="bg-white rounded-2xl p-6">
|
||||
<div className="text-4xl mb-4">{doc.icon}</div>
|
||||
<h3 className="text-xl font-bold text-[#004B87] mb-2">{doc.title}</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">{doc.description}</p>
|
||||
<div className="text-xs text-gray-500 mb-4">
|
||||
<div>{doc.date}</div>
|
||||
<div>{doc.size}</div>
|
||||
</div>
|
||||
|
||||
{/* Belge Bilgileri */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-bold text-[#004B87] mb-2 group-hover:text-[#00B4D8] transition-colors">
|
||||
{doc.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-3">
|
||||
{doc.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 text-sm text-gray-500">
|
||||
<div className="flex items-center space-x-1">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>{doc.date}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>{doc.type}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
|
||||
<path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
|
||||
<path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
|
||||
</svg>
|
||||
<span>{doc.size}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* İndirme Butonu */}
|
||||
<button className="px-5 py-3 bg-[#00B4D8] text-white rounded-lg hover:bg-[#004B87] transition-colors shadow-md hover:shadow-lg flex items-center space-x-2 shrink-0">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
<span className="font-medium">İndir</span>
|
||||
</button>
|
||||
<button className="w-full bg-[#00B4D8] text-white py-2 rounded-lg">İndir</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Boş Sonuç */}
|
||||
{filteredDocs.length === 0 && (
|
||||
<div className="bg-white rounded-xl shadow-md p-12 text-center">
|
||||
<div className="text-6xl mb-4">📭</div>
|
||||
<h3 className="text-xl font-bold text-gray-700 mb-2">Belge Bulunamadı</h3>
|
||||
<p className="text-gray-500">Bu kategoride henüz belge bulunmamaktadır.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bilgilendirme */}
|
||||
<div className="mt-8 bg-blue-50 border-l-4 border-[#00B4D8] p-6 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<svg className="w-6 h-6 text-[#00B4D8] shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 className="font-bold text-[#004B87] mb-1">Önemli Not</h3>
|
||||
<p className="text-gray-700 text-sm">
|
||||
Tüm belgeler resmi kaynaklardan alınmıştır. Belgelerin kullanımı ile ilgili sorularınız için
|
||||
<a href="https://www.ankara.bel.tr/" target="_blank" rel="noopener noreferrer" className="text-[#00B4D8] hover:underline ml-1">
|
||||
Ankara Büyükşehir Belediyesi
|
||||
</a> ile iletişime geçebilirsiniz.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user