refactor: Format site files for 11ty

- Convert HTML pages into NJK templates
- Add front matter to NJK templates
- Modularize monolithic stylesheet

src/about.njk

@@ -0,0 +1,116 @@
+---
+layout: base.njk
+metaDesc: "Demo eCommerce website by Derek L. Seitz - dlseitz.dev"
+title: "About - Bloom Valley Nursery Demo"
+stylesheet: 
+    - "/styles/variables.css"
+    - "/styles/base.css"
+    - "/styles/header-footer.css"
+    - "/styles/about.css"
+fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js"
+isLandingPage: false
+pageScripts:
+    - "/scripts/feedback.js"
+    - "/scripts/cart.js"
+    - "/scripts/newsletter.js"
+---
+
+<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>