diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..755efa6 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,14 @@ +# Next.js Project Setup Instructions + +## Project Information +- Project Type: Next.js Application +- Language: TypeScript +- Framework: Next.js with App Router +- Styling: Tailwind CSS +- Package Manager: npm + +## Development Guidelines +- Use TypeScript for type safety +- Follow Next.js best practices +- Use App Router for routing +- Implement responsive design with Tailwind CSS diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..a33ddf4 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,13 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "label": "dev", + "type": "shell", + "command": "npm run dev", + "isBackground": true, + "problemMatcher": [], + "group": "build" + } + ] +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index a2dc41e..a5e5a7f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,6 +3,14 @@ :root { --background: #ffffff; --foreground: #171717; + + /* Gülermak Metro Renk Paleti */ + --vanilla-doe: #d0bea8; + --pale-oyster: #9a8c70; + --pagoda: #117695; + --caraway-brown: #6d573b; + --teal-dark-blue: #0d4b5c; + --black-stallion: #0f1a1a; } @theme inline { @@ -10,6 +18,14 @@ --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + + /* Custom Color Palette */ + --color-vanilla-doe: var(--vanilla-doe); + --color-pale-oyster: var(--pale-oyster); + --color-pagoda: var(--pagoda); + --color-caraway-brown: var(--caraway-brown); + --color-teal-dark-blue: var(--teal-dark-blue); + --color-black-stallion: var(--black-stallion); } @media (prefers-color-scheme: dark) { @@ -24,3 +40,18 @@ body { color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fadeIn { + animation: fadeIn 0.5s ease-in-out; +} diff --git a/app/page.tsx b/app/page.tsx index 21b686d..d1e0ed4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,103 +1,370 @@ -import Image from "next/image"; +'use client'; + +import { useState } from 'react'; +import Header from "@/components/Header"; +import MetroLine from "@/components/MetroLine"; export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
+ const [showLiveStream, setShowLiveStream] = useState(false); + const [showNews, setShowNews] = useState(false); + const [selectedNews, setSelectedNews] = useState(null); -
- +
+ + {/* Hero Video Section */} +
+ {/* Video Background */} +
+ - - Read our docs - + + Tarayıcınız video etiketini desteklemiyor. + + {/* Dark Overlay */} +
+ + {/* Content Overlay */} +
+
+
+

+ Ankara Metro Altyapı Projelerinde Öncü Çözümler +

+

+ Ankara Büyükşehir Belediyesi ile birlikte, modern teknoloji ve mühendislik uzmanlığımızla başkentin ulaşım ağını inşa ediyor, geleceğin metro sistemlerini bugünden hayata geçiriyoruz. +

+ + {/* Action Buttons */} +
+ + +
+ + {/* Pagination Dots */} +
+ + + + +
+
+
+
+ + {/* Alt Menü Kartları - Slide üzerine bindiriyor (yarısı üstte) */} +
+
+
+ {/* Canlı Yayın */} + + + {/* Haberler */} + + + {/* Belgeler */} + +
+ + + +
+ Belgeler + + + {/* Basında Biz */} + +
+ + + +
+ Basında Biz + + + {/* Dilek-Şikayet */} + +
+ + + +
+ Dilek-Şikayet + + + {/* E-İletişim */} + +
+ + + +
+ E-İletişim + +
+
+
+
+ + {/* Canlı Yayın Video Bölümü */} + {showLiveStream && ( +
+
+
+
+
+

Canlı Yayın

+
+ +
+ + {/* YouTube Video Embed */} +
+ +
+ +

+ A2 Metro Hattı İnşaat Çalışmaları - Canlı Yayın +

+
+
+ )} + + {/* Haberler Bölümü */} + {showNews && ( +
+
+
+
+
+ + + +
+

Son Haberler

+
+ +
+ + {/* Haberler Grid veya Detay */} + {selectedNews === null ? ( +
+ {newsData.map((news) => ( +
+ {/* Haber Görseli */} +
+ {news.title} +
+ + {/* Haber İçeriği */} +
+
+ + + + {news.date} +
+

+ {news.title} +

+

+ {news.summary} +

+ +
+
+ ))} +
+ ) : ( + /* Haber Detayı */ +
+ {newsData.filter(n => n.id === selectedNews).map((news) => ( +
+ {/* Geri Butonu */} + + + {/* Detay İçerik */} +
+ {/* Büyük Görsel */} +
+ {news.title} +
+ + {/* Detay Metni */} +
+
+ + + + {news.date} +
+ +

+ {news.title} +

+ +
+

+ {news.content} +

+
+ + {/* Alt Bilgi */} +
+
+
+ Paylaş: + +
+ +
+
+
+
+
+ ))} +
+ )} +
+
+ )} + + {/* Ana İçerik - Kartlar için üstten boşluk */} +
+
+

+ Metro Hat Durumları +

+

+ Ankara Metro hatları ve durak bilgileri. Metro treni şu anda hangi durakta görebilirsiniz. +

+
+ + {/* Metro İnşaat Projesi - Animasyonlu */} +
-
); } diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..7149f0a --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,57 @@ +import Link from 'next/link'; + +export default function Header() { + return ( +
+
+
+ {/* Logo - Sol taraf */} +
+ +
+ + + + +
+
+ Ankara + Büyükşehir Belediyesi +
+ +
+ + {/* Sağ taraf - Dil, Hava Durumu, Arama ve Menü */} +
+ {/* Dil seçimi */} + + + {/* Hava durumu */} +
+ + + + 10°C +
+ + {/* Arama butonu */} + + + {/* Menü butonu */} + +
+
+
+
+ ); +} diff --git a/components/MetroLine.tsx b/components/MetroLine.tsx new file mode 100644 index 0000000..52f2345 --- /dev/null +++ b/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 ( +
+ {/* Proje Başlığı */} +
+
+
+ + + +
+
+

A2 Metro Hattı İnşaatı

+

Abidin Paşa - Natoyolu

+
+
+
+

İnşaat Durumu

+

{Math.round(progressPercentage)}%

+
+
+ + {/* Metro Hat ve İnşaat Çizgisi */} +
+ {/* Gri arka plan hattı (tüm hat) */} +
+ + {/* Renkli ilerleme çubuğu - duraklar arası geçişle */} +
+
+ + {/* Duraklar Grid */} +
+ {stations.map((station, index) => ( +
+
+ {index === currentStation ? ( + <> + {/* Metro simgesi - animasyonlu */} + + + + {/* Pulse efekti */} +
+ + ) : station.status === 'completed' ? ( + + + + ) : ( + + + + )} +
+ + {station.name} + + + {index === currentStation ? '🚇 Metro Burada' : + station.status === 'completed' ? '✓ Tamamlandı' : + '◯ Planlı'} + +
+ ))} +
+
+ + {/* Alt Bilgi */} +
+
+
+
+ + + +
+ Tamamlandı +
+
+
+ İnşaat Halinde (Metro Burada) +
+
+
+ Planlanan +
+
+
+
+ ); +} diff --git a/public/assets/high-speed-metro-design-template-559897134973592cb13d708cec30ea39_screen.mp4 b/public/assets/high-speed-metro-design-template-559897134973592cb13d708cec30ea39_screen.mp4 new file mode 100644 index 0000000..a848ffa Binary files /dev/null and b/public/assets/high-speed-metro-design-template-559897134973592cb13d708cec30ea39_screen.mp4 differ diff --git a/styles/colors.ts b/styles/colors.ts new file mode 100644 index 0000000..63042b2 --- /dev/null +++ b/styles/colors.ts @@ -0,0 +1,25 @@ +// Ankara Büyükşehir Belediyesi - Gülermak Metro Renk Paleti +export const colors = { + // Ankara Belediyesi Ana Renkleri + ankaraBlue: '#004B87', // Ankara Blue - Ana koyu mavi (logodan) + ankaraDark: '#003366', // Ankara Dark - Daha koyu ton + ankaraLight: '#0066B3', // Ankara Light - Açık mavi ton + + // Vurgu renkleri + ankaraCyan: '#00B4D8', // Ankara Cyan - Açık mavi vurgu (logodan) + turkishSky: '#48CAE4', // Turkish Sky - Gökyüzü mavisi + + // Yardımcı renkler + warmWhite: '#F8F9FA', // Warm White - Yumuşak beyaz + coolGray: '#6C757D', // Cool Gray - Gri tonlar + lightGray: '#E9ECEF', // Light Gray - Açık gri + + // Nötr tonlar + white: '#FFFFFF', + darkNavy: '#001F3F', // Dark Navy - En koyu ton + + // Accent (vurgu için) + starWhite: '#FFFFFF', // Star White - Yıldızlar için +} as const; + +export type ColorKey = keyof typeof colors;