feat: add footer component

src/components/footer/footer.module.css

@@ -0,0 +1,20 @@
+.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);
+      text-decoration: none;
+
+      & span {
+        color: #c0eb75;
+      }
+    }
+  }
+}

src/components/footer/footer.tsx

@@ -0,0 +1,18 @@
+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

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

src/pages/index.astro

@@ -3,21 +3,15 @@ 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';
 ---
 
 <Layout title="Welcome to Astro.">
-  <main>
   <Hero />
   <App client:load />
   <AboutSection />
   <WhySection />
   <ReadySection />
-  </main>
+  <Footer />
 </Layout>
-
-<style>
-  main {
-    padding-bottom: 100px;
-  }
-</style>