refactor: turn footer into Astro component

src/components/footer.astro

@@ -0,0 +1,38 @@
+---
+import { Container } from '@/components/container';
+---
+
+<footer class="footer">
+  <Container>
+    <p>
+      Created by{' '}
+      <a href="https://twitter.com/remvze">
+        Maze <span>✦</span>
+      </a>
+    </p>
+  </Container>
+</footer>
+
+<style>
+  .footer {
+    display: flex;
+    height: 100px;
+    align-items: center;
+
+    & p {
+      color: var(--color-foreground-subtle);
+      font-size: var(--font-sm);
+      text-align: center;
+
+      & a {
+        color: var(--color-foreground);
+        font-weight: 500;
+        text-decoration: none;
+
+        & span {
+          color: #c0eb75;
+        }
+      }
+    }
+  }
+</style>

src/components/footer/footer.module.css

@@ -1,21 +0,0 @@
-.footer {
-  display: flex;
-  height: 100px;
-  align-items: center;
-
-  & p {
-    color: var(--color-foreground-subtle);
-    font-size: var(--font-sm);
-    text-align: center;
-
-    & a {
-      color: var(--color-foreground);
-      font-weight: 500;
-      text-decoration: none;
-
-      & span {
-        color: #c0eb75;
-      }
-    }
-  }
-}

src/components/footer/footer.tsx

@@ -1,18 +0,0 @@
-import { Container } from '@/components/container';
-
-import styles from './footer.module.css';
-
-export function Footer() {
-  return (
-    <footer className={styles.footer}>
-      <Container>
-        <p>
-          Created by{' '}
-          <a href="https://twitter.com/remvze">
-            Maze <span>✦</span>
-          </a>
-        </p>
-      </Container>
-    </footer>
-  );
-}

src/components/footer/index.ts

@@ -1 +0,0 @@
-export { Footer } from './footer';

src/pages/index.astro

@@ -3,8 +3,9 @@ import Layout from '@/layouts/layout.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
-import { Footer } from '@/components/footer';
 import { AboutSection, WhySection, ReadySection } from '@/components/sections';
+
+import Footer from '@/components/footer.astro';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">