Initial commit

2026-10-05 16:40:36 +03:00
commit ff743a1397
108 changed files with 15390 additions and 0 deletions
@@ -0,0 +1,141 @@
+"use client"
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { Menu, X } from 'lucide-react'
+
+const navLinks = [
+  { href: '/', label: 'HOME' },
+  { href: '/about', label: 'ABOUT' },
+  { href: '/registration', label: 'REGISTRATION' },
+  { href: '/my-race', label: 'MY RACE' },
+  { href: '/race-info', label: 'RACE INFO' },
+  { href: '/sponsors', label: 'SPONSORS' },
+  { href: '/results', label: 'RACE RESULTS' },
+  { href: '/prize-money', label: 'PRIZE MONEY' },
+]
+
+export function Navigation() {
+  const [isScrolled, setIsScrolled] = useState(false)
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 100)
+    }
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <>
+      <nav 
+        className={`fixed top-0 left-0 right-0 z-50 h-20 transition-all duration-300 ${
+          isScrolled 
+            ? 'bg-white shadow-[0_2px_12px_rgba(0,0,0,0.08)]' 
+            : 'bg-transparent'
+        }`}
+      >
+        <div className="max-w-7xl mx-auto h-full px-6 flex items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="flex-shrink-0">
+            <Image
+              src={isScrolled 
+                ? "https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2024/01/10-mil-marathon-logo-600x553-1.png"
+                : "https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2024/01/marathon-logo-600x553-1.png"
+              }
+              alt="10 Million Trees Marathon Logo"
+              width={78}
+              height={72}
+              className="h-[72px] w-auto"
+              priority
+            />
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden lg:flex items-center gap-6 xl:gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`font-[family-name:var(--font-raleway)] font-bold text-[13px] uppercase tracking-[0.06em] transition-colors hover:text-[#F0C000] ${
+                  isScrolled ? 'text-[#111518]' : 'text-white'
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* Register Button - Desktop */}
+          <Link
+            href="/registration"
+            className="hidden lg:flex items-center justify-center h-[52px] px-7 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors duration-200"
+          >
+            Register Now
+          </Link>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className={`lg:hidden p-2 ${isScrolled ? 'text-[#111518]' : 'text-white'}`}
+            aria-label="Toggle menu"
+          >
+            {isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
+          </button>
+        </div>
+      </nav>
+
+      {/* Mobile Menu Drawer */}
+      <div 
+        className={`fixed inset-0 z-40 lg:hidden transition-opacity duration-300 ${
+          isMobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+        }`}
+      >
+        <div 
+          className="absolute inset-0 bg-black/50"
+          onClick={() => setIsMobileMenuOpen(false)}
+        />
+        <div 
+          className={`absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-[#006838] flex flex-col transform transition-transform duration-300 ${
+            isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
+          }`}
+        >
+          <div className="h-20 flex items-center justify-end px-6">
+            <button
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="text-white p-2"
+              aria-label="Close menu"
+            >
+              <X size={28} />
+            </button>
+          </div>
+          
+          <div className="flex-1 flex flex-col px-6 pt-4">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="font-[family-name:var(--font-raleway)] font-bold text-[20px] text-white py-3 min-h-[48px] flex items-center hover:text-[#F0C000] transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          <div className="p-6">
+            <Link
+              href="/registration"
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="flex items-center justify-center w-full h-14 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors"
+            >
+              Register Now
+            </Link>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}