234 lines
10 KiB
TypeScript
234 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 forest-texture">
|
|
<div className="container mx-auto max-w-4xl text-center">
|
|
<h1 className="text-5xl font-bold mb-6 text-balance">Sponsor the Old Growth</h1>
|
|
<p className="text-xl leading-relaxed text-primary-foreground/90 text-pretty">
|
|
Help preserve 20 acres of old growth forest, protect the watershed for endangered Texada Island
|
|
sticklebacks, support sustainable cultivation, 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 moss-texture">
|
|
<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">Watershed Protection</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Protect critical habitat for the endangered Texada Island stickleback species pairs—one of Earth's
|
|
youngest and rarest fish species found in only five lakes.
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Sponsorship Tiers */}
|
|
<section className="py-16 px-4 bg-muted/30 fern-pattern">
|
|
<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-[#1a4d2e] hover:bg-[#153d24] text-white">Become a {tier.name}</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* One-Time Support */}
|
|
<section className="py-16 px-4 moss-texture">
|
|
<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 old growth forest, protect the
|
|
watershed, 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 fern-pattern">
|
|
<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 Old Growth, you're not just supporting mushroom cultivation. You're preserving a way of
|
|
life, protecting old growth forest land and critical watershed habitat for endangered species, 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">Watershed Conservation</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Protect clean water sources that support the endangered Texada Island stickleback species pairs
|
|
</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">Old Growth Stewardship</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Protect and maintain 20 acres of old growth forest land for future generations
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-16 px-4 moss-texture">
|
|
<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, watershed protection, and the magic of the
|
|
old growth forest.
|
|
</p>
|
|
<Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
|
|
Get Started Today
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 px-4 border-t border-border forest-texture">
|
|
<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>
|
|
)
|
|
}
|