feat: add fern background with transparency
Generate lush forest fern image and update CSS for site background. #VERCEL_SKIP Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0
parent
2be1d859e4
commit
85a2853d4e
|
|
@ -0,0 +1,255 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -146,3 +146,49 @@
|
|||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Adding forest texture backgrounds with ferns and moss */
|
||||
@layer utilities {
|
||||
/* Adding real fern background image with transparency */
|
||||
.forest-texture {
|
||||
background-image: url("/forest-ferns-background.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.forest-texture::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(250, 245, 235, 0.85);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.moss-texture {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(95, 70, 45, 0.02) 10px,
|
||||
rgba(95, 70, 45, 0.02) 20px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(140, 120, 90, 0.02) 10px,
|
||||
rgba(140, 120, 90, 0.02) 20px
|
||||
);
|
||||
}
|
||||
|
||||
.fern-pattern {
|
||||
background-image: radial-gradient(ellipse at 10% 30%, rgba(95, 70, 45, 0.05) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 90% 70%, rgba(95, 70, 45, 0.04) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(140, 120, 90, 0.03) 0%, transparent 50%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
75
app/page.tsx
75
app/page.tsx
|
|
@ -9,12 +9,12 @@ export default function Home() {
|
|||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative py-20 px-4">
|
||||
<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">
|
||||
Welcome to the Shiitake Forest
|
||||
Welcome to Shiitake John's Woodlot
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty">
|
||||
At the edge of civilization on Texada Island, where the pavement ends and the forest begins, John
|
||||
|
|
@ -22,8 +22,8 @@ export default function Home() {
|
|||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Link href="/sponsor">
|
||||
<Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
|
||||
Sponsor the Forest
|
||||
<Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
|
||||
Sponsor the Old Growth
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/events">
|
||||
|
|
@ -32,7 +32,7 @@ export default function Home() {
|
|||
variant="outline"
|
||||
className="border-primary text-primary hover:bg-primary/10 bg-transparent"
|
||||
>
|
||||
View Courses
|
||||
View Cultivation Courses
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -49,7 +49,7 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* About Section */}
|
||||
<section className="py-16 px-4 bg-muted/30">
|
||||
<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">Life at the Edge of the Woods</h2>
|
||||
|
||||
|
|
@ -90,8 +90,53 @@ export default function Home() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 px-4 fern-pattern">
|
||||
<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">Protecting the Watershed</h2>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
Our forest is part of a critical watershed that supports one of the world's rarest fish species—the
|
||||
Texada Island stickleback species pairs. These remarkable fish are found in only five small lakes on the
|
||||
Sunshine Coast, making them globally significant.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
The stickleback species pairs are among the youngest species on Earth, having evolved in less than
|
||||
13,000 years since the last Ice Age. They consist of two distinct forms—the "limnetics" that live in
|
||||
open water eating plankton, and the "benthics" that dwell in the shallows feeding on invertebrates.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mb-6">
|
||||
By supporting sustainable forest practices here, you're helping protect the pristine watershed these
|
||||
endangered fish depend on for survival. Our careful stewardship ensures clean water flows into nearby
|
||||
lakes, preserving habitat for these unique evolutionary treasures.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-primary text-primary hover:bg-primary/10 bg-transparent"
|
||||
asChild
|
||||
>
|
||||
<a
|
||||
href="https://bcinvasives.ca/news/texada-island-sticklebacks/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn more about the Endangered Stickleback →
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="relative h-[400px] rounded-lg overflow-hidden bg-muted/50 flex items-center justify-center">
|
||||
<div className="text-center p-8">
|
||||
<div className="text-6xl mb-4">🐟</div>
|
||||
<p className="text-lg font-semibold text-foreground mb-2">Texada Island Stickleback</p>
|
||||
<p className="text-sm text-muted-foreground">One of Earth's youngest and rarest species</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Story Section */}
|
||||
<section className="py-16 px-4">
|
||||
<section className="py-16 px-4 moss-texture">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
<div className="relative h-[350px] rounded-lg overflow-hidden">
|
||||
|
|
@ -102,10 +147,10 @@ export default function Home() {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-foreground mb-6">A Modern Tom Bombadil</h2>
|
||||
<h2 className="text-3xl font-bold text-foreground mb-6">A Modern Day Tom Bombadil</h2>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
In his small log cabin deep in the woods, John lives amongst the deer with his faithful companion Una.
|
||||
The forest is his home, his classroom, and his sanctuary.
|
||||
In his small log cabin deep in the woods, Shiitake John lives amongst the deer with his faithful
|
||||
companion Una. The forest is his home, his classroom, and his sanctuary.
|
||||
</p>
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
Sit by the fire long enough, and you'll hear stories of mining adventures, the mysteries of Texada's
|
||||
|
|
@ -123,13 +168,13 @@ export default function Home() {
|
|||
{/* 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">Help Preserve the Shiitake Forest</h2>
|
||||
<h2 className="text-4xl font-bold mb-6">Help Preserve the Old Growth</h2>
|
||||
<p className="text-xl mb-8 text-primary-foreground/90 leading-relaxed text-pretty">
|
||||
Your support helps maintain these 20 acres of forest, continue sustainable mushroom cultivation, and keep
|
||||
the courses and community programs thriving.
|
||||
Your support helps maintain these 20 acres of old growth forest, protect the watershed for endangered
|
||||
species, continue sustainable mushroom cultivation, and keep the courses and community programs thriving.
|
||||
</p>
|
||||
<Link href="/sponsor">
|
||||
<Button size="lg" variant="secondary" className="bg-background text-foreground hover:bg-background/90">
|
||||
<Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
|
||||
Become a Sponsor
|
||||
</Button>
|
||||
</Link>
|
||||
|
|
@ -137,7 +182,7 @@ export default function Home() {
|
|||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-8 px-4 border-t border-border">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -43,18 +43,19 @@ export default function SponsorPage() {
|
|||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="py-16 px-4 bg-primary text-primary-foreground">
|
||||
<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 Shiitake Forest</h1>
|
||||
<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 sustainable forest cultivation, support community education, and keep the ancient
|
||||
art of shiitake growing alive at the edge of civilization.
|
||||
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">
|
||||
<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>
|
||||
|
||||
|
|
@ -70,6 +71,17 @@ export default function SponsorPage() {
|
|||
</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>
|
||||
|
|
@ -80,23 +92,12 @@ export default function SponsorPage() {
|
|||
</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">
|
||||
<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>
|
||||
|
||||
|
|
@ -116,9 +117,7 @@ export default function SponsorPage() {
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground">
|
||||
Become a {tier.name}
|
||||
</Button>
|
||||
<Button className="w-full bg-[#1a4d2e] hover:bg-[#153d24] text-white">Become a {tier.name}</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
|
@ -127,7 +126,7 @@ export default function SponsorPage() {
|
|||
</section>
|
||||
|
||||
{/* One-Time Support */}
|
||||
<section className="py-16 px-4">
|
||||
<section className="py-16 px-4 moss-texture">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<Card className="border-border">
|
||||
<CardHeader>
|
||||
|
|
@ -135,8 +134,8 @@ export default function SponsorPage() {
|
|||
</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.
|
||||
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">
|
||||
|
|
@ -158,13 +157,14 @@ export default function SponsorPage() {
|
|||
</section>
|
||||
|
||||
{/* Impact Section */}
|
||||
<section className="py-16 px-4 bg-muted/30">
|
||||
<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 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.
|
||||
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">
|
||||
|
|
@ -176,6 +176,15 @@ export default function SponsorPage() {
|
|||
</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>
|
||||
|
|
@ -188,18 +197,9 @@ export default function SponsorPage() {
|
|||
<div className="flex gap-4">
|
||||
<div className="text-2xl">🌲</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground mb-2">Forest Stewardship</h3>
|
||||
<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 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
|
||||
Protect and maintain 20 acres of old growth forest land for future generations
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -208,21 +208,22 @@ export default function SponsorPage() {
|
|||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 px-4">
|
||||
<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, and the magic of the forest.
|
||||
community dedicated to sustainable living, traditional knowledge, watershed protection, and the magic of the
|
||||
old growth forest.
|
||||
</p>
|
||||
<Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground">
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ export function Navigation() {
|
|||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<Link href="/" className="text-foreground hover:text-primary transition-colors">
|
||||
Home
|
||||
<Link href="/about" className="text-foreground hover:text-primary transition-colors">
|
||||
About Shiitake John
|
||||
</Link>
|
||||
<Link href="/events" className="text-foreground hover:text-primary transition-colors">
|
||||
Events
|
||||
</Link>
|
||||
<Link href="/sponsor">
|
||||
<Button className="bg-primary hover:bg-primary/90 text-primary-foreground">Sponsor the Forest</Button>
|
||||
<Button className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">Sponsor the Old Growth</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Loading…
Reference in New Issue