First

components/Header.tsx

@@ -0,0 +1,57 @@
+import Link from 'next/link';
+
+export default function Header() {
+  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">
+        <div className="flex justify-between items-center h-20">
+          {/* Logo - Sol taraf */}
+          <div className="shrink-0">
+            <Link href="/" className="flex items-center space-x-3">
+              <div className="text-[#00B4D8]">
+                <svg className="w-12 h-12" viewBox="0 0 50 50" fill="currentColor">
+                  <path d="M25 5L5 15v20l20 10 20-10V15L25 5zm0 3.5L42 18v14l-17 8.5L8 32V18l17-9.5z"/>
+                  <path d="M25 15l-10 5v10l10 5 10-5V20l-10-5zm0 3l7 3.5v7L25 32l-7-3.5v-7l7-3.5z"/>
+                </svg>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-[#48CAE4] text-sm font-semibold uppercase tracking-wider">Ankara</span>
+                <span className="text-white text-xl font-bold">Büyükşehir Belediyesi</span>
+              </div>
+            </Link>
+          </div>
+
+          {/* Sağ taraf - Dil, Hava Durumu, Arama ve Menü */}
+          <div className="flex items-center space-x-4">
+            {/* Dil seçimi */}
+            <button className="text-white text-sm font-semibold hover:text-[#48CAE4] transition-colors">
+              TR
+            </button>
+
+            {/* Hava durumu */}
+            <div className="flex items-center space-x-2 text-white">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+              </svg>
+              <span className="text-sm font-medium">10°C</span>
+            </div>
+
+            {/* Arama butonu */}
+            <button className="p-2 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>
+
+            {/* Menü butonu */}
+            <button className="p-3 rounded-lg bg-[#00B4D8] text-white hover:bg-[#48CAE4] transition-colors shadow-lg">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

components/MetroLine.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function MetroLine() {
+  const [currentStation, setCurrentStation] = useState(0);
+
+  // Metro başlangıçtan Tuzluçayır'a (index 2) kadar ilerler ve durur
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentStation((prev) => {
+        if (prev < 2) return prev + 1; // Sadece 2'ye kadar ilerle
+        return 2; // Tuzluçayır'da dur
+      });
+    }, 3000); // Her 3 saniyede bir ilerle
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const stations = [
+    { name: 'ABİDİN PAŞA', status: 'completed' },
+    { name: 'AŞIK VEYSEL', status: 'completed' },
+    { name: 'TUZLUÇAYIR', status: 'construction' },
+    { name: 'GENERAL ZEKİ DOĞAN', status: 'planned' },
+    { name: 'FAHRİ KORUTÜRK', status: 'planned' },
+    { name: 'CENGİZHAN', status: 'planned' },
+    { name: 'AKŞEMSETTİN', status: 'planned' },
+    { name: 'NATOYOLU', status: 'planned' },
+  ];
+
+  const getStationStyle = (index: number, status: string) => {
+    if (index === currentStation) {
+      return 'w-16 h-16 bg-[#F59E0B] border-4 border-white shadow-2xl scale-110';
+    }
+    if (status === 'completed') {
+      return 'w-14 h-14 bg-green-500 border-4 border-white shadow-lg';
+    }
+    return 'w-12 h-12 bg-gray-300 border-4 border-dashed border-gray-400 shadow-lg opacity-60';
+  };
+
+  const getTextStyle = (index: number, status: string) => {
+    if (index === currentStation) {
+      return 'text-[#F59E0B] font-bold';
+    }
+    if (status === 'completed') {
+      return 'text-green-600 font-bold';
+    }
+    return 'text-gray-500 font-semibold';
+  };
+
+  // Her durak arası mesafe için progress hesaplama
+  const totalStations = stations.length;
+  const progressPercentage = (currentStation / (totalStations - 1)) * 100;
+
+  return (
+    <div className="bg-white rounded-2xl shadow-2xl p-8 lg:p-12">
+      {/* Proje Başlığı */}
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center space-x-4">
+          <div className="w-12 h-12 rounded-full bg-[#F59E0B] flex items-center justify-center">
+            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M13 3v6h3l-4 5-4-5h3V3m-1 11v7h-1c-1.1 0-2-.9-2-2v-5h3m10 0v5c0 1.1-.9 2-2 2h-1v-7h3z"/>
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-2xl font-bold text-[#004B87]">A2 Metro Hattı İnşaatı</h3>
+            <p className="text-[#6B7280]">Abidin Paşa - Natoyolu</p>
+          </div>
+        </div>
+        <div className="text-right">
+          <p className="text-sm text-[#6B7280]">İnşaat Durumu</p>
+          <p className="text-2xl font-bold text-[#F59E0B]">{Math.round(progressPercentage)}%</p>
+        </div>
+      </div>
+
+      {/* Metro Hat ve İnşaat Çizgisi */}
+      <div className="relative mb-4">
+        {/* Gri arka plan hattı (tüm hat) */}
+        <div className="absolute top-6 left-0 right-0 h-2 bg-gray-300 rounded-full"></div>
+        
+        {/* Renkli ilerleme çubuğu - duraklar arası geçişle */}
+        <div className="absolute top-6 left-0 h-2 bg-linear-to-r from-green-500 via-[#00B4D8] to-[#F59E0B] rounded-full transition-all duration-1000 ease-in-out" 
+             style={{width: `${progressPercentage}%`}}>
+        </div>
+
+        {/* Duraklar Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6 relative">
+          {stations.map((station, index) => (
+            <div key={index} className="flex flex-col items-center">
+              <div className={`relative z-10 rounded-full flex items-center justify-center mb-3 transition-all duration-500 ${getStationStyle(index, station.status)}`}>
+                {index === currentStation ? (
+                  <>
+                    {/* Metro simgesi - animasyonlu */}
+                    <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2l2-2h4l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/>
+                    </svg>
+                    {/* Pulse efekti */}
+                    <div className="absolute inset-0 rounded-full bg-[#F59E0B] animate-ping opacity-30"></div>
+                  </>
+                ) : station.status === 'completed' ? (
+                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+                  </svg>
+                ) : (
+                  <svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+                  </svg>
+                )}
+              </div>
+              <span className={`text-center text-xs transition-all duration-300 ${getTextStyle(index, station.status)}`}>
+                {station.name}
+              </span>
+              <span className={`text-xs transition-all duration-300 ${
+                index === currentStation ? 'text-[#F59E0B] font-semibold' : 
+                station.status === 'completed' ? 'text-green-600' : 'text-gray-400'
+              }`}>
+                {index === currentStation ? '🚇 Metro Burada' : 
+                 station.status === 'completed' ? '✓ Tamamlandı' : 
+                 '◯ Planlı'}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Alt Bilgi */}
+      <div className="mt-8 pt-6 border-t border-gray-200">
+        <div className="flex flex-wrap gap-6 justify-center text-sm">
+          <div className="flex items-center space-x-2">
+            <div className="w-5 h-5 rounded-full bg-green-500 border-2 border-white flex items-center justify-center">
+              <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+              </svg>
+            </div>
+            <span className="text-[#6B7280]">Tamamlandı</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="w-5 h-5 rounded-full bg-[#F59E0B] border-2 border-white"></div>
+            <span className="text-[#6B7280]">İnşaat Halinde (Metro Burada)</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="w-5 h-5 rounded-full bg-gray-300 border-2 border-dashed border-gray-400"></div>
+            <span className="text-[#6B7280]">Planlanan</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}