Update README.md

A note has been added to acknowledge the discrepancies between the README.md document and the current state of the Bloom Valley Nursery Demo.

.eleventy.js

@@ -3,6 +3,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy({ "src/styles": "styles" });
     eleventyConfig.addPassthroughCopy({ "src/scripts": "scripts" });
     eleventyConfig.addPassthroughCopy({ "src/robots.txt": "robots.txt"});
+    eleventyConfig.watchIgnores.add("./src/_data/eventsJson.js");
     return {
         dir: {
         input: "src",

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 _site/
 .env
+.env.*
+Image_Credits.txt
+_data\communityEvents.js

README.md

@@ -1,6 +1,7 @@
-
 # **Bloom Valley Nursery Web Design**
 
+**Note:** This README is the writeup for the original project which was written in HTML, CSS, and vanilla JS. It does not reflect changes made while refactoring and modularizing the demo. This file will be updated with those reflections soon.
+
 ### **Table of Contents**
 
 -   [Introduction](#introduction)

src/_data/communityEvents.js

@@ -1,5 +1,6 @@
 /**
  * @fileoverview This data file contains all community events for Bloom Valley Nursery Demo.
+ *
  */
 
 const communityEvents = [

src/_data/eventsJson.js

@@ -0,0 +1,54 @@
+module.exports = { normalizedEvents: [
+  {
+    "calid": "3521964000000010003",
+    "title": "Gardening 101 with Bethany Bloom",
+    "uid": "6788b6fe00ef48d18749a55366207c76@zoho.com",
+    "start": "20250909T183000-0500",
+    "end": "20250909T203000-0500",
+    "isallday": false,
+    "location": "Bloom Valley Nursery",
+    "displayDate": "Tuesday, September 9, 2025 • 6:30 PM – 8:30 PM",
+    "color": "#FC6060",
+    "description": "Join Bethany Bloom as she shares her tips for creating a themed decor through-out the home that you will be delighted to share with your guests!\n\n\n\n**This​ is a demo event for demonstration purposes only.**\n\n",
+    "category": "workshop"
+  },
+  {
+    "calid": "3521964000000010003",
+    "title": "Labor Day Sale",
+    "uid": "1ae512d837304fcc91c8920aa90a1f44@zoho.com",
+    "start": "20250901",
+    "end": "20250902",
+    "isallday": true,
+    "location": "Bloom Valley Nursery",
+    "displayDate": "Monday, September 1, 2025",
+    "color": "#7CAA56",
+    "description": "Celebrate Labor Day with Bloom Valley Nursery! Enjoy special discounts on select plants, gardening tools, and seasonal decor. This one-day event is a perfect opportunity to stock up on everything you need to make your home and garden thrive. \n\n**This is a demo event for demonstration purposes only—no actual sales will take place.**\n\n",
+    "category": "sales"
+  },
+  {
+    "calid": "3521964000000010003",
+    "title": "Landscaping 101 with Vincent Bloom",
+    "uid": "60085fc27f5045a5bf462c38c02677b0@zoho.com",
+    "start": "20250916T183000-0500",
+    "end": "20250916T203000-0500",
+    "isallday": false,
+    "location": "Bloom Valley Nursery",
+    "displayDate": "Tuesday, September 16, 2025 • 6:30 PM – 8:30 PM",
+    "color": "#FC6060",
+    "description": "Come learn from Vincent Bloom, one of Bloom Valley Nursery's family owners, as he guides you through the art and science of landscaping. This workshop is designed for community members who want to create beautiful, sustainable outdoor spaces. We'll explore local plant varieties, discuss eco-friendly landscaping methods, and share tips for a garden that not only looks great but also supports our local ecosystem.\n\n",
+    "category": "workshop"
+  },
+  {
+    "calid": "3521964000000010003",
+    "title": "Johnny Appleseed Day",
+    "uid": "e0394985af2845fd8c1de4b782c139fb@zoho.com",
+    "start": "20250926T173000-0500",
+    "end": "20250926T193000-0500",
+    "isallday": false,
+    "location": "Bloom Valley Nursery",
+    "displayDate": "Friday, September 26, 2025 • 5:30 PM – 7:30 PM",
+    "color": "#FFC464",
+    "description": "Celebrate the legacy of Johnny Appleseed with us! Join our hands-on workshop where you'll get to pick fresh, crisp apples right from our orchard and then learn how to properly plant your very own apple tree sapling. Our expert growers will share tips on nurturing your tree so it can thrive for years to come. This is a wonderful, educational event for the whole family to connect with nature and grow something beautiful.\n\n",
+    "category": "community"
+  }
+] };

src/_data/inventory.js

@@ -1,31 +1,3 @@
-/**
- * @fileoverview This file contains the product data for
- * all items in the store demo. The data is structured
- * to be the single source of truth for all
- * product-related information, including IDs, pricing,
- * and descriptions.
- */
-
-/* **Unit Template**
-{
-    productNumber: "",
-    imageFile: "",
-    skuID: "",
-    catNumber: "",
-    productName: "",
-    category: "",
-    price: ,
-    altText: "",
-    shortDescription: "",
-    longDescription: "",
-    ratings: {
-        count: ,
-        score:
-    },
-    isFeatured: ,
-}
-*/
-
 const INVENTORY = [
     {
         "productNumber": "001",
@@ -36,8 +8,8 @@ const INVENTORY = [
         "category": "accessories",
         "price": 12.99,
         "altText": "A pink handcrafted wooden bird house",
-        "shortDescription": "A handcrafted wooden bird house in pink.",
+        "shortDescription": "Handcrafted wooden bird house in pink.",
-        "longDescription": "A beautifully handcrafted wooden bird house in a gentle pink finish, built by a local carpenter from the Bloom Valley community. Designed with a classic aesthetic and durable, weather-resistant materials, this bird house provides a cozy and safe home for small songbirds. It's a charming accent for any garden or tree and a perfect way to invite nature into your outdoor space.",
+        "longDescription": "Handcrafted pink bird house, durable and weather-resistant, perfect for small songbirds and a charming garden accent.",
         "ratings": {
             "count": 38,
             "score": 4.7
@@ -53,8 +25,8 @@ const INVENTORY = [
         "category": "accessories",
         "price": 9.99,
         "altText": "A set of three traditional terra-cotta gardening pots of varying sizes.",
-        "shortDescription": "A classic set of three terra-cotta gardening pots.",
+        "shortDescription": "Set of three classic terra-cotta garden pots.",
-        "longDescription": "Crafted from porous, natural clay, this set of terra-cotta pots is a timeless choice for any gardener. The material's ability to absorb excess water helps prevent root rot, making it an ideal home for a wide variety of plants. The set includes three different sizes, perfect for potting new seedlings or housing larger plants.",
+        "longDescription": "Set of three terra-cotta pots in different sizes, ideal for seedlings or larger plants and perfect for any gardener.",
         "ratings": {
             "count": 150,
             "score": 4.5
@@ -70,8 +42,8 @@ const INVENTORY = [
         "category": "accessories",
         "price": 19.99,
         "altText": "A modern, metal watering can with a long spout.",
-        "shortDescription": "A stylish and functional metal watering can.",
+        "shortDescription": "Stylish and functional metal watering can.",
-        "longDescription": "This sleek and durable metal watering can features a long, narrow spout for precise watering, perfect for both indoor and outdoor plants. Its comfortable handle provides a balanced grip, and the sturdy construction ensures it will be a reliable tool for years to come.",
+        "longDescription": "Sleek metal watering can with long spout and comfortable handle for precise watering indoors or outdoors.",
         "ratings": {
             "count": 85,
             "score": 4.8
@@ -87,8 +59,8 @@ const INVENTORY = [
         "category": "indoor",
         "price": 14.99,
         "altText": "A lush spider plant with long, variegated green and white leaves.",
-        "shortDescription": "An easy-to-care-for spider plant, perfect for beginners.",
+        "shortDescription": "Easy-care spider plant, great for beginners.",
-        "longDescription": "The spider plant (Chlorophytum comosum) is one of the most popular and easiest houseplants to grow. Known for its distinctive arching, variegated leaves, it thrives in a variety of conditions and is a great choice for hanging baskets. It's also a highly effective air purifier.",
+        "longDescription": "The spider plant thrives in many conditions, is easy to care for, and makes a great air-purifying houseplant.",
         "ratings": {
             "count": 210,
             "score": 4.9
@@ -104,8 +76,8 @@ const INVENTORY = [
         "category": "indoor",
         "price": 16.99,
         "altText": "A cascading string-of-pearls plant with small, spherical green leaves.",
-        "shortDescription": "A unique succulent with cascading, pearl-like foliage.",
+        "shortDescription": "Succulent with cascading, pearl-like foliage.",
-        "longDescription": "The string-of-pearls (Senecio rowleyanus) is a striking succulent known for its long, trailing stems dotted with small, bead-like leaves. It's a fantastic plant for a sunny spot on a shelf or in a hanging planter, creating a beautiful, flowing green display. Like most succulents, it requires minimal watering.",
+        "longDescription": "String-of-pearls succulent with trailing bead-like stems, ideal for shelves or hanging planters with minimal watering needs.",
         "ratings": {
             "count": 95,
             "score": 4.6
@@ -121,8 +93,8 @@ const INVENTORY = [
         "category": "indoor",
         "price": 18.99,
         "altText": "A vibrant zebra plant with deep green leaves and prominent white veins.",
-        "shortDescription": "A striking houseplant with bold, striped leaves.",
+        "shortDescription": "Striking houseplant with bold, striped leaves.",
-        "longDescription": "The zebra plant (Aphelandra squarrosa) is named for its eye-catching foliage—deep green leaves with stark, contrasting white or yellow veins. This plant adds a tropical feel to any room and, with the right care, can also produce brilliant yellow flower bracts. It prefers bright, indirect light and high humidity.",
+        "longDescription": "Zebra plant with bold green leaves and white veins, adding a tropical feel; blooms bright yellow with proper care.",
         "ratings": {
             "count": 72,
             "score": 4.4
@@ -138,8 +110,8 @@ const INVENTORY = [
         "category": "landscaping",
         "price": 8.99,
         "altText": "A 25lb bag of natural pine bark mulch.",
-        "shortDescription": "A 25lb bag of premium pine bark mulch for landscaping.",
+        "shortDescription": "25lb bag of premium pine bark mulch.",
-        "longDescription": "Pine bark mulch is a top choice for gardeners and landscapers. It helps suppress weeds, retain soil moisture, and moderate soil temperature, which is essential for healthy plant growth. As it decomposes, it adds valuable organic matter to the soil. The rich, dark color also provides an attractive finish to garden beds and pathways.",
+        "longDescription": "Pine bark mulch helps suppress weeds, retain moisture, and enrich soil, adding a dark, polished look to gardens.",
         "ratings": {
             "count": 305,
             "score": 4.8
@@ -155,8 +127,8 @@ const INVENTORY = [
         "category": "landscaping",
         "price": 11.99,
         "altText": "A 25lb bag of smooth, rounded pea gravel.",
-        "shortDescription": "A 25lb bag of decorative pea gravel for landscaping.",
+        "shortDescription": "25lb bag of decorative pea gravel.",
-        "longDescription": "Pea gravel consists of small, smooth, rounded stones, typically in a mix of neutral colors. It's an excellent choice for creating walkways, patios, and decorative ground cover. The smooth texture is comfortable to walk on, and it provides effective drainage and a clean, finished look to any landscape design.",
+        "longDescription": "Pea gravel is smooth, rounded stones perfect for walkways, patios, and decorative ground cover, providing drainage and a clean finish.",
         "ratings": {
             "count": 185,
             "score": 4.7
@@ -172,8 +144,8 @@ const INVENTORY = [
         "category": "landscaping",
         "price": 4.50,
         "altText": "A single rectangular gray stone paver.",
-        "shortDescription": "A durable, single stone paver for creating paths and patios.",
+        "shortDescription": "Durable stone paver for patios and paths.",
-        "longDescription": "Our stone pavers are made from high-quality concrete and are perfect for building durable, long-lasting patios, walkways, and driveways. The classic rectangular shape and neutral gray color make them versatile for a wide range of landscape designs. Sold individually, allowing you to purchase the exact quantity you need for your project.",
+        "longDescription": "High-quality stone pavers, perfect for patios, paths, and driveways. Sold individually for precise quantity needs.",
         "ratings": {
             "count": 255,
             "score": 4.6
@@ -189,8 +161,8 @@ const INVENTORY = [
         "category": "patio",
         "price": 129.99,
         "altText": "A round, black metal fire-pit with a mesh lid.",
-        "shortDescription": "A sturdy and stylish metal fire-pit for outdoor gatherings.",
+        "shortDescription": "Stylish metal fire-pit for outdoor gatherings.",
-        "longDescription": "Create a warm and inviting atmosphere on your patio with this durable metal fire-pit. Constructed from heat-resistant steel, it features a classic bowl design and includes a mesh lid for safety. Perfect for cool evenings, it's a great centerpiece for entertaining and enjoying the outdoors with friends and family.",
+        "longDescription": "Metal fire-pit with mesh lid, heat-resistant and durable, perfect for outdoor gatherings and cozy evenings.",
         "ratings": {
             "count": 55,
             "score": 4.9
@@ -206,8 +178,8 @@ const INVENTORY = [
         "category": "patio",
         "price": 24.99,
         "altText": "A string of warm white LED lights hanging outdoors.",
-        "shortDescription": "A set of energy-efficient LED string lights for ambient lighting.",
+        "shortDescription": "Energy-efficient LED string lights for outdoors.",
-        "longDescription": "Add a touch of magic to your outdoor space with these energy-efficient LED string lights. The warm white glow creates a soft, inviting ambiance, perfect for backyard dinners, parties, or simply relaxing on your patio. The bulbs are shatterproof and weather-resistant, making them ideal for year-round outdoor use.",
+        "longDescription": "LED string lights with warm glow, shatterproof and weather-resistant, ideal for outdoor ambiance year-round.",
         "ratings": {
             "count": 175,
             "score": 4.7
@@ -223,8 +195,8 @@ const INVENTORY = [
         "category": "patio",
         "price": 22.99,
         "altText": "A small, potted parlor palm with feathery green fronds.",
-        "shortDescription": "An elegant and low-maintenance palm for patios and decks.",
+        "shortDescription": "Elegant, low-maintenance palm for patios.",
-        "longDescription": "The parlor palm (Chamaedorea elegans) is a classic choice for adding a tropical flair to a covered patio, deck, or indoor space. Known for its graceful, feathery fronds, it's a resilient and slow-growing plant that thrives in low light conditions. It's a great way to bring a lush, green aesthetic to your outdoor living area.",
+        "longDescription": "Parlor palm with graceful fronds, resilient in low light, adding a tropical flair to patios or indoor spaces.",
         "ratings": {
             "count": 88,
             "score": 4.6
@@ -240,8 +212,8 @@ const INVENTORY = [
         "category": "shrubs",
         "price": 25.99,
         "altText": "A vibrant cluster of pink and purple hydrangea flowers.",
-        "shortDescription": "A beautiful hydrangea bush (Hydrangea macrophylla), known for its large, colorful blooms.",
+        "shortDescription": "Hydrangea bush with large, colorful blooms.",
-        "longDescription": "Hydrangeas are a quintessential garden shrub, celebrated for their large, showy flower heads. Depending on the soil's pH, the blooms can change color, ranging from deep blues and purples to bright pinks. They are perfect for adding a splash of color to borders, foundations, or as a standalone focal point in the garden.",
+        "longDescription": "Hydrangeas with large, colorful blooms, ideal for borders, foundations, or as a standalone garden focal point.",
         "ratings": {
             "count": 190,
             "score": 4.9
@@ -257,8 +229,8 @@ const INVENTORY = [
         "category": "shrubs",
         "price": 28.99,
         "altText": "A crepe myrtle bush with clusters of bright pink flowers.",
-        "shortDescription": "A small crepe myrtle tree, prized for its long-lasting summer blooms.",
+        "shortDescription": "Crepe myrtle with vibrant summer blooms.",
-        "longDescription": "The crepe myrtle (Lagerstroemia) is a beloved small tree or shrub, famous for its crepe-paper-like blossoms that last all summer long. Its smooth, multi-hued bark and vibrant fall foliage also add year-round interest to the landscape. This fast-growing plant thrives in sunny locations and requires minimal care.",
+        "longDescription": "Crepe myrtle with vibrant, long-lasting summer blooms and smooth multi-hued bark, adding seasonal interest to your garden.",
         "ratings": {
             "count": 115,
             "score": 4.7
@@ -274,8 +246,8 @@ const INVENTORY = [
         "category": "shrubs",
         "price": 21.99,
         "altText": "A holly bush with deep green leaves and bright red berries.",
-        "shortDescription": "A classic evergreen holly bush with traditional red berries.",
+        "shortDescription": "Evergreen holly bush with bright red berries.",
-        "longDescription": "Holly (Ilex) is a traditional favorite for its glossy, evergreen leaves and bright red berries that provide winter interest. It's an excellent choice for creating hedges, screens, or as a structural plant in the garden. This hardy shrub is a staple for year-round beauty and can attract birds with its berries.",
+        "longDescription": "Holly with glossy evergreen leaves and bright red berries, perfect for hedges, screens, or year-round garden interest.",
         "ratings": {
             "count": 130,
             "score": 4.8
@@ -284,15 +256,15 @@ const INVENTORY = [
     },
     {
         "productNumber": "001",
-        "imageFile": "gardening-tool.jpg",
+        "imageFile": "gardening-tools.jpg",
         "skuID": "TLS",
         "catNumber": "06",
         "productName": "Gardening Tool Set",
         "category": "tools",
         "price": 34.99,
         "altText": "A set of three gardening tools: a trowel, a cultivator, and a transplanter.",
-        "shortDescription": "A three-piece set of essential gardening tools.",
+        "shortDescription": "Three-piece set of essential gardening tools.",
-        "longDescription": "This durable gardening tool set includes a trowel for planting, a cultivator for aerating soil, and a transplanter for moving seedlings. Each tool features a comfortable handle and a sturdy, rust-resistant head. It's the perfect starter set for anyone looking to get their hands dirty in the garden.",
+        "longDescription": "Gardening tool set includes trowel, cultivator, and transplanter with sturdy, rust-resistant heads and comfortable handles.",
         "ratings": {
             "count": 200,
             "score": 4.7
@@ -301,15 +273,15 @@ const INVENTORY = [
     },
     {
         "productNumber": "002",
-        "imageFile": "gardening-hose.jpg",
+        "imageFile": "garden-hose.jpg",
         "skuID": "TLS",
         "catNumber": "06",
         "productName": "Gardening Hose",
         "category": "tools",
         "price": 49.99,
         "altText": "A coiled green gardening hose.",
-        "shortDescription": "A kink-resistant and durable gardening hose.",
+        "shortDescription": "Durable, kink-resistant gardening hose.",
-        "longDescription": "Our premium gardening hose is made from a high-quality, flexible material that resists kinking and tangling. It's lightweight yet incredibly durable, making watering your garden a breeze. The hose comes with solid brass couplings for a secure, leak-free connection to your spigot.",
+        "longDescription": "Durable, flexible garden hose resists kinks, lightweight yet sturdy, with brass couplings for secure connections.",
         "ratings": {
             "count": 110,
             "score": 4.5
@@ -325,8 +297,8 @@ const INVENTORY = [
         "category": "tools",
         "price": 99.99,
         "altText": "A sturdy single-wheeled wheelbarrow with a metal basin.",
-        "shortDescription": "A heavy-duty wheelbarrow for all your hauling needs.",
+        "shortDescription": "Heavy-duty wheelbarrow for hauling tasks.",
-        "longDescription": "This robust wheelbarrow is an essential tool for any serious gardener or landscaper. It features a deep, heavy-duty steel basin and a strong single wheel for easy maneuverability, even on uneven terrain. Perfect for transporting soil, mulch, stones, and other heavy materials around your yard.",
+        "longDescription": "Heavy-duty single-wheel wheelbarrow with steel basin, ideal for transporting soil, mulch, stones, or other heavy materials.",
         "ratings": {
             "count": 65,
             "score": 4.9
@@ -342,8 +314,8 @@ const INVENTORY = [
         "category": "trees",
         "price": 45.99,
         "altText": "A young Honeycrisp apple tree in a pot.",
-        "shortDescription": "A young Honeycrisp apple tree (Malus domestica), known for its crisp and sweet fruit.",
+        "shortDescription": "Honeycrisp apple tree with crisp, sweet fruit.",
-        "longDescription": "The Honeycrisp apple tree is a popular choice for home orchards, celebrated for its exceptionally crisp texture and deliciously sweet flavor. This semi-dwarf tree is relatively easy to care for and produces a bountiful harvest of apples in the late summer and early fall. Plant it in a sunny spot to ensure a great yield.",
+        "longDescription": "Honeycrisp apple tree produces crisp, sweet apples and is easy to care for in a sunny home orchard.",
         "ratings": {
             "count": 140,
             "score": 4.8
@@ -359,8 +331,8 @@ const INVENTORY = [
         "category": "trees",
         "price": 39.99,
         "altText": "A young silver birch tree with smooth, white bark.",
-        "shortDescription": "A graceful silver birch tree, known for its iconic white bark.",
+        "shortDescription": "Graceful silver birch with iconic white bark.",
-        "longDescription": "The silver birch (Betula pendula) is a stunning ornamental tree prized for its peeling, silvery-white bark and elegant, pendulous branches. It provides year-round visual interest and is an excellent choice for a focal point in your yard. This hardy tree is fast-growing and adds a touch of classic beauty to any landscape.",
+        "longDescription": "Silver birch with elegant, pendulous branches and silvery-white bark, adding year-round beauty and a classic focal point.",
         "ratings": {
             "count": 95,
             "score": 4.6
@@ -376,8 +348,8 @@ const INVENTORY = [
         "category": "trees",
         "price": 55.99,
         "altText": "A young Japanese Maple tree with lobed red and orange leaves.",
-        "shortDescription": "A Japanese Maple tree, famous for its vibrant fall colors.",
+        "shortDescription": "Japanese Maple tree with vibrant fall colors.",
-        "longDescription": "Japanese Maple trees (Acer palmatum) are a native of landscapes in northeastern Asia, cherished for their beautiful, lobed leaves and spectacular fall foliage. This young tree will grow into a stunning accent to your garden, providing a vibrant backdrop and a brilliant display of reds, oranges, and yellows in the autumn. It's a robust and long-living addition to any property.",
+        "longDescription": "Japanese Maple with lobed red-orange leaves, adding vibrant autumn color and a stunning accent to any garden.",
         "ratings": {
             "count": 220,
             "score": 4.9

src/_data/testimonials.js

@@ -21,7 +21,7 @@ const TESTIMONIALS = [
     {
         "id": "T02",
         "clientName": "Morris F.",
-        "testimonial": "Thanks to the Gardening 101 Workshop with Bethany and Bloom Valley Nursery's amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
+        "testimonial": "Thanks to BVN's Workshops and amazing line of products, I won 'Best Azaleas' at the 2024 Royal Horticultural Society's American Cup!",
         "dateObtained": "2024-12-03"
     },
     {

src/_data/zohoCalendarEvents.js

@@ -115,10 +115,10 @@ module.exports = async function() {
                 isallday: event.isallday,
                 location: event.location,
                 displayDate: formatEventDate(event.dateandtime.start, event.dateandtime.end, event.isallday),
+                color: event.color,
             };
 
-            console.log(`Processing event with UID: ${basicEvent.uid}`);
+            // This logic is necessary to get the description from a second API call
-
             if (basicEvent.uid) {
                 const eventDetailsUrl = `${zohoApiUrl}/events/${basicEvent.uid}`;
                 console.log(`Making details API call to: ${eventDetailsUrl}`);
@@ -129,22 +129,41 @@ module.exports = async function() {
 
                 if (detailsResponse.ok) {
                     const detailsData = await detailsResponse.json();
-                    console.log(`Details API call for UID ${basicEvent.uid} successful. Received data:`, detailsData);
-                    
                     if (detailsData.events && detailsData.events.length > 0) {
                         basicEvent.description = detailsData.events[0].description;
                         console.log(`Description added for event UID: ${basicEvent.uid}`);
                     }
                 } else {
                     console.warn(`Failed to fetch details for event UID: ${basicEvent.uid}`);
-                    console.log(`Details response status: ${detailsResponse.status}`);
                 }
             }
+
+            // Assign category based on color
+            switch (basicEvent.color) {
+                case '#7CAA56':
+                    basicEvent.category = 'sales';
+                    break;
+                case '#FC6060':
+                    basicEvent.category = 'workshop';
+                    break;
+                case '#FFC464':
+                    basicEvent.category = 'community';
+                    break;
+                default:
+                    basicEvent.category = 'uncategorized';
+            }
+
             return basicEvent;
         });
 
         const normalizedEvents = await Promise.all(normalizedEventsPromises);
         console.log("All events processed. Final normalized events array:", normalizedEvents);
+
+        const filePath = path.resolve(__dirname, '..', '_data', 'eventsJson.js');
+        const fileContents = `module.exports = { normalizedEvents: ${JSON.stringify(normalizedEvents, null, 2)} };`;
+        fs.writeFileSync(filePath, fileContents, 'utf-8');
+        console.log(`Data successfully written to ${filePath}`);
+
         return normalizedEvents;
 
     } catch (error) {

src/_includes/base.njk

@@ -10,6 +10,11 @@
 
         <title>{{title}}</title>
         
+        <link rel="stylesheet" href="/styles/variables.css">
+        <link rel="stylesheet" href="/styles/base.css">
+        <link rel="stylesheet" href="/styles/header.css">
+        <link rel="stylesheet" href="/styles/footer.css">
+        <link rel="stylesheet" href="/styles/modals.css">
         {% if stylesheet %}
             {% for style in stylesheet %}
                 <link rel="stylesheet" href="{{ style }}">
@@ -19,7 +24,6 @@
         {% if hCAPTCHA %}
             <script src="{{ hCAPTCHA }}" async defer></script>
         {% endif %}
-
         {% if fontAwesome %}
             <script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
         {% endif %}
@@ -30,7 +34,7 @@
 
         {% include "header.njk" %}
 
-        <main>
+        <main class="main-content-container">
 
             {{ content | safe }}
 
@@ -40,11 +44,14 @@
 
         {% include "modals.njk" %}
 
+        <script src="/scripts/demo-modal.js"></script>
         {% if pageScripts %}
             {% for script in pageScripts %}
                 <script src="{{ script }}"></script>
             {% endfor %}
         {% endif %}
+        <script src="/scripts/cart.js"></script>
+        <script src="/scripts/newsletter.js">
 
     </body>
 </html>

src/_includes/category-nav.njk

@@ -0,0 +1,19 @@
+<div id="right-side">
+    <nav id="category-nav">
+        <div id="category-nav-container">
+            <h2>Categories</h2>
+            <hr>
+            <div class="categories">
+                <ul>
+                    <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
+                    <li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
+                    <li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
+                    <li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
+                    <li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
+                    <li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
+                    <li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</div>

src/_includes/footer.njk

@@ -1,5 +1,6 @@
 <!-- Footer Section -->
 <footer role="contentinfo">
+    <div class="footer-container">
         <div id="newsletter-container">
             
             <form id="newsletter-form">
@@ -15,7 +16,7 @@
                 </button>
             </form>
         </div>
-
+        <div class="footer-nav-links">
             <nav id="footer-nav">
                 <ul>
                     <li><a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a></li>
@@ -24,6 +25,7 @@
                     <li><a href="/community/" {% if currentPage == 'community' %}class="current-page" aria-current="page"{% endif %}>Community Events</a></li>
                 </ul>
             </nav>
+        </div>
         
         <div id="social-media">
             <h3>Check us out on social media!</h3>
@@ -55,4 +57,5 @@
         </div>
         
         <div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
+    </div>
 </footer>

src/_includes/header.njk

@@ -1,17 +1,20 @@
 <header role="banner">
 	<div class="header-container">	
-        <div class="header-left">
+		<div class="logo-name-cart">
-            <div class="logo">
+			<div class="logo-box">
-                <img
+				<img class="logo" src="/images/Client1_LogoPalette2_F0C06D.png"
-                    src="/images/Client1_LogoPalette2_F0C06D.png"
 							alt="Bloom Valley Nursery Logo">
 			</div>
+			<div class="name-box">
+				<p class="business-name">Bloom Valley Nursery</p>
+			</div>
+			<div class="cart-box">
+				<button id="shopping-cart" aria-label="Shopping Cart">
+					<i class="fa-solid fa-cart-shopping fa-2xl"></i>
+				</button>
+			</div>
 		</div>
 		
-        <div class="header-center">
-            <div class="business-name-container">
-                <p class="business-name">Bloom Valley Nursery</p>
-            </div>
 		<div class="nav-container">
 			<nav role="navigation" aria-label="Main Navigation">
 				<ul>
@@ -31,14 +34,4 @@
 			</nav>
 		</div>
 	</div>
-        
-        <div class="header-right">
-            <button id="menu-toggle" class="menu-toggle" aria-label="Open navigation menu" aria-expanded="false">
-                <i class="fa-solid fa-bars fa-2xl"></i>
-            </button>
-            <button id="shopping-cart" aria-label="Shopping Cart">
-                <i class="fa-solid fa-cart-shopping"></i>
-            </button>
-        </div>
-    </div>
 </header>

src/about.njk

@@ -4,73 +4,63 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "About - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/about.css"
-    - "/styles/footer.css"
-    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "about"
 pageScripts:
     - "/scripts/feedback.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
-<div class="about">
+  <div id="top" aria-labelledby="bvn-story">
-  <div id="main-top">
+    <section class="story-section">
+        <h2 id="bvn-story">The Story of Bloom Valley</h2>
+        <div class="video-border">
+          <div class="bvn-video" style="left: 0px; width: 600px; height: 338px; position: relative; border-radius: 15px">
+            <iframe src="https://video.pictory.ai/embed/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP" class="iframe"
+            title="The Story of Bloom Valley" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0; border-radus: 15px;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
+            </iframe>
+          </div>
+        </div>
+        <div class="story">
+          <p>    Legend has it that in 1822, Benjamin Bloom, his wife Violet, and their young daughter Nora embarked on a journey westward, driven by dreams of new opportunities in California. Along the way, they wandered through rolling hills, dense forests, and sparkling streams, until one fateful day, they stumbled upon a hidden valley unlike anything they had ever seen.
+          </p>
+          <p>
+            The valley was a riot of color, alive with flowers of every hue imaginable—delicate bluebells swaying in the breeze, golden sunflowers turning toward the sun, and rare, exotic blooms that seemed to glow with an otherworldly light. Birds of vibrant plumage sang from the trees, and a gentle stream wove through the meadow, reflecting the kaleidoscope of colors around it.
+          </p>
+          <p>
+            Benjamin, Violet, and little Nora were spellbound. They knew instantly that this magical place was meant to be their home. Abandoning their original plans, they settled in the valley, tending the land and nurturing its natural beauty. Over time, the area became known as Bloom Valley, a name that honored both the family who called it home and the flowers that had captured their hearts.
+          </p>
+          <p>
+            Generations later, the Bloom family's reverence for the valley's splendor continues to flourish. Today, on the very land where Benjamin and Violet first marveled at the blooms, stands Bloom Valley Nursery. Still family-owned and operated, siblings Bethany, Vincent, and Nathaniel Bloom carry forward a tradition of cultivating and sharing the natural beauty that enchanted their ancestors more than two centuries ago.
+          </p>
+          <p>
+            Each plant in the nursery is chosen with care, echoing the Bloom family's historic love for vibrant, rare, and enduring flora. Though the world around them has changed, the heart of Bloom Valley Nursery remains the same: a place where beauty, nature, and community grow hand in hand. From the first seed to the full bloom, the nursery is a celebration of life's simple joys. Let us help you cultivate joy, one bloom at a time.</p>
+          </p>
+        </div>
+    </section>
+  </div>
+  <div id="bottom">
     <section
     id="business-info"
-      aria-label="Hours of operation and contact info"
+    aria-label="Contact and Hours of Operation">
-    >
+      <h3>Contact & Hours</h3>
-      <h3>Contact Us</h3>
+      <p><strong>Phone:</strong><br> (555) 123-4567</p>
-      <div id="phone">
+      <p><strong>Monday - Friday:</strong><br> 9:00 AM - 6:00 PM</p>
-        <h4><strong>Phone:</strong></h4>
+      <p><strong>Saturday & Sunday:</strong><br> 10:00 AM - 5:00 PM</p>
-        <p>(555) 123-4567</p>
-      </div>
-      <h3>Hours of Operation</h3>
-      <div id="hours">
-        <h4><strong>Monday - Friday:</strong></h4>
-        <p>9:00 AM - 6:00 PM</p>
-        <h4><strong>Saturday & Sunday:</strong></h4>
-        <p>10:00 AM - 5:00 PM</p>
-      </div>
   </section>
-    <section class="story-section">
+    
-      <div id="story" aria-label="History of Bloom Valley Nursery">
+  <section id="feedback" aria-label="Feedback form">
-        <h2>The Story of Bloom Valley</h2>
-        <p>
-          Legend has it that in 1822, Benjamin Bloom, his wife Violet, and
-          their young daughter Nora stumbled upon a breathtaking valley
-          brimming with vibrant, rare flowers during their journey westward.
-          Enchanted by its beauty, they decided to settle there, abandoning
-          their plans to reach California. This picturesque haven became known
-          as Bloom Valley.
-        </p>
-        <p>
-          Today, on the very land where the Bloom family found their paradise,
-          stands Bloom Valley Nursery. Still family-owned and operated,
-          siblings Bethany, Vincent, and Nathaniel Bloom carry forward a
-          legacy of preserving and sharing the natural beauty that captivated
-          the hearts of their ancestors over two centuries ago.
-        </p>
-        <p>Though many things have changed through the years, our commitment to serving our community has remained the same. Let us help you cultivate joy, one bloom at a time!</p>
-      </div>
-    </section>
-  </div>
-  <div id="main-bottom">
-    <div id="feedback" aria-label="Feedback form">
     <div id="feedback-intro">
       <h2>We Want to Hear From You!</h2>
-        <h3>Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</h3>
+      <p class="special">Your feedback provides us with valuable insight into where we stand in our commitment to our neighbors, friends, and the entire Bloom Valley community.</p>
       <p>Feel free to contact us by filling out the form below if you have any questions, concerns, or simply want to tell us how we can better serve you in the future. You are also welcome to give us a call at the number above if you need to speak with someone directly. Our friendly staff can help answer your questions or guide you in placing custom orders as well!</p>
     </div>
     <div id="feedback-form">
       <form action="#" method="POST">
+        <div class="inputs">
           <div id="customer-info">
             <div id="name-field">
-              <label for="name">Name:</label>
+              <label for="name">Name: </label>
               <input
                 type="text"
                 id="name"
@@ -79,7 +69,7 @@ pageScripts:
                 required/>
             </div>
             <div id="phone-field">
-              <label for="tel">Phone Number:</label>
+              <label for="tel">Phone: </label>
               <input
                 type="tel"
                 id="tel"
@@ -88,7 +78,7 @@ pageScripts:
                 required/>
             </div>
             <div id="email-field">  
-              <label for="email">Email:</label>
+              <label for="email">Email: </label>
               <input
                 type="email"
                 id="email"
@@ -97,6 +87,7 @@ pageScripts:
                 required/>
             </div>
           </div>
+          <div class="message-box">
             <div id="customer-message">
                 <div id="message-field">
                 <label for="message">Message:</label>
@@ -108,7 +99,7 @@ pageScripts:
                   required>
                 </textarea>
               </div>
-            <div id="form-submit-btn">
+            </div>
               <button
                 id="form-submit"
                 type="submit"
@@ -119,5 +110,6 @@ pageScripts:
         </div>
       </form>
     </div>
-  </div>
+  </section>
 </div>
+

src/community.njk

@@ -4,47 +4,67 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Community Events - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/community.css"
-    - "/styles/footer.css"
-    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "community"
 pageScripts:
-    - "/scripts/cart.js"
+    - "/scripts/events-carousel.js"
-    - "/scripts/newsletter.js"
 ---
 <div class="community">
 <h1>Mark Your Calendars!</h1>
 <div id="calendar-events-container">
   <section class="events" aria-label="List of upcoming local events">
+      
     <div class="upcoming-events">
       <h2>Upcoming Events</h2>
-      {% for event in zohoCalendarEvents %}
+      <p class="notice">Check out the Upcoming Events at Bloom Valley Nursery and around the community!<br> Our BVN Workshops are for all ages and free of charge. We ask that you use our <a class="com-link" href="../about/#feedback" target="_blank" rel="noopener noreferrer">contact form here</a> to sign up for BVN Workshops in advance. Reservations are not required, though, and we will make space for all who attend.</p>
-        <div id="{{ event.uid }}" class="zoho-event">
+      <div id="events-navigation">
-          {% if event.title %}
+        <ul class="event-categories">
-            <h3 class="title">{{ event.title }}</h3>
+          <li class="workshops-btn enav"><a href="/community/?category=workshop#" class="cat-btn">Workshops</a></li>
-          {% endif %}
+          <li class="celebrations-btn enav"><a href="/community/?category=community#" class="cat-btn ">Community Celebrations</a></li>
-          <p class="display-date">{{ event.displayDate }}</p>
+          <li class="sales-btn enav"><a href="/community/?category=sales#" class="cat-btn">Plant Sales</a></li>
-          {% if event.location %}
+          <li class="all-btn enav"><a href="/community/?category=all#" class="cat-btn">All Events</a></li>
-            <p class="location">Location: {{ event.location }}</p>
+        </ul>
-          {% endif %}
-          {% if event.description %}
-            <p class="description">{{ event.description }}</p>
-          {% endif %}
-      </div>
-    {% endfor %}
       </div>
+
+      <div class="interactive-events">
+        <div class="events-left">
           <div class="calendar">
             <iframe src="https://calendar.zoho.com/zc/ui/embed/#calendar=zz0801123006fa33fd29e1610f845b1a39bac3a52e92215b45d6a6f982e3a69c351d4e7b0be038133d1988f6ed212d5f2bd86e7bef&title=Bloom%20Valley%20Nursery&type=1&language=en&timezone=America%2FChicago&showTitle=1&showTimezone=1&startingDayOfWeek=0&timeFormat=0&view=month&showDetail=1&theme=1&showAttendee=0&showSwitchingViews=0&expandAllday=0&eventColorType=light&showAllEvents=0" title="Bloom Valley Nursery"width=650 height=500 frameBorder="0" scrolling="no"></iframe>
           </div>
+        </div>
+
+        <div class="events-right">
+          <div class="scroll-direction">
+            <button
+            id="scroll-up"
+            aria-label="Scroll events up"
+            aria-controls="event-carousel"
+            class="fa-solid fa-chevron-up"
+            >
+            </button>
+          </div>
+          <div id="event-list">
+            <!-- Event List will be populated here -->
+          </div>
+          <div class="scroll-direction">
+            <button
+            id="scroll-down"
+            aria-label="Scroll events down"
+            aria-controls="event-carousel"
+            class="fa-solid fa-chevron-down"
+            >
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   </section>
   <div class="add-events">
     <p>
       For more details, to add events to this page, or to leave feedback,
-      <a
+      <a class="com-link"
         href="/about/#feedback"
         aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
         >click here</a

src/credits.njk

@@ -4,29 +4,35 @@ metaDesc: "Credit & attribution for the contributors of this demo eCommerce webs
 seoIndexing: true
 title: "Credits & Attribution - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/credits.css"
-    - "/styles/footer.css"
-    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: false
 pageScripts:
     - "/scripts/tooltips.js"
-    - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <div class="credits-container">
+    <div class="content">
         <div class="intro">
-        <h1>Credits & Attributions</h1>
+            <h1 class="cred-attr">Credits & Attributions</h1>
-        <p>A heartfelt <strong>Thank You</strong> is extended to these creators and the platforms that host their work. Their royalty-free contributions to the public helped make this demo possible.</p> 
+            <p class="thanks">A heartfelt <strong class="strong-thanks">Thank You</strong> is extended to these creators and the platforms that host their work.<br> Their royalty-free contributions to the public helped make this demo possible.</p> 
             <p id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
 
-    <div>
+        <div class="video-box">
-        <ul class="credits-list">
+            <h2 class="videos">Video Content</h2>
+            <ul class="videos-credits-list">
+                <li class="credit" data-tooltip="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">
+                    <div class="meta">
+                        <p>
+                            <a href="https://video.pictory.ai/202509100421159152ab7b3c7e5dc46a29dec7057c108b158/20250910051954092q4MZ6z6NHgYUlrP">The Story of Bloom Valley</a> was created by <a class="creator" href="https://dlseitz.dev" target="_blank" rel="noopener noreferrer">Derek L. Seitz</a> with <a class="source" href="https://pictory.ai/" target="_blank" rel="noopener noreferrer">Pictory.AI</a> under the <a class="license" href="https://pictory.ai/terms-of-service#:~:text=(c).%20Third%2DParty,new%20Pictoried%20Content." target="_blank" rel="noopener noreferrer">Pictory.AI Terms of Service</a>.
+                        </p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="images-box">
+            <h2 class="images">Image Content</h2>
+            <ul class="images-credits-list">
             {% for credit in credits.CREDITS %}
                 <li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
                     <div class="thumb">
@@ -37,7 +43,7 @@ pageScripts:
                             loading="lazy" decoding="async">
                     </div>
 
-                <div class="meta" >
+                    <div class="meta">
                         <p>
                             Photo by <a class="creator" href="{{ credit.creatorUrl }}" target="_blank"
                                 rel="noopener noreferrer">{{ credit.creator }}</a> at <a class="source" href="{{ credit.sourceUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.host }}</a> under the <a class="license" href="{{ credit.licenseUrl }}" target="_blank" rel="noopener noreferrer">{{ credit.license }}</a>                        .
@@ -47,4 +53,5 @@ pageScripts:
                 {% endfor %}
             </ul>
         </div>
+    </div>
 </div>

src/events.json.njk

@@ -0,0 +1,4 @@
+---
+permalink: /data/events.json
+---
+{{ eventsJson.normalizedEvents | dump | safe}}

src/gallery.njk

@@ -4,22 +4,16 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Gallery - Bloom Valley Nursery Demo"
 stylesheet: 
-  - "/styles/variables.css"
-  - "/styles/base.css"
-  - "/styles/header.css"
   - "/styles/gallery.css"
-  - "/styles/footer.css"
+  - "/styles/category-nav.css"
-  - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "gallery"
 pageScripts:
     - "/scripts/gallery-carousel.js"
-    - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <div id="gallery-top">
+  <div class="left-side">
     <section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
       <h2>Products by Category</h2>
       <div id="product-category-card">
@@ -41,24 +35,12 @@ pageScripts:
         >
         </button>
       </div>
-  </section>
+      <div id="gallery-bottom">
-  <aside id="right-aside">
-    <div id="category-nav-container" aria-label="Available Product Categories">
-      <h2>Shop by Category</h2>
-      <div class="categories">
-        <ul>
-          <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
-          <li><a href="/gallery/?category=trees#" class="cat-btn">Shrubs</a></li>
-          <li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
-          <li><a href="/gallery/?category=indoor#" class="cat-btn">Patio</a></li>
-          <li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
-          <li><a href="/gallery/?category=tools#" class="cat-btn">Accessories</a></li>
-          <li><a href="/gallery/?category=tools#" class="cat-btn">Landscaping</a></li>
-        </ul>
-      </div>
-    </div>
-  </aside>
-</div>
-<div id="gallery-bottom">
         <button id="cart-details">View Shopping Cart</button>
+      </div>
+    </section>
+  </div>
+  <div class="right-side">
+    {% include "category-nav.njk" %}
+  </div>
 </div>

src/index.njk

@@ -4,22 +4,17 @@ metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 seoIndexing: false
 title: "Landing - Bloom Valley Nursery Demo"
 stylesheet: 
-    - "/styles/variables.css"
-    - "/styles/base.css"
-    - "/styles/header.css"
     - "/styles/index.css"
-    - "/styles/footer.css"
+    - "/styles/category-nav.css"
-    - "/styles/modal.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "index"
 pageScripts:
     - "/scripts/script.js"
-    - "/scripts/cart.js"
-    - "/scripts/newsletter.js"
 ---
 
 <!-- Main Content Section -->
-<div id="left-side">
+<div class="main-content-container">
+	<div id="left-side">
 	
 	<!-- Promo Feature -->
 		<section id="promos-container">
@@ -38,14 +33,14 @@ pageScripts:
 			<h2 id="testimonials-heading">What Others Say</h2>
 			{% for item in testimonials.TESTIMONIALS %}
 				<div id="{{ id }}" class="testimonial-item">
-				<h3 class="client-name">{{ item.clientName }} said<h3>
+					<h3 class="client-name">{{ item.clientName }} said</h3>
 					<p class="client-quote">"{{ item.testimonial }}"</p>
 				</div>
 			{% endfor %}
 		</section>
-</div>
+	</div>
 
-<div id="center">
+	<div id="center">
 		<section id="featured-container">
 			<h2 class="featured-heading">Featured Items</h2>
 			<ul id="featured-list">
@@ -56,7 +51,7 @@ pageScripts:
 								<a href="/gallery/">
 					<h3 class="product-name">{{ item.productName }}</h3>
 									<figure>
-									<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
+										<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" width="480" height="320" class="featured-item">
 										<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
 									</figure>
 									<p class="price">${{ item.price }}</p>
@@ -67,23 +62,8 @@ pageScripts:
 				{% endfor %}
 			</ul>
 		</section>
-</div>
+	</div>
+
+	{% include "category-nav.njk" %}
 	
-<div id="right-side">
-  <nav id="category-nav">
-    <div id="category-nav-container">
-      <h2>Shop by Category</h2>
-      <div class="categories">
-        <ul>
-          <li><a href="/gallery/?category=trees#" class="cat-btn">Trees</a></li>
-            <li><a href="/gallery/?category=shrubs#" class="cat-btn">Shrubs</a></li>
-            <li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
-            <li><a href="/gallery/?category=patio#" class="cat-btn">Patio</a></li>
-            <li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
-            <li><a href="/gallery/?category=accessories#" class="cat-btn">Accessories</a></li>
-            <li><a href="/gallery/?category=landscaping#" class="cat-btn">Landscaping</a></li>
-          </ul>
-      </div>
-    </div>
-  </nav>
 </div>

src/inventory.json.njk

@@ -0,0 +1,5 @@
+---
+permalink: "/data/inventory.json"
+---
+
+{{ inventory.INVENTORY | dump | safe }}

src/scripts/demo-modal.js

@@ -0,0 +1,54 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // ================== DEMO NOTICE MODAL ==================
+    if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
+        let modal = document.createElement("div");
+        modal.id = "demoModal";
+        modal.style.position = "fixed";
+        modal.style.left = "0";
+        modal.style.top = "0";
+        modal.style.width = "100%";
+        modal.style.height = "100%";
+        modal.style.background = "rgba(0, 0, 0, 0.7)";
+        modal.style.display = "flex";
+        modal.style.alignItems = "center";
+        modal.style.justifyContent = "center";
+        modal.style.zIndex = "1000";
+
+        let modalContent = document.createElement("div");
+        modalContent.style.background = "white";
+        modalContent.style.padding = "20px";
+        modalContent.style.borderRadius = "10px";
+        modalContent.style.textAlign = "center";
+        modalContent.style.width = "80%";
+        modalContent.style.maxWidth = "400px";
+
+        let heading = document.createElement("h2");
+        heading.innerText = "Demo Notice";
+
+        let message = document.createElement("p");
+        message.innerText =
+            "This site is best viewed using a desktop browser. It is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
+
+        let closeButton = document.createElement("button");
+        closeButton.innerText = "I Understand";
+        closeButton.style.padding = "10px 20px";
+        closeButton.style.marginTop = "15px";
+        closeButton.style.border = "none";
+        closeButton.style.background = "#007bff";
+        closeButton.style.color = "white";
+        closeButton.style.fontSize = "16px";
+        closeButton.style.cursor = "pointer";
+        closeButton.style.borderRadius = "5px";
+
+        closeButton.addEventListener("click", function () {
+            modal.style.display = "none";
+            sessionStorage.setItem("demoNoticeAcknowledged", "true");
+        });
+
+        modalContent.appendChild(heading);
+        modalContent.appendChild(message);
+        modalContent.appendChild(closeButton);
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+    }
+});

src/scripts/events-carousel.js

@@ -0,0 +1,201 @@
+// events-carousel.js
+
+// --- State Variables ---
+let allEvents = [];
+let selectedEvents = [];
+let currentIndex = 0;
+
+// --- Helpers ---
+const parseZohoTimestamp = (raw) => {
+  if (!raw && raw !== 0) return new Date(0);
+  const s = String(raw).trim();
+
+  let m = s.match(/^(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})([+-]\d{4}|Z)?$/i);
+  if (m) {
+    const [, Y, Mo, D, hh, mm, ss, tz] = m;
+    let tzPart = '';
+    if (tz && tz.toUpperCase() !== 'Z') tzPart = tz.slice(0,3) + ':' + tz.slice(3);
+    else if (tz && tz.toUpperCase() === 'Z') tzPart = 'Z';
+    const iso = `${Y}-${Mo}-${D}T${hh}:${mm}:${ss}${tzPart}`;
+    const d = new Date(iso);
+    if (!isNaN(d)) return d;
+  }
+
+  m = s.match(/^(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})([+-]\d{4}|Z)?$/i);
+  if (m) {
+    const [, Y, Mo, D, hh, mm, tz] = m;
+    let tzPart = '';
+    if (tz && tz.toUpperCase() !== 'Z') tzPart = tz.slice(0,3) + ':' + tz.slice(3);
+    else if (tz && tz.toUpperCase() === 'Z') tzPart = 'Z';
+    const iso = `${Y}-${Mo}-${D}T${hh}:${mm}:00${tzPart}`;
+    const d = new Date(iso);
+    if (!isNaN(d)) return d;
+  }
+
+  m = s.match(/^(\d{4})(\d{2})(\d{2})$/);
+  if (m) {
+    const [, Y, Mo, D] = m;
+    return new Date(Number(Y), Number(Mo) - 1, Number(D));
+  }
+
+  const tryDate = new Date(s);
+  if (!isNaN(tryDate)) return tryDate;
+
+  const mmdd = s.match(/^(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{2,4})$/);
+  if (mmdd) {
+    let month = parseInt(mmdd[1], 10);
+    let day = parseInt(mmdd[2], 10);
+    let year = parseInt(mmdd[3], 10);
+    if (year < 100) year += 2000;
+    return new Date(year, month - 1, day);
+  }
+
+  return new Date(0);
+};
+
+const eventTimestamp = (ev) => {
+  if (!ev) return 0;
+  const candidate = ev.start || ev.displayDate || ev.date || ev.eventDate || ev.createdAt || ev.created;
+  return parseZohoTimestamp(candidate).getTime();
+};
+
+// --- Render the visible items ---
+const renderEvents = () => {
+  const eventList = document.getElementById("event-list");
+  if (!eventList) return;
+  eventList.innerHTML = "";
+
+  if (selectedEvents.length === 0) {
+    eventList.innerHTML = `<p class="no-events-message">No events found for this category.</p>`;
+    return;
+  }
+
+  const lastIndex = selectedEvents.length - 1;
+  let visibleIndexes = [];
+
+  if (selectedEvents.length <= 3) {
+    visibleIndexes = Array.from({ length: selectedEvents.length }, (_, i) => i);
+  } else if (currentIndex === 0) {
+    visibleIndexes = [0, 1, 2];
+  } else if (currentIndex === lastIndex) {
+    visibleIndexes = [lastIndex - 2, lastIndex - 1, lastIndex];
+  } else {
+    visibleIndexes = [currentIndex - 1, currentIndex, currentIndex + 1];
+  }
+
+  visibleIndexes = visibleIndexes.filter(i => i >= 0 && i <= lastIndex);
+
+  visibleIndexes.forEach((index) => {
+    const event = selectedEvents[index];
+    if (!event) return;
+
+    const card = document.createElement("div");
+    card.className = "event-card";
+
+    card.addEventListener('click', () => {
+      if (index !== currentIndex) {
+        currentIndex = index;
+        renderEvents();
+      }
+    });
+
+    if (index === currentIndex) {
+      card.classList.add("is-expanded");
+      card.innerHTML = `
+        <h3 class="event-title ${event.category}">${event.title || ''}</h3>
+        <p class="event-date">${event.displayDate || event.start || ''}</p>
+        <p class="event-location">${event.location ? `Location: ${event.location}` : ''}</p>
+        <p class="event-description">${event.description ? event.description : ''}</p>
+      `;
+    } else {
+      card.classList.add("is-collapsed");
+      card.innerHTML = `
+        <h3 class="event-title ${event.category}">${event.title || ''}</h3>
+        <p class="event-date">${event.displayDate || event.start || ''}</p>
+      `;
+      card.style.cursor = 'pointer';
+    }
+
+    eventList.appendChild(card);
+  });
+};
+
+// --- Navigation Functions ---
+const scrollUp = () => {
+  if (currentIndex > 0) {
+    currentIndex--;
+    renderEvents();
+  }
+};
+
+const scrollDown = () => {
+  if (currentIndex < selectedEvents.length - 1) {
+    currentIndex++;
+    renderEvents();
+  }
+};
+
+// --- Category Update and Filtering ---
+const updateEventList = (category) => {
+  const scrollUpButton = document.getElementById('scroll-up');
+  const scrollDownButton = document.getElementById('scroll-down');
+  if (scrollUpButton) scrollUpButton.removeEventListener('click', scrollUp);
+  if (scrollDownButton) scrollDownButton.removeEventListener('click', scrollDown);
+
+  if (category === 'all') {
+    selectedEvents = allEvents.slice();
+  } else {
+    selectedEvents = allEvents.filter(event => event.category === category);
+  }
+
+  selectedEvents.sort((a, b) => eventTimestamp(a) - eventTimestamp(b));
+
+  currentIndex = 0;
+  renderEvents();
+
+  if (scrollUpButton) scrollUpButton.addEventListener('click', scrollUp);
+  if (scrollDownButton) scrollDownButton.addEventListener('click', scrollDown);
+};
+
+// --- Initialization ---
+document.addEventListener('DOMContentLoaded', () => {
+  fetch("../data/events.json")
+    .then(response => {
+      if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+      return response.json();
+    })
+    .then(data => {
+      allEvents = Array.isArray(data) ? data : (data.normalizedEvents || []);
+      console.log("Events data loaded successfully:", allEvents);
+
+      const categoryButtons = document.querySelectorAll(".cat-btn");
+      categoryButtons.forEach(button => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+
+          // --- Active button logic ---
+          categoryButtons.forEach(btn => btn.parentElement.classList.remove('active'));
+          button.parentElement.classList.add('active');
+
+          const url = new URL(button.href);
+          const category = url.searchParams.get('category');
+          updateEventList(category);
+        });
+      });
+
+      // Set default category and active button
+      const currentUrl = new URL(window.location.href);
+      const defaultCategory = currentUrl.searchParams.get('category') || 'all';
+      updateEventList(defaultCategory);
+      categoryButtons.forEach(btn => {
+        const url = new URL(btn.href);
+        const btnCategory = url.searchParams.get('category');
+        if (btnCategory === defaultCategory) btn.parentElement.classList.add('active');
+      });
+    })
+    .catch(error => {
+      console.error('Problem fetching events data:', error);
+      const eventList = document.getElementById("event-list");
+      if (eventList) eventList.innerHTML = `<p class="error-message">Failed to load events. Please try again later.</p>`;
+    });
+});

src/scripts/gallery-carousel.js

@@ -1,130 +1,146 @@
-// Gallery Carousel .js
+// --- Carousel State ---
-const products = {
+let allProducts = [];
-  trees: [
+let selectedProducts = [];
-    { id: 1, name: "Crepe Mertyl Tree", description: "Beautiful Crepe Mertyl tree.", price: 55.00, image: "images/trees/crepe-mertyl.jpg" },
+let currentIndex = 0;
-    { id: 2, name: "Silver Birch Tree", description: "Sturdy Silver Birch tree.", price: 45.00, image: "images/trees/silver-birch.jpg" },
+
-    { id: 3, name: "Apple Tree", description: "Fruitful apple tree.", price: 35.00, image: "images/trees/apple-tree.jpg" },
+// --- Helpers ---
-    { id: 4, name: "Potted Spruce Tree", description: "Miniature Spruce in a white planter.", price: 35.00, image: "images/trees/potted-spruce.jpg" }
+const getProductId = (product) => {
-  ],
+  return `${product.skuID}-${product.catNumber}-${product.productNumber}`;
-  indoor: [
-    { id: 5, name: "Aloe Plant", description: "Thrives with 6-8 hours of direct sunlight a day.", price: 15.00, image: "images/indoor/aloe-plant.jpg" },
-    { id: 6, name: "Peperonia Plant", description: "Low-maintenance and perfect for spaces with lots of natural light.", price: 12.50, image: "images/indoor/peperonia.jpg" },
-    { id: 7, name: "String-of-Pearls Plant", description: "Best placed in east-facing windows or on shaded patios and balconies.", price: 20.00, image: "images/indoor/string-of-pearls.jpg" },
-    { id: 12, name: "Venus Fly Trap", description: "Perfect for young botanists or your fly problem!", price: 12.50, image: "images/indoor/venus-fly-trap.jpg"}
-  ],
-  tools: [
-    { id: 8, name: "Watering Cans", description: "Galvanized aluminum watering cans (x2).", price: 25.00, image: "images/tools/watering-cans.jpg" },
-    { id: 9, name: "Potting Soil", description: "Premium-blend of nutrient-rich potting soil - 10 lb bag.", price: 8.00, image: "images/tools/potting-soil.png" },
-    { id: 10, name: "Bird House", description: "Handmade wooden bird house for hanging or mounting.", price: 11.00, image: "images/tools/birdhouse.jpg" },
-    { id: 11, name: "Gardening Tools", description: "Wooden handled gardening tools.", price: 20.00, image: "images/tools/gardening-tools.jpg"}
-  ]
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+// --- Render the three visible items ---
-  console.log("DOM fully loaded and parsed"); // Check if the DOM is ready
+const renderCarousel = () => {
-
-  const productCarousel = document.getElementById('product-carousel');
-  const scrollLeftButton = document.getElementById('scroll-left');
-  const scrollRightButton = document.getElementById('scroll-right');
-  const categoryButtons = document.querySelectorAll('.cat-btn');
-
-  // Scroll button functionality
-  scrollLeftButton.addEventListener('click', () => {
-    productCarousel.scrollBy({ left: -300, behavior: 'smooth' });
-  });
-
-  scrollRightButton.addEventListener('click', () => {
-    productCarousel.scrollBy({ left: 300, behavior: 'smooth' });
-  });
-
-  // Map buttons to categories
-  categoryButtons.forEach(button => {
-    button.addEventListener('click', (event) => {
-      event.preventDefault(); // Prevent default navigation
-      const url = new URL(button.href); // Parse the URL
-      const category = url.searchParams.get('category'); // Get category from the query parameter
-      updateProductList(category); // Update the product list
-    });
-  });
-
-  // Load default category or the one from the current URL
-  const currentUrl = new URL(window.location.href);
-  const defaultCategory = currentUrl.searchParams.get('category') || 'trees';
-  updateProductList(defaultCategory);
-});
-
-function updateScrollButtons() {
-  const scrollLeftButton = document.getElementById('scroll-left');
-  const scrollRightButton = document.getElementById('scroll-right');
-  const productCarousel = document.getElementById('product-carousel');
-
-  scrollLeftButton.style.display = productCarousel.scrollLeft === 0 ? 'none' : 'block';
-  scrollRightButton.style.display =
-    productCarousel.scrollWidth - productCarousel.clientWidth === productCarousel.scrollLeft
-      ? 'none'
-      : 'block';
-}
-
-function updateProductList(category) {
   const productList = document.getElementById("product-list");
-  if (!productList) {
+  productList.innerHTML = "";
-    console.error("Element with ID 'product-list' not found in the DOM.");
+
+  if (selectedProducts.length === 0) return;
+
+  // Calculate indexes for left, center, right
+  const leftIndex = (currentIndex - 1 + selectedProducts.length) % selectedProducts.length;
+  const centerIndex = currentIndex;
+  const rightIndex = (currentIndex + 1) % selectedProducts.length;
+
+  const visibleIndexes = [leftIndex, centerIndex, rightIndex];
+
+  visibleIndexes.forEach((idx, position) => {
+    const product = selectedProducts[idx];
+    const productId = getProductId(product);
+
+    const card = document.createElement("div");
+    card.className = "product-card";
+    if (position === 1) card.classList.add("is-centered");
+
+    card.dataset.productId = productId;
+    card.innerHTML = `
+      <img src="../images/_s-thumbs/${product.category}/${product.imageFile}" alt="${product.altText}">
+      <h3>${product.productName}</h3>
+      <p class="description">${position === 1 ? product.longDescription : product.shortDescription}</p>
+      <p>$${product.price}</p>
+      <button class="add-to-cart-btn" data-product-id="${productId}">Add to Cart</button>
+    `;
+
+    // Event listeners
+    card.querySelector('.add-to-cart-btn')
+      .addEventListener('click', () => addToCart(productId, allProducts));
+
+    card.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (position === 0) prevProduct();   // left → move backward
+      if (position === 2) nextProduct();   // right → move forward
+    });
+
+    productList.appendChild(card);
+  });
+};
+
+// --- Navigation ---
+const nextProduct = () => {
+  currentIndex = (currentIndex + 1) % selectedProducts.length;
+  renderCarousel();
+};
+
+const prevProduct = () => {
+  currentIndex = (currentIndex - 1 + selectedProducts.length) % selectedProducts.length;
+  renderCarousel();
+};
+
+// --- Category Update ---
+const updateProductList = (category) => {
+  const productList = document.getElementById("product-list");
+  if (!productList) return console.error("Element with ID 'product-list' not found.");
+
+  // Remove active class from all buttons
+  document.querySelectorAll(".categories ul li").forEach(li => {
+    li.classList.remove('active');
+  });
+
+  // Add active class to the button for the current category
+  document.querySelectorAll(".cat-btn").forEach(button => {
+    const url = new URL(button.href);
+    const btnCategory = url.searchParams.get('category');
+    if (btnCategory === category) {
+      button.parentElement.classList.add('active');
+    }
+  });
+
+  selectedProducts = allProducts.filter(product => product.category === category);
+  currentIndex = 0;
+
+  if (selectedProducts.length === 0) {
+    console.error(`No products found for category: ${category}`);
+    productList.innerHTML = "";
     return;
   }
 
-  productList.innerHTML = ""; // Clear existing products
+  renderCarousel();
-  console.log(`Updating product list for category: ${category}`);  // Debugging line
+};
 
-  const selectedProducts = products[category];
+// --- Cart ---
+const addToCart = (productId, products) => {
+  const product = products.find(p => getProductId(p) === productId);
+  if (!product) return;
 
-  if (selectedProducts) {
-    selectedProducts.forEach(product => {
-      const productCard = document.createElement("div");
-      productCard.className = "product-card";
-
-      console.log(`Creating product card for: ${product.name}`); // Debugging line
-
-      productCard.innerHTML = `
-        <img src="${product.image}" alt="${product.name}">
-        <h3>${product.name}</h3>
-        <p>${product.description}</p>
-        <p>$${product.price}</p>
-        <button class="add-to-cart-btn" data-product-id="${product.id}">Add to Cart</button>
-      `;
-      productList.appendChild(productCard);
-
-      // Add event listener for "Add to Cart" button
-      const addToCartButton = productCard.querySelector('.add-to-cart-btn');
-      addToCartButton.addEventListener('click', () => {
-        addToCart(product.id);
-      });
-    });
-  } else {
-    console.error(`No products found for category: ${category}`);
-  }
-}
-
-function addToCart(productId) {
-  const product = findProductById(productId);
-  if (product) {
   let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
-    const existingProduct = cart.find(item => item.id === productId);
+  const existing = cart.find(item => getProductId(item) === productId);
 
-    if (existingProduct) {
+  if (existing) {
-      existingProduct.quantity++;
+    existing.quantity++;
   } else {
     cart.push({ ...product, quantity: 1 });
   }
 
   sessionStorage.setItem('cart', JSON.stringify(cart));
-    alert(`${product.name} has been added to your cart!`);
+  alert(`${product.productName} has been added to your cart!`);
-  }
+};
-}
 
-function findProductById(productId) {
+// --- Init ---
-  for (let category in products) {
+document.addEventListener('DOMContentLoaded', () => {
-    const product = products[category].find(item => item.id === productId);
+  fetch("../data/inventory.json")
-    if (product) return product;
+    .then(r => r.json())
-  }
+    .then(products => {
-  return null;
+      allProducts = products;
-}
+
+      const scrollLeftButton = document.getElementById('scroll-left');
+      const scrollRightButton = document.getElementById('scroll-right');
+      const categoryButtons = document.querySelectorAll(".cat-btn");
+
+      scrollLeftButton.addEventListener('click', prevProduct);
+      scrollRightButton.addEventListener('click', nextProduct);
+
+      categoryButtons.forEach(button => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+          const url = new URL(button.href);
+          const category = url.searchParams.get('category');
+          updateProductList(category);
+        });
+      });
+
+      const currentUrl = new URL(window.location.href);
+      const defaultCategory = currentUrl.searchParams.get('category') || 'trees';
+      updateProductList(defaultCategory);
+    })
+    .catch(err => console.error('Problem fetching products:', err));
+});

src/scripts/script.js

@@ -1,58 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
-    // ================== DEMO NOTICE MODAL ==================
-    if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
-        let modal = document.createElement("div");
-        modal.id = "demoModal";
-        modal.style.position = "fixed";
-        modal.style.left = "0";
-        modal.style.top = "0";
-        modal.style.width = "100%";
-        modal.style.height = "100%";
-        modal.style.background = "rgba(0, 0, 0, 0.7)";
-        modal.style.display = "flex";
-        modal.style.alignItems = "center";
-        modal.style.justifyContent = "center";
-        modal.style.zIndex = "1000";
 
-        let modalContent = document.createElement("div");
+    // ================== PROMOS CAROUSEL ==================
-        modalContent.style.background = "white";
-        modalContent.style.padding = "20px";
-        modalContent.style.borderRadius = "10px";
-        modalContent.style.textAlign = "center";
-        modalContent.style.width = "80%";
-        modalContent.style.maxWidth = "400px";
-
-        let heading = document.createElement("h2");
-        heading.innerText = "Demo Notice";
-
-        let message = document.createElement("p");
-        message.innerText =
-            "This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
-
-        let closeButton = document.createElement("button");
-        closeButton.innerText = "I Understand";
-        closeButton.style.padding = "10px 20px";
-        closeButton.style.marginTop = "15px";
-        closeButton.style.border = "none";
-        closeButton.style.background = "#007bff";
-        closeButton.style.color = "white";
-        closeButton.style.fontSize = "16px";
-        closeButton.style.cursor = "pointer";
-        closeButton.style.borderRadius = "5px";
-
-        closeButton.addEventListener("click", function () {
-            modal.style.display = "none";
-            sessionStorage.setItem("demoNoticeAcknowledged", "true");
-        });
-
-        modalContent.appendChild(heading);
-        modalContent.appendChild(message);
-        modalContent.appendChild(closeButton);
-        modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-    }
-
-    // ================== SHOPPER PROMO CAROUSEL ==================
     const promo = document.querySelectorAll(".promo-item");
     let currentIndexPromo = 0;
 
@@ -71,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
     showNextPromo();
     setInterval(showNextPromo, 2250);
 
-    // ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
+    // ================== TESTIMONIALS CAROUSEL ==================
     const testimonials = document.querySelectorAll(".testimonial-item");
     let currentIndexTestimonials = 0;
 
@@ -91,19 +39,6 @@ document.addEventListener("DOMContentLoaded", () => {
     setInterval(showNextTestimonial, 3500);
 
     // ================== FEATURED ITEMS CAROUSEL ==================
-    /*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
-    let currentIndex = 0;
-
-    function showNextItem() {
-        featuredItems[currentIndex].classList.remove("active");
-        currentIndex = (currentIndex + 1) % featuredItems.length;
-        featuredItems[currentIndex].classList.add("active");
-    }
-
-    featuredItems[currentIndex].classList.add("active");
-    setInterval(showNextItem, 3000);*/
-
-    // ================== UPDATED FEATURED ITEMS CAROUSEL ==================
     const featuredItems = document.querySelectorAll(".featured-card");
     let currentIndexFeatured = 0;
 

src/styles/about.css

@@ -1,212 +1,255 @@
 /* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
-.about {
+#top {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: var(--color-soft-golden);
+  border: solid 3px var(--color-destin-sand);
+  border-radius: 15px;
+  box-shadow: var(--shadow-medium);
+
 }
 
-#main-top {
+.story-section {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  gap: 30px;
+  align-items: center;
-  width: 90vw;
+  justify-content: center;
+  width: 95%;
+  margin: 20px 0;
   height: auto;
+  background-color: var(--color-pale-green);
+  border: solid 3px var(--color-destin-sand);
+  border-radius: 15px;
+  box-shadow: var(--shadow-medium);
+
 }
 
-#business-info {
+.video-border {
+  border-bottom: solid 3px var(--color-destin-sand);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.bvn-video {
   display: block;
   align-items: center;
-  width: 25vw;
+  border: solid 3px var(--color-destin-sand);
-  background-color: var(--color-soft-golden);
+  border-radius: 15px;
-  border: solid var(--color-destin-sand);
-  border-radius: 10px;
   box-shadow: var(--shadow-medium);
+  margin: 10px auto;
 }
 
-#phone,
+.iframe {
-#hours {
+  border-radius: 15px;
-  background-color: var(--color-destin-sand);
-  border: solid var(--color-light-teal);
-  border-radius: 10px;
-  margin: 5px 10px;
 }
 
-#business-info h3,
+h2#bvn-story {
-#feedback-intro h2 {
+  font-size: 2.25rem;
-  font-size: 1.875rem;
-  text-align: center;
-  text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
-  -0.5px -0.5px 2px var(--color-dark-green),
-  -0.5px 0.5px 2px var(--color-dark-green),
-  0.5px -0.5px 2px var(--color-dark-green);
-  color: var(--color-destin-sand);
   background-color: var(--color-mid-green);
-  border: solid var(--color-destin-sand);
+  color: var(--color-destin-sand);
-  max-width: 75vw;
-  border-radius: 10px;
-  padding-left: 10px;
-  transform: translateX(0px);
-  box-shadow: var(--shadow-medium);
-}
-
-#business-info p {
-  text-align: center;
-  font-size: 14pt;
-}
-
-#business-info h4 {
-  text-align: center;
-  background-color: var(--color-light-teal);
   border: solid var(--color-destin-sand);
   border-radius: 15px;
-  padding: 0 10px;
+  padding: 0 100px;
-  width: 50%;
+  margin-top: 20px;
-  margin-left: 22.5%;
+  margin-bottom: 20px;
-  box-shadow: var(--shadow-subtle); 
+  width: fit-content;
+  text-align: center;
+  text-shadow: var(--text-outline-heading);
+  box-shadow: var(--shadow-medium);
+  align-self: center;
 }
 
-#story {
+.story {
   display: flex;
   flex-direction: column;
+  width: 95%;
+  padding: 20px 10px;
+  margin: 20px 0px;
+  text-align: left;
+  justify-content: center;
   align-items: center;
-  justify-content: left;
+  background-color: var(--color-destin-sand);
-  width: 70vw;
+  border: solid 3px var(--color-mid-green);
-  margin-left: 30px;
-}
-
-#story h2 {
-  background-color: var(--color-mid-green);
-  color: var(--color-destin-sand);
-  border: solid var(--color-destin-sand);
   border-radius: 15px;
-  text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
-  -0.5px -0.5px 2px var(--color-dark-green),
-  -0.5px 0.5px 2px var(--color-dark-green),
-  0.5px -0.5px 2px var(--color-dark-green);
-  width: 50%;
-  padding: 5px 10px;
-  text-align: center;
-  margin-right: 12.5%;
     box-shadow: var(--shadow-medium);
+
+
 }
 
-#story p {
+.story p {
   color: var(--color-dark-green);
   font-size: 1.25rem;
   font-weight: bold;
+  text-indent: 1.75rem;
+  margin: 5px auto;
+  padding: 0 50px;
+}
+
+#bottom {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  background-color: var(--color-pale-green);
+  border: solid 3px var(--color-destin-sand);
+  border-radius: 15px;
+  width: 95%;
+  padding: 20px;
+  margin: 30px auto;
+  box-shadow: var(--shadow-medium);
+}
+
+#business-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: fit-content;
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
+  border: solid 2px var(--color-pale-green);
+  padding: 0 10px;
+  margin-left: 10px;
+  border-radius: 15px;
+  white-space: nowrap;
+  box-shadow: var(--shadow-medium);
+}
+
+#business-info h3 {
+  font-size: 1.3rem;
+  text-decoration: underline;
+  margin-top: 10px;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-bottom: 0;
+}
+
+strong {
+  font-size: 1.2rem;
+}
+
+#business-info p {
+  font-size: 1.1rem;
+  margin-top: 0;
 }
 
 #feedback {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
-  justify-content: space-between;
+  width:fit-content;
-  background-color: var(--color-mid-green);
+  margin: auto;
-  border: solid var(--color-destin-sand);
-  border-radius: 15px;
-  width: 90vw;
-  margin-top: 30px;
-  box-shadow: var(--shadow-medium); 
 }
 
 #feedback h2 {
-  background-color: var(--color-light-teal);
+  margin-top: 5px;
-  border: solid var(--color-destin-sand);
+  margin-bottom: 20px;
-  border-radius: 10px;
+  margin-left: auto;
-  width: 50vw;
+  margin-right: auto;
-  padding: 5px 10px;
   text-align: center;
-  margin-left: 25vw;
+  background-color: var(--color-mid-green);
-  margin-right: 25vw;
+  border: solid 2px var(--color-destin-sand);
-  text-shadow: 0.5px 0.5px 2px var(--color-dark-green),
+  text-shadow: var(--text-outline-heading);
-  -0.5px -0.5px 2px var(--color-dark-green),
+  border-radius: 15px;
-  -0.5px 0.5px 2px var(--color-dark-green),
+  font-size: 1.6rem;
-  0.5px -0.5px 2px var(--color-dark-green);
+  color: var(--color-destin-sand);
-  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
+  width: fit-content;
+  padding: 0 50px;
+  box-shadow: var(--shadow-medium);
 }
 
-#feedback h3 {
+.special {
-  color: #00231c;
+  font-size: 1.3rem;
-  font-weight: bold;
+  font-weight: 500px;
-  width: 85vw;
-  text-align: center;
-  margin-left: 7.5vw;
-  margin-right: 7.5vw;
 }
 
 #feedback p {
-  color: #00231c;
+  font-size: 1.2rem;
-  width: 85vw;
+  color: var(--color-dark-green);
   text-align: center;
-  margin-left: 7.5vw;
+  margin: 0 20px;
-  margin-right: 7.5vw;
+  padding: 0 20px;
-  font-weight: bold;
+
 }
 
-#feedback-form form {
+.inputs {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
-  width: 95%;
-  margin-top: 20px; /* Adds some spacing above the form */
 }
 
 #customer-info {
   display: flex;
   flex-direction: column;
-  align-content: center;
+  align-items: center;
-  width: 95%; /* Adjusted width */
+  gap: 10px;
-  gap: 25px; /* Adds spacing between input fields */
+  width: 500px; /* Adjusted width */
   text-align: center;
 }
 
-#customer-info input {
+#name-field,
-  background-color: var(--color-destin-sand);
+#phone-field,
-  border: solid var(--color-dark-green);
+#email-field {
-  border-radius: 15px;
-  width: 90%; /* Ensures the input fields fill the section width */
-  height: 30px; /* Adjusts height to match the textarea */
-  text-align: center;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
-}
-
-#customer-message {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 90%; /* Adjusted width */
+  font-size: 1.2rem;
+  color: var(--color-dark-green);
+  width: fit-content;
 }
 
-#customer-message #message-field textarea {
+#name-field input,
-  width: 50vw; /* Takes full width of the section */
+#phone-field input,
-  height: 30vh; /* Adjust height as needed */
+#email-field input {
-  background-color: var(--color-destin-sand);
+  width: 300px;
-  border: solid var(--color-dark-green);
+  height: 30px;
-  border-radius: 15px;
+  border: solid 2px var(--color-dark-green);
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
+  border-radius: 10px;
+  font-size: 1.2rem;
+  padding: 0 10px;
+  box-shadow: var(--shadow-medium);
 }
 
-#form-submit-btn {
+.message-box {
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  margin-top: 10px; 
+  align-items: center;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
+  margin: auto;
+}
+
+#message-field {
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  font-size: 1.2rem;
+  color: var(--color-dark-green);
+  text-align: center;
+}
+
+#message {
+  border: solid 2px var(--color-dark-green);
+  border-radius: 15px;
+  padding: 10px;
+  font-size: 1.2rem;
+  box-shadow: var(--shadow-medium);
 }
 
 #form-submit {
-  padding: 10px 20px;
+  font-size: 1.4rem;
-  background-color: var(--color-light-teal);
+  background-color: var(--color-destin-sand);
-  border: solid var(--color-destin-sand);
+  border: var(--color-dark-green);
-  border-radius: 10px;
   color: var(--color-dark-green);
-  font-size: 1rem;
+  margin-top: 10px;
-  cursor: pointer;
+  border-radius: 10px;
-  margin-bottom: 10px;
+  padding: 5px 10px;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
+  box-shadow: var(--shadow-medium);
 }
 
-#form-submit:hover {
-  background-color: var(--color-destin-sand);
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
-}

src/styles/base.css

@@ -1,4 +1,13 @@
 /* Global Styles */
+/* Override Font Awesome font-face globally to prevent CLS */
+@font-face {
+  font-family: "Font Awesome 6 Brands";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://ka-f.fontawesome.com/releases/v7.0.1/webfonts/free-fa-brands-400.woff2") format("woff2");
+}
+
 html {
   font-size: 17px; /* Base font size for scaling */
   scroll-behavior: smooth; 
@@ -9,7 +18,7 @@ body {
   flex-direction: column;
   align-items: center;
   font-family: 'Calibri', sans-serif;
-  font-size: 1rem; /* Default font size based on 16px */
+  font-size: 1rem; /* Default font size based on 17px */
   line-height: 1.5;
   margin: 0;
   padding: 0;
@@ -17,56 +26,53 @@ body {
 }
 
 body h1 {
-  text-shadow: 0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-right top shadow */
+  text-shadow: var(--text-outline-light);
-  -0.5px -0.5px .5px var(--color-destin-sand), /* Top-left top shadow */
-  -0.5px 0.5px .5px var(--color-destin-sand), /* Bottom-left top shadow */
-  0.5px -0.5px .5px var(--color-destin-sand); /* Top-right top shadow */
 }
 
-/* Title Large (Arial Bold 30px) */
+/* Title Large (Arial Bold ~32px) */
 h1 {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
-  font-size: 1.875rem; /* 30px for title */
+  font-size: 1.875rem;
 }
 
-/* Title (Arial Bold 25px) */
+/* Title (Arial Bold ~27px) */
 h2 {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
   font-size: 1.5625rem;
 }
 
-/* Subtitle (Comfortaa Normal 15px) */
+/* Subtitle (Comfortaa Normal ~16px) */
 h3 {
   font-family: 'Comfortaa', sans-serif;
-  font-size: .9375rem ; /* 15px for subtitle */
+  font-size: .9375rem ;
 }
 
-/* Body Large (Calibri Normal 20px) */
+/* Body Large (Calibri Normal ~21px) */
 p.body-large {
   font-family: 'Calibri', sans-serif;
-  font-size: 1.25rem; /* 20px for body large */
+  font-size: 1.25rem;
 }
 
-/* Body Strong (Calibri Bold 16px) */
+/* Body Strong (Calibri Bold 17px) */
 strong {
   font-family: 'Calibri', sans-serif;
   font-weight: bold;
-  font-size: 1rem; /* 16px for body strong */
+  font-size: 1rem;
 }
 
-/* Body (Calibri Normal 16px) */
+/* Body (Calibri Normal 17px) */
 p.body {
   font-family: 'Calibri', sans-serif;
-  font-size: 1rem; /* 16px for regular body text */
+  font-size: 1rem;
 }
 
-/* Captions (Arial Bold 11px) */
+/* Captions (Arial Bold ~12px) */
 figcaption {
   font-family: 'Arial', sans-serif;
   font-weight: bold;
-  font-size: .6875rem; /* 11px for captions */
+  font-size: .6875rem;
 }
 
 @media (max-width: 780px) {
@@ -75,10 +81,11 @@ figcaption {
   }
 }
 
-main {
+.main-content-container {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
+  max-width: 1440px;
   padding: 20px;
 }

src/styles/category-nav.css

@@ -0,0 +1,87 @@
+/* --- CATEGORY NAVIGATION --- */
+#right-side {
+    display: flex;
+    flex-direction: column;
+}
+
+#category-nav {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--color-soft-golden);
+    padding: 5px 10px;
+    margin-top: 10px;
+    box-shadow: var(--shadow-strong);
+    max-width: 225px;
+    border: solid var(--color-destin-sand);
+    border-radius: 10px;
+}
+
+#category-nav-container {
+    background-color: var(--color-destin-sand);
+    color: var(--color-dark-green);
+    border: solid var(--color-dark-green);
+    border-radius: 10px;
+    padding: 5px 10px;
+    margin-top: 5px;
+    text-align: center;
+    width: 90%;
+    box-shadow: var(--shadow-strong);
+}
+
+#category-nav h2 {
+    font-size: 1.675rem;
+    background-color: var(--color-light-teal);
+    color: var(--color-dark-green);
+    border: solid var(--color-dark-green);
+    border-radius: 10px;
+    padding: 0 5px;
+    white-space: nowrap;
+    box-shadow: var(--shadow-strong);
+}
+
+.categories ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    list-style-type: none;
+    gap: 5px;
+}
+
+.categories ul li {
+    border: solid var(--color-dark-green);
+    border-radius: 10px;
+    background-color: var(--color-mid-green);
+    margin-top: 20px;
+    min-width: 100%;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    box-shadow: var(--shadow-strong);
+}
+
+.categories a {
+    color: var(--color-dark-green);
+    font-size: 1.3rem;
+    font-weight: bold;
+    transition: background-color 0.3s ease, color 0.3s ease;
+
+}
+
+.categories ul li:hover {
+    background-color: var(--color-destin-sand);
+    color: var(--color-dark-green); 
+    box-shadow: var(--shadow-medium);
+}
+
+.categories ul li a:hover {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: inherit;
+}
+
+.categories ul li.active {
+    background-color: var(--color-destin-sand);
+    color: var(--color-dark-green);
+    box-shadow: var(--shadow-medium);
+}

src/styles/community.css

@@ -2,9 +2,10 @@
 .community {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
   text-align: center;
-  max-width: 900px;
+  max-width: 1000px;
 }
 
 h1 {
@@ -14,27 +15,47 @@ h1 {
   border: solid var(--color-mid-green);
   border-radius: 15px;
   color: var(--color-dark-green);
-  text-decoration: underline;
   text-shadow: var(--text-outline-heading);
   padding: 5px 100px;
   box-shadow: var(--shadow-subtle); 
 }
 
-#calendar-events-container {
+.notice, .com-link {
-  flex-direction: column;
+  font-size: 1.3rem;
-  align-items: center;
+  color: var(--color-dark-green);
-  gap: 20px;
-  border: none;
 }
 
-.calendar iframe {
+.com-link {
-  width: 975px;
+  text-decoration: none;
-  height: 750px;
+  font-weight: 600;
-  margin-top: 25px;
+}
-  margin-bottom: 20px;
+
-  background-color: var(--color-light-teal);
+.com-link:hover {
+  color: var(--color-soft-golden);
+}
+
+#calendar-events-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  border: none;
+  background-color: var(--color-soft-golden);
+  border: solid 3px var(--color-destin-sand);
   border-radius: 15px;
-  box-shadow: var(--shadow-subtle); 
+  padding: 10px;
+    box-shadow: var(--shadow-medium);
+}
+
+.events {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 10px;
 }
 
 .upcoming-events {
@@ -43,20 +64,157 @@ h1 {
   gap: 25px;
 }
 
-.events {
+#events-navigation {
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  
+}
+
+ul.event-categories {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  list-style-type: none;
+  gap: 50px;
+  margin: 10px auto;
+}
+
+li.enav {
+  display: flex;
+  width: auto;
+  margin: 0;
+  border: solid 1px var(--color-dark-green);
+  background-color: var(--color-destin-sand);
+  border-radius: 10px;
+  white-space: nowrap;
+  box-shadow: var(--shadow-medium);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.cat-btn {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 2px 50px;
+  width: 100%;
+  height: 100%;
+  color: var(--color-dark-green);
+  font-size: 1.4rem;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.sales-btn:hover {
+  background-color: rgba(124, 170, 86, 0.5); /*#7CAA56*/
+}
+
+.celebrations-btn:hover {
+  background: rgba(255, 196, 100, 0.5); /*#FFC464*/
+}
+
+.workshops-btn:hover {
+  background: rgba(252, 96, 96, 0.5); /*#FC6060*/
+}
+
+.all-btn:hover {
+  background: var(--color-light-teal);
+}
+
+/* --- Active button states --- */
+.event-categories li.enav.active {}
+.workshops-btn.active {
+  background-color: rgba(252, 96, 96, 0.5);
+}
+.celebrations-btn.active {
+  background-color: rgba(255, 196, 100, 0.5);
+}
+.sales-btn.active {
+  background-color: rgba(124, 170, 86, 0.5);
+}
+.all-btn.active {
+  background-color: var(--color-light-teal);
+}
+
+.interactive-events {
+  display:flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 30px;
+}
+
+.events-left {
+  width: 50%;
+  align-items: center;
+  justify-content: center;
+}
+
+.calendar iframe {
+  width: 600px;
+  height: 550px;
+  margin-top: 25px;
+  margin-bottom: 20px;
+  background-color: var(--color-light-teal);
+  border-radius: 15px;
+  box-shadow: var(--shadow-subtle); 
+}
+
+.events-right {
+  width: 50%;
+  align-items: center;
+  justify-content: center;
+}
+
+.scroll-direction {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 0;
+}
+
+#scroll-up, #scroll-down {
+  cursor: pointer;
+  background-color: var(--color-dark-green);
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#event-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: auto;
+  height: 450px;
+  overflow-y: hidden;
+  justify-content: center;
+}
+
+.event-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  background-color: var(--color-soft-golden);
+  background-color: var(--color-destin-sand);
   border: solid var(--color-dark-green);
   border-radius: 15px;
   padding: 10px;
-  width: 80vw;
+  width: 600px;
   box-shadow: var(--shadow-subtle); 
 }
 
-.events h2 {
+.upcoming-events h2 {
   font-size: 1.875rem;
   text-align: center;
   text-shadow: 0.5px 0.5px .5px var(--color-dark-green),
@@ -67,6 +225,8 @@ h1 {
   background-color: var(--color-mid-green);
   border: solid var(--color-destin-sand);
   border-radius: 10px;
+  margin-top: 20px;
+  margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
   width: fit-content;
@@ -80,7 +240,7 @@ h1 {
   align-items: center;
   text-align: center;
   background-color: var(--color-pale-green);
-  border: solid var(--color-dark-green);
+  border: solid var(--color-destin-sand);
   border-radius: 15px;
   padding: 0px 20px 10px 20px;
   width: 95%;
@@ -88,65 +248,39 @@ h1 {
   box-shadow: var(--shadow-subtle);
 }
 
-.zoho-event {
+.event-card h3,
-  background-color: var(--color-destin-sand);
+.event-card p {
-  border: solid var(--color-dark-green) 2px;
+  padding: 0;
-  border-radius: 15px;
+  margin: 0;
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8); 
-  max-width: 1200px;
 }
 
-.zoho-event h3 {
+.event-card h3 {
-  font-size: 1.875rem;
+  border: solid 0.5px var(--color-dark-green);
-  text-align: center;
-  text-shadow: 0.5px 0.5px .5px var(--color-destin-sand),
-  -0.5px -0.5px .5px var(--color-destin-sand),
-  -0.5px 0.5px .5px var(--color-destin-sand),
-  0.5px -0.5px .5px var(--color-destin-sand);
-  color: var(--color-dark-green);
-  background-color: var(--color-light-teal);
-  border: solid var(--color-destin-sand);
   border-radius: 10px;
-  margin-left: auto;
+  padding: 2px 20px;
-  margin-right: auto;
-  width: fit-content;
-  padding: 0 50px;
-  box-shadow: var(--shadow-medium);
-}
-
-.zoho-event p {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.display-date, .location, .add-events {
-  font-weight: heavy;
-  font-size: 1.5rem;
-}
-
-.description {
-  font-size: 1.3rem;
-  width: 80%;
-  height: auto;
-}
-
-.event-list ul {
-  list-style-type: none;
-}
-
-.event-list li {
-  background-color: var(--color-destin-sand);
-  border: solid var(--color-light-teal);
-  border-radius: 15px;
-  text-align: center;
-  padding: 5px 10px;
-  margin-bottom: 10px;
   box-shadow: var(--shadow-subtle);
+
 }
 
-.events strong {
+.event-card h3.workshop {
-  color: var(--color-dark-green);
+  background-color: rgba(252, 96, 96, 0.5);
-  font-size: 1.1rem;
 }
 
-/* | ↑-↑-↑ End Community.html ↑-↑-↑--| */
+.event-card h3.community {
+  background-color: rgba(255, 196, 100, 0.5);
+}
+
+.event-card h3.sales {
+  background-color: rgba(124, 170, 86, 0.5);
+}
+
+.event-card.is-collapsed:hover {
+  cursor: pointer;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.add-events p {
+  font-size: 1.2rem;
+}

src/styles/credits.css

@@ -1,6 +1,80 @@
 /* CSS Style Rules for "Credits & Attributions" */
 .credits-container {
     display: flex;
+    font-size: 1.2rem;
+    background-color: var(--color-soft-golden);
+    border: solid 3px var(--color-destin-sand);
+    border-radius: 15px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 30px;
+    padding: 10px;
+    width: auto;
+}
+
+.credits-container a {
+    text-decoration: none;
+    color: var(--color-dark-green);
+    font-weight: 600;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--color-pale-green);
+    border: solid 3px var(--color-destin-sand);
+    border-radius: 15px;
+    margin: 20px;
+    padding: 20px;
+    gap: 20px;
+
+}
+
+.cred-attr {
+    font-size: 2.25rem;
+    background-color: var(--color-mid-green);
+    color: var(--color-destin-sand);
+    border: solid var(--color-destin-sand);
+    border-radius: 15px;
+    padding: 0 100px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: fit-content;
+    text-align: center;
+    text-shadow: var(--text-outline-heading);
+    box-shadow: var(--shadow-medium);
+    align-self: center;
+}
+
+.video-box, .images-box {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-destin-sand);
+    border: solid 3px var(--color-mid-green);
+    border-radius: 15px;
+}
+
+.video-box {
+    margin-bottom: 30px;
+}
+
+.videos, .images {
+    font-size: 1.85rem;
+    background-color: var(--color-light-teal);
+    color: var(--color-dark-green);
+    border: solid var(--color-destin-sand);
+    border-radius: 15px;
+    padding: 0 50px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    width: fit-content;
+    text-align: center;
+    text-shadow: var(--text-outline-light);
+    box-shadow: var(--shadow-medium);
+    align-self: center;
 }
 
 .intro {
@@ -10,13 +84,22 @@
     text-align: center;
 }
 
+.thanks {
+    font-size: 1.3rem;
+}
+
+.strong-thanks {
+    font-size: 1.5rem;
+}
+
 #tip-desc {
     display: none;
 }
 
-.credits-list {
+.videos-credits-list,
+.images-credits-list {
     list-style: none;
-    margin: 0;
+    margin: 0 30px;
     padding: 0;
 }
 
@@ -25,6 +108,7 @@
     align-items: flex-start;
     gap: 0.5rem;             /* spacing between thumb and text */
     margin-bottom: 1rem;
+    margin: auto;
 }
 
 .thumb {
@@ -65,3 +149,4 @@
     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
     z-index: 9999;
 }
+

src/styles/footer.css

@@ -1,8 +1,18 @@
+.footer-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#footer-nav {
+    padding: 0;
+    margin-top: 10px;
+}
+
 nav ul, #footer-nav ul {
     display: flex;
     justify-content: center;
     list-style: none;
-    padding: 0;
+    padding: 10px 0;
     margin: 0;
 }
 
@@ -10,7 +20,6 @@ nav ul, #footer-nav ul {
     position: relative;
     list-style-type: none;
     flex-direction: row;
-    margin-top: 20px;
     background-color: var(--color-destin-sand);
     border-radius: 5px;
     width: fit-content; 
@@ -136,4 +145,17 @@ footer div label {
 #copyright {
     text-align: center;
     margin-bottom: 20px;
+    font-size: 1.1rem;
+    color: var(--color-dark-green);
+}
+
+#copyright a {
+    color: var(--color-dark-green);
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-decoration: one;
+}
+
+#copyright a:hover {
+    color: var(--color-destin-white);
 }

src/styles/gallery.css

@@ -8,13 +8,28 @@
 #gallery-top {
   display: flex;
   flex-direction: row;
+  align-items: top;
+  gap: 10px;
+  margin-bottom: 50px;
+}
+
+.left-side {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#product-carousel-feature {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  width: 95vw;
-  gap: 20px;
 }
 
 #product-carousel-feature h2 {
   font-size: 1.875rem;
+  width: 50%;
   text-align: center;
   text-shadow: var(--text-shadow-layered);
   color: var(--color-destin-sand);
@@ -22,7 +37,6 @@
   border: solid var(--color-destin-sand);
   border-radius: 10px;
   padding-left: 20px;
-  transform: translateX(30px);
   box-shadow: var(--shadow-medium);
 }
 
@@ -31,52 +45,77 @@
   flex-direction: row;
   align-items: center;
   text-align: center;
-  width: 65vw;
+  width: 60vw;
 }
 
 #product-carousel {
-  display: flex; /* Flexbox layout for horizontal row */
+  display: flex;
-  gap: 20px; /* Space between product cards */
+  flex-direction: row; /* Flexbox layout for horizontal row */
-  overflow-x: auto; /* Enable horizontal scrolling */
+  gap: 10px; /* Space between product cards */
+  overflow-x: hidden; /* Changed from 'auto' to 'hidden' */
   scroll-behavior: smooth; /* Smooth scrolling for buttons */
   padding: 10px; /* Optional padding inside the carousel */
   white-space: nowrap; /* Prevent wrapping to a new row */
-  transform: translateX(4vw);
+  min-height: 550px;
+  align-items: center;
 }
 
 .product-card {
-  display: inline-block; /* Ensure cards stay in a row */
+  display: flex;
-  min-width: 150px; /* Set the card size */
+  flex-direction: column;
-  max-width: 200px;
+  width: 250px;
-  max-height: auto;
+  min-width: 250px;
+  max-height: 350px;
   flex: 0 0 auto; /* Prevent resizing of cards */
-  border: 1px solid #ddd; /* Optional border */
+  border: 1px solid var(--color-dark-green);
-  border-radius: 8px;
+  border-radius: 15px;
   padding: 10px;
   margin-left: 20px;
   align-items: center;
   text-align: center;
-  white-space: wrap;
+  white-space: normal;
-  background-color: var(--color-destin-sand); /* Optional background */
+  background-color: var(--color-destin-sand);
+  box-shadow: var(--shadow-subtle);
+  transition: all 0.5s ease-in-out; /* Added for smooth transitions */
+}
+
+.product-card h3,
+.product-card .description,
+.product-card p,
+.product-card button {
+  margin-top: 5px;   /* reduce vertical spacing */
+  margin-bottom: 5px; 
+}
+
+.product-card img {
+  margin-bottom: 5px; /* space between image and title */
 }
 
 .product-card img {
   max-width: 100%;
   height: auto;
   display: block;
+  border: solid var(--color-mid-green);
   border-radius: 8px;
   align-items: center;
 }
 
+.product-card.is-centered {
+  width: 340px;
+  transform: scale(1.2);
+  box-shadow: var(--shadow-strong);
+  background-color: var(--color-destin-sand);
+  white-space: normal;
+}
+
 #scroll-left, #scroll-right {
-  cursor: pointer; /* Show pointer to indicate clickable buttons */
+  cursor: pointer;
-  background-color: var(--color-dark-green); /* Dark green background */
+  background-color: var(--color-dark-green);
-  color: white;
+  color: var(--color-destin-sand);
   border: none;
   padding: 10px;
   border-radius: 50%;
   font-size: 1.5rem;
-  transform: translateX(4.5vw);
 }
 
 @media (max-width: 768px) {
@@ -90,81 +129,16 @@
   }
 }
 
-
+#product-list {
-#main-gallery #right-aside {
-  width: 25vw;
-}
-
-#main-gallery #right-aside h2 {
-  font-size: 1.675rem;
-  background-color: var(--color-light-teal);
-  color: var(--color-dark-green);
-  border: solid var(--color-dark-green);
-  border-radius: 5px;
-  padding: 0 5px;
-  white-space: nowrap;
-  box-shadow: var(--shadow-strong);
-}
-
-#main-gallery .categories ul {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  align-items: center;
+  gap: 50px;
-  justify-content: space-between;
-  list-style-type: none;
-}
-
-#main-gallery .categories ul li {
-  border: solid var(--color-dark-green);
-  border-radius: 5px;
-  background-color: var(--color-mid-green);
-  margin-top: 20px;
-  margin-right: 35px;
-  min-width: 100%;
-  box-shadow: var(--shadow-strong);
-}
-
-#main-gallery .categories a {
-  color: var(--color-dark-green);
-  font-size: 1.3rem;
-}
-
-button#cart-details {
-  background-color: var(--color-destin-sand);
-  border: solid var(--color-dark-green);
-  border-radius: 15px;
-  color: var(--color-dark-green);
-  font-weight: bold;
-  font-size: 1.4em;
-  text-align: center; /* Align text horizontally */
-  height: 30px; /* Adjust height to fit text comfortably */
-  padding: 0 15px; /* Horizontal padding for spacing */
-  margin-top: 10px;
-  margin-bottom: 10px;
-  box-shadow: var(--shadow-subtle);
-  transform: translateX(-15vw) translateY(-5vh);
-  transition: background-color 0.3s ease, color 0.3s ease;
-  display: flex; /* Flexbox ensures content alignment */
-  align-items: center; /* Center text vertically */
-  justify-content: center; /* Center text horizontally */
-}
-
-button#cart-details:hover {
-  background-color: var(--color-dark-green);
-  color: var(--color-destin-sand);
-  border: solid var(--color-destin-sand);
-  border-radius: 15px;
-}
-
-.product-card {
-  box-shadow: var(--shadow-subtle);
-  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .add-to-cart-btn {
   cursor: pointer;
-  background-color: var(--color-destin-sand);
+  background-color: var(--color-mid-green);
-  border: solid var(--color-dark-green);
+  border: solid 1px var(--color-dark-green);
   color: var(--color-dark-green);
   font-weight: bold;
   border-radius: 5px;
@@ -173,10 +147,29 @@ button#cart-details:hover {
 }
 
 .add-to-cart-btn:hover {
-  background-color: var(--color-dark-green);
+  background-color: var(--color-destin-sand);
-  border: solid var(--color-destin-sand);
+  border: solid var(--color-dark-green);
-  color: var(--color-destin-sand);
+  color: var(--color-dark-green);
   border-radius: 5px;
   box-shadow: var(--shadow-strong);
 }
-/* |--↑-↑-↑ End gallery.html ↑-↑-↑--| */
+
+#cart-details {
+  color: var(--color-dark-green);
+  font-size: 1.3rem;
+  font-weight: bold;
+  border: solid var(--color-dark-green);
+  border-radius: 10px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#cart-details:hover {
+  background-color: var(--color-mid-green);
+  color: var(--color-destin-sand); 
+  box-shadow: var(--shadow-medium);
+}
+
+.right-side {
+  margin-left: 48px;
+  margin-top: 52px;
+}

src/styles/header.css

@@ -1,79 +1,70 @@
 /* |--↓-↓-↓ Start Header ↓-↓-↓--| */
 header {
-  padding: 20px;
+  padding-top: 20px;
   background-color: var(--color-light-teal);
-  border-bottom: 3px solid var(--color-mid-green);
   width: 100%;
 }
 
 .header-container {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  max-width: 1400px;
+  max-width: 1440px;
   margin: 0 auto;
   position: relative;
   width: 100%;
-  gap: 20px; /* Adds space between columns */
+  gap: 20px;
 }
 
-/* Left column - Logo */
+.logo-name-cart {
-.header-left {
-  flex: 0 0 150px; /* Fixed width for logo */
-  position: relative;
-  z-index: 1;
-}
-
-/* Center column - Business name and navigation */
-.header-center {
-  flex: 1;
-  min-width: 0; /* Prevents flex item from overflowing */
-  max-width: 800px;
-  margin: 0;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
+  gap: 30px;
 }
 
-/* Right column - Shopping cart */
+.logo-box {
-.header-right {
-  flex: 0 0 150px; /* Fixed width for shopping cart */
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
-  position: relative;
-  z-index: 1;
 }
 
-/* Logo styles */
+img.logo {
-header .logo {
-  width: 100%;
-  max-width: 180px;
-  height: auto;
-}
-
-header .logo img {
   display: block;
-  width: 100%;
+  width: 180px;
-  height: auto;
+  height: 180px;
-  margin-left: 50px;
   filter: drop-shadow(0 0 2px var(--color-soft-golden)) drop-shadow(0 0 0px var(--color-dark-green));
 }
 
-/* Business name and navigation container */
+.name-box {
-.business-name-container {
+  display: flex;
-  width: 100%;
+  align-items: center;
+  justify-content: center;
+  max-width: 700px;
+}
+
+.business-name {
+  font-family: 'Georgia', serif;
+  display: block;
+  font-size: 4rem;
+  color: var(--color-dark-green);
+  margin: 10px 0;
   text-align: center;
-  margin-bottom: 15px;
+  text-shadow: var(--text-outline-business);
 }
 
-.nav-container {
+.cart-box {
-  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1;
+  align-self: flex-end;
 }
 
-/* Shopping cart button */
 #shopping-cart {
-  position: static;
+  position: block;
   padding: 15px;
+  margin-left: 75px;
   border-radius: 10px;
   background-color: var(--color-destin-sand);
   color: var(--color-dark-green);
@@ -82,149 +73,8 @@ header .logo img {
   transition: all 0.3s ease;
   box-shadow: var(--shadow-strong);
   border: none;
-  display: flex;
+  width: 60px;
-  justify-content: center;
+  height: 55px;
-  align-items: center;
-}
-
-.business-name {
-  font-family: 'Georgia', serif;
-  display: block;
-  font-size: 3.6rem;
-  color: var(--color-dark-green); /* Dark green for the title */
-  margin: 10px 0;
-  text-align: center;
-  text-shadow: var(--text-outline-heading);
-}
-
-header p.tagline {
-  font-family: 'Arial', sans-serif;
-  font-size: 1.4rem;
-  color: var(--color-mid-green); /* Pale green for the tagline */
-  margin: 0;
-  text-align: center;
-}
-
-.menu-toggle {
-  display: none;
-}
-
-@media (max-width: 780px) {
-  /* --- Main Header Container --- */
-  header {
-    flex-direction: column;
-    padding: 10px;
-  }
-
-  .header-main {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .logo-and-title {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  /* --- Logo --- */
-  header .logo {
-    position: static;
-    width: 100px; /* Smaller logo for compact header */
-  }
-
-  header .logo img {
-    width: 100%;
-  }
-
-  /* --- Business Name --- */
-  .business-name {
-    font-size: 1.8rem; /* Smaller name for mobile */
-    margin: 0;
-  }
-
-  /* --- Header Icons --- */
-  .header-icons {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-  #shopping-cart {
-    position: static;
-    padding: 0;
-    background: none;
-    box-shadow: none;
-    font-size: 1.5rem;
-  }
-
-  .menu-toggle {
-    display: block;
-    background: none;
-    border: none;
-    color: var(--color-dark-green);
-    cursor: pointer;
-  }
-  
-  /* --- Compact Navigation Menu --- */
-  nav {
-    display: none;
-    width: 100%;
-    margin-top: 10px;
-    background-color: var(--color-destin-sand);
-    border-radius: 5px;
-    box-shadow: var(--shadow-subtle);
-  }
-
-  nav.is-open {
-    display: block;
-  }
-
-  nav ul {
-    flex-direction: column;
-    padding: 5px 0; /* Reduced vertical padding */
-  }
-
-  nav ul li a {
-    padding: 10px 0; /* Reduced padding for each link */
-    font-size: 1rem;  /* Smaller font size for links */
-    text-align: center;
-    border: none;
-  }
-
-  nav ul li a.current-page {
-    background: none;
-    text-decoration: underline;
-  }
-}
-
-nav {
-  margin-top: 20px;
-  background-color: var(--color-destin-sand);
-  padding: 10px 20px;
-  border-radius: 5px;
-  width: 100%;
-  box-shadow: var(--shadow-subtle);
-}
-
-#shopping-cart {
-  position: absolute;
-  top: 100px;
-  right: 100px;
-  padding: 20px;
-  border-radius: 10px;
-  background-color: var(--color-destin-sand);
-  color: var(--color-dark-green); 
-  cursor: pointer;
-  z-index: 5;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  box-shadow: var(--shadow-strong);
-  border: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 #shopping-cart:hover {
@@ -234,16 +84,38 @@ nav {
   box-shadow: var(--shadow-medium);
 }
 
+
+.nav-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+    border-bottom: solid var(--color-dark-green);
+
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  background-color: var(--color-destin-sand);
+  padding: 2px 50px;
+  border-radius: 5px;
+  width: 100%;
+  box-shadow: var(--shadow-subtle);
+}
+
 nav ul {
   display: flex;
+  flex-direction: row;
   justify-content: center;
   list-style: none;
   padding: 0;
   margin: 0;
-}
-
-nav ul {
   gap: 40px;
+  
 }
 
 nav ul li {
@@ -264,7 +136,7 @@ nav ul li {
 }
 
 .community-link {
-  font-size: 0.9em;
+  font-size: 1.2rem;
 }
 
 nav ul li a {

src/styles/index.css

@@ -1,3 +1,10 @@
+/* Stylesheet for index.html */
+.main-content-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 35px;
+}
 
 .promo-item,
 .testimonial-item,
@@ -8,13 +15,21 @@
 .promo-item.visible,
 .testimonial-item.visible,
 .featured-item.active {
-  display: block; /* Show visible or active items */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; /* Show visible or active items */
+}
+
+.testimonial-item:active {
+  
 }
 
 #left-side,
 #category-nav {
   flex: 1;
   box-shadow: var(--shadow-strong);
+  max-width: 300px;
 }
 
 #left-side {
@@ -24,6 +39,7 @@
   border: solid var(--color-destin-sand);
   padding: 5px 10px;
   margin-top: 10px;
+  margin-left: 0;
   border-radius: 10px;
 }
 
@@ -51,9 +67,9 @@
   border-radius: 10px;
   padding: 5px 10px;
   white-space: normal;
-  max-height: 175px;
+  max-height: 250px;
-  min-height: 175px;
+  min-height: 250px;
-  max-width: 400px;
+  max-width: 350px;
   box-shadow: var(--shadow-strong);
   text-align: center;
 }
@@ -65,6 +81,43 @@
   box-shadow: var(--shadow-strong);
 }
 
+/* --- TESTIMONIALS --- */
+
+#testimonials-container{
+  background-color: var(--color-mid-green);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
+  border-radius: 10px;
+  padding: 5px 10px;
+  margin-top: 10px;
+  white-space: normal;
+  box-shadow: var(--shadow-strong);
+}
+
+#testimonials-container h2 {
+  font-size: 1.675rem;
+  text-align: center;
+}
+
+.testimonial-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--color-destin-sand);
+  color: var(--color-dark-green);
+  border: solid var(--color-dark-green);
+  border-radius: 5px;
+  padding: 5px 10px;
+  white-space: normal;
+  max-height: 275px;
+  max-width: 350px;
+  min-height: 275px;
+  box-shadow: var(--shadow-strong);
+  text-align: center;
+}
+
+
+/* FEATURED ITEMS */
 #featured-container {
   display: flex;
   flex: 2;
@@ -77,16 +130,16 @@
 }
 
 #featured-container h2 {
-  font-size: 1.875rem;
+  font-size: 2.675rem;
   text-align: center;
   text-shadow: var(--text-shadow-layered);
   color: var(--color-destin-sand);
   background-color: var(--color-mid-green);
   border: solid var(--color-destin-sand);
-  border-radius: 10px;
+  border-radius: 15px;
-  margin-left: 30px;
   width: fit-content;
-  padding: 0 20px;
+  padding: 0 50px;
+  margin: 0px;
   box-shadow: var(--shadow-medium);
 }
   
@@ -96,11 +149,14 @@
   flex-direction: column;
   align-items: center;
   padding: 0;
+  box-shadow: var(--shadow-strong);
 }
 
 #featured-list {
   border: solid var(--color-mid-green);
   border-radius: 10px;
+  box-shadow: var(--shadow-strong);
+
 }
 
 
@@ -108,7 +164,7 @@
   color: var(--color-dark-green);
   background-color: var(--color-destin-sand);
   border-radius: 10px;
-  padding: 5px 10px;
+  padding: 0px 10px;
   display: block;
   text-align: center;
   font-size: 1.4rem;
@@ -125,6 +181,8 @@
   margin: 0 auto;
   margin-bottom: 10px;
   box-shadow: var(--shadow-strong);
+  width: 480px;
+  height: 320px;
 }
 
 #featured-list {
@@ -134,6 +192,22 @@
   height: auto; /* Let the height adapt to content */
 }
 
+.featured-card h3,
+.featured-card p,
+.feature-card figure,
+.featured-card figcaption {
+    margin: 0;
+    padding: 0;
+}
+
+.featured-card h3.product-name {
+    margin-top: 5px;
+}
+
+.featured-card p.price {
+    margin-top: 5px;
+}
+
 figcaption {
   font-size: 1.2rem;
 }
@@ -160,111 +234,3 @@ p.short-description {
 #featured-container a {
   text-decoration: none;
 }
-
-
-/* --- TESTIMONIALS --- */
-
-#testimonials-container{
-  background-color: var(--color-mid-green);
-  color: var(--color-dark-green);
-  border: solid var(--color-dark-green);
-  border-radius: 10px;
-  padding: 5px 10px;
-  margin-top: 10px;
-  white-space: normal;
-  box-shadow: var(--shadow-strong);
-}
-
-#testimonials-container h2 {
-  font-size: 1.675rem;
-  text-align: center;
-}
-
-.testimonial-item {
-  background-color: var(--color-destin-sand);
-  color: var(--color-dark-green);
-  border: solid var(--color-dark-green);
-  border-radius: 5px;
-  padding: 5px 10px;
-  white-space: normal;
-  max-height: 175px;
-  max-width: 400px;
-  min-height: 175px;
-  box-shadow: var(--shadow-strong);
-  text-align: center;
-}
-
-
-/* --- CATEGORY NAVIGATION --- */
-#category-nav {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--color-soft-gold);
-  padding: 5px 10px;
-  margin-top: 10px;
-  border: solid var(--color-destin-sand);
-  border-radius: 10px;
-}
-
-#category-nav-container {
-  background-color: var(--color-destin-sand);
-  color: var(--color-dark-green);
-  border: solid var(--color-dark-green);
-  border-radius: 10px;
-  padding: 5px 10px;
-  margin-top: 5px;
-  text-align: center;
-  width: 90%;
-  box-shadow: var(--shadow-strong);
-}
-
-#category-nav h2 {
-  font-size: 1.675rem;
-  background-color: var(--color-light-teal);
-  color: var(--color-dark-green);
-  border: solid var(--color-dark-green);
-  border-radius: 10px;
-  padding: 0 5px;
-  white-space: nowrap;
-  box-shadow: var(--shadow-strong);
-}
-
-.categories ul {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  list-style-type: none;
-  gap: 5px;
-}
-
-.categories ul li {
-  border: solid var(--color-dark-green);
-  border-radius: 10px;
-  background-color: var(--color-mid-green);
-  margin-top: 20px;
-  min-width: 100%;
-  transition: background-color 0.3s ease, color 0.3s ease;
-  box-shadow: var(--shadow-strong);
-}
-
-.categories a {
-  color: var(--color-dark-green);
-  font-size: 1.3rem;
-  font-weight: bold;
-  transition: background-color 0.3s ease, color 0.3s ease;
-
-}
-
-.categories ul li:hover {
-  background-color: var(--color-destin-sand);
-  color: var(--color-dark-green); 
-  box-shadow: var(--shadow-medium);
-}
-
-.categories ul li a:hover {
-  background: none;
-  border: none;
-  box-shadow: none;
-  color: inherit;
-}

src/styles/variables.css

@@ -19,6 +19,18 @@
     -0.5px 0.5px 1px var(--color-dark-green),
     0.5px -0.5px 1px var(--color-dark-green);
 
+    --text-outline-business:
+    0.5px 0.5px 1px var(--color-destin-sand),
+    -0.5px -0.5px 1px var(--color-destin-sand),
+    -0.5px 0.5px 1px var(--color-destin-sand),
+    0.5px -0.5px 1px var(--color-destin-sand);
+
+    --text-outline-light:
+    0.5px 0.5px .5px var(--color-destin-sand),
+    -0.5px -0.5px .5px var(--color-destin-sand),
+    -0.5px 0.5px .5px var(--color-destin-sand),
+    0.5px -0.5px .5px var(--color-destin-sand);
+
     /* Layered Text Shadow */
     --text-shadow-layered:
     0.5px 0.5px 1px var(--color-dark-green),