99 lines
4.9 KiB
TypeScript
99 lines
4.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import { heroSlides } from '@/lib/data';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { Link } from '@/i18n/routing';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export function HeroSlider() {
|
|
const [current, setCurrent] = useState(0);
|
|
const t = useTranslations('hero');
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrent((prev) => (prev === heroSlides.length - 1 ? 0 : prev + 1));
|
|
}, 5000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const nextSlide = () => setCurrent(current === heroSlides.length - 1 ? 0 : current + 1);
|
|
const prevSlide = () => setCurrent(current === 0 ? heroSlides.length - 1 : current - 1);
|
|
|
|
return (
|
|
<div className="relative h-screen min-h-[600px] w-full overflow-hidden group bg-deepblue-900">
|
|
{/* Decorative Aurora Gradients */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none z-10 opacity-60 mix-blend-screen">
|
|
<div className="absolute -top-[30%] -left-[10%] w-[60%] h-[60%] rounded-full bg-vibrantorange-500/30 blur-[120px] animate-pulse" style={{ animationDuration: '8s' }} />
|
|
<div className="absolute top-[20%] -right-[20%] w-[70%] h-[70%] rounded-full bg-turquoise-500/30 blur-[150px] animate-pulse" style={{ animationDuration: '12s' }} />
|
|
<div className="absolute -bottom-[40%] left-[20%] w-[80%] h-[80%] rounded-full bg-deepblue-900/40 blur-[100px] animate-pulse" style={{ animationDuration: '10s' }} />
|
|
</div>
|
|
|
|
{heroSlides.map((slide, index) => (
|
|
<div
|
|
key={index}
|
|
className={`absolute inset-0 transition-all duration-1000 ease-in-out ${
|
|
index === current ? 'opacity-100 z-10 scale-100' : 'opacity-0 z-0 scale-105'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={slide}
|
|
alt={`Ölüdeniz Slider ${index + 1}`}
|
|
fill
|
|
className="object-cover mix-blend-overlay opacity-60"
|
|
priority={index === 0}
|
|
/>
|
|
{/* Overlay gradient for text readability and aurora blend */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-deepblue-900 via-deepblue-900/60 to-transparent" />
|
|
</div>
|
|
))}
|
|
|
|
{/* Content */}
|
|
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center text-center px-4 pt-16">
|
|
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white tracking-tight mb-6 animate-in fade-in slide-in-from-bottom-12 duration-1000 fill-mode-both drop-shadow-2xl">
|
|
ÖLÜDENİZ <span className="text-transparent bg-clip-text bg-gradient-to-r from-turquoise-500 to-vibrantorange-500">TOUR</span> TRAVELS
|
|
</h1>
|
|
<p className="text-xl md:text-3xl text-sandwhite-100 mb-12 max-w-4xl mx-auto font-medium animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300 fill-mode-both drop-shadow-lg">
|
|
{t('subtitle')}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-6 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-700 fill-mode-both">
|
|
<Link href="/turlar" className="px-10 py-5 bg-gradient-to-r from-vibrantorange-500 to-orange-400 hover:from-orange-400 hover:to-vibrantorange-500 text-white rounded-2xl font-bold text-lg transition-all shadow-[0_0_30px_rgba(249,115,22,0.4)] hover:shadow-[0_0_50px_rgba(249,115,22,0.6)] hover:-translate-y-1">
|
|
{t('exploreTours')}
|
|
</Link>
|
|
<Link href="/aktiviteler" className="px-10 py-5 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 text-white rounded-2xl font-bold text-lg transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">
|
|
{t('activities')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Controls */}
|
|
<button
|
|
onClick={prevSlide}
|
|
className="absolute left-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 bg-black/20 hover:bg-black/50 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all backdrop-blur-sm"
|
|
>
|
|
<ChevronLeft className="w-6 h-6" />
|
|
</button>
|
|
<button
|
|
onClick={nextSlide}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 bg-black/20 hover:bg-black/50 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all backdrop-blur-sm"
|
|
>
|
|
<ChevronRight className="w-6 h-6" />
|
|
</button>
|
|
|
|
{/* Indicators */}
|
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-30 flex gap-2">
|
|
{heroSlides.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setCurrent(index)}
|
|
className={`w-3 h-3 rounded-full transition-all ${
|
|
index === current ? 'bg-white scale-125' : 'bg-white/50'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|