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>
This commit is contained in:
v0
parent
52639621f4
commit
064868cec8
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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="relative h-[250px] rounded-lg overflow-hidden">
|
||||
<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_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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
73
app/page.tsx
73
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<p className="text-xl leading-relaxed text-primary-foreground/90 text-pretty">
|
||||
<h1 className="text-5xl font-bold mb-6 text-balance text-white">Sponsor the Old Growth</h1>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue