package.json

@@ -42,5 +42,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "main": "index.js",
+  "repository": "ssh://git@gitea.ecommercetools.com.br:22022/SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes.git",
+  "author": "Savio <savio.96@hotmail.com>",
+  "license": "MIT"
 }

src/components/Address/Address.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+const Address = () => {
+  return (
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor
+    </p>
+  );
+};
+
+export { Address };

src/components/Contact/Contact.tsx

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

src/components/Contact/contact.module.scss

@@ -0,0 +1,37 @@
+.contatosInfo {
+  li {
+    margin-bottom: 12px;
+  }
+  h2 {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    @media screen and (min-width: 2500px) {
+      font-size: 38px;
+      line-height: 32.81px;
+    }
+  }
+  p {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: 500;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28.13px;
+    }
+  }
+  a {
+    text-decoration: none;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #030303;
+    @media screen and (min-width: 2500px) {
+      font-size: 24px;
+      line-height: 28.13px;
+    }
+  }
+  .contatoCel {
+    text-decoration: underline;
+  }
+}

src/components/DevelopedBy/DevelopedBy.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import m3Logo from "./assets/image/m3Logo.png";
+import styles from "./developedBy.module.scss";
+const DevelopedBy = () => {
+  return (
+    <div className={styles["developed-wrapper"]}>
+      <p>Developed by</p>
+      <img src={m3Logo} alt="m3Logo" />
+    </div>
+  );
+};
+
+export { DevelopedBy };

src/components/DevelopedBy/developedBy.module.scss

@@ -0,0 +1,8 @@
+.developed-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  p {
+    margin-right: 30px;
+  }
+}

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/components/Payments/Payments.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import masterImg from "./assets/image/Master.png";
+import visaImg from "./assets/image/Visa.png";
+import dinersImg from "./assets/image/Diners.png";
+import eloImg from "./assets/image/Elo.png";
+import hiperImg from "./assets/image/Hiper.png";
+import paypalImg from "./assets/image/Paypal.png";
+import boletoImg from "./assets/image/Boleto.png";
+import vtexImg from "./assets/image/vtex-pci-200.png";
+import styles from "./payments.module.scss";
+
+const Payments = () => {
+  return (
+    <ul className={styles["paymentsList"]}>
+      <li className={styles["paymentsItem"]}>
+        <img src={masterImg} alt="masterCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={visaImg} alt="visaCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={dinersImg} alt="dinersCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={eloImg} alt="eloCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={hiperImg} alt="hiperCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={paypalImg} alt="paypalCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={boletoImg} alt="boletoCard" />
+      </li>
+    </ul>
+  );
+};
+
+const VtexPci = () => {
+  return <img src={vtexImg} alt="vtx Pci" />;
+};
+
+export { Payments, VtexPci };

src/components/Payments/payments.module.scss

@@ -0,0 +1,4 @@
+.paymentsList {
+  display: flex;
+  flex-direction: row;
+}

src/components/PoweredBy/PoweredBy.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import vtexLogo from "./assets/image/vtexLogo.png";
+import styles from "./poweredBy.module.scss";
+const PoweredBy = () => {
+  return (
+    <div className={styles["powered-wrapper"]}>
+      <p>Powered by</p>
+      <img src={vtexLogo} alt="vtexLogo" />
+    </div>
+  );
+};
+
+export { PoweredBy };

src/components/PoweredBy/poweredBy.module.scss

@@ -0,0 +1,8 @@
+.powered-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  p {
+    margin-right: 30px;
+  }
+}

src/components/Socials/Socials.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styles from "./socials.module.scss";
+import facebookImg from "./assets/images/Facebook.png";
+import instagramImg from "./assets/images/Instagram.png";
+import twitterImg from "./assets/images/Twitter.png";
+import youtubeImg from "./assets/images/Youtube.png";
+import linkedinImg from "./assets/images/Linkedin.png";
+import whatsappImg from "./assets/images/whatsapp.png";
+
+const Socials = () => {
+  return (
+    <div className={styles["socials-wrapper"]}>
+      <ul className={styles["socialsList"]}>
+        <li className={styles["socials-item"]}>
+          <img src={facebookImg} alt="Facebook" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={instagramImg} alt="Instagram" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={twitterImg} alt="Twitter" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={youtubeImg} alt="Youtube" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={linkedinImg} alt="Linkedin" />
+        </li>
+        <li className={styles["socials-item"]}>
+          <img src={whatsappImg} alt="Whatsapp" />
+        </li>
+      </ul>
+      <a className={styles["siteLink"]} href="/">
+        www.loremipsum.com
+      </a>
+    </div>
+  );
+};
+
+export { Socials };

src/components/Socials/socials.module.scss

@@ -0,0 +1,22 @@
+.socials-wrapper {
+  .socialsList {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 12px;
+    li {
+      margin-right: 10px;
+    }
+  }
+  a {
+    text-decoration: none;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16.41px;
+    color: #030303;
+
+    @media screen and (min-width: 2500px) {
+      font-size: 28px;
+      line-height: 32.81px;
+    }
+  }
+}

src/pages/Home.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Header } from "../sectors/Header/Header";
+import { Socials } from "../components/Socials/Socials";
+
 const Home = () => {
   return (
     <div>
-      <Header />
+      <Socials></Socials>
     </div>
   );
 };

src/styles/common/global.scss

@@ -1,15 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 body,
 input,
 button {
-    font-family: sans-serif;
-    font-size: 16px;
-    color: #333;
+  font-family: "Roboto";
+  font-size: 16px;
+  color: #333;
 }
 button {
-    cursor: pointer;
+  cursor: pointer;
+}
+li {
+  list-style-type: none;
 }