Added footer

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import './globals.css';
 import type { Metadata } from 'next';
 import { DM_Sans } from 'next/font/google';
-import Footer from '../components/Footer';
+import Footer from '@/components/Footer';
 
 const dmSans = DM_Sans({ subsets: ['latin'], weight: ['400', '500', '700'] });
 

src/components/Footer/index.tsx

@@ -1,21 +1,44 @@
-import { useState } from 'react';
-import Link from 'next/link';
 import Image from 'next/image';
-import './styles.scss';
+import styles from './style.module.scss';
+import Typography from '../Typography';
+import InstagramIcon from '@/public/instagram-logo.svg';
 
 const Footer: React.FC = () => {
-  // const [email, setEmail] = useState("");
   return (
-    <div className="footer">
-      <div className="footerContainer">
-        <div className="footerContents">
-          <div className="footerContents__wrapper">
-            <h1>Find us here!</h1>
-            <p>Interested in learning more?</p>
-            <p>
+    <div className={styles.footer}>
+      <div className={styles.footerContent}>
+        <div className={styles.findUs}>
+          <Typography variant="display/medium">Find us here!</Typography>
+          <div className={styles.description}>
+            <Typography variant="subheading">Interested in learning more?</Typography>
+            <Typography variant="subheading" className={styles.subdescription}>
               Reach out to get connected, or explore our socials to get a sense of who we are as a
               community!
-            </p>
+            </Typography>
+          </div>
+        </div>
+        <div className={styles.socials}>
+          <div className={styles.socialInfo}>
+            <Image src="/mail-icon.svg" width={50} height={50} alt="Mail Icon" />
+            {/* <MailIcon /> */}
+            <Typography variant="subheading" className={styles.socialText}>
+              Send us an inquiry
+            </Typography>
+          </div>
+
+          <div className={styles.socialInfo}>
+            <Image src="/instagram-logo.svg" width={50} height={50} alt="Instagram Logo" />
+            {/* <InstagramLogo /> */}
+            <Typography variant="subheading" className={styles.socialText}>
+              Follow us for updates
+            </Typography>
+          </div>
+
+          <div className={styles.socialInfo}>
+            <Image src="/discord-icon.svg" width={50} height={50} alt="Discord Icon" />
+            <Typography variant="subheading" className={styles.socialText}>
+              Join the discussion
+            </Typography>
           </div>
         </div>
       </div>

src/components/Footer/style.module.scss

@@ -0,0 +1,67 @@
+@use 'src/styles/vars.scss' as vars;
+
+.footer {
+  width: 100%;
+  background-color: vars.$green;
+  color: vars.$white;
+
+  .footerContent {
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+    padding: 7rem 0;
+    margin: auto;
+
+    @media screen and (width <= vars.$breakpoint) {
+      flex-direction: column;
+      gap: 1.75rem;
+      padding: 3rem 0;
+      align-items: center;
+      text-align: center;
+    }
+
+    .findUs {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      max-width: 40rem;
+
+      .description {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        @media screen and (width <= vars.$breakpoint) {
+          .subdescription {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .socials {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+      min-width: 22rem;
+
+      .socialInfo {
+        display: flex;
+        flex-direction: row;
+        gap: 1.25rem;
+        align-items: center;
+
+        @media screen and (width <= vars.$breakpoint) {
+          .socialText {
+            display: none;
+          }
+        }
+      }
+
+      @media screen and (width <= vars.$breakpoint) {
+        flex-direction: row;
+        justify-content: center;
+      }
+    }
+  }
+}