277 lines
12 KiB
TypeScript
277 lines
12 KiB
TypeScript
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>
|
|
)
|
|
}
|