jeffemmett
/
shiitake-john-website
mirror of https://github.com/Jeff-Emmett/shiitake-john-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2025-11-02 20:04:35 +00:00
parent 2be1d859e4
commit 85a2853d4e
6 changed files with 407 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
app/about/page.tsx Normal file
View File

@ -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>
)
}

46
app/globals.css
View File

@ -146,3 +146,49 @@
@apply bg-background text-foreground; @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
View File

@ -9,12 +9,12 @@ export default function Home() {
<Navigation /> <Navigation />
{/* Hero Section */} {/* 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="container mx-auto max-w-6xl">
<div className="grid md:grid-cols-2 gap-12 items-center"> <div className="grid md:grid-cols-2 gap-12 items-center">
<div> <div>
<h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6 text-balance"> <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6 text-balance">
Welcome to the Shiitake Forest Welcome to Shiitake John&#39;s Woodlot
</h1> </h1>
<p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty"> <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 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> </p>
<div className="flex gap-4"> <div className="flex gap-4">
<Link href="/sponsor"> <Link href="/sponsor">
<Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground"> <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
Sponsor the Forest Sponsor the Old Growth
</Button> </Button>
</Link> </Link>
<Link href="/events"> <Link href="/events">
@ -32,7 +32,7 @@ export default function Home() {
variant="outline" variant="outline"
className="border-primary text-primary hover:bg-primary/10 bg-transparent" className="border-primary text-primary hover:bg-primary/10 bg-transparent"
> >
View Courses View Cultivation Courses
</Button> </Button>
</Link> </Link>
</div> </div>
@ -49,7 +49,7 @@ export default function Home() {
</section> </section>
{/* About 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"> <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> <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> </div>
</section> </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 */} {/* 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="container mx-auto max-w-4xl">
<div className="grid md:grid-cols-2 gap-12 items-center"> <div className="grid md:grid-cols-2 gap-12 items-center">
<div className="relative h-[350px] rounded-lg overflow-hidden"> <div className="relative h-[350px] rounded-lg overflow-hidden">
@ -102,10 +147,10 @@ export default function Home() {
/> />
</div> </div>
<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"> <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. In his small log cabin deep in the woods, Shiitake John lives amongst the deer with his faithful
The forest is his home, his classroom, and his sanctuary. companion Una. The forest is his home, his classroom, and his sanctuary.
</p> </p>
<p className="text-muted-foreground leading-relaxed mb-4"> <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 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 */} {/* CTA Section */}
<section className="py-20 px-4 bg-primary text-primary-foreground"> <section className="py-20 px-4 bg-primary text-primary-foreground">
<div className="container mx-auto max-w-4xl text-center"> <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"> <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 Your support helps maintain these 20 acres of old growth forest, protect the watershed for endangered
the courses and community programs thriving. species, continue sustainable mushroom cultivation, and keep the courses and community programs thriving.
</p> </p>
<Link href="/sponsor"> <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 Become a Sponsor
</Button> </Button>
</Link> </Link>
@ -137,7 +182,7 @@ export default function Home() {
</section> </section>
{/* Footer */} {/* 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"> <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> <p>Shiitake John's Forest • Texada Island, BC • Where the pavement ends</p>
</div> </div>

85
app/sponsor/page.tsx
View File

@ -43,18 +43,19 @@ export default function SponsorPage() {
<Navigation /> <Navigation />
{/* Hero Section */} {/* 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"> <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"> <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 Help preserve 20 acres of old growth forest, protect the watershed for endangered Texada Island
art of shiitake growing alive at the edge of civilization. sticklebacks, support sustainable cultivation, and keep the ancient art of shiitake growing alive at the
edge of civilization.
</p> </p>
</div> </div>
</section> </section>
{/* Why Sponsor 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"> <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> <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> </CardContent>
</Card> </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"> <Card className="border-border">
<CardContent className="pt-6"> <CardContent className="pt-6">
<div className="text-4xl mb-4">📚</div> <div className="text-4xl mb-4">📚</div>
@ -80,23 +92,12 @@ export default function SponsorPage() {
</p> </p>
</CardContent> </CardContent>
</Card> </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>
</div> </div>
</section> </section>
{/* Sponsorship Tiers */} {/* 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"> <div className="container mx-auto max-w-6xl">
<h2 className="text-3xl font-bold text-foreground mb-12 text-center">Sponsorship Levels</h2> <h2 className="text-3xl font-bold text-foreground mb-12 text-center">Sponsorship Levels</h2>
@ -116,9 +117,7 @@ export default function SponsorPage() {
</li> </li>
))} ))}
</ul> </ul>
<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground"> <Button className="w-full bg-[#1a4d2e] hover:bg-[#153d24] text-white">Become a {tier.name}</Button>
Become a {tier.name}
</Button>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -127,7 +126,7 @@ export default function SponsorPage() {
</section> </section>
{/* One-Time Support */} {/* 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"> <div className="container mx-auto max-w-4xl">
<Card className="border-border"> <Card className="border-border">
<CardHeader> <CardHeader>
@ -135,8 +134,8 @@ export default function SponsorPage() {
</CardHeader> </CardHeader>
<CardContent className="text-center"> <CardContent className="text-center">
<p className="text-muted-foreground mb-6 leading-relaxed"> <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 Prefer to make a one-time contribution? Every bit helps maintain the old growth forest, protect the
keep this unique operation thriving. watershed, support the courses, and keep this unique operation thriving.
</p> </p>
<div className="flex flex-wrap gap-4 justify-center mb-6"> <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"> <Button variant="outline" className="border-primary text-primary hover:bg-primary/10 bg-transparent">
@ -158,13 +157,14 @@ export default function SponsorPage() {
</section> </section>
{/* Impact 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"> <div className="container mx-auto max-w-4xl text-center">
<h2 className="text-3xl font-bold text-foreground mb-6">Your Impact</h2> <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"> <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 When you sponsor the Old Growth, you're not just supporting mushroom cultivation. You're preserving a way of
way of life, protecting forest land, enabling education, and helping maintain a community gathering place life, protecting old growth forest land and critical watershed habitat for endangered species, enabling
where stories are shared, knowledge is passed down, and the connection between people and nature thrives. 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> </p>
<div className="grid md:grid-cols-2 gap-6 text-left"> <div className="grid md:grid-cols-2 gap-6 text-left">
<div className="flex gap-4"> <div className="flex gap-4">
@ -176,6 +176,15 @@ export default function SponsorPage() {
</p> </p>
</div> </div>
</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="flex gap-4">
<div className="text-2xl">👥</div> <div className="text-2xl">👥</div>
<div> <div>
@ -188,18 +197,9 @@ export default function SponsorPage() {
<div className="flex gap-4"> <div className="flex gap-4">
<div className="text-2xl">🌲</div> <div className="text-2xl">🌲</div>
<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"> <p className="text-muted-foreground text-sm leading-relaxed">
Protect and maintain 20 acres of working forest land for future generations Protect and maintain 20 acres of old growth 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> </p>
</div> </div>
</div> </div>
@ -208,21 +208,22 @@ export default function SponsorPage() {
</section> </section>
{/* CTA 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"> <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> <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"> <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 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> </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 Get Started Today
</Button> </Button>
</div> </div>
</section> </section>
{/* Footer */} {/* 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"> <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> <p>Shiitake John's Forest • Texada Island, BC • Where the pavement ends</p>
</div> </div>

6
components/navigation.tsx
View File

@ -12,14 +12,14 @@ export function Navigation() {
</Link> </Link>
<div className="flex items-center gap-6"> <div className="flex items-center gap-6">
<Link href="/" className="text-foreground hover:text-primary transition-colors"> <Link href="/about" className="text-foreground hover:text-primary transition-colors">
Home About Shiitake John
</Link> </Link>
<Link href="/events" className="text-foreground hover:text-primary transition-colors"> <Link href="/events" className="text-foreground hover:text-primary transition-colors">
Events Events
</Link> </Link>
<Link href="/sponsor"> <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> </Link>
</div> </div>
</div> </div>

BIN
public/forest-ferns-background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB