Initial commit
This commit is contained in:
KabundiNjuki
@@ -0,0 +1,263 @@
|
||||
import Link from 'next/link'
|
||||
import { ExternalLink, Calendar, Users, Trophy, ShieldCheck } from 'lucide-react'
|
||||
import { Navigation } from '@/components/navigation'
|
||||
import { Footer } from '@/components/footer'
|
||||
|
||||
const editions = [
|
||||
{
|
||||
year: 2024,
|
||||
date: 'October 2024',
|
||||
participants: '350+',
|
||||
highlight: 'Record participation in wheelchair category',
|
||||
resultsUrl: '#',
|
||||
},
|
||||
{
|
||||
year: 2023,
|
||||
date: 'October 2023',
|
||||
participants: '280',
|
||||
highlight: 'First corporate relay category introduced',
|
||||
resultsUrl: '#',
|
||||
},
|
||||
{
|
||||
year: 2022,
|
||||
date: 'October 2022',
|
||||
participants: '150',
|
||||
highlight: 'Inaugural edition - 10M Trees mission launched',
|
||||
resultsUrl: '#',
|
||||
},
|
||||
]
|
||||
|
||||
const topFinishers = {
|
||||
fullMarathon: {
|
||||
men: [
|
||||
{ place: '1st', name: '[Winner TBD]', time: '[TIME]', year: 2024 },
|
||||
{ place: '2nd', name: '[Runner-up TBD]', time: '[TIME]', year: 2024 },
|
||||
{ place: '3rd', name: '[Third TBD]', time: '[TIME]', year: 2024 },
|
||||
],
|
||||
women: [
|
||||
{ place: '1st', name: '[Winner TBD]', time: '[TIME]', year: 2024 },
|
||||
{ place: '2nd', name: '[Runner-up TBD]', time: '[TIME]', year: 2024 },
|
||||
{ place: '3rd', name: '[Third TBD]', time: '[TIME]', year: 2024 },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export default function ResultsPage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
|
||||
{/* Page Hero */}
|
||||
<section className="bg-[#006838] pt-20">
|
||||
<div className="max-w-5xl mx-auto px-4 text-center py-16 md:py-20">
|
||||
<span className="text-[#006838] bg-white/10 backdrop-blur font-semibold text-xs uppercase tracking-[0.12em] px-4 py-2 rounded-full inline-block mb-4">
|
||||
Race History
|
||||
</span>
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4">
|
||||
Results Archive
|
||||
</h1>
|
||||
<p className="text-white/80 text-lg max-w-2xl mx-auto">
|
||||
Complete results from all editions of the Lukenya University Marathon, certified by Sporthive.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sporthive Integration Banner */}
|
||||
<section className="bg-[#005030] py-6">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShieldCheck className="w-6 h-6 text-[#ffcd05]" />
|
||||
<span className="text-white font-semibold">Powered by Sporthive</span>
|
||||
</div>
|
||||
<span className="hidden md:block text-white/30">|</span>
|
||||
<p className="text-white/70 text-sm text-center md:text-left">
|
||||
Certified chip timing and official race results
|
||||
</p>
|
||||
<a
|
||||
href="https://sporthive.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1 text-[#ffcd05] hover:text-[#e5b02a] text-sm font-semibold transition-colors"
|
||||
>
|
||||
View on Sporthive
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Edition History */}
|
||||
<section className="bg-white py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
|
||||
All Editions
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
|
||||
Race History
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{editions.map((edition) => (
|
||||
<div
|
||||
key={edition.year}
|
||||
className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden"
|
||||
>
|
||||
<div className="h-1 bg-[#006838]" />
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-2xl font-extrabold text-[#006838]">{edition.year}</h3>
|
||||
<span className="text-[#6b7280] text-sm">{edition.date}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<div className="flex items-center gap-1 text-[#111518]">
|
||||
<Users className="w-4 h-4 text-[#006838]" />
|
||||
<span className="text-sm font-medium">{edition.participants} Finishers</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[#6b7280] text-sm">{edition.highlight}</p>
|
||||
</div>
|
||||
<a
|
||||
href={edition.resultsUrl}
|
||||
className="inline-flex items-center gap-2 bg-[#3bb34a] text-white font-semibold text-sm px-6 py-3 rounded-lg hover:bg-[#2a9a3a] transition-colors duration-200"
|
||||
>
|
||||
View Full Results
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Top Finishers */}
|
||||
<section className="bg-[#F5F7FC] py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
|
||||
2024 Highlights
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
|
||||
Top Finishers
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Men's Full Marathon */}
|
||||
<div className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden">
|
||||
<div className="bg-[#006838] text-white px-6 py-4">
|
||||
<h3 className="font-bold">Full Marathon — Men</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{topFinishers.fullMarathon.men.map((finisher, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-between py-3 ${
|
||||
index < topFinishers.fullMarathon.men.length - 1 ? 'border-b border-[#e5e7eb]' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`font-bold ${index === 0 ? 'text-[#ffcd05]' : 'text-[#111518]'}`}>
|
||||
{finisher.place}
|
||||
</span>
|
||||
<span className="text-[#111518]">{finisher.name}</span>
|
||||
</div>
|
||||
<span className="text-[#6b7280] font-medium">{finisher.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Women's Full Marathon */}
|
||||
<div className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden">
|
||||
<div className="bg-[#006838] text-white px-6 py-4">
|
||||
<h3 className="font-bold">Full Marathon — Women</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
{topFinishers.fullMarathon.women.map((finisher, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-between py-3 ${
|
||||
index < topFinishers.fullMarathon.women.length - 1 ? 'border-b border-[#e5e7eb]' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`font-bold ${index === 0 ? 'text-[#ffcd05]' : 'text-[#111518]'}`}>
|
||||
{finisher.place}
|
||||
</span>
|
||||
<span className="text-[#111518]">{finisher.name}</span>
|
||||
</div>
|
||||
<span className="text-[#6b7280] font-medium">{finisher.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="bg-white py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
|
||||
Growing Every Year
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
|
||||
Race Statistics
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
|
||||
<Calendar className="w-8 h-8 text-[#006838] mx-auto mb-3" />
|
||||
<p className="text-[#006838] font-extrabold text-3xl">3</p>
|
||||
<p className="text-[#6b7280] text-sm">Editions</p>
|
||||
</div>
|
||||
<div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
|
||||
<Users className="w-8 h-8 text-[#006838] mx-auto mb-3" />
|
||||
<p className="text-[#006838] font-extrabold text-3xl">780+</p>
|
||||
<p className="text-[#6b7280] text-sm">Total Finishers</p>
|
||||
</div>
|
||||
<div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
|
||||
<Trophy className="w-8 h-8 text-[#006838] mx-auto mb-3" />
|
||||
<p className="text-[#006838] font-extrabold text-3xl">7</p>
|
||||
<p className="text-[#6b7280] text-sm">Categories</p>
|
||||
</div>
|
||||
<div className="bg-[#F5F7FC] rounded-xl p-6 text-center">
|
||||
<ShieldCheck className="w-8 h-8 text-[#006838] mx-auto mb-3" />
|
||||
<p className="text-[#006838] font-extrabold text-3xl">100%</p>
|
||||
<p className="text-[#6b7280] text-sm">Certified Results</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-[#006838] py-16">
|
||||
<div className="max-w-3xl mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold text-white mb-4">
|
||||
Ready to Add Your Name?
|
||||
</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Join the growing list of finishers at Kenya's environmental marathon.
|
||||
</p>
|
||||
<Link
|
||||
href="/registration"
|
||||
className="inline-block bg-[#ffcd05] text-[#111518] font-bold text-sm px-10 py-4 rounded-lg hover:bg-[#c4930f] transition-colors duration-200"
|
||||
>
|
||||
REGISTER NOW
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user