Ana Sayfa Fix

components/DocumentsSection.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { dataStore } from '@/lib/dataStore';
+import type { Document } from '@/data/documents';
+
+interface DocumentCategory {
+  id: string;
+  name: string;
+  icon: string;
+}
+
+interface DocumentsSectionProps {
+  onClose: () => void;
+}
+
+export default function DocumentsSection({ onClose }: DocumentsSectionProps) {
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState('all');
+
+  const categories: DocumentCategory[] = [
+    { id: 'all', name: 'Tümü', icon: '📋' },
+    { id: 'ihale', name: 'İhale Belgeleri', icon: '📄' },
+    { id: 'teknik', name: 'Teknik Dökümanlar', icon: '📐' },
+    { id: 'cevresel', name: 'Çevresel Etki', icon: '🌱' },
+    { id: 'raporlar', name: 'İlerleme Raporları', icon: '📊' },
+    { id: 'guvenlik', name: 'Güvenlik', icon: '🛡️' },
+  ];
+
+  useEffect(() => {
+    setDocuments(dataStore.getDocuments());
+  }, []);
+
+  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 '📊';
+      case 'DOCX': return '📝';
+      default: return '📄';
+    }
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 md:pt-32 pb-8">
+      <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center space-x-3">
+            <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="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
+              </svg>
+            </div>
+            <h2 className="text-2xl font-bold text-[#004B87]">Proje Belgeleri</h2>
+          </div>
+          <button 
+            onClick={onClose}
+            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>
+
+        {/* Kategori Filtreleri */}
+        <div className="mb-6">
+          <div className="flex flex-wrap gap-3">
+            {categories.map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => setSelectedCategory(cat.id)}
+                className={`flex items-center space-x-2 px-4 py-2 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'
+                }`}
+              >
+                <span className="text-lg">{cat.icon}</span>
+                <span className="text-sm">{cat.name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Belgeler Grid - 3 sütunlu */}
+        <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) => (
+            <div
+              key={doc.id}
+              className="bg-gray-50 rounded-xl p-5 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group flex flex-col"
+            >
+              {/* Dosya İkonu - Üstte ortalı */}
+              <div className="flex justify-center mb-4">
+                <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)}
+                </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>
+  );
+}