src/components/Contact/Contact.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "./contact.module.scss";
+
+const Contact = () => {
+  return (
+    <div className={styles["contatosInfo"]}>
+      <h2>FALE CONOSCO</h2>
+      <p>Atendimento Ao Consumidor</p>
+      <a href="tel:+551141599504">(11) 4159 9504</a>
+      <p>Atendimento Online</p>
+      <a className={styles["contatoCel"]} href="tel:+551199433">
+        (11) 99433 8825
+      </a>
+    </div>
+  );
+};
+
+export { Contact };

src/components/Contact/contact.module.scss

@@ -0,0 +1,19 @@
+.contatosInfo {
+  margin-bottom: 12px;
+  h2 {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+  }
+  p {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: 500;
+  }
+  a {
+    text-decoration: none;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+  }
+}

src/components/Doubts/Doubts.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./doubts.module.scss";
+
+const Doubts = () => {
+  return (
+    <ul className={styles["doubtsList"]}>
+      <li>
+        <a href="/">
+          <h2>DÚVIDAS</h2>
+        </a>
+      </li>
+      <li>
+        <a href="/">Entrega</a>
+      </li>
+      <li>
+        <a href="/">Pagamento</a>
+      </li>
+      <li>
+        <a href="/">Trocas e Devoluções</a>
+      </li>
+      <li>
+        <a className={styles["duvidasFreq"]} href="/">
+          Dúvidas Frequentes
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+export { Doubts };

src/components/Doubts/doubts.module.scss

@@ -0,0 +1,32 @@
+.doubtsList {
+  li {
+    color: #303030;
+    margin-bottom: 12px;
+    @media screen and (min-width: 2500px) {
+    }
+  }
+  a {
+    font-size: 12px;
+    line-height: 14.06px;
+    font-weight: 400;
+    text-decoration: none;
+    color: #303030;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 29px;
+    }
+    h2 {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.41px;
+      color: #303030;
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+  .duvidasFreq {
+    text-decoration: underline;
+  }
+}

src/components/Institutional/Institutional.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./institutional.module.scss";
+
+const Institutional = () => {
+  return (
+    <ul className={styles["institutionalList"]}>
+      <li>
+        <a href="/">
+          <h2>INSTITUCIONAL</h2>
+        </a>
+      </li>
+      <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 className={styles["revendedor"]} href="/">
+          Seja um Revendedor
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+export { Institutional };

src/components/Institutional/institutional.module.scss

@@ -0,0 +1,32 @@
+.institutionalList {
+  li {
+    color: #303030;
+    margin-bottom: 12px;
+    @media screen and (min-width: 2500px) {
+    }
+  }
+  a {
+    font-size: 12px;
+    line-height: 14.06px;
+    font-weight: 400;
+    text-decoration: none;
+    color: #303030;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 29px;
+    }
+    h2 {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.41px;
+      color: #303030;
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+  .revendedor {
+    text-decoration: underline;
+  }
+}

src/pages/Home.tsx

@@ -1,7 +1,12 @@
 import React from "react";
+import { Contact } from "../components/Contact/Contact";
 
 const Home = () => {
-  return <div>{}</div>;
+  return (
+    <div>
+      <Contact></Contact>
+    </div>
+  );
 };
 
 export { Home };

src/styles/common/global.scss

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
 * {
   margin: 0;
   padding: 0;
@@ -6,7 +8,7 @@
 body,
 input,
 button {
-  font-family: sans-serif;
+  font-family: "Roboto";
   font-size: 16px;
   color: #333;
 }