src/components/FooterBottom/styles.module.scss

@@ -118,7 +118,7 @@
     }
   }
 
-  @media (min-width: 1025px) and (max-width: 1128px) {
+  @media (min-width: 1025px) and (max-width: 1145px) {
     .poweredBy,
     .developedBy {
       font-size: 8px;

src/components/FooterTop/index.tsx

@@ -1,8 +1,98 @@
 import React from "react";
 import styles from "./styles.module.scss";
+import facebook from "../../assets/images/facebook.png";
+import instagram from "../../assets/images/instagram.png";
+import twitter from "../../assets/images/twitter.png";
+import youTube from "../../assets/images/youTube.png";
+import linkedIn from "../../assets/images/linkedIn.png";
 
 const FooterTop = () => {
-  return <div className={styles["footerTop"]}></div>;
+  return (
+    <div className={styles["footerTop"]}>
+      <div className={styles["footerTop__content"]}>
+        <div className={styles["footerTop__menuList"]}>
+          <div>
+            <div className={styles["menuLists-title"]}>
+              <h1>Institucional</h1>
+              <button></button>
+            </div>
+            <ul>
+              <li>
+                <a href="#">Quem Somos</a>
+              </li>
+              <li>
+                <a href="#">Política de Privacidade</a>
+              </li>
+              <li>
+                <a href="#">Segurança</a>
+              </li>
+              <li>
+                <a href="#">Seja um Revendedor</a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <div className={styles["menuLists-title"]}>
+              <h1>Dúvidas</h1>
+              <button></button>
+            </div>
+            <ul>
+              <li>
+                <a href="#">Entrega</a>
+              </li>
+              <li>
+                <a href="#">Pagamento</a>
+              </li>
+              <li>
+                <a href="#">Troca e Devoluções</a>
+              </li>
+              <li>
+                <a href="#">Dúvidas Frquentes</a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <div className={styles["menuLists-title"]}>
+              <h1>Fale Conosco</h1>
+              <button></button>
+            </div>
+            <ul>
+              <h2>Atendimento Ao Consumidor</h2>
+              <li>
+                <p>&#40;11&#41; 4159 9504</p>
+              </li>
+              <h2>Atendimento Online</h2>
+              <li>
+                <p>&#40;11&#41; 99433-8825</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className={styles["footerTop__socialMedia"]}>
+          <div className={styles["socialMedia-icons"]}>
+            <a href="#">
+              <img src={facebook} alt="" />
+            </a>
+            <a href="#">
+              <img src={instagram} alt="" />
+            </a>
+            <a href="#">
+              <img src={twitter} alt="" />
+            </a>
+            <a href="#">
+              <img src={youTube} alt="" />
+            </a>
+            <a href="#">
+              <img src={linkedIn} alt="" />
+            </a>
+          </div>
+          <div className={styles["socialMeida-site"]}>
+            <a href="#">www.loremipsum.com</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export { FooterTop };

src/components/FooterTop/styles.module.scss

@@ -1,6 +1,80 @@
 .footerTop {
+  display: flex;
+  justify-content: center;
   border-width: 0px 0px 1px 1px;
   border-style: solid;
   border-color: var(--black-500);
   height: 239px;
+  padding: 50px 0;
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    width: 84.442%;
+  }
+
+  &__menuList {
+    display: flex;
+    justify-content: space-between;
+    width: 707px;
+    height: 100%;
+
+    .menuLists-title {
+      height: 14px;
+      margin-bottom: 12px;
+    }
+
+    h1 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-transform: uppercase;
+      color: var(--black-400);
+    }
+
+    h2 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 14px;
+      text-transform: capitalize;
+      color: var(--black-400);
+      margin-bottom: 12px;
+    }
+
+    li {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      text-transform: capitalize;
+      color: var(--black-400);
+      margin-bottom: 12px;
+    }
+  }
+
+  &__socialMedia {
+    width: 215px;
+    height: 63px;
+
+    .socialMedia-icons {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      img {
+        width: 35px;
+        height: 35px;
+      }
+    }
+
+    .socialMeida-site {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: var(--black-400);
+    }
+  }
 }

src/styles/global.scss

@@ -18,6 +18,7 @@
 
 a {
   all: unset;
+  cursor: pointer;
 }
 
 ul {