---
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/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>
  </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/?category=trees#" class="cat-btn">Trees</a></li>
          <li><a href="/gallery/?category=trees#" class="cat-btn">Shrubs</a></li>
          <li><a href="/gallery/?category=indoor#" class="cat-btn">Indoor</a></li>
          <li><a href="/gallery/?category=indoor#" class="cat-btn">Patio</a></li>
          <li><a href="/gallery/?category=tools#" class="cat-btn">Tools</a></li>
          <li><a href="/gallery/?category=tools#" class="cat-btn">Accessories</a></li>
          <li><a href="/gallery/?category=tools#" class="cat-btn">Landscaping</a></li>
        </ul>
      </div>
    </div>
  </aside>
</div>
<div id="gallery-bottom">
  <button id="cart-details">View Shopping Cart</button>
</div>