Ana Sayfa Fix
This commit is contained in:
Şahan Hasret
150
components/HeroSlider.tsx
Normal file
150
components/HeroSlider.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
// Hero Slider Data
|
||||
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 HeroSlider() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
// Auto slider
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % heroSlides.length);
|
||||
}, 10000); // 10 saniyede bir değiş
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-[60vh] md:h-screen pt-20">
|
||||
{/* Video Background */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<video
|
||||
className="w-full h-full object-cover"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
>
|
||||
<source src="/assets/high-speed-metro-design-template-559897134973592cb13d708cec30ea39_screen.mp4" type="video/mp4" />
|
||||
Tarayıcınız video etiketini desteklemiyor.
|
||||
</video>
|
||||
{/* Dark Overlay */}
|
||||
<div className="absolute inset-0 bg-linear-to-b from-[#003366]/70 via-[#004B87]/50 to-[#003366]/90"></div>
|
||||
</div>
|
||||
|
||||
{/* Content Overlay */}
|
||||
<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">
|
||||
{/* 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 & 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 + heroSlides.length) % heroSlides.length)}
|
||||
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) % heroSlides.length)}
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user