feat: Add demo card on demos page for first showcased demo

- add _data/demos.js data file
- add Nunjucks logic for dynamically injecting demo attributes into demo cards
- add style rules for demo cards

src/demos.njk

@@ -6,4 +6,23 @@ stylesheet: /styles/demos.css
 isLandingPage: false
 ---
 
-<h1>Demos Coming Soon!</h1>
+<h1>A Preview of What's Comming!</h1>
+{% for demo in demos.DEMOS %}
+    <div class="{{ demo.id }}-demo-card">
+        <div class="{{ demo.id }}-demo module">
+            <h2 class="demo-title">{{ demo.title }}</h2>
+            <img class="demo-image" src="/images/_demo-thumbs/{{ demo.imageFile }}" alt="{{ demo.altText }}">
+            <p class="demo-description">{{ demo.description}}</p>
+            <h3>Business Problem</h3>
+            <p class="demo-problem">{{ demo.problemStatement }}</p>
+            <h3>Solution</h3>
+            <p class="demo-solution">{{ demo.solutionSummary }}</p>
+            {% if demo.isLive === false %}
+            <p class="coming-soon">Check back soon for full access to this demo!</p>
+            {% else %}
+            <a href="{{ demo.demoUrl }}" class="demo-link" target="_blank" rel="noopener noreferrer">Access the live demo here!</a>
+            {% endif %}
+            <a href="{{ demo.repoUrl }}" class="demo-repo" target="_blank" rel="noopener noreferrer">View Demo's Source Code</a>
+        </div>
+    </div>
+{% endfor %}