---
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.css"
    - "/styles/index.css"
    - "/styles/category-nav.css"
    - "/styles/footer.css"
    - "/styles/modal.css"
fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
currentPage: "index"
pageScripts:
    - "/scripts/script.js"
    - "/scripts/cart.js"
    - "/scripts/newsletter.js"
---

<!-- Main Content Section -->
<div class="main-content-container">
	<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>

	{% include "category-nav.njk" %}
	
</div>