feat: add a header and a footer

1 files changed, 38 insertions, 2 deletions

diff --git a/public/index.html b/public/index.html
index c918c7e..f35ab5d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,7 +16,17 @@
     </header>
 
     <main id="app" class="container">
-      <h1>${ heading }</h1>
+      <div class="grid">
+        <div>&nbsp;</div>
+        <div>
+          <hgroup>
+            <h2>Share your gratitude</h2>
+            <p>Sparkle someone with praise</p>
+          </hgroup>
+        </div>
+        <div>&nbsp;</div>
+      </div>
+
       <article v-for="sparkle in recentSparkles">
         <header>
           <img :src="sparkle.author.picture" :alt="sparkle.author.username">
@@ -28,6 +38,32 @@
       </article>
     </main>
 
-    <footer></footer>
+    <footer>
+      <div class="container">
+        <div class="grid">
+          <div>
+            <p> <strong>Why?</strong> </p>
+            <small> SparkleLab is a lightweight service designed to explore modern access control models within GitLab, while doing something fun: helping GitLab team members show appreciation for each other. </small>
+          </div>
+          <aside>
+            <nav>
+              <ul>
+                <li> <strong>About</strong> </li>
+                <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled#-sparklelab" class="secondary">README</a></li>
+              </ul>
+            </nav>
+          </aside>
+          <aside>
+            <nav>
+              <ul>
+                <li><strong>Contribute</strong></li>
+                <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled" class="secondary">Code</a></li>
+                <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled/-/issues " class="secondary">Issues</a></li>
+              </ul>
+            </nav>
+          </aside>
+        </div>
+      </div>
+    </footer>
   </body>
 </html>