Created Footer

components/commons/Footer/Footer.tsx

@@ -1,9 +1,60 @@
 import { FC } from "react";
+import Image from "next/image";
 import { FooterProps as Props } from "./Footer.types";
+import Squirrel from "./assets/Squirrel.png";
+import { AiOutlineTwitter } from "react-icons/ai";
+import { FaLinkedinIn } from "react-icons/fa";
+import { FiGithub } from "react-icons/fi";
 import styles from "./styles/Footer.module.scss";
 
 const Footer: FC<Props> = ({}) => {
-  return <div>Footer here</div>;
+  return (
+    <>
+      <div className={styles.container}>
+        <div>
+          <ul>
+            <li>
+              <Image src={Squirrel} alt="" />
+              <span className={styles.main_styling}>Squeryll</span>
+            </li>
+          </ul>
+          <ul>
+            <li>Product</li>
+            <li>Feature</li>
+            <li>Performance</li>
+            <li>Pricing</li>
+          </ul>
+          <ul>
+            <li className={styles.bold_styling}> About </li>
+            <li>Privacy Policy</li>
+            <li>Security Information</li>
+          </ul>
+          <ul>
+            <li className={styles.bold_styling}>Support</li>
+            <li>Contact Us</li>
+            <li>Developers and API</li>
+            <li>Blog</li>
+            <li>Forum</li>
+          </ul>
+          <ul>
+            <li className={styles.bold_styling}>Social</li>
+            <li>
+              <FiGithub className={styles.icon} /> GitHub
+            </li>
+            <li>
+              <FaLinkedinIn className={styles.icon} /> LinkedIn
+            </li>
+            <li>
+              <AiOutlineTwitter className={styles.icon} /> Twitter
+            </li>
+          </ul>
+        </div>
+        <div>
+          <p>© 2023 Squeryll</p>
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default Footer;

components/commons/Footer/styles/Footer.module.scss

@@ -0,0 +1,57 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
+
+$bg-color: rgba(17, 17, 17, 1);
+$primary-color: #f5f4dc;
+
+.container {
+  height: 507px;
+  font-family: "Inter", sans-serif;
+  background-color: $bg-color;
+  color: $primary-color;
+
+  div:first-child {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: normal;
+
+    ul {
+      list-style: none;
+      margin: 5rem;
+      margin-right: 2rem;
+
+      li {
+        margin: 15px;
+        padding-bottom: 15px;
+        list-style: none;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 22px;
+        span {
+          font-weight: 700;
+          font-size: 29.8802px;
+          line-height: 36px;
+        }
+        .icon {
+          height: 25px;
+          width: 25px;
+          color: #101010;
+          background-color: $primary-color;
+          margin-right: 3px;
+          margin-bottom: 0;
+          padding: 3px;
+          border-radius: 50%;
+        }
+      }
+      .bold_styling {
+        font-weight: 600;
+        font-size: 18px;
+        line-height: 22px;
+      }
+    }
+  }
+  div:last-child {
+    display: flex;
+    justify-content: center;
+  }
+}

next.config.js

@@ -1,6 +1,12 @@
 /** @type {import('next').NextConfig} */
+
+const path = require("path");
+
 const nextConfig = {
   reactStrictMode: true,
-}
+  sassOptions: {
+    includePaths: [path.join(__dirname, "styles")],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;