KabundiNjuki
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Image from 'next/image'
|
|
|
|
const heroImages = [
|
|
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-100_result.jpg',
|
|
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-100_result.jpg',
|
|
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-19-100_result.jpg',
|
|
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-2-100_result.jpg',
|
|
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-3-100_result.jpg',
|
|
]
|
|
|
|
export function HeroCarousel() {
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentIndex((prev) => (prev + 1) % heroImages.length)
|
|
}, 5000)
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
{heroImages.map((src, index) => (
|
|
<div
|
|
key={src}
|
|
className={`absolute inset-0 transition-opacity duration-[800ms] ${
|
|
index === currentIndex ? 'opacity-100' : 'opacity-0'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={`Marathon runners - slide ${index + 1}`}
|
|
fill
|
|
className="object-cover object-center"
|
|
priority={index === 0}
|
|
/>
|
|
</div>
|
|
))}
|
|
{/* Overlay gradient */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background: 'linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,104,56,0.40) 100%)'
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|