JosephNjuki/lukenyaMarathon_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
KabundiNjuki
2026-10-05 16:40:36 +03:00
commit ff743a1397
108 changed files with 15390 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+632
View File
@@ -0,0 +1,632 @@
import Link from 'next/link'
import Image from 'next/image'
import {
ShieldCheck,
Trophy,
TreePine,
Users,
MapPin,
Globe,
Bike,
ArrowRight
} from 'lucide-react'
import { Navigation } from '@/components/navigation'
import { Footer } from '@/components/footer'
import { HeroCarousel } from '@/components/hero-carousel'
import { getPublicEvent, getPublicPrizes } from '@/lib/lukenya-api'
import {
countWord,
displayPrice,
editionLabel,
findPrize,
formatClock,
formatEventDate,
formatMoney,
registrationIsOpen,
registrationStatusText,
venueLine,
} from '@/lib/event-types'
export const revalidate = 60
const galleryImages = [
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-4-100_result.jpg',
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-5-100_result.jpg',
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-6-100_result.jpg',
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-7-100_result.jpg',
'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2026/04/Artboard-1-copy-8-100_result.jpg',
]
const sponsors = [
{ name: 'Betika', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Betika.jpg' },
{ name: 'Greenlife', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Greenlife.jpg' },
{ name: 'Family Bank', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Family-bank.jpg' },
{ name: 'Lukenya Schools', url: 'https://marathon.lukenyauniversity.ac.ke/wp-content/uploads/2025/04/Lukenya-schools-1.jpg' },
]
const testimonials = [
{
quote: "The Lukenya Hills will humble you. The finish line will change you. I have run 11 marathons. This one meant something different.",
name: "David M.",
category: "42KM Full Marathon",
edition: "4th Edition"
},
{
quote: "I came for the race. I stayed because of the trees. Knowing my entry funded real reforestation made this the most purposeful race I have ever entered.",
name: "Amina K.",
category: "21KM Half Marathon",
edition: "3rd Edition"
}
]
export default async function HomePage() {
const [event, prizes] = await Promise.all([getPublicEvent(), getPublicPrizes()])
const edition = event.edition
const categories = event.categories
const isOpen = registrationIsOpen(event)
const label = editionLabel(edition)
const date = formatEventDate(edition?.event_date)
const venue = venueLine(edition)
const featured = categories.find((c) => c.is_featured) || categories[0]
const featuredStart = featured ? formatClock(featured.start_time) : null
const heroStats = [
{ value: '300+', label: 'Runners' },
{ value: label || 'Next', label: isOpen ? 'Edition: entries open' : 'Edition' },
{ value: categories.length ? String(categories.length) : '–', label: 'Categories' },
{ value: '10M', label: 'Trees Mission' },
]
const trustSignals = [
{ icon: ShieldCheck, label: 'Sporthive Certified Timing' },
{ icon: Trophy, label: 'Competitive Prize Money' },
{ icon: TreePine, label: '10M Trees Mission' },
{ icon: Users, label: '300+ Annual Finishers' },
{ icon: MapPin, label: venue || 'Venue to be announced' },
{ icon: Globe, label: 'Open to International Runners' },
]
const featuredPrizeCategory = featured?.prize_eligible ? featured.name : undefined
const prizeCards = [
{ icon: Trophy, title: `Men, ${featured?.distance_label || 'Marathon'}, 1st place`, amount: findPrize(prizes, 'Men', 1, featuredPrizeCategory) },
{ icon: Trophy, title: `Women, ${featured?.distance_label || 'Marathon'}, 1st place`, amount: findPrize(prizes, 'Women', 1, featuredPrizeCategory) },
{ icon: Users, title: 'Top corporate relay team', amount: findPrize(prizes, 'Corporate Relay', 1) },
]
return (
<div className="min-h-screen bg-white">
<Navigation />
{/* SECTION 1 — HERO (FIX 1: Left-aligned layout) */}
<section className="relative min-h-screen flex flex-col">
<HeroCarousel />
{/* Hero Content - LEFT ALIGNED */}
<div className="relative z-10 flex-1 flex flex-col justify-center px-6 md:px-12 pt-20">
<div className="max-w-[1200px] mx-auto w-full">
<div className="max-w-[600px]">
{/* Eyebrow Badge */}
<span className="inline-block bg-[#3BB34A] text-white font-[family-name:var(--font-raleway)] font-semibold text-[11px] uppercase tracking-[0.06em] px-4 py-2 rounded-full mb-6">
{['Kenya', edition?.county, label].filter(Boolean).join(' · ')}
</span>
{/* H1 */}
<h1 className="font-[family-name:var(--font-antonio)] font-bold text-white text-[40px] md:text-[56px] lg:text-[88px] uppercase leading-none tracking-[-0.01em] mb-6">
Run, Ride<br />& Restore.
</h1>
{/* Subheading */}
<p className="font-[family-name:var(--font-quicksand)] font-medium text-white/85 text-[17px] md:text-[20px] leading-relaxed mb-10">
Africa&apos;s only university-backed marathon with a verified reforestation mission.<br />
{[categories.length ? `${categories.length} categories` : null, venue, date].filter(Boolean).join(' · ')}
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 mb-6">
<Link
href="/registration"
className="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 flex items-center justify-center"
>
Register Now
</Link>
<Link
href="/race-info"
className="h-[52px] px-7 border border-white text-white font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-white hover:text-[#111518] transition-colors duration-200 flex items-center justify-center"
>
Race Information
</Link>
</div>
{/* FIX 2: Registration Status Badge (replaces countdown) */}
<div
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#3BB34A]"
style={{ backgroundColor: 'rgba(59,179,74,0.20)' }}
>
<span className="w-2 h-2 rounded-full bg-[#3BB34A] animate-pulse-dot" />
<span className="font-[family-name:var(--font-raleway)] font-bold text-[13px] text-[#3BB34A] uppercase">
{registrationStatusText(event)}
</span>
</div>
</div>
</div>
</div>
{/* Stat Strip (FIX 3: Edition contradiction fixed) */}
<div className="relative z-10 w-full bg-black/45 backdrop-blur-[4px]">
<div className="max-w-7xl mx-auto px-6 py-7">
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{heroStats.map((stat, index) => (
<div
key={index}
className={`text-center py-2 ${
index < heroStats.length - 1 ? 'md:border-r md:border-white/15' : ''
}`}
>
<p className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[22px]">
{stat.value}
</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-white/60 text-[12px]">
{stat.label}
</p>
</div>
))}
</div>
</div>
</div>
</section>
{/* SECTION 2 — TRUST BAR (FIX 6: Icons restored, location canonicalized) */}
<section className="bg-[#006838] py-9">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
{trustSignals.map((signal, index) => (
<div
key={index}
className={`flex flex-col items-center text-center py-2 ${
index < trustSignals.length - 1 ? 'lg:border-r lg:border-white/15' : ''
}`}
>
<signal.icon className="w-[22px] h-[22px] text-[#FFF100] mb-2" strokeWidth={2} />
<span className="font-[family-name:var(--font-raleway)] font-semibold text-white text-[13px]">
{signal.label}
</span>
</div>
))}
</div>
</div>
</section>
{/* FIX 8: NEW RACE DATE ANCHOR SECTION */}
<section className="bg-[#111518] py-14">
<div className="max-w-5xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-0">
{/* Column 1 — WHEN */}
<div className="text-center md:text-left md:border-r md:border-white/10 md:pr-8">
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] text-[#3BB34A] uppercase tracking-[0.14em]">
Race Day
</span>
<div className="w-8 h-[2px] bg-[#F0C000] mt-2 mb-3 mx-auto md:mx-0" />
<p className="font-[family-name:var(--font-antonio)] font-bold text-white text-[32px] md:text-[40px] leading-tight">
{date ? date.toUpperCase() : 'DATE TO BE ANNOUNCED'}
</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mt-2">
{label ? `${label} · ` : ''}Annual event
</p>
</div>
{/* Column 2 — WHERE */}
<div className="text-center md:text-left md:border-r md:border-white/10 md:px-8">
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] text-[#3BB34A] uppercase tracking-[0.14em]">
Location
</span>
<div className="w-8 h-[2px] bg-[#F0C000] mt-2 mb-3 mx-auto md:mx-0" />
<p className="font-[family-name:var(--font-antonio)] font-bold text-white text-[32px] md:text-[40px] leading-tight">
{(edition?.venue || 'To be announced').toUpperCase()}
</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mt-2">
{[edition?.county ? `${edition.county}, Kenya` : 'Kenya', featured && featuredStart ? `${featured.distance_label} start: ${featuredStart}` : null].filter(Boolean).join(' · ')}
</p>
</div>
{/* Column 3 — START TIMES (from the race categories) */}
<div className="text-center md:text-left md:pl-8">
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[11px] text-[#3BB34A] uppercase tracking-[0.14em]">
Start Times
</span>
<div className="w-8 h-[2px] bg-[#F0C000] mt-2 mb-3 mx-auto md:mx-0" />
<p className="font-[family-name:var(--font-antonio)] font-bold text-white text-[32px] md:text-[40px] leading-tight">
{featuredStart || 'TBA'}
</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mt-2">
{categories.filter((c) => c.start_time).slice(0, 4).map((c) => `${c.distance_label} ${formatClock(c.start_time)}`).join(' · ') || 'Start times are published with the race categories.'}
</p>
</div>
</div>
</div>
</section>
{/* SECTION 3 — ENVIRONMENTAL MISSION (FIX 7: Clarified 10,000 vs 10M) */}
<section className="bg-white py-24 md:py-32">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-[55%_45%] gap-16 lg:gap-20 items-center">
{/* Left Column */}
<div>
{/* Eyebrow */}
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
Our Mission
</span>
{/* Gold Rule */}
<div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4" />
{/* H2 */}
<h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#006838] text-[34px] md:text-[48px] leading-[1.15] mb-4">
More Than a Finish Line.
</h2>
{/* Body (FIX 7: Updated copy) */}
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#111518] text-[17px] leading-[1.75] mb-8">
The 10 Million Trees Marathon exists because of a promise made to Kenya&apos;s dryland ecosystems. Every runner, every kilometre, every edition is a contribution to one of East Africa&apos;s most ambitious conservation programmes. By 2027, the programme will have planted 10 million trees across the ASAL region — a goal now in its 5th year of active delivery.
</p>
{/* Stat Pills */}
<div className="flex flex-wrap gap-3 mb-8">
<div className="bg-[#006838] text-white rounded-lg px-6 py-4 flex items-center gap-3">
<span className="font-[family-name:var(--font-raleway)] font-bold text-[24px]">10M</span>
<span className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/80">Trees by 2027</span>
</div>
<div className="bg-[#006838] text-white rounded-lg px-6 py-4 flex items-center gap-3">
<span className="font-[family-name:var(--font-raleway)] font-bold text-[24px]">4</span>
<span className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/80">Editions Completed</span>
</div>
<div className="bg-[#006838] text-white rounded-lg px-6 py-4 flex items-center gap-3">
<span className="font-[family-name:var(--font-raleway)] font-bold text-[24px]">ASAL</span>
<span className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/80">Region Impact</span>
</div>
</div>
{/* CTA */}
<Link
href="/about"
className="inline-flex items-center gap-2 h-[52px] px-7 border-2 border-[#006838] text-[#006838] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#006838] hover:text-white transition-colors duration-200"
>
Our Conservation Story <ArrowRight size={16} />
</Link>
</div>
{/* Right Column (FIX 7: Updated labels) */}
<div className="text-center">
<p className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[80px] md:text-[96px] leading-none">
10,000+
</p>
<p className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[16px] mt-2 mb-2">
Trees planted and GPS-tagged to date
</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[13px] mb-4">
Goal: 10 Million by 2027 &middot; 4 editions completed &middot; On track
</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] leading-[1.65] max-w-[280px] mx-auto mb-4">
GPS-tagged planting zones in Lukenya Conservation Area. Documented, verified, reportable.
</p>
<span className="inline-block bg-[#3BB34A] text-white font-[family-name:var(--font-raleway)] font-bold text-[11px] uppercase px-4 py-2 rounded-full">
Verified Programme
</span>
</div>
</div>
</div>
</section>
{/* SECTION 4 — RACE CATEGORIES (FIX 4: Removed TBD pricing, added fallback) */}
<section className="bg-[#F9FAFB] py-24 md:py-32">
<div className="max-w-7xl mx-auto px-6">
{/* Header */}
<div className="mb-12">
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
Race Categories
</span>
<div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4" />
<h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[36px] md:text-[44px] leading-tight mb-3">
Find Your Distance.
</h2>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[17px]">
{categories.length ? `${countWord(categories.length)} ${categories.length === 1 ? 'category' : 'categories'}. ` : ''}Every level of runner and rider. One extraordinary finish line.
</p>
</div>
{/* Category Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-10">
{categories.length === 0 && (
<p className="md:col-span-2 lg:col-span-4 font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[15px]">
Race categories for the next edition will be published here soon.
</p>
)}
{categories.map((category) => {
const price = formatMoney(displayPrice(category, 'resident'), event.currency)
const isCycling = category.discipline === 'Cycling'
return (
<div
key={category.name}
className={`relative bg-white rounded-xl shadow-[0_2px_20px_rgba(0,0,0,0.07)] p-7 flex flex-col ${
category.is_featured ? 'border-l-4 border-l-[#006838]' : ''
}`}
>
{/* Prize Badge */}
{category.prize_eligible && (
<span className="absolute top-4 right-4 bg-[#F0C000] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[10px] uppercase px-2 py-1 rounded">
Prize Money
</span>
)}
{/* Cycling Icon */}
{isCycling && !category.prize_eligible && (
<Bike className="absolute top-4 right-4 w-5 h-5 text-[#3BB34A]" />
)}
{/* Distance */}
<p className="font-[family-name:var(--font-antonio)] font-bold text-[#006838] text-[40px] leading-none">
{category.distance_label}
</p>
{/* Name */}
<h3 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[16px] mt-2">
{category.category_name}
</h3>
{/* Description */}
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[13px] leading-relaxed mt-2 mb-3 flex-1">
{category.short_description || category.eligibility || category.inclusions.join(' · ')}
</p>
{/* Featured race: inline stat */}
{category.is_featured && category.prize_eligible && (
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[12px] mb-3">
🏆 Prize money available &middot; Certified course &middot; Chip timing
</p>
)}
{/* Price */}
<div className="mb-3">
{category.sold_out ? (
<span className="inline-block bg-[#E5E7EB] text-[#111518] font-[family-name:var(--font-raleway)] font-bold text-[12px] uppercase px-2.5 py-1 rounded">
Sold out
</span>
) : price ? (
<>
<p className="font-[family-name:var(--font-antonio)] font-bold text-[#111518] text-[22px] leading-none">{price}</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[12px] mt-1">
{category.prices.early_bird_active ? 'Early-bird rate for Kenyan residents' : 'Kenyan resident rate'}
</p>
</>
) : (
<span className="inline-block bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[12px] uppercase px-2.5 py-1 rounded">
Pricing announced soon
</span>
)}
</div>
{/* CTA */}
<Link
href={isOpen && !category.sold_out ? `/registration?race=${encodeURIComponent(category.name)}#registration-form` : '/registration#waitlist'}
className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[13px] hover:underline inline-flex items-center gap-1"
>
{isOpen && !category.sold_out ? 'Enter this race' : 'Join waitlist'} <ArrowRight size={14} />
</Link>
</div>
)
})}
</div>
{/* CTAs */}
<div className="flex flex-col sm:flex-row justify-center gap-4">
<Link
href="/race-info"
className="h-[52px] px-7 border-2 border-[#006838] text-[#006838] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#006838] hover:text-white transition-colors duration-200 flex items-center justify-center"
>
View All Race Info
</Link>
<Link
href="/registration"
className="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 flex items-center justify-center"
>
Register Now
</Link>
</div>
</div>
</section>
{/* SECTION 5 — PRIZE MONEY TEASER (FIX 5: Replaced TBD with competitive framing) */}
<section className="bg-[#006838] py-24 md:py-32">
<div className="max-w-5xl mx-auto px-6">
{/* Header */}
<div className="text-center mb-12">
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[#FFF100] text-[11px] uppercase tracking-[0.16em]">
Prize Money
</span>
<div className="w-10 h-[3px] bg-[#FFF100] mt-3 mb-4 mx-auto" />
<h2 className="font-[family-name:var(--font-raleway)] font-bold text-white text-[36px] md:text-[44px] leading-tight">
Compete for Real Rewards.
</h2>
</div>
{/* Prize Cards: amounts come from the edition's prize rules */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
{prizeCards.map((card) => (
<div key={card.title} className="bg-white rounded-xl p-8 shadow-[0_2px_20px_rgba(0,0,0,0.07)] text-center">
<card.icon className="w-7 h-7 text-[#F0C000] mx-auto mb-3" />
<p className="font-[family-name:var(--font-raleway)] font-semibold text-[#687279] text-[13px] mb-2">
{card.title}
</p>
<p className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[28px]">
{formatMoney(card.amount, prizes?.currency || event.currency) || 'PRIZE MONEY AVAILABLE'}
</p>
{!card.amount && (
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[13px] mt-2">
Amounts published before entries open
</p>
)}
</div>
))}
</div>
{/* Prize structure note (FIX 5) */}
<p className="text-center font-[family-name:var(--font-quicksand)] font-medium text-white/65 text-[14px] mb-10">
Prize structure includes Men, Women, Wheelchair, and Corporate Relay categories. Full breakdown published on the Prize Money page.
</p>
{/* CTA */}
<div className="text-center">
<Link
href="/prize-money"
className="inline-flex items-center gap-2 h-[52px] px-7 border border-white text-white font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-white hover:text-[#111518] transition-colors duration-200"
>
View Full Prize Structure <ArrowRight size={16} />
</Link>
</div>
</div>
</section>
{/* SECTION 6 — PAST EDITIONS / SOCIAL PROOF (FIX 3: Updated headline) */}
<section className="bg-white py-24 md:py-32">
<div className="max-w-7xl mx-auto px-6">
{/* Header */}
<div className="mb-10">
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
Past Editions
</span>
<div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4" />
<h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[36px] md:text-[44px] leading-tight">
300+ Runners. Across 4 Editions. One Growing Legacy.
</h2>
</div>
{/* Photo Strip */}
<div className="flex gap-4 overflow-x-auto pb-4 -mx-6 px-6 snap-x snap-mandatory scroll-smooth">
{galleryImages.map((src, index) => (
<div
key={index}
className="flex-shrink-0 w-[340px] h-[220px] rounded-[10px] overflow-hidden snap-start relative group"
>
<Image
src={src}
alt={`Marathon gallery image ${index + 1}`}
fill
className="object-cover transition-transform duration-300 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-[#006838]/0 group-hover:bg-[#006838]/25 transition-colors duration-300" />
</div>
))}
</div>
{/* Testimonials (ADDITIONAL FIX 2) */}
<div className="flex flex-col md:flex-row justify-center gap-6 mt-12 mb-12">
{testimonials.map((testimonial, index) => (
<div
key={index}
className="bg-white rounded-xl shadow-[0_2px_20px_rgba(0,0,0,0.07)] p-6 max-w-[380px]"
>
<span className="font-[family-name:var(--font-antonio)] font-bold text-[#F0C000] text-[48px] leading-[0.8] block mb-2">
&ldquo;
</span>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#111518] text-[15px] leading-[1.65] italic mb-3">
{testimonial.quote}
</p>
<p className="font-[family-name:var(--font-raleway)] font-bold text-[#006838] text-[13px]">
— {testimonial.name}
</p>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[12px]">
{testimonial.category} &middot; {testimonial.edition}
</p>
</div>
))}
</div>
{/* Stat */}
<div className="text-center mb-10">
<p className="font-[family-name:var(--font-antonio)] font-bold text-[#006838] text-[72px] md:text-[88px] leading-none">
300+
</p>
<p className="font-[family-name:var(--font-raleway)] font-semibold text-[#687279] text-[18px] mt-2">
runners have crossed this finish line
</p>
</div>
{/* CTA */}
<div className="text-center">
<Link
href="/results"
className="inline-flex items-center gap-2 h-[52px] px-7 border-2 border-[#006838] text-[#006838] font-[family-name:var(--font-raleway)] font-bold text-[14px] uppercase tracking-[0.08em] rounded-md hover:bg-[#006838] hover:text-white transition-colors duration-200"
>
View Results Archive
</Link>
</div>
</div>
</section>
{/* SECTION 7 — SPONSORS */}
<section className="bg-[#F9FAFB] py-24 md:py-32">
<div className="max-w-5xl mx-auto px-6 text-center">
{/* Header */}
<span className="font-[family-name:var(--font-raleway)] font-semibold text-[#006838] text-[11px] uppercase tracking-[0.16em]">
Our Sponsors
</span>
<div className="w-10 h-[3px] bg-[#F0C000] mt-3 mb-4 mx-auto" />
<h2 className="font-[family-name:var(--font-raleway)] font-bold text-[#111518] text-[32px] md:text-[40px] leading-tight mb-10">
Brands That Run With Purpose.
</h2>
{/* Sponsor Logos */}
<div className="flex flex-wrap justify-center gap-10 mb-8">
{sponsors.map((sponsor, index) => (
<div
key={index}
className="relative w-auto h-16 grayscale hover:grayscale-0 transition-all duration-300"
>
<Image
src={sponsor.url}
alt={sponsor.name}
width={120}
height={64}
className="h-16 w-auto object-contain"
/>
</div>
))}
</div>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-[#687279] text-[14px] mb-10">
Including our Environmental Partner tier — the only ESG-verified sponsorship in Kenyan running.
</p>
{/* CTA */}
<Link
href="/sponsors"
className="inline-flex items-center gap-2 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"
>
Become a Partner <ArrowRight size={16} />
</Link>
</div>
</section>
{/* SECTION 8 — REGISTRATION CTA BAND */}
<section className="bg-[#006838] py-24">
<div className="max-w-4xl mx-auto px-6 text-center">
<h2 className="font-[family-name:var(--font-antonio)] font-bold text-[#FFF100] text-[40px] md:text-[64px] uppercase leading-none mb-4">
{edition?.trees_commitment_per_entry ? 'Your Entry Plants a Tree.' : 'Run With Purpose.'}
</h2>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-white/80 text-[19px] mb-8">
{isOpen ? `Register for the ${label || 'next edition'}. Run for Kenya. Entries open now.` : `Entries for the ${label || 'next edition'} open soon. Join the waitlist to hear first.`}
</p>
<Link
href="/registration"
className="inline-flex items-center justify-center h-14 px-10 bg-[#FFF100] text-[#714508] font-[family-name:var(--font-raleway)] font-bold text-[15px] uppercase tracking-[0.08em] rounded-md hover:bg-[#3BB34A] hover:text-white transition-colors duration-200"
>
Register Now
</Link>
<p className="font-[family-name:var(--font-quicksand)] font-medium text-white/50 text-[13px] mt-4">
{featured?.prices.early_bird_active ? 'Early-bird pricing available. Secure your place before rates increase.' : 'Pay by M-PESA or card.'}
</p>
</div>
</section>
<Footer />
</div>
)
}