Feat: Dynamic gallery page with Fetch API and improved product card layout

Refactor gallery page to dynamically load product data using the Fetch API. This addresses a SyntaxError from incorrect script loading and updates the page to handle a new flattened data structure. - Replaced hardcoded product data with the Fetch API in `gallery-carousel.js`. - Updated selectors and logic to handle the new data structure. - Removed conflicting CSS rules for product cards. - Shortened all `longDescription` fields to 175 characters or less. - Widened the focused product card for better visibility without vertical scrolling. - Reduced vertical spacing between elements in product cards (title, description, price, button).
refactor: Reduce duplicated code
2025-09-08 19:48:27 -05:00 · 2025-09-07 20:27:47 -05:00 · 2025-09-07 20:25:14 -05:00 · 2025-09-07 08:15:51 -05:00 · 2025-09-06 20:17:47 -05:00 · 2025-09-06 19:29:59 -05:00
161 changed files with 5876 additions and 2618 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -0,0 +1,13 @@
 module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy({ "src/images": "images" });
    eleventyConfig.addPassthroughCopy({ "src/styles": "styles" });
    eleventyConfig.addPassthroughCopy({ "src/scripts": "scripts" });
    eleventyConfig.addPassthroughCopy({ "src/robots.txt": "robots.txt"});
    return {
        dir: {
        input: "src",
        output: "_site",
        includes: "_includes",
        },
    };
 };
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
 node_modules/
 _site/
 .env
--- a/.nojekyll
+++ b/.nojekyll
@@ -1 +0,0 @@
--- a/about.html
+++ b/about.html
@@ -1,275 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
    />
    <script
      src="https://kit.fontawesome.com/acb7c3b0da.js"
      crossorigin="anonymous"
    ></script>
    <title>About Us - Bloom Valley Nursery</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body id="about-page">
    <!-- Header Section -->
    <header role="banner">
      <div class="logo">
        <img
          src="images/Client1_LogoPalette2_F0C06D.png"
          alt="Bloom Valley Nursery Logo"/>
      </div>
      <h1>Bloom Valley Nursery</h1>
      <!-- Navigation Bar -->
      <nav role="navigation" aria-label="Main Navigation">
         <ul>
          <li>
            <a href="index.html">Home</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="about.html" aria-current="page" class="current-page">About Us</a></li>
          <li><a href="community.html">Community Events</a></li>
        </ul>
        <div>
          <button
            id="shopping-cart"
            aria-label="Open shopping cart"
            class="fa-solid fa-cart-shopping fa-2xl">
          </button>
        </div>
      </nav>
    </header>
    <!-- Main Content Section -->
    <main role="main" id="main-about">
      <div id="main-top">
        <aside
          id="business-info"
          aria-label="Hours of operation and contact info"
        >
          <h3>Contact Us</h3>
          <div id="phone">
            <h4><strong>Phone:</strong></h4>
            <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>
        </aside>
        <div id="story" aria-label="History of Bloom Valley Nursery">
          <h1>The Story of Bloom Valley</h1>
          <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>
      </div>
      <div id="main-bottom">
        <div id="feedback" aria-label="Feedback form">
          <div id="feedback-intro">
            <h1>We Want to Hear From You!</h1>
            <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>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 id="customer-info">
                <div id="name-field">
                  <label for="name">Name:</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    aria-label="Enter your name here" placeholder="Your Name"
                    required/>
                </div>
                <div id="phone-field">
                  <label for="tel">Phone Number:</label>
                  <input
                    type="tel"
                    id="tel"
                    name="telephone"
                    aria-label="Enter your contact phone number here" placeholder="Your Phone Number"
                    required/>
                </div>
                <div id="email-field">  
                  <label for="email">Email:</label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    aria-label="Enter your contact email here" placeholder="user@domain.com"
                    required/>
                </div>
              </div>
              <div id="customer-message">
                  <div id="message-field">
                  <label for="message">Message:</label>
                  <textarea
                    id="message"
                    name="message"
                    rows="5"
                    aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
                    required>
                  </textarea>
                </div>
                <div id="form-submit-btn">
                  <button
                    id="form-submit"
                    type="submit"
                    aria-label="Submit feedback or inquiry"
                  >Submit
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </main>
    <!-- Footer Section -->
    <footer role="contentinfo">
    <div id="newsletter-container">
      <label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
      <form id="newsletter-form">
        <input
          type="email"
          id="email-input"
          aria-label="Enter your email to Subscribe"
          placeholder="Subscribe@BloomValleyNursery.com"
        />
        <button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
          Subscribe Now!
        </button>
      </form>
    </div>
    <div id="footer-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="about.html" class="current-page">About Us</a></li>
        <li><a href="community.html">Community Events</a></li>
      </ul>
    </div>
    <div id="social-media">
      <p>Check us out on social media!</p>
      <ul class="social-icons">
        <li id="pinterest">
          <a href="#" aria-label="Follow us on Pinterest"
            ><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
        <li id="facebook">
          <a href="#" aria-label="Follow us on Facebook"
            ><i class="fa-brands fa-facebook fa-lg"></i
          ></a>
        </li>
        <li id="instagram">
          <a href="#" aria-label="Follow us on Instagram"
            ><i class="fa-brands fa-instagram fa-lg"></i
          ></a>
        </li>
        <li id="twitter">
          <a href="#" aria-label="Follow us on X (Twitter)"
            ><i class="fa-brands fa-square-x-twitter fa-lg"></i
          ></a>
        </li>
        <li id="youtube">
          <a href="#" aria-label="View our Youtube channel"
            ><i class="fa-brands fa-youtube fa-lg"></i
          ></a>
        </li>
      </ul>
    </div>
    <div id="copyright">&copy 2024 Bloom Valley Nursery</div>
  </footer>
  <!-- Custom Modal for Newsletter Subscription -->
  <div id="newsletter-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal" id="newsletter-close-btn">&times;</span>
      <h2>Newsletter Subscription</h2>
      <form id="newsletter-form">
        <input 
          type="email" 
          id="email-input" 
          placeholder="Enter your email" 
          required 
          aria-label="Enter your email to subscribe"
        />
        <button type="submit" id="subscribe-btn">Subscribe</button>
      </form>
    </div>
  </div>
  <!-- Custom Alert Modal -->
  <div id="custom-alert" class="modal hidden">
    <div class="modal-content">
      <span class="close-modal" id="alert-close-btn">&times;</span>
      <p id="alert-message"></p>
      <button id="alert-ok-button">OK</button>
    </div>
  </div>  
  <!-- Modal for Shopping Cart -->
  <div id="cart-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal">&times;</span>
      <h2>Your Shopping Cart</h2>
      <ul id="cart-items"></ul> <!-- Dynamically populated -->
      <p id="cart-total"></p> <!-- Sub-total will appear here -->
      <div class="modal-buttons">
        <button id="clear-cart-modal-btn">Clear Cart</button>
        <button id="process-order-modal-btn">Process Order</button>
      </div>
    </div>
  </div>
  <!-- Modal for Item Added -->
  <div id="item-added-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="item-added-close">&times;</span>
      <p id="item-added-message"></p> <!-- Dynamically set message -->
    </div>
  </div>
  <!-- Confirmation Modal -->
  <div id="confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="confirmation-close-btn">&times;</span>
      <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
      <button id="confirmation-confirm-btn">Confirm</button>
      <button id="confirmation-close-btn">Close</button>
    </div>
  </div>
  <!-- Final Confirmation Modal -->
  <div id="final-confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
      <p id="final-confirmation-message"></p> <!-- Message after successful action -->
      <button id="final-confirmation-close-btn">Close</button>
    </div>
  </div>
    <!-- This loads after the page is read by browser -->
    <script src="cart.js"></script>
    <script src="newsletter.js"></script>
    <script src="feedback.js"></script>
  </body>
 </html>
--- a/community.html
+++ b/community.html
@@ -1,256 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
    />
    <script
      src="https://kit.fontawesome.com/acb7c3b0da.js"
      crossorigin="anonymous"
    ></script>
    <title>Community Events - Bloom Valley Nursery</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Header Section -->
    <header role="banner">
      <div class="logo">
        <img
          src="images/Client1_LogoPalette2_F0C06D.png"
          alt="Bloom Valley Nursery Logo"
        />
      </div>
      <h1>Bloom Valley Nursery</h1>
      <!-- Navigation Bar -->
      <nav role="navigation" aria-label="Main Navigation">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="community.html" aria-current="page" class="current-page">Community Events</a></li>
        </ul>
        <button
          id="shopping-cart"
          aria-label="Open shopping cart"
          class="fa-solid fa-cart-shopping fa-2xl"
        ></button>
      </nav>
    </header>
    <!-- Main Content Section -->
    <main role="main" id="community-page">
      <h1>Mark Your Calendars!</h1>
      <div id="calendar-events-container">
        <div class="calendar">
          <iframe
            src="https://calendar.google.com/calendar/embed?src=your_calendar_id&ctz=America/Chicago"
            style="border: 0; width: 90vww; height: 600px" 
            frameborder="0"
            scrolling="no" aria-label="Google Calendar displaying upcoming events at Bloom Valley Nursery">
          </iframe><!-- change "your_calendar_id" to an actual Google Calendar ID (Not possible due to the Client Scenario being fictional. This would require creating a fake Google account.)-->
        </div>
        <section class="events" aria-label="List of upcoming local events">
          <h2>Upcoming Events</h2>
          <div class="event-list">
            <div id="bvn-events">
              <h3>Events at Bloom Valley Nursery</h3>
              <p>
                All workshops at Bloom Valley Nursery are provided free of charge to
                anyone interested in learning techniques and ideas for creating a
                visually appealing living space that can be personalized to suite
                individual needs. Registration links are provided in each Google
                Calendar Event by clicking on the date of the event within the
                Google Calendar on this page.
              </p>
              <ul>
                <li>
                  <strong>Gardening and Landscaping 101:</strong><br><strong>When:</strong><br> 2nd Tuesday of
                  Every Month @ 6:30 pm.<br>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 holiday guests.
                </li>
                <li>
                  <strong>Deck the Halls</strong><br><strong>When:</strong> Saturday @ 10:00 am.<br>Join
                  Nathaniel and Vincent as they guide us through picking and tending
                  the perfect live Christmas tree for your Christmas decoration
                  focal-point.
                </li>
                <li>
                  <strong>Christmas Eve and Christmas Day</strong><br><strong>Bloom Valley
                  Nursery will close on Christmas Eve at 8:00 pm</strong> for any last-minute
                  shopping.<br>The nursery will remain <strong>closed until January 2nd</strong>. During
                  this time, we will be making improvements to the nursery grounds and
                  store with the aim of better serving our Bloom Valley neighbors,
                  friends and family. We are excited to share the new features and changes with
                  you in the New Year!<br><strong>Happy Holidays!!!</strong>
                </li>
              </ul>
            </div>
            <div id="community-wide">
              <h3>Community-Wide Events</h3>
              <p>
                This section includes local community events for which Bloom Valley
                Nursery is in partner with or a sponsor of. These events are
                typically free of charge, but can include sub-events by other local
                organizations and businesses that may not be free of charge. Check
                with specific organizations, businesses, and the Bloom Valley
                Chamber of Commerce for specific details that may not be provided by
                Bloom Valley Nursery.
              </p>
              <ul>
            <li>
              <strong>Tree Lighting Ceremony</strong><br><strong>When:</strong></br>Thursday @ 6:00 pm.<br>
              Help us kick off the Holiday festivities by joining the Bloom
              family, along with the Bloom Valley Chamber of Commerce, the Bloom
              Valley Garden Club, and many other local businesses and
              organizations, as we gather <strong>in front of City Hall</strong> for the annual Tree
              Lighting Ceremony! This event will include performances by the Bloom
              Valley Junior and Senior High Marching Bands, a workshop for making
              tree ornaments, the annual Chili Cook-off, and much more!
            </li>
          </ul>
        </div>
            <!-- Add more events as needed -->
          </div>
        </div>
      </section>
      <p>
        For more details, to add events to this page, or to leave feedback,
        <a
          href="about.html#feedback"
          aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
          >click here</a
        > to send us a message.
      </p>
    </main>
    <!-- Footer Section -->
    <footer role="contentinfo">
    <div id="newsletter-container">
      <label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
      <form id="newsletter-form">
        <input
          type="email"
          id="email-input"
          aria-label="Enter your email to Subscribe"
          placeholder="Subscribe@BloomValleyNursery.com"
        />
        <button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
          Subscribe Now!
        </button>
      </form>
    </div>
    <div id="footer-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="community.html" class="current-page">Community Events</a></li>
      </ul>
    </div>
    <div id="social-media">
      <p>Check us out on social media!</p>
      <ul class="social-icons">
        <li id="pinterest">
          <a href="#" aria-label="Follow us on Pinterest"
            ><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
        <li id="facebook">
          <a href="#" aria-label="Follow us on Facebook"
            ><i class="fa-brands fa-facebook fa-lg"></i
          ></a>
        </li>
        <li id="instagram">
          <a href="#" aria-label="Follow us on Instagram"
            ><i class="fa-brands fa-instagram fa-lg"></i
          ></a>
        </li>
        <li id="twitter">
          <a href="#" aria-label="Follow us on X (Twitter)"
            ><i class="fa-brands fa-square-x-twitter fa-lg"></i
          ></a>
        </li>
        <li id="youtube">
          <a href="#" aria-label="View our Youtube channel"
            ><i class="fa-brands fa-youtube fa-lg"></i
          ></a>
        </li>
      </ul>
    </div>
    <div id="copyright">&copy 2024 Bloom Valley Nursery</div>
  </footer>
  <!-- Custom Modal for Newsletter Subscription -->
  <div id="newsletter-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal" id="newsletter-close-btn">&times;</span>
      <h2>Newsletter Subscription</h2>
      <form id="newsletter-form">
        <input 
          type="email" 
          id="email-input" 
          placeholder="Enter your email" 
          required 
          aria-label="Enter your email to subscribe"
        />
        <button type="submit" id="subscribe-btn">Subscribe</button>
      </form>
    </div>
  </div>
  <!-- Custom Alert Modal -->
  <div id="custom-alert" class="modal hidden">
    <div class="modal-content">
      <span class="close-modal" id="alert-close-btn">&times;</span>
      <p id="alert-message"></p>
      <button id="alert-ok-button">OK</button>
    </div>
  </div>  
  <!-- Modal for Shopping Cart -->
  <div id="cart-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal">&times;</span>
      <h2>Your Shopping Cart</h2>
      <ul id="cart-items"></ul> <!-- Dynamically populated -->
      <p id="cart-total"></p> <!-- Sub-total will appear here -->
      <div class="modal-buttons">
        <button id="clear-cart-modal-btn">Clear Cart</button>
        <button id="process-order-modal-btn">Process Order</button>
      </div>
    </div>
  </div>
  <!-- Modal for Item Added -->
  <div id="item-added-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="item-added-close">&times;</span>
      <p id="item-added-message"></p> <!-- Dynamically set message -->
    </div>
  </div>
  <!-- Confirmation Modal -->
  <div id="confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="confirmation-close-btn">&times;</span>
      <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
      <button id="confirmation-confirm-btn">Confirm</button>
      <button id="confirmation-close-btn">Close</button>
    </div>
  </div>
  <!-- Final Confirmation Modal -->
  <div id="final-confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
      <p id="final-confirmation-message"></p> <!-- Message after successful action -->
      <button id="final-confirmation-close-btn">Close</button>
    </div>
  </div>
    <!-- This loads after the page is read by browser -->
    <script src="cart.js"></script>
    <script src="newsletter.js"></script>
  </body>
 </html>
--- a/gallery-carousel.js
+++ b/gallery-carousel.js
@@ -1,130 +0,0 @@
 // Gallery Carousel .js
 const products = {
  trees: [
    { id: 1, name: "Crepe Mertyl Tree", description: "Beautiful Crepe Mertyl tree.", price: 55.00, image: "images/trees/crepe-mertyl.jpg" },
    { 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" },
    { id: 4, name: "Potted Spruce Tree", description: "Miniature Spruce in a white planter.", price: 35.00, image: "images/trees/potted-spruce.jpg" }
  ],
  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', () => {
  console.log("DOM fully loaded and parsed"); // Check if the DOM is ready
  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) {
    console.error("Element with ID 'product-list' not found in the DOM.");
    return;
  }
  productList.innerHTML = ""; // Clear existing products
  console.log(`Updating product list for category: ${category}`);  // Debugging line
  const selectedProducts = products[category];
  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);
    if (existingProduct) {
      existingProduct.quantity++;
    } else {
      cart.push({ ...product, quantity: 1 });
    }
    sessionStorage.setItem('cart', JSON.stringify(cart));
    alert(`${product.name} has been added to your cart!`);
  }
 }
 function findProductById(productId) {
  for (let category in products) {
    const product = products[category].find(item => item.id === productId);
    if (product) return product;
  }
  return null;
 }
--- a/gallery.html
+++ b/gallery.html
@@ -1,219 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
    />
    <script
      src="https://kit.fontawesome.com/acb7c3b0da.js"
      crossorigin="anonymous"
    ></script>
    <title>Gallery - Bloom Valley Nursery</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Header Section -->
    <header role="banner">
      <div class="logo">
        <img
          src="images/Client1_LogoPalette2_F0C06D.png"
          alt="Bloom Valley Nursery Logo"/>
      </div>
      <h1>Bloom Valley Nursery</h1>
      <!-- Navigation Bar -->
      <nav role="navigation" aria-label="Main Navigation">
         <ul>
          <li>
            <a href="index.html">Home</a></li>
          <li><a href="gallery.html" aria-current="page" class="current-page">Gallery</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="community.html">Community Events</a></li>
        </ul>
        <div>
          <button
            id="shopping-cart"
            aria-label="Open shopping cart"
            class="fa-solid fa-cart-shopping fa-2xl">
          </button>
        </div>
      </nav>
    </header>
    <!-- Main Content Section -->
    <main role="main" id="main-gallery">
      <div id="gallery-top">
        <section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
          <h2>Products by Category</h2>
          <div id="product-category-card">
            <button
              id="scroll-left"
              aria-label="Scroll products left"
              aria-controls="product-carousel"
              class="fa-solid fa-chevron-left"
            >
            </button>
            <div id="product-carousel">
              <div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
            </div>
            <button
              id="scroll-right"
              aria-label="Scroll products right"
              aria-controls="product-carousel"
              class="fa-solid fa-chevron-right"
            >
            </button>
          </div>
        </section>
        <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.html?category=trees#" class="cat-btn">Trees</a></li>
                <li><a href="gallery.html?category=trees#" class="cat-btn">Shrubs</a></li>
                <li><a href="gallery.html?category=indoor#" class="cat-btn">Indoor</a></li>
                <li><a href="gallery.html?category=indoor#" class="cat-btn">Patio</a></li>
                <li><a href="gallery.html?category=tools#" class="cat-btn">Tools</a></li>
                <li><a href="gallery.html?category=tools#" class="cat-btn">Accessories</a></li>
                <li><a href="gallery.html?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>
    </main>
    <!-- Footer Section -->
    <footer role="contentinfo">
    <div id="newsletter-container">
      <label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
      <form id="newsletter-form">
        <input
          type="email"
          id="email-input"
          aria-label="Enter your email to Subscribe"
          placeholder="Subscribe@BloomValleyNursery.com"
        />
        <button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
          Subscribe Now!
        </button>
      </form>
    </div>
    <div id="footer-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="gallery.html" class="current-page">Gallery</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="community.html">Community Events</a></li>
      </ul>
    </div>
    <div id="social-media">
      <p>Check us out on social media!</p>
      <ul class="social-icons">
        <li id="pinterest">
          <a href="#" aria-label="Follow us on Pinterest"
            ><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
        <li id="facebook">
          <a href="#" aria-label="Follow us on Facebook"
            ><i class="fa-brands fa-facebook fa-lg"></i
          ></a>
        </li>
        <li id="instagram">
          <a href="#" aria-label="Follow us on Instagram"
            ><i class="fa-brands fa-instagram fa-lg"></i
          ></a>
        </li>
        <li id="twitter">
          <a href="#" aria-label="Follow us on X (Twitter)"
            ><i class="fa-brands fa-square-x-twitter fa-lg"></i
          ></a>
        </li>
        <li id="youtube">
          <a href="#" aria-label="View our Youtube channel"
            ><i class="fa-brands fa-youtube fa-lg"></i
          ></a>
        </li>
      </ul>
    </div>
    <div id="copyright">&copy 2024 Bloom Valley Nursery</div>
  </footer>
  <!-- Custom Modal for Newsletter Subscription -->
  <div id="newsletter-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal" id="newsletter-close-btn">&times;</span>
      <h2>Newsletter Subscription</h2>
      <form id="newsletter-form">
        <input 
          type="email" 
          id="email-input" 
          placeholder="Enter your email" 
          required 
          aria-label="Enter your email to subscribe"
        />
        <button type="submit" id="subscribe-btn">Subscribe</button>
      </form>
    </div>
  </div>
  <!-- Custom Alert Modal -->
  <div id="custom-alert" class="modal hidden">
    <div class="modal-content">
      <span class="close-modal" id="alert-close-btn">&times;</span>
      <p id="alert-message"></p>
      <button id="alert-ok-button">OK</button>
    </div>
  </div>  
  <!-- Modal for Shopping Cart -->
  <div id="cart-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal">&times;</span>
      <h2>Your Shopping Cart</h2>
      <ul id="cart-items"></ul> <!-- Dynamically populated -->
      <p id="cart-total"></p> <!-- Sub-total will appear here -->
      <div class="modal-buttons">
        <button id="clear-cart-modal-btn">Clear Cart</button>
        <button id="process-order-modal-btn">Process Order</button>
      </div>
    </div>
  </div>
  <!-- Modal for Item Added -->
  <div id="item-added-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="item-added-close">&times;</span>
      <p id="item-added-message"></p> <!-- Dynamically set message -->
    </div>
  </div>
  <!-- Confirmation Modal -->
  <div id="confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="confirmation-close-btn">&times;</span>
      <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
      <button id="confirmation-confirm-btn">Confirm</button>
      <button id="confirmation-close-btn">Close</button>
    </div>
  </div>
  <!-- Final Confirmation Modal -->
  <div id="final-confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
      <p id="final-confirmation-message"></p> <!-- Message after successful action -->
      <button id="final-confirmation-close-btn">Close</button>
    </div>
  </div>
    <!-- This loads after the page is read by browser -->
    <script src="gallery-carousel.js"></script>
    <script src="cart.js"></script> 
    <script src="newsletter.js"></script>
  </body>
 </html>
--- a/images/accessories/BirdHouse.png
+++ b/images/accessories/BirdHouse.png
--- a/images/accessories/PottingSoil.png
+++ b/images/accessories/PottingSoil.png
--- a/images/accessories/WateringCan.png
+++ b/images/accessories/WateringCan.png
--- a/images/indoor/AloePlant.png
+++ b/images/indoor/AloePlant.png
--- a/images/indoor/SpiderPlant.png
+++ b/images/indoor/SpiderPlant.png
--- a/images/indoor/StringofPearls.png
+++ b/images/indoor/StringofPearls.png
--- a/images/indoor/aloe-plant.jpg
+++ b/images/indoor/aloe-plant.jpg
--- a/images/indoor/peperomia.jpg
+++ b/images/indoor/peperomia.jpg
--- a/images/indoor/string-of-pearls.jpg
+++ b/images/indoor/string-of-pearls.jpg
--- a/images/indoor/venus-fly-trap.jpg
+++ b/images/indoor/venus-fly-trap.jpg
--- a/images/tools/birdhouse.jpg
+++ b/images/tools/birdhouse.jpg
--- a/images/tools/potting-soil.jpg
+++ b/images/tools/potting-soil.jpg
--- a/images/tools/watering-cans.jpg
+++ b/images/tools/watering-cans.jpg
--- a/images/trees/AppleTree.png
+++ b/images/trees/AppleTree.png
--- a/images/trees/BirchTree.png
+++ b/images/trees/BirchTree.png
--- a/images/trees/MapleTree.png
+++ b/images/trees/MapleTree.png
--- a/images/trees/apple-tree.jpg
+++ b/images/trees/apple-tree.jpg
--- a/images/trees/crepe-mertyl.jpg
+++ b/images/trees/crepe-mertyl.jpg
--- a/images/trees/potted-spruce.jpg
+++ b/images/trees/potted-spruce.jpg
--- a/index.html
+++ b/index.html
@@ -1,239 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Bloom Valley Nursery offers a variety of plants, garden tools, and expert gardening advice for your home and garden."
    />
    <script
      src="https://kit.fontawesome.com/acb7c3b0da.js"
      crossorigin="anonymous"
    ></script>
    <title>Homepage - Bloom Valley Nursery</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Header Section -->
    <header role="banner">
      <div class="logo">
        <img
          src="images/Client1_LogoPalette2_F0C06D.png"
          alt="Bloom Valley Nursery Logo"/>
      </div>
      <h1>Bloom Valley Nursery</h1>
      <!-- Navigation Bar -->
      <nav role="navigation" aria-label="Main Navigation">
         <ul>
          <li>
            <a href="index.html" aria-current="page" class="current-page">Home</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="community.html">Community Events</a></li>
        </ul>
        <div>
          <button
            id="shopping-cart"
            aria-label="Open shopping cart"
            class="fa-solid fa-cart-shopping fa-2xl">
          </button>
        </div>
      </nav>
    </header>
    <!-- Main Content Section -->
    <main role="main" id="main-index">
      <aside id="left-aside">
        <div id="perks-feature-container" aria-label="Reasons for Shopping With Bloom Valley Nursery">
          <h2 id="perks-heading">Shopper Perks</h2>
          <div class="perk-item" aria-label="Perk">
            <h3>- 50% Off Deal -</h3>
            <p>New subscribers to our newsletter this month will receive a coupon for 50% off their first purchase! Click here for details! Terms and conditions apply.</p>
          </div>
          <div class="perk-item" aria-label="Perk">
            <h3>Exceptional Quality</h3>
            <p>Every plant is carefully cultivated from seed or bulb to maturity, offering you vibrant, healthy specimens.</p>
          </div>
          <div class="perk-item" aria-label="Perk">
            <h3>Expert Guidance</h3>
            <p>Our knowledgeable team is here to help, from selecting the perfect plants to offering planting tips.</p>
          </div>
          <div class="perk-item" aria-label="Perk">
            <h3>Eco-Friendly Practices</h3>
            <p>We prioritize sustainability by using environmentally conscious growing methods, so you can feel good about your choices.</p>
          </div>
        </div>
        <div id="testimonials-feature" aria-label="Customer Testimonials About Their Experience With Bloom Valley Nursery.">
          <h2>What Others Say</h2>
          <div class="testimonial-container">
            <div class="testimonial" aria-label="Customer Testimonial.">
              <p>"My order arrived the very next day. The speed of delivery and high-quality products provided by Bloom Valley Nursery helped my project go smoothly from start to finish!"</p>
              <h3>- Caroline N.</h3>
            </div>
            <div class="testimonial" aria-label="Customer Testimonial.">
              <p>"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!"</p>
              <h3>- Morris F.</h3>
            </div>
            <div class="testimonial" aria-label="Customer Testimonial.">
              <p>"Bloom Valley Nursery's community garden inspired me take charge of my health. I was able to lose 50 pounds!"</p>
              <h3>- Gladis B.</h3>
            </div>
          </div> </div>
        </aside>
        <!--<div id="featured-images">
  <div class="featured-item">
    <img src="image1.jpg" alt="Feature 1">
  </div>-->
        <section id="featured-container" aria-label="Featured items of the week">
        <h2> This Week's Featured Items</h2>
        <ul id="featured-images" aria-label="Images of this week's featured items">
          <li><a href="gallery.html" id="featured-aloe-plant">
            <img src="images/indoor/AloePlant.png" alt="An Aloe Vera plant in a turquoise ceramic planter." class="featured-item">Aloe Vera / Turquoise Planter</a></li>
          <li><a href="gallery.html" id="featured-bird-house">
            <img src="images/accessories/BirdHouse.png" alt="A handmade wooden birdhouse painted blue." class="featured-item">Handmade Wooden Birdhouse - Blue</a></li>
          <li><a href="gallery.html" id="featured-apple-tree">
            <img src="images/trees/AppleTree.png" alt="A Red Gala apple sapling in a burlap wrap." class="featured-item">Red Gala Apple Sapling - Burlap Bound</a></li>
          <li><a href="gallery.html" id="featured-potting-soil"> 
            <img src="images/accessories/PottingSoil.png" alt="A 10 lbs bag of potting soil." class="featured-item">Potting Soil - 10 lbs Bag</a></li>
          <li><a href="gallery.html" id="featured-spider-plant">
            <img src="images/indoor/SpiderPlant.png" alt="A Spider plant in a light gray ceramic planter." class="featured-item">Spider Plant / Light Gray Planter</a></li>
          <li><a href="gallery.html" id="featured-birch-tree">
            <img src="images/trees/BirchTree.png" alt="A Silver Birch sapling in a disposable plastic container." class="featured-item">Silver Birch Sapling - Containerized</a></li>
          <li><a href="gallery.html" id="featured-watering-can">
            <img src="images/accessories/WateringCan.png" alt="A blue painted aluminum watering can." class="featured-item">Painted Aluminum Watering Can - Blue</a></li>
          <li><a href="gallery.html" id="featured-string-of-pearls">
            <img src="images/indoor/StringofPearls.png" alt="String-of-pearls plant in hanging white ceramic planter." class="featured-item">String-of-Pearls Plant / Hanging White Planter</a></li>
          <li><a href="gallery.html" id="featured-maple-tree">
            <img src="images/trees/MapleTree.png" alt="A Japanese Maple sapling in a burlap wrap." class="featured-item">Japanese Maple Sapling - Burlap Bound</a></li>
        </ul>
      </section>
      <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.html?category=trees#" class="cat-btn">Trees</a></li>
                <li><a href="gallery.html?category=shrubs#" class="cat-btn">Shrubs</a></li>
                <li><a href="gallery.html?category=indoor#" class="cat-btn">Indoor</a></li>
                <li><a href="gallery.html?category=patio#" class="cat-btn">Patio</a></li>
                <li><a href="gallery.html?category=tools#" class="cat-btn">Tools</a></li>
                <li><a href="gallery.html?category=accessories#" class="cat-btn">Accessories</a></li>
                <li><a href="gallery.html?category=landscaping#" class="cat-btn">Landscaping</a></li>
              </ul>
          </div>
        </div>
      </aside>
      <!-- Content specific to this page goes here -->
    </main>
    <!-- Footer Section -->
    <footer role="contentinfo">
    <div id="newsletter-container">
      <label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
      <form id="newsletter-form">
        <input
          type="email"
          id="email-input"
          aria-label="Enter your email to Subscribe"
          placeholder="Subscribe@BloomValleyNursery.com"
        />
        <button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
          Subscribe Now!
        </button>
      </form>
    </div>
    <div id="footer-nav">
      <ul>
        <li><a href="index.html" class="current-page">Home</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="community.html">Community Events</a></li>
      </ul>
    </div>
    <div id="social-media">
      <p>Check us out on social media!</p>
      <ul class="social-icons">
        <li id="pinterest">
          <a href="#" aria-label="Follow us on Pinterest"
            ><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
        <li id="facebook">
          <a href="#" aria-label="Follow us on Facebook"
            ><i class="fa-brands fa-facebook fa-lg"></i
          ></a>
        </li>
        <li id="instagram">
          <a href="#" aria-label="Follow us on Instagram"
            ><i class="fa-brands fa-instagram fa-lg"></i
          ></a>
        </li>
        <li id="twitter">
          <a href="#" aria-label="Follow us on X (Twitter)"
            ><i class="fa-brands fa-square-x-twitter fa-lg"></i
          ></a>
        </li>
        <li id="youtube">
          <a href="#" aria-label="View our Youtube channel"
            ><i class="fa-brands fa-youtube fa-lg"></i
          ></a>
        </li>
      </ul>
    </div>
    <div id="copyright">&copy 2024 Bloom Valley Nursery</div>
  </footer>
  <!-- Custom Newsletter Modal -->
  <div id="custom-alert" class="modal hidden">
    <div class="modal-content">
      <span class="close-modal" id="alert-close-btn">&times;</span>
      <p id="alert-message"></p>
      <button id="alert-ok-button">OK</button>
    </div>
  </div>  
  <!-- Modal for Shopping Cart -->
  <div id="cart-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal">&times;</span>
      <h2>Your Shopping Cart</h2>
      <ul id="cart-items"></ul> <!-- Dynamically populated -->
      <p id="cart-total"></p> <!-- Sub-total will appear here -->
      <div class="modal-buttons">
        <button id="clear-cart-modal-btn">Clear Cart</button>
        <button id="process-order-modal-btn">Process Order</button>
      </div>
    </div>
  </div>
  <!-- Modal for Item Added -->
  <div id="item-added-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="item-added-close">&times;</span>
      <p id="item-added-message"></p> <!-- Dynamically set message -->
    </div>
  </div>
  <!-- Confirmation Modal -->
  <div id="confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="confirmation-close-btn">&times;</span>
      <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
      <button id="confirmation-confirm-btn">Confirm</button>
      <button id="confirmation-close-btn">Close</button>
    </div>
  </div>
  <!-- Final Confirmation Modal -->
  <div id="final-confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
      <p id="final-confirmation-message"></p> <!-- Message after successful action -->
      <button id="final-confirmation-close-btn">Close</button>
    </div>
  </div>
    <!-- This loads after the page is read by browser -->
    <script src="script.js"></script>
    <script src="cart.js"></script>
    <script src="newsletter.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,6 +3,13 @@
    "start": "servor --reload"
  },
  "dependencies": {
    "curl": "^0.1.4",
    "dotenv": "^17.2.2",
    "ical.js": "^2.2.1",
    "node-fetch": "^2.7.0",
    "servor": "^4.0.2"
  },
  "devDependencies": {
    "@11ty/eleventy": "^3.1.2"
  }
 }
--- a/src/_data/communityEvents.js
+++ b/src/_data/communityEvents.js
@@ -0,0 +1,120 @@
 /**
 * @fileoverview This data file contains all community events for Bloom Valley Nursery Demo.
 */
 const communityEvents = [
  // BVN Workshops
    {
        id: "WS-01",
        title: "Gardening and Landscaping 101",
        description: "Join Bethany Bloom as she shares tips for creating a themed decor throughout the home that you will be delighted to share with your holiday guests.",
        dayOfWeek: "Tuesday",
        time: "6:30 pm",
        month: "September",
        year: 2025,
        type: "bvn",
        category: "workshop"
    },
    {
        id: "WS-02",
        title: "Gardening and Landscaping 101",
        description: "Join Bethany Bloom as she shares tips for creating a themed decor throughout the home that you will be delighted to share with your holiday guests.",
        dayOfWeek: "Tuesday",
        time: "6:30 pm",
        month: "October",
        year: 2025,
        type: "bvn",
        category: "workshop"
    },
    {
        id: "WS-03",
        title: "Gardening and Landscaping 101",
        description: "Join Bethany Bloom as she shares tips for creating a themed decor throughout the home that you will be delighted to share with your holiday guests.",
        dayOfWeek: "Tuesday",
        time: "6:30 pm",
        month: "November",
        year: 2025,
        type: "bvn",
        category: "workshop"
    },
    {
        id: "WS-04",
        title: "Deck the Halls",
        description: "Join Nathaniel and Vincent as they guide us through picking and tending the perfect live Christmas tree for your Christmas decoration focal-point.",
        dayOfWeek: "Saturday",
        time: "10:00 am",
        month: "November",
        year: 2025,
        type: "bvn",
        category: "workshop"
    },
    // BVN Events
    {
        id: "CE-01",
        title: "Christmas Eve and Christmas Day Closure",
        description: "Bloom Valley Nursery will close on Christmas Eve at 8:00 pm. The nursery will remain closed until January 2nd while we make improvements to the nursery grounds and store. Happy Holidays!",
        dayOfWeek: "Wednesday",
        time: "8:00 pm",
        month: "December",
        year: 2025,
        type: "bvn",
        category: "event"
    },
    // Community-Wide Events
    {
        id: "CE-02",
        title: "Tree Lighting Ceremony",
        description: "Help us kick off the Holiday festivities by joining the Bloom family, along with the Bloom Valley Chamber of Commerce, the Bloom Valley Garden Club, and other local organizations, in front of City Hall. Includes performances, workshops, and the annual Chili Cook-off.",
        dayOfWeek: "Thursday",
        time: "6:00 pm",
        month: "December",
        year: 2025,
        type: "community",
        location: "City Hall",
        category: "event"
    },
    {
        id: "CE-03",
        title: "Halloween Spooktacular",
        description: "Join the Bloom Valley community for an evening of family-friendly Halloween fun, including costume contests, pumpkin carving, and trick-or-treating around the nursery.",
        dayOfWeek: "Friday",
        time: "5:00 pm",
        month: "October",
        year: 2025,
        type: "community",
        location: "Bloom Valley Nursery",
        category: "event"
    },
    {
        id: "CE-04",
        title: "Thanksgiving Harvest Festival",
        description: "Celebrate the season with a community Thanksgiving festival. Enjoy local food vendors, a farmers' market, and workshops on holiday décor and seasonal planting.",
        dayOfWeek: "Thursday",
        time: "11:00 am",
        month: "November",
        year: 2025,
        type: "community",
        location: "Bloom Valley Community Park",
        category: "event"
    },
  // Cleanup Event
    {
        id: "CU-01",
        title: "Community Garden Workday",
        description: "Help keep our community garden thriving! Volunteers will help with planting, weeding, and general maintenance. All tools provided.",
        dayOfWeek: "Saturday",
        time: "9:00 am",
        month: "October",
        year: 2025,
        type: "community",
        location: "Bloom Valley Community Garden",
        category: "cleanup"
    }
 ];
 module.exports = {
    communityEvents
 };
--- a/src/_data/credits.js
+++ b/src/_data/credits.js
@@ -0,0 +1,235 @@
 /**
 * @fileoverview Data file for media credits.
 * This file contains the credit and attribution information for the
 * media used in this demo.
 */
 /* **Credit Template**
 {
    fileName: "",
    category: "",
    creator: "",
    creatorUrl: "",
    host: "",
    sourceUrl: "",
    license: "",
    licenseUrl: ""
 }
 */
 const CREDITS = [
  {
    fileName: "apple-tree.jpg",
    category: "trees",
    creator: "Peter B. Jr.",
    creatorUrl: "https://pixabay.com/users/peterbjr-26224443/",
    host: "Pixabay",
    sourceUrl: "https://pixabay.com/images/search/apple%20tree/",
    license: "Pixabay Content License",
    licenseUrl: "https://pixabay.com/service/license-summary/"
  },
  {
    fileName: "silver-birch.jpg",
    category: "trees",
    creator: "Jonnelle Yankovich",
    creatorUrl: "https://unsplash.com/@jey_photography",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/green-tree-during-daytime-EIpzTB1BpS8",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "japanese-maple-tree.jpg",
    category: "trees",
    creator: "yamasa-n",
    creatorUrl: "https://unsplash.com/@heppoko_yama",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/red-and-green-maple-leaves-HqcZ616IEHc",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "crepe-myrtle.jpg",
    category: "shrubs",
    creator: "phoenix727",
    creatorUrl: "https://pixabay.com/users/phoenix727-2349160/",
    host: "Pixabay",
    sourceUrl: "https://pixabay.com/images/search/crepe%20myrtle/",
    license: "Pixabay Content License",
    licenseUrl: "https://pixabay.com/service/license-summary/"
  },
  {
    fileName: "hydrangea.jpg",
    category: "shrubs",
    creator: "Couleur",
    creatorUrl: "https://pixabay.com/users/couleur-1195798/",
    host: "Pixabay",
    sourceUrl: "https://pixabay.com/images/search/hydrangea/",
    license: "Pixabay Content License",
    licenseUrl: "https://pixabay.com/service/license-summary/"
  },
  {
    fileName: "holly.jpg",
    category: "shrubs",
    creator: "WolfBlur",
    creatorUrl: "https://pixabay.com/users/wolfblur-2503887/",
    host: "Pixabay",
    sourceUrl: "https://pixabay.com/images/search/holly/",
    license: "Pixabay Content License",
    licenseUrl: "https://pixabay.com/service/license-summary/"
  },
  {
    fileName: "bird-house.jpg",
    category: "accessories",
    creator: "Roland Lehmler",
    creatorUrl: "https://pixabay.com/users/rlehmler-84553/",
    host: "Pixabay",
    sourceUrl: "https://pixabay.com/images/search/birdhouse/",
    license: "Pixabay Content License",
    licenseUrl: "https://pixabay.com/service/license-summary/"
  },
  {
    fileName: "watering-can.jpg",
    category: "accessories",
    creator: "Lorrie Schoettler",
    creatorUrl: "https://pixabay.com/users/stonyridgefarm-6290522/",
    host: "Pixabay",
    sourceUrl: "https://pixabay.com/images/search/watering%20can/",
    license: "Pixabay Content License",
    licenseUrl: "https://pixabay.com/service/license-summary/"
  },
  {
    fileName: "garden-pots.jpg",
    category: "accessories",
    creator: "PublicDomainPictures",
    creatorUrl: "https://pixabay.com/users/publicdomainpictures-14/",
    host: "Pixabay",
    sourceUrl: "https://pixabay.com/images/search/garden%20pots/",
    license: "Pixabay Content License",
    licenseUrl: "https://pixabay.com/service/license-summary/"
  },
  {
    fileName: "string-of-pearls.jpg",
    category: "indoor",
    creator: "rawpixel.com",
    creatorUrl: "https://www.rawpixel.com/",
    host: "rawpixel.com",
    sourceUrl: "https://www.rawpixel.com/image/16390470",
    license: "rawpixel Business License",
    licenseUrl: "https://www.rawpixel.com/services/licenses/business"
  },
  {
    fileName: "spider-plant.jpg",
    category: "indoor",
    creator: "Lucian Alexe",
    creatorUrl: "https://unsplash.com/@lucian_alexe",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/green-leaf-plant-in-pot-Si8rYoK5tf0",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "zebra-plant.jpg",
    category: "indoor",
    creator: "Galina N",
    creatorUrl: "https://unsplash.com/@galina88",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/green-succulent-in-teal-ceramic-vase-miziNqvJx5M",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "firepit.jpg",
    category: "patio",
    creator: "Tim Gouw",
    creatorUrl: "https://unsplash.com/@punttim",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/burning-firewoods-on-grille-MApjpqu9V7E",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "string-lights.jpg",
    category: "patio",
    creator: "Giorgio Trovato",
    creatorUrl: "https://unsplash.com/@giorgiotrovato",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/string-lights-in-the-street-e75PYAhhZRY",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "parlor-palm.jpg",
    category: "patio",
    creator: "Natalie Kinnear",
    creatorUrl: "https://unsplash.com/@nataliekinnear",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/a-potted-plant-sitting-on-top-of-a-wooden-table-Uii3CSyuItI",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "garden-hose.jpg",
    category: "tools",
    creator: "Seiya Maeda",
    creatorUrl: "https://unsplash.com/@seiya_maeda",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/a-bunch-of-green-hoses-sitting-on-top-of-a-wooden-box-xbqLvtw_nd0",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "gardening-tools.jpg",
    category: "tools",
    creator: "Jeremy Boley",
    creatorUrl: "https://unsplash.com/@jeremyboley",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/a-couple-of-metal-objects-with-a-metal-object-on-top-of-them-DPQMn-nPSy8",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "wheelbarrow.jpg",
    category: "tools",
    creator: "Marc Pell",
    creatorUrl: "https://unsplash.com/@blinky264",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/a-green-wheelbarrow-sitting-on-top-of-a-lush-green-field-L9e7PdFZ5y4",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "bark-mulch.jpg",
    category: "landscaping",
    creator: "K Adams",
    creatorUrl: "https://unsplash.com/@kadams77",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/a-pile-of-brown-leaves-gbtNHka1MYw",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "pea-gravel.jpg",
    category: "landscaping",
    creator: "Toufique",
    creatorUrl: "https://unsplash.com/@toufique",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/assorted-concrete-stones-U9oMaXgI4VI",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  },
  {
    fileName: "stone-pavers.jpg",
    category: "landscaping",
    creator: "KC Shum",
    creatorUrl: "https://unsplash.com/@kcshum",
    host: "Unsplash",
    sourceUrl: "https://unsplash.com/photos/a-close-up-of-a-sidewalk-with-green-paint-on-it-5YJOpybbcZg",
    license: "Unsplash License",
    licenseUrl: "https://unsplash.com/license"
  }
 ]
 module.exports = {
  CREDITS
 };
--- a/src/_data/inventory.js
+++ b/src/_data/inventory.js
@@ -0,0 +1,363 @@
 const INVENTORY = [
    {
        "productNumber": "001",
        "imageFile": "bird-house.jpg",
        "skuID": "ACC",
        "catNumber": "01",
        "productName": "Bird House - Pink",
        "category": "accessories",
        "price": 12.99,
        "altText": "A pink handcrafted wooden bird house",
        "shortDescription": "Handcrafted wooden bird house in pink.",
        "longDescription": "Handcrafted pink bird house, durable and weather-resistant, perfect for small songbirds and a charming garden accent.",
        "ratings": {
            "count": 38,
            "score": 4.7
        },
        "isFeatured": true
    },
    {
        "productNumber": "002",
        "imageFile": "garden-pots.jpg",
        "skuID": "ACC",
        "catNumber": "01",
        "productName": "Gardening Pots - Terra-cotta",
        "category": "accessories",
        "price": 9.99,
        "altText": "A set of three traditional terra-cotta gardening pots of varying sizes.",
        "shortDescription": "Set of three classic terra-cotta garden pots.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "003",
        "imageFile": "watering-can.jpg",
        "skuID": "ACC",
        "catNumber": "01",
        "productName": "Watering Can",
        "category": "accessories",
        "price": 19.99,
        "altText": "A modern, metal watering can with a long spout.",
        "shortDescription": "Stylish and functional metal watering can.",
        "longDescription": "Sleek metal watering can with long spout and comfortable handle for precise watering indoors or outdoors.",
        "ratings": {
            "count": 85,
            "score": 4.8
        },
        "isFeatured": false
    },
    {
        "productNumber": "001",
        "imageFile": "spider-plant.jpg",
        "skuID": "IND",
        "catNumber": "02",
        "productName": "Spider Plant",
        "category": "indoor",
        "price": 14.99,
        "altText": "A lush spider plant with long, variegated green and white leaves.",
        "shortDescription": "Easy-care spider plant, great for beginners.",
        "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
        },
        "isFeatured": true
    },
    {
        "productNumber": "002",
        "imageFile": "string-of-pearls.jpg",
        "skuID": "IND",
        "catNumber": "02",
        "productName": "String-of-Pearls Plant",
        "category": "indoor",
        "price": 16.99,
        "altText": "A cascading string-of-pearls plant with small, spherical green leaves.",
        "shortDescription": "Succulent with cascading, pearl-like foliage.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "003",
        "imageFile": "zebra-plant.jpg",
        "skuID": "IND",
        "catNumber": "02",
        "productName": "Zebra Plant",
        "category": "indoor",
        "price": 18.99,
        "altText": "A vibrant zebra plant with deep green leaves and prominent white veins.",
        "shortDescription": "Striking houseplant with bold, striped leaves.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "001",
        "imageFile": "bark-mulch.jpg",
        "skuID": "LND",
        "catNumber": "03",
        "productName": "Pine Bark Mulch (25lb bag)",
        "category": "landscaping",
        "price": 8.99,
        "altText": "A 25lb bag of natural pine bark mulch.",
        "shortDescription": "25lb bag of premium pine bark mulch.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "002",
        "imageFile": "pea-gravel.jpg",
        "skuID": "LND",
        "catNumber": "03",
        "productName": "Pea Gravel (25lb bag)",
        "category": "landscaping",
        "price": 11.99,
        "altText": "A 25lb bag of smooth, rounded pea gravel.",
        "shortDescription": "25lb bag of decorative pea gravel.",
        "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
        },
        "isFeatured": true
    },
    {
        "productNumber": "003",
        "imageFile": "stone-pavers.jpg",
        "skuID": "LND",
        "catNumber": "03",
        "productName": "Stone Pavers (single count)",
        "category": "landscaping",
        "price": 4.50,
        "altText": "A single rectangular gray stone paver.",
        "shortDescription": "Durable stone paver for patios and paths.",
        "longDescription": "High-quality stone pavers, perfect for patios, paths, and driveways. Sold individually for precise quantity needs.",
        "ratings": {
            "count": 255,
            "score": 4.6
        },
        "isFeatured": false
    },
    {
        "productNumber": "001",
        "imageFile": "firepit.jpg",
        "skuID": "PAT",
        "catNumber": "04",
        "productName": "Metal Fire-pit",
        "category": "patio",
        "price": 129.99,
        "altText": "A round, black metal fire-pit with a mesh lid.",
        "shortDescription": "Stylish metal fire-pit for outdoor gatherings.",
        "longDescription": "Metal fire-pit with mesh lid, heat-resistant and durable, perfect for outdoor gatherings and cozy evenings.",
        "ratings": {
            "count": 55,
            "score": 4.9
        },
        "isFeatured": false
    },
    {
        "productNumber": "002",
        "imageFile": "string-lights.jpg",
        "skuID": "PAT",
        "catNumber": "04",
        "productName": "LED String Lights",
        "category": "patio",
        "price": 24.99,
        "altText": "A string of warm white LED lights hanging outdoors.",
        "shortDescription": "Energy-efficient LED string lights for outdoors.",
        "longDescription": "LED string lights with warm glow, shatterproof and weather-resistant, ideal for outdoor ambiance year-round.",
        "ratings": {
            "count": 175,
            "score": 4.7
        },
        "isFeatured": true
    },
    {
        "productNumber": "003",
        "imageFile": "parlor-palm.jpg",
        "skuID": "PAT",
        "catNumber": "04",
        "productName": "Parlor Palm",
        "category": "patio",
        "price": 22.99,
        "altText": "A small, potted parlor palm with feathery green fronds.",
        "shortDescription": "Elegant, low-maintenance palm for patios.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "001",
        "imageFile": "hydrangea.jpg",
        "skuID": "SHR",
        "catNumber": "05",
        "productName": "Hydrangeas",
        "category": "shrubs",
        "price": 25.99,
        "altText": "A vibrant cluster of pink and purple hydrangea flowers.",
        "shortDescription": "Hydrangea bush with large, colorful blooms.",
        "longDescription": "Hydrangeas with large, colorful blooms, ideal for borders, foundations, or as a standalone garden focal point.",
        "ratings": {
            "count": 190,
            "score": 4.9
        },
        "isFeatured": false
    },
    {
        "productNumber": "002",
        "imageFile": "crepe-myrtle.jpg",
        "skuID": "SHR",
        "catNumber": "05",
        "productName": "Crepe Myrtle",
        "category": "shrubs",
        "price": 28.99,
        "altText": "A crepe myrtle bush with clusters of bright pink flowers.",
        "shortDescription": "Crepe myrtle with vibrant summer blooms.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "003",
        "imageFile": "holly.jpg",
        "skuID": "SHR",
        "catNumber": "05",
        "productName": "Holly",
        "category": "shrubs",
        "price": 21.99,
        "altText": "A holly bush with deep green leaves and bright red berries.",
        "shortDescription": "Evergreen holly bush with bright red 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
        },
        "isFeatured": true
    },
    {
        "productNumber": "001",
        "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": "Three-piece set of essential gardening tools.",
        "longDescription": "Gardening tool set includes trowel, cultivator, and transplanter with sturdy, rust-resistant heads and comfortable handles.",
        "ratings": {
            "count": 200,
            "score": 4.7
        },
        "isFeatured": false
    },
    {
        "productNumber": "002",
        "imageFile": "garden-hose.jpg",
        "skuID": "TLS",
        "catNumber": "06",
        "productName": "Gardening Hose",
        "category": "tools",
        "price": 49.99,
        "altText": "A coiled green gardening hose.",
        "shortDescription": "Durable, kink-resistant gardening hose.",
        "longDescription": "Durable, flexible garden hose resists kinks, lightweight yet sturdy, with brass couplings for secure connections.",
        "ratings": {
            "count": 110,
            "score": 4.5
        },
        "isFeatured": false
    },
    {
        "productNumber": "003",
        "imageFile": "wheelbarrow.jpg",
        "skuID": "TLS",
        "catNumber": "06",
        "productName": "Wheelbarrow",
        "category": "tools",
        "price": 99.99,
        "altText": "A sturdy single-wheeled wheelbarrow with a metal basin.",
        "shortDescription": "Heavy-duty wheelbarrow for hauling tasks.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "001",
        "imageFile": "apple-tree.jpg",
        "skuID": "TRS",
        "catNumber": "07",
        "productName": "Apple Tree (Honeycrisp)",
        "category": "trees",
        "price": 45.99,
        "altText": "A young Honeycrisp apple tree in a pot.",
        "shortDescription": "Honeycrisp apple tree with crisp, sweet fruit.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "002",
        "imageFile": "silver-birch.jpg",
        "skuID": "TRS",
        "catNumber": "07",
        "productName": "Silver Birch",
        "category": "trees",
        "price": 39.99,
        "altText": "A young silver birch tree with smooth, white bark.",
        "shortDescription": "Graceful silver birch with iconic white bark.",
        "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
        },
        "isFeatured": false
    },
    {
        "productNumber": "003",
        "imageFile": "japanese-maple-tree.jpg",
        "skuID": "TRS",
        "catNumber": "07",
        "productName": "Japanese Maple",
        "category": "trees",
        "price": 55.99,
        "altText": "A young Japanese Maple tree with lobed red and orange leaves.",
        "shortDescription": "Japanese Maple tree with vibrant fall colors.",
        "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
        },
        "isFeatured": true
    }
 ];
 module.exports = {
    INVENTORY
 };
--- a/src/_data/promotions.js
+++ b/src/_data/promotions.js
@@ -0,0 +1,42 @@
 /**
 * @fileoverview This data file contains all of the promotion information
 * for the Featured Perks promotional carousel.
 */
 /* **Promo Template**
 {
    "promotion": "",
    "display": "",
    "description": "",
    "start_date": "",
    "end_date": ""
 }
 */
 const PROMOS = [
    {
        id: "50-disc",
        title: "50% Off Discount!",
        description: "New subscribers this month will receive a coupon for 50% off their first purchase! Terms and conditions apply.",
        endDate: "2026-01-31",
        ctaText: "Subscribe Now"
    },
    {
        id: "free-install",
        title: "Free Installation on Select Purchases!",
        description: "Receive free installation on purchased items for your garden or patio. Applies to select inventory only.",
        endDate: "2025-09-30",
        ctaText: "Learn More"
    },
    {
        id: "B2G1-promo",
        title: "Buy 2, Get 1 Free!",
        description: "Buy any two trees, shrubs, or indoor/patio plants and get one for free! See associate for more details.",
        endDate: "2025-10-31",
        ctaText: "Shop Now"
    }
 ];
 module.exports = {
    PROMOS
 };
--- a/src/_data/testimonials.js
+++ b/src/_data/testimonials.js
@@ -0,0 +1,37 @@
 /**
 * @fileoverview This data file contains all testimonials for the Testimonials Feature.
 */
 /* **Unit Template**
 {
    "id": "",
    "clientName": "",
    "testimonial": "",
    "dateObtained": ""
 }
 */
 const TESTIMONIALS = [
    {
        "id": "T01",
        "clientName": "Caroline N.",
        "testimonial": "My order arrived the very next day. The speed of delivery and high-quality products provided by Bloom Valley Nursery helped my project go smoothly from start to finish!",
        "dateObtained": "2024-11-23"
    },
    {
        "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!",
        "dateObtained": "2024-12-03"
    },
    {
        "id": "T03",
        "clientName": "Gladis B.",
        "testimonial": "Bloom Valley Nursery's community garden inspired me take charge of my health. I was able to lose 50 pounds!",
        "dateObtained": "2025-03-22"
    }
 ];
 module.exports = {
    TESTIMONIALS
 };
--- a/src/_data/zohoCalendarEvents.js
+++ b/src/_data/zohoCalendarEvents.js
@@ -0,0 +1,154 @@
 require('dotenv').config();
 const fetch = require('node-fetch');
 const fs = require('fs');
 const path = require('path');
 const calendarUid = process.env.ZOHO_CALENDAR_UID;
 let accessToken = process.env.ZOHO_ACCESS_TOKEN;
 const refreshToken = process.env.ZOHO_REFRESH_TOKEN;
 const clientId = process.env.ZOHO_CLIENT_ID;
 const clientSecret = process.env.ZOHO_CLIENT_SECRET;
 // Dates for current month
 const currentDate = new Date();
 const currentYear = currentDate.getFullYear();
 const currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0');
 const lastDay = new Date(currentYear, currentDate.getMonth() + 1, 0).getDate();
 const startDate = `${currentYear}${currentMonth}01`;
 const endDate = `${currentYear}${currentMonth}${lastDay}`;
 const zohoApiUrl = `https://calendar.zoho.com/api/v1/calendars/${calendarUid}`;
 async function refreshAccessToken() {
    const params = new URLSearchParams();
    params.append('grant_type', 'refresh_token');
    params.append('client_id', clientId);
    params.append('client_secret', clientSecret);
    params.append('refresh_token', refreshToken);
    const response = await fetch('https://accounts.zoho.com/oauth/v2/token', {
        method: 'POST',
        body: params
    });
    const data = await response.json();
    if (!data.access_token) {
        throw new Error('Failed to refresh access token: ' + JSON.stringify(data));
    }
    const envPath = path.resolve(process.cwd(), '.env');
    const envContents = fs.readFileSync(envPath, 'utf-8')
        .split('\n')
        .map(line => line.startsWith('ZOHO_ACCESS_TOKEN=') ? `ZOHO_ACCESS_TOKEN=${data.access_token}` : line)
        .join('\n');
    fs.writeFileSync(envPath, envContents, 'utf-8');
    accessToken = data.access_token;
 }
 function parseZohoTimestamp(start, isAllDay) {
    if (isAllDay) {
        const year = parseInt(start.slice(0, 4));
        const month = parseInt(start.slice(4, 6)) - 1;
        const day = parseInt(start.slice(6, 8));
        return new Date(year, month, day);
    } else {
        const year = parseInt(start.slice(0, 4));
        const month = parseInt(start.slice(4, 6)) - 1;
        const day = parseInt(start.slice(6, 8));
        const hour = parseInt(start.slice(9, 11));
        const minute = parseInt(start.slice(11, 13));
        const second = parseInt(start.slice(13, 15));
        return new Date(year, month, day, hour, minute, second);
    }
 }
 function formatEventDate(startDate, endDate, isAllDay) {
    const start = parseZohoTimestamp(startDate, isAllDay);
    if (isAllDay) {
        return start.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
    } else {
        const end = parseZohoTimestamp(endDate, isAllDay);
        const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        const optionsTime = { hour: 'numeric', minute: '2-digit', hour12: true };
        const dateStr = start.toLocaleDateString('en-US', optionsDate);
        const startTimeStr = start.toLocaleTimeString('en-US', optionsTime);
        const endTimeStr = end.toLocaleTimeString('en-US', optionsTime);
        return `${dateStr} • ${startTimeStr} – ${endTimeStr}`;
    }
 }
 module.exports = async function() {
    try {
        const eventsListUrl = `${zohoApiUrl}/events?range={"start":"${startDate}","end":"${endDate}"}`;
        console.log(`Making initial API call to: ${eventsListUrl}`);
        console.log(`Using access token`);
        let response = await fetch(eventsListUrl, {
            headers: { Authorization: `Zoho-oauthtoken ${accessToken}` }
        });
        if (response.status === 401) {
            console.log("Access token is expired, refreshing...");
            await refreshAccessToken();
            response = await fetch(eventsListUrl, {
                headers: { Authorization: `Zoho-oauthtoken ${accessToken}` }
            });
        }
        if (!response.ok) {
            const text = await response.text();
            throw new Error(`API call failed: ${response.status} ${response.statusText} - ${text}`);
        }
        const data = await response.json();
        console.log("Initial API call successful. Received data:");
        console.dir(data, { depth: null });
        const normalizedEventsPromises = data.events.map(async (event) => {
            const basicEvent = {
                calid: event.calid,
                title: event.title,
                uid: event.uid,
                start: event.dateandtime.start,
                end: event.dateandtime.end,
                isallday: event.isallday,
                location: event.location,
                displayDate: formatEventDate(event.dateandtime.start, event.dateandtime.end, event.isallday),
            };
            console.log(`Processing event with UID: ${basicEvent.uid}`);
            if (basicEvent.uid) {
                const eventDetailsUrl = `${zohoApiUrl}/events/${basicEvent.uid}`;
                console.log(`Making details API call to: ${eventDetailsUrl}`);
                const detailsResponse = await fetch(eventDetailsUrl, {
                    headers: { Authorization: `Zoho-oauthtoken ${accessToken}` }
                });
                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}`);
                }
            }
            return basicEvent;
        });
        const normalizedEvents = await Promise.all(normalizedEventsPromises);
        console.log("All events processed. Final normalized events array:", normalizedEvents);
        return normalizedEvents;
    } catch (error) {
        console.error("Error fetching Zoho events:", error);
        return [];
    }
 };
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@@ -0,0 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="{{ metaDesc }}">
        {% if seoIndexing === false %}
            <meta name="robots" content="noindex">
        {% endif %}
        <title>{{title}}</title>
        {% if stylesheet %}
            {% for style in stylesheet %}
                <link rel="stylesheet" href="{{ style }}">
            {% endfor %}
        {% endif %}
        {% if hCAPTCHA %}
            <script src="{{ hCAPTCHA }}" async defer></script>
        {% endif %}
        {% if fontAwesome %}
            <script src="{{ fontAwesome }}" crossorigin="anonymous"></script>
        {% endif %}
    </head>
    <body>
        {% include "header.njk" %}
        <main>
            {{ content | safe }}
        </main>
        {% include "footer.njk" %}
        {% include "modals.njk" %}
        {% if pageScripts %}
            {% for script in pageScripts %}
                <script src="{{ script }}"></script>
            {% endfor %}
        {% endif %}
    </body>
 </html>
--- a/src/_includes/category-nav.njk
+++ b/src/_includes/category-nav.njk
@@ -0,0 +1,18 @@
 <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>
--- a/src/_includes/footer.njk
+++ b/src/_includes/footer.njk
@@ -0,0 +1,61 @@
 <!-- Footer Section -->
 <footer role="contentinfo">
    <div class="footer-container">
        <div id="newsletter-container">
            <form id="newsletter-form">
                <label for="email-input" class="hidden">Enter your email to subscribe to our newsletter</label>
                <input
                    type="email"
                    id="email-input"
                    placeholder="Subscribe@BloomValleyNursery.com"
                />
                <button id="submit-btn" type="submit" aria-label="Submit the subscribe form">
                    Subscribe Now!
                </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>
                    <li><a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a></li>
                    <li><a href="/about/" {% if currentPage == 'about' %}class="current-page" aria-current="page"{% endif %}>About Us</a></li>
                    <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>
            <ul class="social-icons">
                <li id="pinterest">
                <a href="#" aria-label="Follow us on Pinterest"
                ><i class="fa-brands fa-square-pinterest fa-lg"></i></a></li>
                <li id="facebook">
                <a href="#" aria-label="Follow us on Facebook"
                ><i class="fa-brands fa-facebook fa-lg"></i
                ></a>
                </li>
                <li id="instagram">
                    <a href="#" aria-label="Follow us on Instagram"
                    ><i class="fa-brands fa-instagram fa-lg"></i
                    ></a>
                </li>
                <li id="twitter">
                    <a href="#" aria-label="Follow us on X (Twitter)"
                    ><i class="fa-brands fa-square-x-twitter fa-lg"></i
                    ></a>
                </li>
                <li id="youtube">
                    <a href="#" aria-label="View our Youtube channel"
                    ><i class="fa-brands fa-youtube fa-lg"></i
                    ></a>
                </li>
            </ul>
        </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>
--- a/src/_includes/header.njk
+++ b/src/_includes/header.njk
@@ -0,0 +1,44 @@
 <header role="banner">
    <div class="header-container">
        <div class="header-left">
            <div class="logo">
                <img
                    src="/images/Client1_LogoPalette2_F0C06D.png"
                    alt="Bloom Valley Nursery Logo">
            </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>
                        <li>
                            <a href="/" {% if currentPage == 'index' %}class="current-page" aria-current="page"{% endif %}>Home</a>
                        </li>
                        <li>
                            <a href="/gallery/" {% if currentPage == 'gallery' %}class="current-page" aria-current="page"{% endif %}>Gallery</a>
                        </li>
                        <li>
                            <a href="/about/" {% if currentPage == 'about'%}class="current-page" aria-current="page"{% endif %}>About Us</a>
                        </li>
                        <li>
                            <a href="/community/" {% if currentPage == 'community' %}class="current-page community-link" aria-current="page"{% endif %}>Community Events</a>
                        </li>
                    </ul>
                </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 fa-2xl"></i>
            </button>
        </div>
    </div>
 </header>
--- a/src/_includes/modals.njk
+++ b/src/_includes/modals.njk
@@ -0,0 +1,49 @@
 <!-- Custom Newsletter Modal -->
 <div id="custom-alert" class="modal hidden">
    <div class="modal-content">
        <span class="close-modal" id="alert-close-btn">&times;</span>
        <p id="alert-message"></p>
        <button id="alert-ok-button">OK</button>
    </div>
 </div>  
 <!-- Modal for Shopping Cart -->
 <div id="cart-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close-modal">&times;</span>
        <h2>Your Shopping Cart</h2>
        <ul id="cart-items"></ul> <!-- Dynamically populated -->
        <p id="cart-total"></p> <!-- Sub-total will appear here -->
        <div class="modal-buttons">
        <button id="clear-cart-modal-btn">Clear Cart</button>
        <button id="process-order-modal-btn">Process Order</button>
        </div>
    </div>
 </div>
 <!-- Modal for Item Added -->
 <div id="item-added-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close-modal" id="item-added-close">&times;</span>
        <p id="item-added-message"></p> <!-- Dynamically set message -->
    </div>
 </div>
 <!-- Confirmation Modal -->
 <div id="confirmation-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close-modal" id="confirmation-close-btn">&times;</span>
        <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
        <button id="confirmation-confirm-btn">Confirm</button>
        <button id="confirmation-close-btn">Close</button>
    </div>
 </div>
 <!-- Final Confirmation Modal -->
 <div id="final-confirmation-modal" class="modal" style="display: none;">
 <div class="modal-content">
    <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
    <p id="final-confirmation-message"></p> <!-- Message after successful action -->
    <button id="final-confirmation-close-btn">Close</button>
 </div>
 </div>
--- a/src/about.njk
+++ b/src/about.njk
@@ -0,0 +1,123 @@
 ---
 layout: base.njk
 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="main-top">
    <section
      id="business-info"
      aria-label="Hours of operation and contact info"
    >
      <h3>Contact Us</h3>
      <div id="phone">
        <h4><strong>Phone:</strong></h4>
        <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">
        <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>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 id="customer-info">
            <div id="name-field">
              <label for="name">Name:</label>
              <input
                type="text"
                id="name"
                name="name"
                aria-label="Enter your name here" placeholder="Your Name"
                required/>
            </div>
            <div id="phone-field">
              <label for="tel">Phone Number:</label>
              <input
                type="tel"
                id="tel"
                name="telephone"
                aria-label="Enter your contact phone number here" placeholder="Your Phone Number"
                required/>
            </div>
            <div id="email-field">  
              <label for="email">Email:</label>
              <input
                type="email"
                id="email"
                name="email"
                aria-label="Enter your contact email here" placeholder="user@domain.com"
                required/>
            </div>
          </div>
          <div id="customer-message">
              <div id="message-field">
              <label for="message">Message:</label>
              <textarea
                id="message"
                name="message"
                rows="5"
                aria-label="Enter feedback or inquiries here" placeholder="Enter feedback or inquiries here..."
                required>
              </textarea>
            </div>
            <div id="form-submit-btn">
              <button
                id="form-submit"
                type="submit"
                aria-label="Submit feedback or inquiry"
              >Submit
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
 </div>
--- a/src/community.njk
+++ b/src/community.njk
@@ -0,0 +1,54 @@
 ---
 layout: base.njk
 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/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 %}
        <div id="{{ event.uid }}" class="zoho-event">
          {% if event.title %}
            <h3 class="title">{{ event.title }}</h3>
          {% endif %}
          <p class="display-date">{{ event.displayDate }}</p>
          {% if event.location %}
            <p class="location">Location: {{ event.location }}</p>
          {% endif %}
          {% if event.description %}
            <p class="description">{{ event.description }}</p>
          {% endif %}
      </div>
    {% endfor %}
    </div>
    <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>
  </section>
  <div class="add-events">
    <p>
      For more details, to add events to this page, or to leave feedback,
      <a
        href="/about/#feedback"
        aria-label="Go to the feedback form on the About Us page to leave feedback or inquiries."
        >click here</a
      > to send us a message.
    </p>
  </div>
 </div>
--- a/src/credits.njk
+++ b/src/credits.njk
@@ -0,0 +1,50 @@
 ---
 layout: base.njk
 metaDesc: "Credit & attribution for the contributors of this demo eCommerce website by Derek L. Seitz - dlseitz.dev"
 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="intro">
        <h1>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 id="tip-desc" class="visually-hidden">Preview shows a small version of the linked image.</p>
    <div>
        <ul class="credits-list">
        {% for credit in credits.CREDITS %}
            <li class="credit" data-tooltip="../images/_m-thumbs/{{ credit.category }}/{{ credit.fileName }}">
                <div class="thumb">
                    <img class="thumb-inline"
                        src="../images/_s-thumbs/{{ credit.category }}/{{ credit.fileName }}"
                        alt="Attributed image for {{ credit.fileName }}"
                        width="40" height="24"
                        loading="lazy" decoding="async">
                </div>
                <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>                        .
                    </p>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
 </div>
--- a/src/gallery.njk
+++ b/src/gallery.njk
@@ -0,0 +1,52 @@
 ---
 layout: base.njk
 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/category-nav.css"
  - "/styles/footer.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">
  <section id="product-carousel-feature" aria-label="Interactive Carousel of Available Products by Category.">
    <h2>Products by Category</h2>
    <div id="product-category-card">
      <button
        id="scroll-left"
        aria-label="Scroll products left"
        aria-controls="product-carousel"
        class="fa-solid fa-chevron-left"
      >
      </button>
      <div id="product-carousel">
        <div id="product-list"><!--Product Cards will be dynamically inserted here--></div>
      </div>
      <button
        id="scroll-right"
        aria-label="Scroll products right"
        aria-controls="product-carousel"
        class="fa-solid fa-chevron-right"
      >
      </button>
    </div>
    <div id="gallery-bottom">
      <button id="cart-details">View Shopping Cart</button>
    </div>
  </section>
  {% include "category-nav.njk" %}
 </div>
--- a/src/images/Client1_LogoPalette2_F0C06D.png
+++ b/src/images/Client1_LogoPalette2_F0C06D.png
--- a/src/images/_m-thumbs/accessories/bird-house.jpg
+++ b/src/images/_m-thumbs/accessories/bird-house.jpg
--- a/src/images/_m-thumbs/accessories/garden-pots.jpg
+++ b/src/images/_m-thumbs/accessories/garden-pots.jpg
--- a/src/images/_m-thumbs/accessories/watering-can.jpg
+++ b/src/images/_m-thumbs/accessories/watering-can.jpg
--- a/src/images/_m-thumbs/indoor/spider-plant.jpg
+++ b/src/images/_m-thumbs/indoor/spider-plant.jpg
--- a/src/images/_m-thumbs/indoor/string-of-pearls.jpg
+++ b/src/images/_m-thumbs/indoor/string-of-pearls.jpg
--- a/src/images/_m-thumbs/indoor/zebra-plant.jpg
+++ b/src/images/_m-thumbs/indoor/zebra-plant.jpg
--- a/src/images/_m-thumbs/landscaping/bark-mulch.jpg
+++ b/src/images/_m-thumbs/landscaping/bark-mulch.jpg
--- a/src/images/_m-thumbs/landscaping/pea-gravel.jpg
+++ b/src/images/_m-thumbs/landscaping/pea-gravel.jpg
--- a/src/images/_m-thumbs/landscaping/stone-pavers.jpg
+++ b/src/images/_m-thumbs/landscaping/stone-pavers.jpg
--- a/src/images/_m-thumbs/patio/firepit.jpg
+++ b/src/images/_m-thumbs/patio/firepit.jpg
--- a/src/images/_m-thumbs/patio/parlor-palm.jpg
+++ b/src/images/_m-thumbs/patio/parlor-palm.jpg
--- a/src/images/_m-thumbs/patio/string-lights.jpg
+++ b/src/images/_m-thumbs/patio/string-lights.jpg
--- a/src/images/_m-thumbs/shrubs/crepe-myrtle.jpg
+++ b/src/images/_m-thumbs/shrubs/crepe-myrtle.jpg
--- a/src/images/_m-thumbs/shrubs/holly.jpg
+++ b/src/images/_m-thumbs/shrubs/holly.jpg
--- a/src/images/_m-thumbs/shrubs/hydrangea.jpg
+++ b/src/images/_m-thumbs/shrubs/hydrangea.jpg
--- a/src/images/_m-thumbs/tools/garden-hose.jpg
+++ b/src/images/_m-thumbs/tools/garden-hose.jpg
--- a/src/images/_m-thumbs/tools/gardening-tools.jpg
+++ b/src/images/_m-thumbs/tools/gardening-tools.jpg
--- a/src/images/_m-thumbs/tools/wheelbarrow.jpg
+++ b/src/images/_m-thumbs/tools/wheelbarrow.jpg
--- a/src/images/_m-thumbs/trees/apple-tree.jpg
+++ b/src/images/_m-thumbs/trees/apple-tree.jpg
--- a/src/images/_m-thumbs/trees/japanese-maple-tree.jpg
+++ b/src/images/_m-thumbs/trees/japanese-maple-tree.jpg
--- a/src/images/_m-thumbs/trees/silver-birch.jpg
+++ b/src/images/_m-thumbs/trees/silver-birch.jpg
--- a/src/images/_s-thumbs/accessories/bird-house.jpg
+++ b/src/images/_s-thumbs/accessories/bird-house.jpg
--- a/src/images/_s-thumbs/accessories/garden-pots.jpg
+++ b/src/images/_s-thumbs/accessories/garden-pots.jpg
--- a/src/images/_s-thumbs/accessories/watering-can.jpg
+++ b/src/images/_s-thumbs/accessories/watering-can.jpg
--- a/src/images/_s-thumbs/indoor/spider-plant.jpg
+++ b/src/images/_s-thumbs/indoor/spider-plant.jpg
--- a/src/images/_s-thumbs/indoor/string-of-pearls.jpg
+++ b/src/images/_s-thumbs/indoor/string-of-pearls.jpg
--- a/src/images/_s-thumbs/indoor/zebra-plant.jpg
+++ b/src/images/_s-thumbs/indoor/zebra-plant.jpg
--- a/src/images/_s-thumbs/landscaping/bark-mulch.jpg
+++ b/src/images/_s-thumbs/landscaping/bark-mulch.jpg
--- a/src/images/_s-thumbs/landscaping/pea-gravel.jpg
+++ b/src/images/_s-thumbs/landscaping/pea-gravel.jpg
--- a/src/images/_s-thumbs/landscaping/stone-pavers.jpg
+++ b/src/images/_s-thumbs/landscaping/stone-pavers.jpg
--- a/src/images/_s-thumbs/patio/firepit.jpg
+++ b/src/images/_s-thumbs/patio/firepit.jpg
--- a/src/images/_s-thumbs/patio/parlor-palm.jpg
+++ b/src/images/_s-thumbs/patio/parlor-palm.jpg
--- a/src/images/_s-thumbs/patio/string-lights.jpg
+++ b/src/images/_s-thumbs/patio/string-lights.jpg
--- a/src/images/_s-thumbs/shrubs/crepe-myrtle.jpg
+++ b/src/images/_s-thumbs/shrubs/crepe-myrtle.jpg
--- a/src/images/_s-thumbs/shrubs/holly.jpg
+++ b/src/images/_s-thumbs/shrubs/holly.jpg
--- a/src/images/_s-thumbs/shrubs/hydrangea.jpg
+++ b/src/images/_s-thumbs/shrubs/hydrangea.jpg
--- a/src/images/_s-thumbs/tools/garden-hose.jpg
+++ b/src/images/_s-thumbs/tools/garden-hose.jpg
--- a/src/images/_s-thumbs/tools/gardening-tools.jpg
+++ b/src/images/_s-thumbs/tools/gardening-tools.jpg
--- a/src/images/_s-thumbs/tools/wheelbarrow.jpg
+++ b/src/images/_s-thumbs/tools/wheelbarrow.jpg
--- a/src/images/_s-thumbs/trees/apple-tree.jpg
+++ b/src/images/_s-thumbs/trees/apple-tree.jpg
--- a/src/images/_s-thumbs/trees/japanese-maple-tree.jpg
+++ b/src/images/_s-thumbs/trees/japanese-maple-tree.jpg
--- a/src/images/_s-thumbs/trees/silver-birch.jpg
+++ b/src/images/_s-thumbs/trees/silver-birch.jpg
--- a/src/images/media/image1.jpg
+++ b/src/images/media/image1.jpg
--- a/src/images/media/image10.jpeg
+++ b/src/images/media/image10.jpeg
--- a/src/images/media/image11.jpeg
+++ b/src/images/media/image11.jpeg
--- a/src/images/media/image12.jpeg
+++ b/src/images/media/image12.jpeg
--- a/src/images/media/image13.jpeg
+++ b/src/images/media/image13.jpeg
--- a/src/images/media/image14.jpeg
+++ b/src/images/media/image14.jpeg
--- a/src/images/media/image15.jpeg
+++ b/src/images/media/image15.jpeg
--- a/src/images/media/image16.jpeg
+++ b/src/images/media/image16.jpeg
--- a/src/images/media/image17.jpeg
+++ b/src/images/media/image17.jpeg
--- a/src/images/media/image18.jpeg
+++ b/src/images/media/image18.jpeg
--- a/src/images/media/image19.jpeg
+++ b/src/images/media/image19.jpeg
--- a/src/images/media/image2.jpg
+++ b/src/images/media/image2.jpg
--- a/src/images/media/image20.jpeg
+++ b/src/images/media/image20.jpeg
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dereklseitz	c5fd50bd35	Feat: Dynamic gallery page with Fetch API and improved product card layout Refactor gallery page to dynamically load product data using the Fetch API. This addresses a SyntaxError from incorrect script loading and updates the page to handle a new flattened data structure. - Replaced hardcoded product data with the Fetch API in `gallery-carousel.js`. - Updated selectors and logic to handle the new data structure. - Removed conflicting CSS rules for product cards. - Shortened all `longDescription` fields to 175 characters or less. - Widened the focused product card for better visibility without vertical scrolling. - Reduced vertical spacing between elements in product cards (title, description, price, button).	2025-09-08 19:48:27 -05:00
dereklseitz	80c6d8866d	refactor: Reduce duplicated code - move categorical navigation menu HTMLinto category-nav.njk and CSS into category-nav.css	2025-09-07 20:27:47 -05:00
dereklseitz	20e2569ad9	fix: Updated style rules to fix issues with component placement on landing page	2025-09-07 20:25:14 -05:00
dereklseitz	601ff81c62	Feat: Add robots.txt to prevent demo site from being indexed A robots.txt file has been added to the root of the site. It uses a blanket "Disallow: /" rule with an "Allow: /credits/" exception to ensure only the attributions page is indexed by search engines.	2025-09-07 08:15:51 -05:00
dereklseitz	732be668f7	Refactor: Modularized footer.njk and header-footer.css - Split header-footer.css into: - header.css - footer.css - modals.css - Split footer.njk into: - footer.njk - modals.njk - Updated front matter of: - index.njk - about.njk - credits.njk - gallery.njk - community.njk	2025-09-06 20:17:47 -05:00
dereklseitz	f30c846e9e	Feat, Fix, and Refactor: Consolidate index page changes Feat: Refactor index.njk to be data-driven and fix related rendering issues. Fix: Resolve layout and functionality bugs, including broken JavaScript for the featured item carousel, layout shifts in category navigation, and CSS issues with the testimonial carousel. Refactor: Centralize global styles using CSS custom property variables and clean up redundant CSS rules.	2025-09-06 19:29:59 -05:00
dereklseitz	e166edb44a	refactor: Standardize inventory data and naming conventions This commit refactors the product inventory data to be a flat, single array. This design improves data versatility and scalability for various site functions. - Flattened the data structure for easier filtering and searching. - Atomized product attributes, such as `productNumber` and `skuID`. - Standardized variable and object key naming to `camelCase` and `UPPERCASE_SNAKE_CASE` for constants. - Added an `isFeatured` flag to products to enable dynamic content on the homepage. - Implemented a meta tag in the base template to control search engine indexing on a per-page basis.	2025-09-06 11:05:36 -05:00
dereklseitz	af7e76f01f	feat(events): Add script to fetch and display Zoho calendar events This commit introduces a new script that fetches and normalizes event data from Zoho Calendar using OAuth2. The script makes an API call to retrieve calendar events for the current month. The event data is then processed and formatted to be used by a Nunjucks template. Key Changes: - test(dummy-data): Created a dummy calendar and dummy events for development and testing. - feat(events): Added a new script to fetch event data from Zoho Calendar. - feat(oauth2): Implemented OAuth2 authentication for secure API access. - refactor(data): Normalized the fetched data payload for consistency. - feat(ui): Integrated the normalized data with a Nunjucks template to dynamically populate "event cards" on the community events page.	2025-09-05 22:22:02 -05:00
dereklseitz	873f535f25	feat: Add image assets and attribution data This commit introduces a new, modular system for managing image assets. - Wrote the credits.js file to serve as a single source of truth for all image attributions. - Replaced existing placeholder images with new, properly licensed assets. - Created `_m-thumbs` and `_s-thumbs` directories with resized thumbnail versions of all original images.	2025-09-03 22:56:01 -05:00
dereklseitz	8f09695bff	style: Enhance desktop layout and fix navigation - Center featured section heading with proper spacing - Adjust logo positioning with left margin - Improve category list spacing - Increase figcaption font size for better readability - Fix navigation link hover states to prevent layout shift - Ensure consistent spacing in featured images container	2025-09-01 17:52:15 -05:00
dereklseitz	3e210572a2	reinitialize local repo	2025-08-31 22:04:09 -05:00
dereklseitz	95280b5973	feat: Add dynamic page indicator to nav links. - add {currentPage} to front matter of page templates	2025-08-30 19:46:32 -05:00
dereklseitz	c7e69de42c	Stop tracking _site build artifacts	2025-08-30 11:58:56 -05:00
dereklseitz	aa44db20bf	feat: Add Credits & Attribution page - add credits.njk - add credits.css - add tooltips.js - add link in footer	2025-08-30 11:47:01 -05:00
dereklseitz	de71b2d663	refactor: Format site files for 11ty - Convert HTML pages into NJK templates - Add front matter to NJK templates - Modularize monolithic stylesheet	2025-08-18 23:28:46 -05:00
dereklseitz	c9c5b89736	Refactor: Reconfigured Directory Structure & Installed 11ty This commit refactors the project's directory structure to better align with a static site generator (SSG) workflow. The source files have been moved into a dedicated src directory, and Eleventy has been installed as the new SSG.	2025-08-18 20:18:19 -05:00