shiitake-john-website/app/events/page.tsx

172 lines
7.7 KiB
TypeScript

import { Navigation } from "@/components/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
export default function EventsPage() {
const courses = [
{
title: "Introduction to Shiitake Cultivation",
duration: "Full Day Workshop",
description:
"Learn the fundamentals of log-based shiitake cultivation. We'll cover log selection, inoculation techniques, and long-term care of your mushroom logs.",
topics: ["Log selection and preparation", "Inoculation methods", "Seasonal care", "Harvesting techniques"],
},
{
title: "Advanced Mushroom Cultivation",
duration: "Weekend Course",
description:
"Deep dive into the art and science of mushroom farming. Perfect for those looking to start their own cultivation operation or expand their knowledge.",
topics: ["Multiple species cultivation", "Forest management", "Sustainable practices", "Market preparation"],
},
{
title: "Forest Ecology & Mushrooms",
duration: "Half Day Experience",
description:
"Explore the relationship between mushrooms and forest health. A walking tour through the 20-acre forest with hands-on learning.",
topics: ["Mycology basics", "Forest ecosystems", "Identification skills", "Sustainable foraging"],
},
]
return (
<div className="min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="py-16 px-4 bg-muted/30">
<div className="container mx-auto max-w-4xl text-center">
<h1 className="text-5xl font-bold text-foreground mb-6 text-balance">Mushroom Cultivation Courses</h1>
<p className="text-xl text-muted-foreground leading-relaxed text-pretty">
Learn the ancient art of shiitake cultivation in the heart of a working forest. Hands-on courses taught by
someone who lives and breathes mushroom farming.
</p>
</div>
</section>
{/* Courses Section */}
<section className="py-16 px-4">
<div className="container mx-auto max-w-5xl">
<div className="space-y-8">
{courses.map((course, index) => (
<Card key={index} className="border-border">
<CardHeader>
<div className="flex justify-between items-start mb-2">
<CardTitle className="text-2xl text-foreground">{course.title}</CardTitle>
<span className="text-sm font-medium text-primary bg-primary/10 px-3 py-1 rounded-full">
{course.duration}
</span>
</div>
<p className="text-muted-foreground leading-relaxed">{course.description}</p>
</CardHeader>
<CardContent>
<h4 className="font-semibold text-foreground mb-3">What You'll Learn:</h4>
<ul className="grid md:grid-cols-2 gap-2 mb-6">
{course.topics.map((topic, i) => (
<li key={i} className="flex items-start gap-2 text-muted-foreground">
<span className="text-primary mt-1">•</span>
<span>{topic}</span>
</li>
))}
</ul>
<Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
Inquire About Dates
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Experience Section */}
<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">The Learning Experience</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="border-border">
<CardContent className="pt-6">
<div className="text-3xl mb-4">🌲</div>
<h3 className="text-xl font-semibold mb-3 text-foreground">In the Forest</h3>
<p className="text-muted-foreground leading-relaxed">
All courses take place in the working forest where shiitake cultivation happens daily. Experience
real-world conditions and see established operations in action.
</p>
</CardContent>
</Card>
<Card className="border-border">
<CardContent className="pt-6">
<div className="text-3xl mb-4">🔥</div>
<h3 className="text-xl font-semibold mb-3 text-foreground">Stories by the Fire</h3>
<p className="text-muted-foreground leading-relaxed">
Courses often include fireside sessions where John shares decades of knowledge, mining tales, and the
occasional beat poetry performance.
</p>
</CardContent>
</Card>
<Card className="border-border">
<CardContent className="pt-6">
<div className="text-3xl mb-4">🤲</div>
<h3 className="text-xl font-semibold mb-3 text-foreground">Hands-On Learning</h3>
<p className="text-muted-foreground leading-relaxed">
Get your hands dirty with practical experience. From drilling logs to harvesting mushrooms, you'll
learn by doing.
</p>
</CardContent>
</Card>
<Card className="border-border">
<CardContent className="pt-6">
<div className="text-3xl mb-4">🏡</div>
<h3 className="text-xl font-semibold mb-3 text-foreground">Small Groups</h3>
<p className="text-muted-foreground leading-relaxed">
Intimate class sizes ensure personal attention and plenty of time for questions. You'll leave with
knowledge and new friends.
</p>
</CardContent>
</Card>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-16 px-4">
<div className="container mx-auto max-w-4xl">
<Card className="border-primary bg-primary/5">
<CardContent className="pt-8 text-center">
<h2 className="text-3xl font-bold text-foreground mb-4">Ready to Learn?</h2>
<p className="text-muted-foreground mb-6 leading-relaxed text-pretty">
Course schedules vary by season. Get in touch to find out about upcoming dates or to arrange a private
workshop for your group.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
Contact About Courses
</Button>
<Link href="/sponsor">
<Button
size="lg"
variant="outline"
className="border-primary text-primary hover:bg-primary/10 bg-transparent"
>
Support the Forest
</Button>
</Link>
</div>
</CardContent>
</Card>
</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>
)
}