From 064868cec86eb35a40bca3ef6347ed99ec4399f0 Mon Sep 17 00:00:00 2001 From: v0 Date: Wed, 5 Nov 2025 19:45:21 +0000 Subject: [PATCH] fix: resolve sponsor page header opacity and background color Ensure full opacity for hero text and switch backgrounds to solid colors. #VERCEL_SKIP Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com> --- app/about/page.tsx | 40 ++++++ app/events/page.tsx | 38 +++++- app/gallery/page.tsx | 276 ++++++++++++++++++++++++++++++++++++++ app/globals.css | 49 +++---- app/page.tsx | 73 ++++++++++ app/sponsor/page.tsx | 54 +++++++- components/navigation.tsx | 3 + 7 files changed, 496 insertions(+), 37 deletions(-) create mode 100644 app/gallery/page.tsx diff --git a/app/about/page.tsx b/app/about/page.tsx index 02f9e6d..bdaa46c 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -112,6 +112,46 @@ export default function About() { + {/* John Working in the Forest Photo Gallery */} +
+
+

John at Work

+ +
+
+ John working with logs and wheelbarrow +
+
+ John in the forest with freshly cut logs +
+
+ +
+ John standing next to massive old growth tree +
+ +
+ Beautiful forest scene with sunlight and ferns +
+
+
+ {/* The Storyteller */}
diff --git a/app/events/page.tsx b/app/events/page.tsx index b0008ed..1613174 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -94,26 +94,50 @@ export default function EventsPage() {

The Learning Experience

-
-
+
+
Morel mushroom in the forest
-
+
Yellow coral mushrooms on moss
-
+
Ghost pipe plant in the forest +
+
+ +
+
+ Orange coral mushrooms on mossy forest floor +
+
+ Turkey tail mushrooms with beautiful banding +
+
+ Ghost pipe plant in the forest
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx new file mode 100644 index 0000000..ff8381e --- /dev/null +++ b/app/gallery/page.tsx @@ -0,0 +1,276 @@ +import { Navigation } from "@/components/navigation" +import Link from "next/link" +import { Button } from "@/components/ui/button" + +export default function GalleryPage() { + return ( +
+ + + {/* Hero Section */} +
+
+

Photo Gallery

+

+ A visual journey through the forest, mushroom cultivation, and life at the edge of the woods on Texada + Island. +

+
+
+ + {/* Mushroom Treasures Section */} +
+
+

Forest Mushrooms & Fungi

+ +
+
+ Vibrant orange coral mushrooms on mossy forest floor +
+
+ Orange coral mushrooms growing on moss +
+
+ Bright yellow coral mushrooms on moss +
+
+ +
+
+ Turkey tail mushrooms with beautiful banding patterns +
+
+ Morel mushroom in the forest +
+
+ +
+
+ Moss and lichen with pixie cups +
+
+ White ghost pipe plant on mossy log +
+
+ Creative moss-covered log sculpture with skull decoration +
+
+
+
+ + {/* Forest Landscapes Section */} +
+
+

The Old Growth Forest

+ +
+
+ Sunlight streaming through tall forest trees with ferns +
+
+ Forest path with tall trees and morning light +
+
+ +
+
+ John standing next to massive old growth tree +
+
+ Moss-covered trees in the forest +
+
+ Fern frond unfurling on the forest floor +
+
+
+
+ + {/* Cultivation & Work Section */} +
+
+

Mushroom Cultivation

+ +
+
+ John working with logs and wheelbarrow in cultivation area +
+
+ John standing next to freshly cut log for mushroom cultivation +
+
+ +
+
+ John examining stacked inoculated logs covered with mesh +
+
+ Working with logs in the cultivation area +
+
+
+
+ + {/* Life in the Forest Section */} +
+
+

Life at the Edge of the Woods

+ +
+
+ Una the dog sitting happily on moss-covered log +
+
+ John proudly showing off a tall mullein plant +
+
+ Young pine tree in a pot with sunset in background +
+
+ +
+ People in a field with John, and a toy unicorn on moss in foreground +
+
+
+ + {/* Mushroom Art & Celebrations Section */} +
+
+

Mushroom Art & Celebrations

+ +
+
+ Two carved pumpkins lit up at night with mushroom designs +
+
+ Three carved pumpkins with mushroom designs displayed on a bench +
+
+
+
+ + {/* CTA Section */} +
+
+

Experience the Forest Yourself

+

+ Join us for a hands-on mushroom cultivation course and discover the magic of the old growth forest + firsthand. +

+
+ + + + + + +
+
+
+ + {/* Footer */} +
+
+

Shiitake John's Forest • Texada Island, BC • Where the pavement ends

+
+
+
+ ) +} diff --git a/app/globals.css b/app/globals.css index 2d0fa7a..c993f31 100644 --- a/app/globals.css +++ b/app/globals.css @@ -149,55 +149,50 @@ /* 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; + background-color: rgb(26, 77, 46); /* Deep forest green */ position: relative; } - /* Increased overlay opacity and ensured text is above overlay */ - .forest-texture::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(250, 245, 235, 0.92); - pointer-events: none; - z-index: 0; - } - - /* Ensure all content is above the overlay with full opacity */ + /* Ensure all content has full opacity */ .forest-texture > * { position: relative; z-index: 1; - opacity: 1; + opacity: 1 !important; + } + + /* Force full opacity on all text elements */ + .forest-texture h1, + .forest-texture h2, + .forest-texture h3, + .forest-texture p, + .forest-texture span, + .forest-texture div { + opacity: 1 !important; } .moss-texture { + background-color: rgb(140, 120, 90); /* Warm tan/moss color */ background-image: repeating-linear-gradient( 45deg, transparent, transparent 10px, - rgba(95, 70, 45, 0.02) 10px, - rgba(95, 70, 45, 0.02) 20px + rgba(95, 70, 45, 0.05) 10px, + rgba(95, 70, 45, 0.05) 20px ), repeating-linear-gradient( -45deg, transparent, transparent 10px, - rgba(140, 120, 90, 0.02) 10px, - rgba(140, 120, 90, 0.02) 20px + rgba(140, 120, 90, 0.05) 10px, + rgba(140, 120, 90, 0.05) 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%); + background-color: rgb(168, 180, 150); /* Soft sage green */ + background-image: radial-gradient(ellipse at 10% 30%, rgba(95, 70, 45, 0.08) 0%, transparent 40%), + radial-gradient(ellipse at 90% 70%, rgba(95, 70, 45, 0.06) 0%, transparent 40%), + radial-gradient(ellipse at 50% 50%, rgba(140, 120, 90, 0.05) 0%, transparent 50%); } } diff --git a/app/page.tsx b/app/page.tsx index 6ea54f1..0bb7915 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -90,7 +90,80 @@ export default function Home() {
+ {/* Forest Photo Gallery Section */}
+
+

The Forest & Its Treasures

+ +
+
+ Vibrant orange coral mushrooms +
+
+ Yellow coral mushrooms on moss +
+
+ Morel mushroom in the forest +
+
+ +
+
+ Ghost pipe plant on mossy log +
+
+ Turkey tail mushrooms with beautiful banding +
+
+ +
+
+ Orange coral mushrooms on mossy forest floor +
+
+ Moss and lichen with pixie cups +
+
+ Sunlight streaming through the forest with ferns +
+
+
+
+ + {/* Protecting the Watershed Section */} +
diff --git a/app/sponsor/page.tsx b/app/sponsor/page.tsx index a05341b..c24cba3 100644 --- a/app/sponsor/page.tsx +++ b/app/sponsor/page.tsx @@ -43,10 +43,10 @@ export default function SponsorPage() { {/* Hero Section */} -
+
-

Sponsor the Old Growth

-

+

Sponsor the Old Growth

+

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. @@ -96,6 +96,54 @@ export default function SponsorPage() {

+ {/* Old Growth Forest Photo Gallery */} +
+
+

The Old Growth We're Protecting

+ +
+
+ Massive old growth tree with John for scale +
+
+ Sunlight streaming through old growth forest +
+
+ +
+
+ Moss and lichen covering the forest floor +
+
+ Freshly cut log for mushroom cultivation +
+
+ Una the dog in the mossy forest +
+
+
+
+ {/* Sponsorship Tiers */}
diff --git a/components/navigation.tsx b/components/navigation.tsx index 8d06b44..03971c5 100644 --- a/components/navigation.tsx +++ b/components/navigation.tsx @@ -15,6 +15,9 @@ export function Navigation() { About Shiitake John + + Photo Gallery + Courses and Events