233 lines
10 KiB
TypeScript
233 lines
10 KiB
TypeScript
import { Navigation } from "@/components/navigation"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
|
||
export default function SponsorPage() {
|
||
const sponsorshipTiers = [
|
||
{
|
||
name: "Forest Friend",
|
||
amount: "$25/month",
|
||
benefits: [
|
||
"Monthly newsletter with forest updates",
|
||
"Seasonal mushroom growing tips",
|
||
"Recognition on our supporters page",
|
||
"10% discount on courses",
|
||
],
|
||
},
|
||
{
|
||
name: "Log Steward",
|
||
amount: "$75/month",
|
||
benefits: [
|
||
"All Forest Friend benefits",
|
||
"Quarterly care package of dried shiitake",
|
||
"Invitation to annual forest gathering",
|
||
"20% discount on courses",
|
||
"Your name on a cultivation log",
|
||
],
|
||
},
|
||
{
|
||
name: "Forest Guardian",
|
||
amount: "$150/month",
|
||
benefits: [
|
||
"All Log Steward benefits",
|
||
"Monthly fresh shiitake delivery (seasonal)",
|
||
"Free annual course attendance",
|
||
"Private forest tour for you and guests",
|
||
"Lifetime supporter recognition",
|
||
],
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<Navigation />
|
||
|
||
{/* Hero Section */}
|
||
<section className="py-16 px-4 bg-primary text-primary-foreground">
|
||
<div className="container mx-auto max-w-4xl text-center">
|
||
<h1 className="text-5xl font-bold mb-6 text-balance">Sponsor the Shiitake Forest</h1>
|
||
<p className="text-xl leading-relaxed text-primary-foreground/90 text-pretty">
|
||
Help preserve 20 acres of sustainable forest cultivation, support community education, and keep the ancient
|
||
art of shiitake growing alive at the edge of civilization.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Why Sponsor Section */}
|
||
<section className="py-16 px-4">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<h2 className="text-3xl font-bold text-foreground mb-12 text-center">Why Your Support Matters</h2>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<div className="text-4xl mb-4">🌱</div>
|
||
<h3 className="text-xl font-semibold mb-3 text-foreground">Sustainable Cultivation</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Support traditional, eco-friendly mushroom farming that works with nature, not against it. Every log
|
||
is carefully selected and sustainably sourced.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<div className="text-4xl mb-4">📚</div>
|
||
<h3 className="text-xl font-semibold mb-3 text-foreground">Education & Knowledge</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Your sponsorship helps keep courses affordable and accessible, passing on decades of cultivation
|
||
wisdom to the next generation.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<div className="text-4xl mb-4">🏞️</div>
|
||
<h3 className="text-xl font-semibold mb-3 text-foreground">Forest Preservation</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Maintain this unique 20-acre forest ecosystem where mushrooms, deer, and community come together in
|
||
harmony.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Sponsorship Tiers */}
|
||
<section className="py-16 px-4 bg-muted/30">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<h2 className="text-3xl font-bold text-foreground mb-12 text-center">Sponsorship Levels</h2>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{sponsorshipTiers.map((tier, index) => (
|
||
<Card key={index} className={`border-border ${index === 1 ? "ring-2 ring-primary" : ""}`}>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl text-foreground">{tier.name}</CardTitle>
|
||
<p className="text-3xl font-bold text-primary mt-2">{tier.amount}</p>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-3 mb-6">
|
||
{tier.benefits.map((benefit, i) => (
|
||
<li key={i} className="flex items-start gap-2 text-muted-foreground">
|
||
<span className="text-primary mt-1">✓</span>
|
||
<span>{benefit}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground">
|
||
Become a {tier.name}
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* One-Time Support */}
|
||
<section className="py-16 px-4">
|
||
<div className="container mx-auto max-w-4xl">
|
||
<Card className="border-border">
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl text-foreground text-center">One-Time Contribution</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||
Prefer to make a one-time contribution? Every bit helps maintain the forest, support the courses, and
|
||
keep this unique operation thriving.
|
||
</p>
|
||
<div className="flex flex-wrap gap-4 justify-center mb-6">
|
||
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
|
||
$25
|
||
</Button>
|
||
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
|
||
$50
|
||
</Button>
|
||
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
|
||
$100
|
||
</Button>
|
||
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
|
||
Custom Amount
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Impact Section */}
|
||
<section className="py-16 px-4 bg-muted/30">
|
||
<div className="container mx-auto max-w-4xl text-center">
|
||
<h2 className="text-3xl font-bold text-foreground mb-6">Your Impact</h2>
|
||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
|
||
When you sponsor the Shiitake Forest, you're not just supporting mushroom cultivation. You're preserving a
|
||
way of life, protecting forest land, enabling education, and helping maintain a community gathering place
|
||
where stories are shared, knowledge is passed down, and the connection between people and nature thrives.
|
||
</p>
|
||
<div className="grid md:grid-cols-2 gap-6 text-left">
|
||
<div className="flex gap-4">
|
||
<div className="text-2xl">🍄</div>
|
||
<div>
|
||
<h3 className="font-semibold text-foreground mb-2">Sustainable Production</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
Maintain log cultivation operations and continue producing high-quality shiitake mushrooms
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<div className="text-2xl">👥</div>
|
||
<div>
|
||
<h3 className="font-semibold text-foreground mb-2">Community Programs</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
Support volunteer initiatives and keep courses accessible to all who want to learn
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<div className="text-2xl">🌲</div>
|
||
<div>
|
||
<h3 className="font-semibold text-foreground mb-2">Forest Stewardship</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
Protect and maintain 20 acres of working forest land for future generations
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<div className="text-2xl">📖</div>
|
||
<div>
|
||
<h3 className="font-semibold text-foreground mb-2">Knowledge Preservation</h3>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
Keep traditional cultivation methods alive and share decades of experience
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-16 px-4">
|
||
<div className="container mx-auto max-w-4xl text-center">
|
||
<h2 className="text-3xl font-bold text-foreground mb-6">Join the Forest Community</h2>
|
||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed text-pretty">
|
||
Whether you choose monthly sponsorship or a one-time contribution, you become part of something special—a
|
||
community dedicated to sustainable living, traditional knowledge, and the magic of the forest.
|
||
</p>
|
||
<Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
|
||
Get Started Today
|
||
</Button>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="py-8 px-4 border-t border-border">
|
||
<div className="container mx-auto max-w-6xl text-center text-muted-foreground">
|
||
<p>Shiitake John's Forest • Texada Island, BC • Where the pavement ends</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|