+
-
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Forest Landscapes Section */}
+
+
+
The Old Growth Forest
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Cultivation & Work Section */}
+
+
+
Mushroom Cultivation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Life in the Forest Section */}
+
+
+
Life at the Edge of the Woods
+
+
+
+
+
+
+
+
+
+ {/* Mushroom Art & Celebrations Section */}
+
+
+
Mushroom Art & Celebrations
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 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.
+
+
+
+
+ View Courses
+
+
+
+
+ Support the Forest
+
+
+
+
+
+
+ {/* Footer */}
+
+
+ )
+}
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() {