Initial commit
This commit is contained in:
KabundiNjuki
@@ -0,0 +1,358 @@
|
||||
import Link from 'next/link'
|
||||
import { TreePine, BarChart3, Award, Building } from 'lucide-react'
|
||||
import { Navigation } from '@/components/navigation'
|
||||
import { Footer } from '@/components/footer'
|
||||
|
||||
const sponsorshipTiers = [
|
||||
{
|
||||
name: 'Title Sponsor',
|
||||
investment: '[INVESTMENT TBD]',
|
||||
color: '#ffcd05',
|
||||
benefits: [
|
||||
'Exclusive naming rights: "The [Your Brand] Lukenya University Marathon"',
|
||||
'Logo on all race materials, signage, and digital assets',
|
||||
'Prime branding at start/finish line',
|
||||
'VIP hospitality tent for 20 guests',
|
||||
'Speaking opportunity at awards ceremony',
|
||||
'First right of refusal for subsequent years',
|
||||
'Exclusive press release and media coverage',
|
||||
'Full access to participant database (opt-in)',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Gold Sponsor',
|
||||
investment: '[INVESTMENT TBD]',
|
||||
color: '#ffcd05',
|
||||
benefits: [
|
||||
'Logo on race bibs and finisher medals',
|
||||
'Branded water station on course',
|
||||
'VIP hospitality tent for 10 guests',
|
||||
'Logo on event website and social media',
|
||||
'Inclusion in press releases',
|
||||
'Banner placement at finish line',
|
||||
'Product sampling opportunity',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Silver Sponsor',
|
||||
investment: '[INVESTMENT TBD]',
|
||||
color: '#9ca3af',
|
||||
benefits: [
|
||||
'Logo on event t-shirts',
|
||||
'Banner placement on course',
|
||||
'VIP passes for 5 guests',
|
||||
'Logo on event website',
|
||||
'Social media mentions',
|
||||
'Expo booth space',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Community Sponsor',
|
||||
investment: '[INVESTMENT TBD]',
|
||||
color: '#006838',
|
||||
benefits: [
|
||||
'Logo on event website',
|
||||
'Social media recognition',
|
||||
'VIP passes for 2 guests',
|
||||
'Certificate of partnership',
|
||||
'Opportunity to provide goodie bag items',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const esgBenefits = [
|
||||
{ icon: TreePine, title: 'Verified Impact', description: 'Certified tree-planting offset with GPS-tracked verification in ASAL regions.' },
|
||||
{ icon: BarChart3, title: 'Brand Alignment', description: 'Associate your brand with Kenya\'s only marathon with a verified environmental mission.' },
|
||||
{ icon: Award, title: 'Annual Report', description: 'Comprehensive ESG impact report for your sustainability reporting needs.' },
|
||||
]
|
||||
|
||||
export default function SponsorsPage() {
|
||||
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-24">
|
||||
<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">
|
||||
Sponsorship Opportunities
|
||||
</span>
|
||||
<h1 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4">
|
||||
Partner With Purpose
|
||||
</h1>
|
||||
<p className="text-white/80 text-lg max-w-2xl mx-auto">
|
||||
Associate your brand with Kenya's only marathon with a verified environmental mission.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sponsorship Tiers */}
|
||||
<section className="bg-white py-16 md:py-24">
|
||||
<div className="max-w-4xl 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">
|
||||
Investment Levels
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
|
||||
Sponsorship Tiers
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{sponsorshipTiers.map((tier, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-xl shadow-[0_2px_16px_rgba(0,0,0,0.08)] overflow-hidden"
|
||||
>
|
||||
<div
|
||||
className="h-1"
|
||||
style={{ backgroundColor: tier.color }}
|
||||
/>
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h3 className="text-2xl font-extrabold text-[#111518]">{tier.name}</h3>
|
||||
</div>
|
||||
<p className="text-[#3bb34a] font-bold text-xl">KES {tier.investment}</p>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{tier.benefits.map((benefit, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-[#006838] mt-1">•</span>
|
||||
<span className="text-[#6b7280]">{benefit}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Environmental Partner Tier - Special Section */}
|
||||
<section className="bg-[#006838] py-16 md:py-24">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="bg-white/10 rounded-2xl p-8 md:p-12">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<TreePine className="w-6 h-6 text-[#ffcd05]" />
|
||||
<span className="text-[#ffcd05] font-semibold text-xs uppercase tracking-[0.12em]">
|
||||
ESG Verified Partnership
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl md:text-4xl font-extrabold text-white mb-4">
|
||||
Environmental Partner
|
||||
</h2>
|
||||
<p className="text-white/80 text-lg mb-6">
|
||||
The anchor tier of Lukenya University Marathon. Join as our Environmental Partner and align your brand with Kenya's only marathon committed to verified reforestation in ASAL regions.
|
||||
</p>
|
||||
|
||||
<div className="bg-white rounded-xl p-6 mb-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<span className="text-[#006838] font-semibold text-sm uppercase">Investment</span>
|
||||
<p className="text-[#3bb34a] font-extrabold text-2xl">KES [INVESTMENT TBD]</p>
|
||||
</div>
|
||||
<span className="inline-block bg-[#006838] text-white text-xs font-bold px-4 py-2 rounded-full uppercase tracking-wider">
|
||||
ESG Verified Partnership
|
||||
</span>
|
||||
</div>
|
||||
<ul className="space-y-2 text-[#6b7280]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-[#006838] mt-1">•</span>
|
||||
Verified tree-planting offset in ASAL regions
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-[#006838] mt-1">•</span>
|
||||
ASAL region impact report with GPS verification
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-[#006838] mt-1">•</span>
|
||||
Environmental Partner branding on all race materials
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-[#006838] mt-1">•</span>
|
||||
Speaking slot on environmental mission at pre-race expo
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-[#006838] mt-1">•</span>
|
||||
Annual sustainability report co-branded with your organization
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{esgBenefits.map((benefit, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<benefit.icon className="w-10 h-10 text-[#ffcd05] mx-auto mb-3" />
|
||||
<h4 className="font-bold text-white mb-2">{benefit.title}</h4>
|
||||
<p className="text-white/70 text-sm">{benefit.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="#contact"
|
||||
className="inline-block bg-[#ffcd05] text-[#111518] font-bold text-sm px-8 py-4 rounded-lg hover:bg-[#c4930f] transition-colors duration-200"
|
||||
>
|
||||
REQUEST ESG PARTNERSHIP BRIEF
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Partner Section */}
|
||||
<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">
|
||||
Why the Environmental Partner Tier?
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
|
||||
Corporate ESG Value
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-white rounded-xl p-6 shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
|
||||
<TreePine className="w-10 h-10 text-[#006838] mb-4" />
|
||||
<h3 className="font-bold text-[#111518] mb-2">Verified Impact</h3>
|
||||
<p className="text-[#6b7280] text-sm">
|
||||
GPS-tracked tree planting in Kenya's ASAL regions with third-party verification. Real, measurable environmental impact.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-6 shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
|
||||
<Building className="w-10 h-10 text-[#006838] mb-4" />
|
||||
<h3 className="font-bold text-[#111518] mb-2">Brand Alignment</h3>
|
||||
<p className="text-[#6b7280] text-sm">
|
||||
Position your brand alongside Kenya's only marathon with a verified environmental mission. Authentic ESG storytelling.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-6 shadow-[0_2px_16px_rgba(0,0,0,0.08)]">
|
||||
<BarChart3 className="w-10 h-10 text-[#006838] mb-4" />
|
||||
<h3 className="font-bold text-[#111518] mb-2">Annual Report</h3>
|
||||
<p className="text-[#6b7280] text-sm">
|
||||
Comprehensive environmental impact report suitable for corporate sustainability reporting and stakeholder communications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Form */}
|
||||
<section id="contact" className="bg-white py-16 md:py-24">
|
||||
<div className="max-w-2xl 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">
|
||||
Get Started
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#006838]">
|
||||
Ready to Discuss a Partnership?
|
||||
</h2>
|
||||
<p className="text-[#6b7280] mt-4">
|
||||
Fill in the form below and we'll respond within 2 business days.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#111518] mb-1">Company Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#111518] mb-1">Contact Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#111518] mb-1">Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
|
||||
placeholder="you@company.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#111518] mb-1">Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors"
|
||||
placeholder="+254"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#111518] mb-1">Tier of Interest</label>
|
||||
<select className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors">
|
||||
<option value="">Select a tier</option>
|
||||
<option value="title">Title Sponsor</option>
|
||||
<option value="gold">Gold Sponsor</option>
|
||||
<option value="silver">Silver Sponsor</option>
|
||||
<option value="community">Community Sponsor</option>
|
||||
<option value="environmental">Environmental Partner</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[#111518] mb-1">Message</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 rounded-lg border border-[#e5e7eb] focus:border-[#3bb34a] focus:ring-2 focus:ring-[#3bb34a]/20 outline-none transition-colors resize-none"
|
||||
placeholder="Tell us about your sponsorship goals..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-[#3bb34a] text-white font-semibold text-sm py-4 rounded-lg hover:bg-[#2a9a3a] transition-colors duration-200"
|
||||
>
|
||||
SEND ENQUIRY
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Current Sponsors */}
|
||||
<section className="bg-[#F5F7FC] py-16">
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div className="text-center mb-10">
|
||||
<span className="text-[#006838] font-semibold text-xs uppercase tracking-[0.12em] mb-2 block">
|
||||
Our Current Partners
|
||||
</span>
|
||||
<h2 className="text-2xl font-bold text-[#111518]">
|
||||
Brands Running With Purpose
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
{[1, 2, 3, 4, 5].map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-36 h-20 bg-white border border-[#e5e7eb] rounded-lg flex items-center justify-center"
|
||||
>
|
||||
<span className="text-[#6b7280] text-xs">Sponsor Logo</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user