Initial commit

2026-10-05 16:40:36 +03:00
commit ff743a1397
108 changed files with 15390 additions and 0 deletions
@@ -0,0 +1,137 @@
+'use client'
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { Instagram, Facebook, Twitter } from 'lucide-react'
+import { useEvent } from '@/components/event-provider'
+import { formatClock, formatEventDate, venueLine } from '@/lib/event-types'
+
+const raceLinks = [
+  { href: '/race-info', label: 'Race Info' },
+  { href: '/registration', label: 'Registration' },
+  { href: '/my-race', label: 'My Race' },
+  { href: '/prize-money', label: 'Prize Money' },
+  { href: '/results', label: 'Race Results' },
+]
+
+export function Footer() {
+  const { event } = useEvent()
+  const featured = event.categories.find((c) => c.is_featured) || event.categories[0]
+  const raceDayInfo = [
+    formatEventDate(event.edition?.event_date) || 'Race date to be announced',
+    venueLine(event.edition),
+    featured && formatClock(featured.start_time) ? `${featured.distance_label} start: ${formatClock(featured.start_time)}` : null,
+    'Kit collection: day before',
+  ].filter(Boolean) as string[]
+
+  return (
+    <footer className="bg-[#111518]">
+      <div className="max-w-7xl mx-auto px-6 pt-[72px] pb-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-14">
+          {/* Column 1: Logo & Brand */}
+          <div>
+            <Image
+              src="https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2024/01/10-mil-marathon-logo-600x553-1.png"
+              alt="10 Million Trees Marathon Logo"
+              width={87}
+              height={80}
+              className="h-20 w-auto"
+            />
+            <p className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/55 mt-3">
+              Kenya&apos;s Environmental Marathon
+            </p>
+            <span className="inline-block mt-3 bg-[#3BB34A] text-white font-[family-name:var(--font-raleway)] font-bold text-[10px] uppercase px-3 py-1.5 rounded-full">
+              10M Trees Mission
+            </span>
+          </div>
+
+          {/* Column 2: Race Links */}
+          <div>
+            <h4 className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.16em] text-[#F0C000] mb-4">
+              Race
+            </h4>
+            <ul className="space-y-2">
+              {raceLinks.map((link) => (
+                <li key={link.href}>
+                  <Link 
+                    href={link.href}
+                    className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65 hover:text-white transition-colors duration-200"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+              <li>
+                <Link href="/legal" className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65 hover:text-white transition-colors duration-200">
+                  Terms &amp; Privacy
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Column 3: Race Day Info */}
+          <div>
+            <h4 className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.16em] text-[#F0C000] mb-4">
+              Race Day
+            </h4>
+            <ul className="space-y-2">
+              {raceDayInfo.map((item, index) => (
+                <li key={index} className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65">
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Column 4: Connect */}
+          <div>
+            <h4 className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.16em] text-[#F0C000] mb-4">
+              Connect
+            </h4>
+            <div className="flex gap-5 mb-4">
+              <a 
+                href="https://www.instagram.com/lukenyamarathon/" 
+                className="text-white/60 hover:text-[#FFF100] transition-colors duration-200" 
+                aria-label="Instagram"
+              >
+                <Instagram size={22} />
+              </a>
+              <a 
+                href="https://www.facebook.com/LUMarathon/" 
+                className="text-white/60 hover:text-[#FFF100] transition-colors duration-200" 
+                aria-label="Facebook"
+              >
+                <Facebook size={22} />
+              </a>
+              <a 
+                href="https://twitter.com/lukenyamarathon" 
+                className="text-white/60 hover:text-[#FFF100] transition-colors duration-200" 
+                aria-label="Twitter"
+              >
+                <Twitter size={22} />
+              </a>
+            </div>
+            <a 
+              href="mailto:marathon@lukenyauniversity.ac.ke"
+              className="font-[family-name:var(--font-quicksand)] font-medium text-[14px] text-white/65 hover:text-white transition-colors"
+            >
+              marathon@lukenyauniversity.ac.ke
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Bar */}
+      <div className="bg-[#006838] h-12">
+        <div className="max-w-7xl mx-auto px-6 h-full flex items-center justify-between">
+          <p className="font-[family-name:var(--font-quicksand)] font-medium text-[13px] text-white/70">
+            &copy; 2026 10 Million Trees Marathon &middot; Powered by Lukenya University &middot; All Rights Reserved
+          </p>
+          <p className="hidden sm:block font-[family-name:var(--font-raleway)] font-semibold text-[12px] text-[#FFF100]">
+            Chip Timing by Sporthive
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}