---
layout: base.njk
metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
seoIndexing: false
title: "Landing - Bloom Valley Nursery Demo"
stylesheet: 
    - "/styles/variables.css"
    - "/styles/base.css"
    - "/styles/header-footer.css"
    - "/styles/index.css"
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
currentPage: "index"
pageScripts:
    - "/scripts/script.js"
    - "/scripts/cart.js"
    - "/scripts/newsletter.js"
---

<!-- Main Content Section -->
<div id="left-side">
  
  <!-- Promo Feature -->
	<section id="promos-container">
		<h2 id="promos-heading">Shopper Promos</h2>
		{% for promo in promotions.PROMOS %}
			<div id="{{ promo.id }}" class="promo-item">
				<h3 class="promo-title">{{ promo.title }}</h3>
				<p class="promo-description">{{ promo.description }}</p>
				<button type="button" class="ctaButton">{{ promo.ctaText }}</button>
			</div>
		{% endfor %}
	</section>

  <!-- Testimonials Feature -->
	<section id="testimonials-container">
		<h2 id="testimonials-heading">What Others Say</h2>
		{% for item in testimonials.TESTIMONIALS %}
			<div id="{{ id }}" class="testimonial-item">
				<h3 class="client-name">{{ item.clientName }} said<h3>
				<p class="client-quote">"{{ item.testimonial }}"</p>
			</div>
		{% endfor %}
	</section>
</div>

<div id="center">
	<section id="featured-container">
		<h2 class="featured-heading">Featured Items</h2>
		<ul id="featured-list">
			{% for item in inventory.INVENTORY %}
				{% if item.isFeatured %}
					<li>
						<div id="{{ item.skuID }}-{{ item.catNumber }}-{{ item.productNumber }}" class="featured-card">
							<a href="/gallery/">
                <h3 class="product-name">{{ item.productName }}</h3>
								<figure>
									<img src="images/_m-thumbs/{{ item.category }}/{{ item.imageFile }}" alt="{{ item.altText }}" class="featured-item">
									<figcaption class="short-description">{{ item.shortDescription }}</figcaption>
								</figure>
								<p class="price">${{ item.price }}</p>
							</a>
						</div>
					</li>
				{% endif %}
			{% endfor %}
		</ul>
	</section>
</div>

<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>
