[FEAT] - Footer on all pages

src/components/Footer.astro

@@ -0,0 +1,25 @@
+<div class="footer">
+    <p>&copy; Purple Bubble - 2023</p>
+    <p>
+        Powered by <a href="https://www.netlify.com/">Netlify</a>
+    </p>
+    <p>
+        For any inquiries, or simply to say hi, please <a href="mailto:%68%65%6c%6c%6f%40%70%75%72%70%6c%65%62%75%62%62%6c%65%2e%6f%72%67">email us</a>!
+    </p>
+</div>
+
+<style>
+    .footer {
+        display: flex;
+        text-align: center;
+        margin-top: 50px;
+        padding: 20px;
+        border-top: 1px solid #ddd;
+        flex: 0 0 auto;
+    }
+
+    .footer p {
+        margin: 0;
+        flex: 1;
+    }
+</style>

src/components/Notification.astro

@@ -23,7 +23,7 @@
 
   @keyframes disappear {
     0% {
-      bottom: -10vh;
+      bottom: -100vh;
     }
 
     10% {
@@ -35,7 +35,7 @@
     }
 
     100% {
-      bottom: -10vh;
+      bottom: -100vh;
     }
   }
 

src/pages/index.astro

@@ -2,6 +2,7 @@
 import EmailForm from "../components/Email-Form.astro";
 import Layout from "../layouts/Layout.astro";
 import Notification from "../components/Notification.astro";
+import Footer from "../components/Footer.astro";
 import "../styles/index.css";
 ---
 
@@ -142,6 +143,7 @@ import "../styles/index.css";
   </main>
   <EmailForm />
   <Notification />
+  <Footer />
 </Layout>
 
 <script>

src/styles/globals.css

@@ -101,6 +101,10 @@ a {
   color: inherit;
   text-decoration: inherit;
 }
+a:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--dl-color-purple-light);
+}
 
 input {
   padding: 2px 4px;