256 lines
13 KiB
TypeScript
256 lines
13 KiB
TypeScript
import { Navigation } from "@/components/navigation"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import Link from "next/link"
|
||
|
||
export default function About() {
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<Navigation />
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative py-20 px-4 forest-texture">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6 text-balance">
|
||
Living His Best Life in the Wilderness
|
||
</h1>
|
||
<p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty">
|
||
Meet John—a modern-day Tom Bombadil who traded the conventional world for 20 acres of old growth forest
|
||
at the edge of civilization on Texada Island, where the pavement ends and true living begins.
|
||
</p>
|
||
<Link href="/sponsor">
|
||
<Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
|
||
Support His Mission
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
<div className="relative h-[400px] rounded-lg overflow-hidden">
|
||
<img
|
||
src="/rustic-log-cabin-in-forest-with-dog.jpg"
|
||
alt="John's log cabin in the woods"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Life in the Woods */}
|
||
<section className="py-16 px-4 bg-muted/30 moss-texture">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<h2 className="text-4xl font-bold text-foreground mb-12 text-center">A Life Among the Trees</h2>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12 mb-12">
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<div className="text-4xl mb-4">🏡</div>
|
||
<h3 className="text-2xl font-semibold mb-4 text-foreground">The Log Cabin</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
John's small log cabin sits nestled deep in the forest, a testament to simple living and
|
||
self-sufficiency. Built with respect for the land, it's more than a home—it's a sanctuary where the
|
||
rhythm of nature dictates the pace of life.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Here, the crackling fire provides warmth and light, and the forest sounds are the only soundtrack
|
||
needed. It's a place where stories are shared, poetry flows freely, and the wisdom of the woods seeps
|
||
into every conversation.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<div className="text-4xl mb-4">🐕</div>
|
||
<h3 className="text-2xl font-semibold mb-4 text-foreground">Una, His Faithful Companion</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
Una, John's loyal dog, is his constant companion through the forest trails and mushroom patches. She
|
||
knows every path, every log, and every secret spot where the best shiitakes grow.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Together they walk the land daily, checking on the mushroom logs, greeting the deer that share their
|
||
home, and maintaining the delicate balance between cultivation and conservation.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12">
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<div className="text-4xl mb-4">🦌</div>
|
||
<h3 className="text-2xl font-semibold mb-4 text-foreground">Living Among the Deer</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
The deer are John's neighbors, moving gracefully through the forest at dawn and dusk. He's learned
|
||
their patterns, respects their space, and they've come to accept his presence as part of the natural
|
||
order.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
This coexistence is a daily reminder that he's not just living in the forest—he's part of its
|
||
ecosystem, a steward rather than an owner.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<div className="text-4xl mb-4">🌲</div>
|
||
<h3 className="text-2xl font-semibold mb-4 text-foreground">At the Edge of Civilization</h3>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
Texada Island sits at the end of the Sunshine Coast, and John's property is where the pavement
|
||
literally ends. Beyond his gate, there's only forest, mountains, and the wild beauty of untamed
|
||
British Columbia.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
This remoteness isn't isolation—it's freedom. Freedom to live authentically, to cultivate mushrooms
|
||
the old way, and to share knowledge with those willing to make the journey.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* The Storyteller */}
|
||
<section className="py-16 px-4 fern-pattern">
|
||
<div className="container mx-auto max-w-4xl">
|
||
<h2 className="text-4xl font-bold text-foreground mb-8 text-center">The Storyteller</h2>
|
||
|
||
<div className="space-y-8">
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<h3 className="text-2xl font-semibold mb-4 text-foreground flex items-center gap-3">
|
||
<span>⛏️</span>
|
||
Tales from the Mines
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Sit by John's fire long enough, and you'll hear stories from his mining days—tales of working deep in
|
||
the earth, the camaraderie of miners, and the lessons learned in darkness that illuminate life above
|
||
ground. These aren't just stories; they're oral history, passed down with the reverence they deserve.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<h3 className="text-2xl font-semibold mb-4 text-foreground flex items-center gap-3">
|
||
<span>💎</span>
|
||
The Mystery of Texada Flower Rock
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
John is one of the few who truly understands the extremely rare composition of Texada flower rock—a
|
||
geological wonder found nowhere else on Earth. He'll explain the unique mineral formations, the
|
||
volcanic history that created them, and why collectors travel from around the world to see these
|
||
natural masterpieces. His knowledge comes from years of observation, study, and a deep connection to
|
||
the island's geology.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-border">
|
||
<CardContent className="pt-6">
|
||
<h3 className="text-2xl font-semibold mb-4 text-foreground flex items-center gap-3">
|
||
<span>📖</span>
|
||
Red Hot Beat Poetry
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
When the mood strikes, John recites beat poetry with the passion of Ginsberg and the rhythm of
|
||
Kerouac. His performances are spontaneous, raw, and utterly captivating—words flowing like the forest
|
||
streams, carrying the energy of a generation that dared to question everything. It's performance art
|
||
in its purest form, delivered under the stars with only the trees as witnesses.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Community Spirit */}
|
||
<section className="py-16 px-4 bg-muted/30 moss-texture">
|
||
<div className="container mx-auto max-w-6xl">
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h2 className="text-4xl font-bold text-foreground mb-6">A Heart for Community</h2>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
Despite living at the edge of civilization, John is deeply connected to his community. He volunteers
|
||
regularly, sharing his knowledge of sustainable forestry, mushroom cultivation, and the importance of
|
||
watershed protection.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||
His courses aren't just about growing mushrooms—they're about reconnecting with nature, understanding
|
||
our role as stewards of the land, and learning to live more sustainably. Students leave not just with
|
||
technical knowledge, but with a renewed sense of purpose and connection to the natural world.
|
||
</p>
|
||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||
John believes that knowledge should be shared freely, that stories preserve culture, and that we all
|
||
have a responsibility to protect the wild places that remain. His life is a living example of these
|
||
principles.
|
||
</p>
|
||
<Link href="/events">
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
className="border-primary text-primary hover:bg-primary/10 bg-transparent"
|
||
>
|
||
Learn from John
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
<div className="relative h-[400px] rounded-lg overflow-hidden">
|
||
<img
|
||
src="/shiitake-mushrooms-growing-on-logs-in-forest.jpg"
|
||
alt="Shiitake cultivation"
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Philosophy */}
|
||
<section className="py-16 px-4 fern-pattern">
|
||
<div className="container mx-auto max-w-4xl text-center">
|
||
<h2 className="text-4xl font-bold text-foreground mb-8">Living His Best Life</h2>
|
||
<p className="text-xl text-muted-foreground leading-relaxed mb-6 text-pretty">
|
||
John's life isn't about escaping the world—it's about engaging with it on his own terms. In his forest
|
||
sanctuary, he's found the perfect balance between solitude and community, tradition and innovation, work and
|
||
contemplation.
|
||
</p>
|
||
<p className="text-xl text-muted-foreground leading-relaxed mb-8 text-pretty">
|
||
He proves that living simply doesn't mean living small. His days are rich with purpose: cultivating
|
||
mushrooms, teaching eager students, protecting endangered species, sharing stories, and simply being present
|
||
in the magnificent wilderness he calls home.
|
||
</p>
|
||
<p className="text-2xl font-semibold text-foreground italic">
|
||
"At the edge of civilization, I found the center of everything that matters."
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-20 px-4 bg-primary text-primary-foreground">
|
||
<div className="container mx-auto max-w-4xl text-center">
|
||
<h2 className="text-4xl font-bold mb-6">Support This Way of Life</h2>
|
||
<p className="text-xl mb-8 text-primary-foreground/90 leading-relaxed text-pretty">
|
||
Help John continue his work protecting the old growth forest, teaching sustainable cultivation, and
|
||
preserving the stories and knowledge that connect us to the land.
|
||
</p>
|
||
<Link href="/sponsor">
|
||
<Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
|
||
Sponsor the Old Growth
|
||
</Button>
|
||
</Link>
|
||
</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>
|
||
)
|
||
}
|