feat: add footer component

remvze · Nov 1, 2023 · 262bb1a · 262bb1a
1 parent 69c4ec1
commit 262bb1a
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 13 deletions.
diff --git a/src/components/footer/footer.module.css b/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;
+      }
+    }
+  }
+}
diff --git a/src/components/footer/footer.tsx b/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>
+  );
+}
diff --git a/src/components/footer/index.ts b/src/components/footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './footer';
diff --git a/src/pages/index.astro b/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>
+  <Hero />
+  <App client:load />
+  <AboutSection />
+  <WhySection />
+  <ReadySection />
+  <Footer />
 </Layout>
-
-<style>
-  main {
-    padding-bottom: 100px;
-  }
-</style>