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.
This commit is contained in:
200
src/index.njk
200
src/index.njk
@@ -1,6 +1,7 @@
|
||||
---
|
||||
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"
|
||||
@@ -16,144 +17,71 @@ pageScripts:
|
||||
---
|
||||
|
||||
<!-- Main Content Section -->
|
||||
|
||||
<div id="left-aside">
|
||||
<section id="perks-feature-container" >
|
||||
<h2 id="perks-heading">Shopper Perks</h2>
|
||||
<div class="perk-item">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</section>
|
||||
<div id="left-side">
|
||||
|
||||
<section id="testimonials-feature" >
|
||||
<h2>What Others Say</h2>
|
||||
<div class="testimonial-container">
|
||||
<div class="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">
|
||||
<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">
|
||||
<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>
|
||||
</section>
|
||||
<!-- 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="featured-images">
|
||||
<div class="featured-item">
|
||||
<img src="image1.jpg" alt="Feature 1">
|
||||
</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>
|
||||
|
||||
<section id="featured-container" >
|
||||
<h2> This Week's Featured Items</h2>
|
||||
<ul id="featured-images">
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-aloe-plant">
|
||||
<figure>
|
||||
<img src="images/indoor/AloePlant.png" alt="An Aloe Vera plant in a turquoise ceramic planter." class="featured-item">
|
||||
<figcaption>Aloe Vera / Turquoise Planter</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-bird-house">
|
||||
<figure>
|
||||
<img src="images/accessories/BirdHouse.png" alt="A handmade wooden birdhouse painted blue." class="featured-item">
|
||||
<figcaption>Handmade Wooden Birdhouse - Blue</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-apple-tree">
|
||||
<figure>
|
||||
<img src="images/trees/AppleTree.png" alt="A Red Gala apple sapling in a burlap wrap." class="featured-item">
|
||||
<figcaption>Red Gala Apple Sapling - Burlap Bound</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-potting-soil">
|
||||
<figure>
|
||||
<img src="images/accessories/PottingSoil.png" alt="A 10 lbs bag of potting soil." class="featured-item">
|
||||
<figcaption>Potting Soil - 10 lbs Bag</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-spider-plant">
|
||||
<figure>
|
||||
<img src="images/indoor/SpiderPlant.png" alt="A Spider plant in a light gray ceramic planter." class="featured-item">
|
||||
<figcaption>Spider Plant / Light Gray Planter</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-birch-tree">
|
||||
<figure>
|
||||
<img src="images/trees/BirchTree.png" alt="A Silver Birch sapling in a disposable plastic container." class="featured-item">
|
||||
<figcaption>Silver Birch Sapling - Containerized</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-watering-can">
|
||||
<figure>
|
||||
<img src="images/accessories/WateringCan.png" alt="A blue painted aluminum watering can." class="featured-item">
|
||||
<figcaption>Painted Aluminum Watering Can - Blue</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-string-of-pearls">
|
||||
<figure>
|
||||
<img src="images/indoor/StringofPearls.png" alt="String-of-pearls plant in hanging white ceramic planter." class="featured-item">
|
||||
<figcaption>String-of-Pearls Plant / Hanging White Planter</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" id="featured-maple-tree">
|
||||
<figure>
|
||||
<img src="images/trees/MapleTree.png" alt="A Japanese Maple sapling in a burlap wrap." class="featured-item">
|
||||
<figcaption>Japanese Maple Sapling - Burlap Bound</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<nav id="right-aside">
|
||||
<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 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>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Content specific to this page goes here -->
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user