Initial commit

2026-10-05 16:40:36 +03:00
commit ff743a1397
108 changed files with 15390 additions and 0 deletions
@@ -0,0 +1,51 @@
+'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>
+  )
+}