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

@@ -112,6 +112,46 @@ export default function About() {
         </div>
       </section>
 
+      {/* John Working in the Forest Photo Gallery */}
+      <section className="py-16 px-4 fern-pattern">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-4xl font-bold text-foreground mb-12 text-center">John at Work</h2>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122703_505-qLwRjiPQfRMDDcs9821eJxhmCLxJrl.jpg"
+                alt="John working with logs and wheelbarrow"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122710_780-zlgttFxvfEYGyATvAKqOzNA9R4D0nC.jpg"
+                alt="John in the forest with freshly cut logs"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="relative rounded-lg overflow-hidden mb-6">
+            <img
+              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122853_047-tpCCLTeR26u6vqYEe567IMg54z1efB.jpg"
+              alt="John standing next to massive old growth tree"
+              className="w-full h-auto"
+            />
+          </div>
+
+          <div className="relative rounded-lg overflow-hidden">
+            <img
+              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230831_174019-Qh9v3KIB7YIoRXrezZoSvMXo7qCUMt.jpg"
+              alt="Beautiful forest scene with sunlight and ferns"
+              className="w-full h-auto"
+            />
+          </div>
+        </div>
+      </section>
+
       {/* The Storyteller */}
       <section className="py-16 px-4 fern-pattern">
         <div className="container mx-auto max-w-4xl">

app/events/page.tsx

@@ -94,26 +94,50 @@ export default function EventsPage() {
         <div className="container mx-auto max-w-6xl">
           <h2 className="text-3xl font-bold text-foreground mb-8 text-center">The Learning Experience</h2>
 
-          <div className="grid md:grid-cols-3 gap-6 mb-12">
+          <div className="grid md:grid-cols-3 gap-6 mb-6">
-            <div className="relative h-[250px] rounded-lg overflow-hidden">
+            <div className="relative rounded-lg overflow-hidden">
               <img
                 src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122707_376-AQekit9vQDRnqWMpzrQY4xP8WvC8vI.jpg"
                 alt="Morel mushroom in the forest"
-                className="w-full h-full object-cover"
+                className="w-full h-auto"
               />
             </div>
-            <div className="relative h-[250px] rounded-lg overflow-hidden">
+            <div className="relative rounded-lg overflow-hidden">
               <img
                 src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122907_932-LpmXYCIUZszbpOlB2dHqAv8nJGCtZU.jpg"
                 alt="Yellow coral mushrooms on moss"
-                className="w-full h-full object-cover"
+                className="w-full h-auto"
               />
             </div>
-            <div className="relative h-[250px] rounded-lg overflow-hidden">
+            <div className="relative rounded-lg overflow-hidden">
               <img
                 src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122904_554-FMaSl7fxVmpFdmsHaZEX3E5Vh0NqGN.jpg"
                 alt="Ghost pipe plant in the forest"
-                className="w-full h-full object-cover"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6 mb-12">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122601_053-b4W7dW79P82zEnLeq4ESkKtvLLNJ3Q.jpg"
+                alt="Orange coral mushrooms on mossy forest floor"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122857_357-qnZHfuPlKuvI6Qb5G9QucUFgve1FZk.jpg"
+                alt="Turkey tail mushrooms with beautiful banding"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122904_554-FMaSl7fxVmpFdmsHaZEX3E5Vh0NqGN.jpg"
+                alt="Ghost pipe plant in the forest"
+                className="w-full h-auto"
               />
             </div>
           </div>

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 (
+    <div className="min-h-screen bg-background">
+      <Navigation />
+
+      {/* Hero Section */}
+      <section className="py-16 px-4 forest-texture">
+        <div className="container mx-auto max-w-6xl text-center">
+          <h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6 text-balance">Photo Gallery</h1>
+          <p className="text-xl text-muted-foreground mb-8 leading-relaxed text-pretty max-w-3xl mx-auto">
+            A visual journey through the forest, mushroom cultivation, and life at the edge of the woods on Texada
+            Island.
+          </p>
+        </div>
+      </section>
+
+      {/* Mushroom Treasures Section */}
+      <section className="py-12 px-4 bg-muted/30 moss-texture">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-3xl font-bold text-foreground mb-8">Forest Mushrooms & Fungi</h2>
+
+          <div className="grid md:grid-cols-3 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122601_053-b4W7dW79P82zEnLeq4ESkKtvLLNJ3Q.jpg"
+                alt="Vibrant orange coral mushrooms on mossy forest floor"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122911_830-2Q0ZOzzzL4YAfdfMMCFpHnOyoCy87p.jpg"
+                alt="Orange coral mushrooms growing on moss"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122907_932-LpmXYCIUZszbpOlB2dHqAv8nJGCtZU.jpg"
+                alt="Bright yellow coral mushrooms on moss"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122857_357-qnZHfuPlKuvI6Qb5G9QucUFgve1FZk.jpg"
+                alt="Turkey tail mushrooms with beautiful banding patterns"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122707_376-AQekit9vQDRnqWMpzrQY4xP8WvC8vI.jpg"
+                alt="Morel mushroom in the forest"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122900_435-wb8VPiXxn7UUctygqQDrIINgVJkDZF.jpg"
+                alt="Moss and lichen with pixie cups"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122904_554-FMaSl7fxVmpFdmsHaZEX3E5Vh0NqGN.jpg"
+                alt="White ghost pipe plant on mossy log"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_201305-3wgTwCFhUieQiiFioo5PxvbdvQSeWF.jpg"
+                alt="Creative moss-covered log sculpture with skull decoration"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Forest Landscapes Section */}
+      <section className="py-12 px-4 fern-pattern">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-3xl font-bold text-foreground mb-8">The Old Growth Forest</h2>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230831_174019-Qh9v3KIB7YIoRXrezZoSvMXo7qCUMt.jpg"
+                alt="Sunlight streaming through tall forest trees with ferns"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210719_072818-pw7FwSOKsKN1SkhhI04Na0uxNAET8a.jpg"
+                alt="Forest path with tall trees and morning light"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122853_047-tpCCLTeR26u6vqYEe567IMg54z1efB.jpg"
+                alt="John standing next to massive old growth tree"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210818_171149-xIrMFjfJgqt8KvoKsU8TW6UAY4Edxl.jpg"
+                alt="Moss-covered trees in the forest"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_192600-3x1vh5nWmxpNHlnwD3CL06FGlOUwVJ.jpg"
+                alt="Fern frond unfurling on the forest floor"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Cultivation & Work Section */}
+      <section className="py-12 px-4 bg-muted/30 moss-texture">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-3xl font-bold text-foreground mb-8">Mushroom Cultivation</h2>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122703_505-qLwRjiPQfRMDDcs9821eJxhmCLxJrl.jpg"
+                alt="John working with logs and wheelbarrow in cultivation area"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122710_780-zlgttFxvfEYGyATvAKqOzNA9R4D0nC.jpg"
+                alt="John standing next to freshly cut log for mushroom cultivation"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_124024-xmt1dHlhBDRwScoQHQTuPC4Fgk1m0b.jpg"
+                alt="John examining stacked inoculated logs covered with mesh"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122703_505-Ow3Gc2G2Awhf5xzju6DQG0tQnD7nCT.jpg"
+                alt="Working with logs in the cultivation area"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Life in the Forest Section */}
+      <section className="py-12 px-4 fern-pattern">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-3xl font-bold text-foreground mb-8">Life at the Edge of the Woods</h2>
+
+          <div className="grid md:grid-cols-3 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122849_429-trLTSHlz0FNvU5yO4XhGqSk8PakrO2.jpg"
+                alt="Una the dog sitting happily on moss-covered log"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_130727-MGAmnEAzKYvyJWvOQuJ7DAcqmwC4fD.jpg"
+                alt="John proudly showing off a tall mullein plant"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210818_190727-bmxMdsibaf3JG5U7Y3WsXjGTfAbnyR.jpg"
+                alt="Young pine tree in a pot with sunset in background"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="relative rounded-lg overflow-hidden mb-6">
+            <img
+              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20210717_193610-u2vtOa8FutWIIc4dZ9xTCTv4thu5xY.jpg"
+              alt="People in a field with John, and a toy unicorn on moss in foreground"
+              className="w-full h-auto"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Mushroom Art & Celebrations Section */}
+      <section className="py-12 px-4 bg-muted/30 moss-texture">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-3xl font-bold text-foreground mb-8">Mushroom Art & Celebrations</h2>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20201031_212401-Yufv4gFLGszaSBiYQbb0Lx3nZPnkl7.jpg"
+                alt="Two carved pumpkins lit up at night with mushroom designs"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20201101_162430-qzPwQ3UMd78ABuadb3yz6WAJ8ThZKV.jpg"
+                alt="Three carved pumpkins with mushroom designs displayed on a bench"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-16 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">Experience the Forest Yourself</h2>
+          <p className="text-xl mb-8 text-primary-foreground/90 leading-relaxed text-pretty">
+            Join us for a hands-on mushroom cultivation course and discover the magic of the old growth forest
+            firsthand.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Link href="/events">
+              <Button size="lg" className="bg-[#1a4d2e] hover:bg-[#153d24] text-white">
+                View Courses
+              </Button>
+            </Link>
+            <Link href="/sponsor">
+              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10 bg-transparent">
+                Support the Forest
+              </Button>
+            </Link>
+          </div>
+        </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>
+  )
+}

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-color: rgb(26, 77, 46); /* Deep forest green */
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
     position: relative;
   }
 
-  /* Increased overlay opacity and ensured text is above overlay */
+  /* Ensure all content has full opacity */
-  .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 */
   .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.05) 10px,
-        rgba(95, 70, 45, 0.02) 20px
+        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.05) 10px,
-        rgba(140, 120, 90, 0.02) 20px
+        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%),
+    background-color: rgb(168, 180, 150); /* Soft sage green */
-      radial-gradient(ellipse at 90% 70%, rgba(95, 70, 45, 0.04) 0%, transparent 40%),
+    background-image: radial-gradient(ellipse at 10% 30%, rgba(95, 70, 45, 0.08) 0%, transparent 40%),
-      radial-gradient(ellipse at 50% 50%, rgba(140, 120, 90, 0.03) 0%, transparent 50%);
+      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%);
   }
 }

app/page.tsx

@@ -90,7 +90,80 @@ export default function Home() {
         </div>
       </section>
 
+      {/* Forest Photo Gallery Section */}
       <section className="py-16 px-4 fern-pattern">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-4xl font-bold text-foreground mb-12 text-center">The Forest & Its Treasures</h2>
+
+          <div className="grid md:grid-cols-3 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122911_830-2Q0ZOzzzL4YAfdfMMCFpHnOyoCy87p.jpg"
+                alt="Vibrant orange coral mushrooms"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122907_932-LpmXYCIUZszbpOlB2dHqAv8nJGCtZU.jpg"
+                alt="Yellow coral mushrooms on moss"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122707_376-AQekit9vQDRnqWMpzrQY4xP8WvC8vI.jpg"
+                alt="Morel mushroom in the forest"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122904_554-FMaSl7fxVmpFdmsHaZEX3E5Vh0NqGN.jpg"
+                alt="Ghost pipe plant on mossy log"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122857_357-qnZHfuPlKuvI6Qb5G9QucUFgve1FZk.jpg"
+                alt="Turkey tail mushrooms with beautiful banding"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122601_053-b4W7dW79P82zEnLeq4ESkKtvLLNJ3Q.jpg"
+                alt="Orange coral mushrooms on mossy forest floor"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122900_435-wb8VPiXxn7UUctygqQDrIINgVJkDZF.jpg"
+                alt="Moss and lichen with pixie cups"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230831_174019-Qh9v3KIB7YIoRXrezZoSvMXo7qCUMt.jpg"
+                alt="Sunlight streaming through the forest with ferns"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Protecting the Watershed Section */}
+      <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>

app/sponsor/page.tsx

@@ -43,10 +43,10 @@ export default function SponsorPage() {
       <Navigation />
 
       {/* Hero Section */}
-      <section className="py-16 px-4 bg-primary text-primary-foreground forest-texture">
+      <section className="py-16 px-4 bg-primary forest-texture">
         <div className="container mx-auto max-w-4xl text-center">
-          <h1 className="text-5xl font-bold mb-6 text-balance">Sponsor the Old Growth</h1>
+          <h1 className="text-5xl font-bold mb-6 text-balance text-white">Sponsor the Old Growth</h1>
-          <p className="text-xl leading-relaxed text-primary-foreground/90 text-pretty">
+          <p className="text-xl leading-relaxed text-white/95 text-pretty">
             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() {
         </div>
       </section>
 
+      {/* Old Growth Forest Photo Gallery */}
+      <section className="py-16 px-4 fern-pattern">
+        <div className="container mx-auto max-w-6xl">
+          <h2 className="text-4xl font-bold text-foreground mb-12 text-center">The Old Growth We're Protecting</h2>
+
+          <div className="grid md:grid-cols-2 gap-6 mb-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122853_047-tpCCLTeR26u6vqYEe567IMg54z1efB.jpg"
+                alt="Massive old growth tree with John for scale"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20230831_174019-Qh9v3KIB7YIoRXrezZoSvMXo7qCUMt.jpg"
+                alt="Sunlight streaming through old growth forest"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122900_435-wb8VPiXxn7UUctygqQDrIINgVJkDZF.jpg"
+                alt="Moss and lichen covering the forest floor"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122710_780-zlgttFxvfEYGyATvAKqOzNA9R4D0nC.jpg"
+                alt="Freshly cut log for mushroom cultivation"
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="relative rounded-lg overflow-hidden">
+              <img
+                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_20251102_122849_429-trLTSHlz0FNvU5yO4XhGqSk8PakrO2.jpg"
+                alt="Una the dog in the mossy forest"
+                className="w-full h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Sponsorship Tiers */}
       <section className="py-16 px-4 bg-muted/30 fern-pattern">
         <div className="container mx-auto max-w-6xl">

components/navigation.tsx

@@ -15,6 +15,9 @@ export function Navigation() {
             <Link href="/about" className="text-foreground hover:text-primary transition-colors">
               About Shiitake John
             </Link>
+            <Link href="/gallery" className="text-foreground hover:text-primary transition-colors">
+              Photo Gallery
+            </Link>
             <Link href="/events" className="text-foreground hover:text-primary transition-colors">
               Courses and Events
             </Link>