chore: add footer

src/components/Footer/Footer.module.css

@@ -0,0 +1,27 @@
+.branding {
+  padding: 20px 0;
+  border-top: 1px solid;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 20px;
+  width: 150px;
+}
+
+.description {
+  font-size: 12px;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .branding {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .logo {
+    margin: 0 60px 0 0;
+  }
+}

src/components/Footer/Footer.tsx

@@ -1,9 +1,19 @@
-import styles from "Footer.module.css";
+import logo from "../../../public/logo.svg";
+import styles from "./Footer.module.css";
+
+import { getAppName } from "@/lib/config";
+import { getMessages } from "@/lib/data";
 
 export function Footer() {
+  const appName = getAppName();
+  const { footerFootnote } = getMessages();
+
   return (
     <div className={styles.footer}>
-      <div className={styles.branding}></div>
+      <div className={styles.branding}>
+        <img src={logo.src} className={styles.logo} alt={appName} />
+        <p className={styles.description}>{footerFootnote}</p>
+      </div>
     </div>
   );
 }

src/components/Layout/Layout.tsx

@@ -3,6 +3,7 @@ import type { FC, ReactNode } from "react";
 
 import styles from "./Layout.module.css";
 
+import { Footer } from "@/components/Footer/Footer";
 import { Logo } from "@/components/Logo/Logo";
 import { Navigation } from "@/components/Navigation/Navigation";
 import { cn } from "@/lib/utils";
@@ -27,8 +28,8 @@ export const Layout: FC<LayoutProps> = ({
         <Navigation />
       </header>
       <main className={cn(styles.content)}>{children}</main>
-      <footer className={cn(styles.container, styles.header)}>
+      <footer className={cn(styles.container, styles.footer)}>
-        <h2>Footer</h2>
+        <Footer />
       </footer>
     </div>
   );