Admin Paneli ve Responsive
This commit is contained in:
Şahan Hasret
275
app/page.tsx
275
app/page.tsx
@@ -1,10 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Header from "@/components/Header";
|
||||
import MetroLine from "@/components/MetroLine";
|
||||
import Footer from "@/components/Footer";
|
||||
import { newsData } from '@/data/news';
|
||||
|
||||
// Hero Slider Data - Component dışında tanımla
|
||||
const heroSlides = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Ankara Metro Altyapı Projelerinde Öncü Çözümler',
|
||||
description: '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.',
|
||||
buttonText: 'Detayları Gör',
|
||||
buttonLink: '#proje-detay'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'A2 Metro Hattı İnşaatında Son Aşamaya Gelindi',
|
||||
description: '15 istasyonlu A2 Metro Hattı projemiz %75 tamamlandı. 2026 yılında hizmete açılacak modern metro hattımız, günlük 300 bin yolcuya hizmet verecek.',
|
||||
buttonText: 'İlerlemeyi İzle',
|
||||
buttonLink: '#metro-hatti'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Çevre Dostu Metro Teknolojileri',
|
||||
description: 'Yenilenebilir enerji kaynakları ve sürdürülebilir inşaat teknikleri ile çevre dostu metro projelerine imza atıyoruz. Karbon emisyonunu %40 azaltan yenilikçi çözümlerimiz.',
|
||||
buttonText: 'Yeşil Projeler',
|
||||
buttonLink: '#cevre'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Güvenli İnşaat, Güvenli Gelecek',
|
||||
description: 'ISO 45001 sertifikalı iş güvenliği sistemlerimiz ile 2000+ çalışanımızın güvenliğini en üst düzeyde tutuyoruz. Sıfır iş kazası hedefiyle çalışıyoruz.',
|
||||
buttonText: 'Güvenlik Önlemleri',
|
||||
buttonLink: '#guvenlik'
|
||||
}
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const [showLiveStream, setShowLiveStream] = useState(false);
|
||||
@@ -25,6 +59,23 @@ export default function Home() {
|
||||
message: ''
|
||||
});
|
||||
const [showContact, setShowContact] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
// Modal açıldığında yukarı kaydır
|
||||
useEffect(() => {
|
||||
if (showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm || showContact) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}, [showLiveStream, showNews, showDocuments, showMediaGallery, showComplaintForm, showContact]);
|
||||
|
||||
// Auto slider
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % 4); // 4 slide var
|
||||
}, 10000); // 10 saniyede bir değiş
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const categories = [
|
||||
{ id: 'all', name: 'Tümü', icon: '📋' },
|
||||
@@ -131,40 +182,8 @@ export default function Home() {
|
||||
}
|
||||
};
|
||||
|
||||
const newsData = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Dikimevi Metro Hattı İnşaatında Yeni Aşama",
|
||||
date: "20 Ekim 2025",
|
||||
image: "https://images.pexels.com/photos/17152223/pexels-photo-17152223.jpeg",
|
||||
summary: "A2 Metro Hattı Tuzluçayır istasyonunda kazı çalışmaları tamamlandı. İnşaat ekipleri bir sonraki faza geçiş için hazırlıklara başladı.",
|
||||
content: "A2 Metro Hattı Tuzluçayır istasyonunda yapılan kazı çalışmaları başarıyla tamamlandı. İnşaat ekipleri, istasyonun temel atma ve beton dökme aşaması için hazırlıklara başladı. Proje yetkililerinin açıklamasına göre, çalışmalar planlanan takvime uygun olarak ilerliyor. İstasyonun 2026 yılı sonunda hizmete girmesi hedefleniyor. Modern teknolojilerle donatılacak istasyonda yolcu konforunu artıracak birçok yenilik bulunacak."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Metro İstasyonlarında Modern Tasarım",
|
||||
date: "18 Ekim 2025",
|
||||
image: "https://images.pexels.com/photos/17302615/pexels-photo-17302615.jpeg",
|
||||
summary: "Yeni metro istasyonları çağdaş mimari anlayışı ve yolcu konforunu ön planda tutan tasarımlarla hayata geçiriliyor.",
|
||||
content: "Ankara metro projesi kapsamında inşa edilen istasyonlar, çağdaş mimari anlayışı ile dikkat çekiyor. İstasyonlarda doğal ışık kullanımı maksimize edilirken, enerji verimliliği de göz önünde bulunduruluyor. Geniş peronlar, modern bekleme alanları ve engelli erişimine uygun tasarım, yolcu memnuniyetini artıracak önemli detaylar arasında yer alıyor."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Çevre Dostu Metro Projesi",
|
||||
date: "15 Ekim 2025",
|
||||
image: "https://images.pexels.com/photos/33950678/pexels-photo-33950678.jpeg",
|
||||
summary: "Metro inşaatında kullanılan malzemeler ve yöntemler çevre standartlarına uygun olarak seçiliyor.",
|
||||
content: "Ankara metro inşaatında çevre dostu malzemeler ve sürdürülebilir inşaat yöntemleri kullanılıyor. Kazı çalışmalarından çıkan topraklar geri dönüştürülüyor, inşaat atıkları ayrıştırılarak değerlendiriliyor. Proje, yeşil bina sertifikası almayı hedefliyor. Ayrıca, metro hatları elektrikli sistemle çalışacağı için karbon emisyonunu azaltacak."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Metro Hattı 2026'da Hizmete Girecek",
|
||||
date: "12 Ekim 2025",
|
||||
image: "https://images.pexels.com/photos/253647/pexels-photo-253647.jpeg",
|
||||
summary: "A2 Metro Hattı'nın ilk etabının 2026 yılı sonunda hizmete girmesi planlanıyor.",
|
||||
content: "Ankara Büyükşehir Belediyesi yetkilileri, A2 Metro Hattı'nın ilk etabının 2026 yılı sonunda hizmete açılacağını duyurdu. 8 istasyondan oluşan hat, günlük 100 bin yolcuya hizmet verecek. Modern trenler, konforlu istasyonlar ve güvenli sistem ile Ankara'nın ulaşım altyapısına önemli bir katkı sağlayacak. İlk etabın ardından hatın genişletilmesi planlanıyor."
|
||||
}
|
||||
];
|
||||
// Featured news (ana sayfada gösterilecek haberler)
|
||||
const featuredNews = newsData.filter(news => news.featured).slice(0, 4);
|
||||
|
||||
const mediaItems = [
|
||||
{
|
||||
@@ -248,7 +267,7 @@ export default function Home() {
|
||||
<Header />
|
||||
|
||||
{/* Hero Video Section */}
|
||||
<div className="relative w-full h-screen pt-20">
|
||||
<div className="relative w-full h-[60vh] md:h-screen pt-20">
|
||||
{/* Video Background */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<video
|
||||
@@ -269,126 +288,173 @@ export default function Home() {
|
||||
<div className="relative z-10 h-full flex items-center">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
Ankara Metro Altyapı Projelerinde Öncü Çözümler
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-[#F8F9FA] mb-8 leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="px-8 py-4 bg-[#00B4D8] text-white font-semibold rounded-lg hover:bg-[#48CAE4] transition-all duration-300 shadow-lg shadow-[#00B4D8]/30 flex items-center justify-center space-x-2">
|
||||
<span>Detayları Gör</span>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-[#004B87] transition-all duration-300">
|
||||
Tüm Duyuruları Gör
|
||||
</button>
|
||||
{/* Slider Content */}
|
||||
<div className="relative">
|
||||
{heroSlides.map((slide, index) => (
|
||||
<div
|
||||
key={slide.id}
|
||||
className={`transition-all duration-700 ${
|
||||
index === currentSlide
|
||||
? 'opacity-100 translate-x-0'
|
||||
: 'opacity-0 absolute inset-0 translate-x-full pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
<h1 className="text-3xl md:text-4xl lg:text-6xl font-bold text-white mb-4 md:mb-6 leading-tight">
|
||||
{slide.title}
|
||||
</h1>
|
||||
<p className="text-base md:text-lg lg:text-xl text-[#F8F9FA] mb-6 md:mb-8 leading-relaxed">
|
||||
{slide.description}
|
||||
</p>
|
||||
|
||||
{/* Action Buttons - Mobilde gizle */}
|
||||
<div className="hidden md:flex flex-col sm:flex-row gap-4">
|
||||
<button className="px-8 py-4 bg-[#00B4D8] text-white font-semibold rounded-lg hover:bg-[#48CAE4] transition-all duration-300 shadow-lg shadow-[#00B4D8]/30 flex items-center justify-center space-x-2">
|
||||
<span>{slide.buttonText}</span>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-[#004B87] transition-all duration-300">
|
||||
Tüm Duyuruları Gör
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pagination Dots */}
|
||||
<div className="flex space-x-3 mt-12">
|
||||
<button className="w-3 h-3 rounded-full bg-white"></button>
|
||||
<button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
|
||||
<button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
|
||||
<button className="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 transition-colors"></button>
|
||||
{/* Pagination Dots & Navigation */}
|
||||
<div className="hidden md:flex items-center justify-between mt-12">
|
||||
{/* Dots */}
|
||||
<div className="flex space-x-3">
|
||||
{heroSlides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`h-3 rounded-full transition-all duration-300 ${
|
||||
index === currentSlide
|
||||
? 'w-8 bg-white'
|
||||
: 'w-3 bg-white/30 hover:bg-white/50'
|
||||
}`}
|
||||
aria-label={`Slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Arrow Navigation */}
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => setCurrentSlide((prev) => (prev - 1 + 4) % 4)}
|
||||
className="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-all backdrop-blur-sm"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentSlide((prev) => (prev + 1) % 4)}
|
||||
className="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-all backdrop-blur-sm"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alt Menü Kartları - Slide üzerine bindiriyor (yarısı üstte) */}
|
||||
<div className="absolute bottom-0 left-0 right-0 z-20 translate-y-3/4">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
{/* Alt Menü Kartları - Mobilde normal akış, Desktop'ta overlay */}
|
||||
<div className="relative md:absolute md:bottom-0 md:left-0 md:right-0 z-20 md:translate-y-3/4 bg-[#003366] md:bg-transparent py-6 md:py-0">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
|
||||
{/* Canlı Yayın */}
|
||||
<button
|
||||
onClick={() => setShowLiveStream(!showLiveStream)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg 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 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Canlı Yayın</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Canlı Yayın</span>
|
||||
</button>
|
||||
|
||||
{/* Haberler */}
|
||||
<button
|
||||
onClick={() => setShowNews(!showNews)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg 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>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Haberler</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Haberler</span>
|
||||
</button>
|
||||
|
||||
{/* Belgeler */}
|
||||
<button
|
||||
onClick={() => setShowDocuments(!showDocuments)}
|
||||
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"
|
||||
className="bg-white rounded-xl p-4 md: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-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg 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>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Belgeler</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Belgeler</span>
|
||||
</button>
|
||||
|
||||
{/* Medya Galerisi */}
|
||||
<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"
|
||||
className="bg-white rounded-xl p-4 md: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-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<svg 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>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Medya Galerisi</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Medya Galerisi</span>
|
||||
</button>
|
||||
|
||||
{/* Dilek-Şikayet */}
|
||||
<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"
|
||||
className="bg-white rounded-xl p-4 md: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-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">Dilek-Şikayet</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Dilek-Şikayet</span>
|
||||
</button>
|
||||
|
||||
{/* E-İletişim */}
|
||||
<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"
|
||||
className="bg-white rounded-xl p-4 md: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-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-[#004B87] font-semibold text-sm">E-İletişim</span>
|
||||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">E-İletişim</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Canlı Yayın Video Bölümü */}
|
||||
{showLiveStream && (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-8">
|
||||
<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">
|
||||
@@ -425,7 +491,7 @@ export default function Home() {
|
||||
|
||||
{/* Haberler Bölümü */}
|
||||
{showNews && (
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream ? 'pt-8' : 'pt-32'} pb-8`}>
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream ? 'pt-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">
|
||||
@@ -436,20 +502,31 @@ export default function Home() {
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#004B87]">Son Haberler</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowNews(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 className="flex items-center space-x-3">
|
||||
<Link
|
||||
href="/haberler"
|
||||
className="px-4 py-2 bg-[#00B4D8] text-white rounded-lg hover:bg-[#0096C7] transition-all font-semibold text-sm flex items-center space-x-2"
|
||||
>
|
||||
<span>Tümünü Gör</span>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setShowNews(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>
|
||||
|
||||
{/* Haberler Grid veya Detay */}
|
||||
{selectedNews === null ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{newsData.map((news) => (
|
||||
{featuredNews.map((news) => (
|
||||
<div key={news.id} className="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
||||
{/* Haber Görseli */}
|
||||
<div className="h-48 overflow-hidden">
|
||||
@@ -568,7 +645,7 @@ export default function Home() {
|
||||
|
||||
{/* Belgeler Bölümü */}
|
||||
{showDocuments && (
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews ? 'pt-8' : 'pt-32'} pb-8`}>
|
||||
<div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews ? 'pt-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">
|
||||
@@ -654,7 +731,7 @@ export default function Home() {
|
||||
|
||||
{/* 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={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments ? 'pt-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">
|
||||
@@ -872,7 +949,7 @@ export default function Home() {
|
||||
|
||||
{/* 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={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery ? 'pt-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">
|
||||
@@ -1091,7 +1168,7 @@ export default function Home() {
|
||||
|
||||
{/* 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={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ${showLiveStream || showNews || showDocuments || showMediaGallery || showComplaintForm ? 'pt-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">
|
||||
@@ -1227,7 +1304,7 @@ export default function Home() {
|
||||
)}
|
||||
|
||||
{/* 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 || showMediaGallery || showComplaintForm || showContact ? '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-8 md:pt-32'} pb-12`}>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
Metro Hat Durumları
|
||||
|
||||
Reference in New Issue
Block a user