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/Contact/Contact.tsx

@@ -3,15 +3,27 @@ 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>
+    <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>
   );
 };
 

src/components/Contact/contact.module.scss

@@ -1,19 +1,37 @@
 .contatosInfo {
-  margin-bottom: 12px;
+  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/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,10 +1,10 @@
 import React from "react";
-import { Contact } from "../components/Contact/Contact";
+import { Socials } from "../components/Socials/Socials";
 
 const Home = () => {
   return (
     <div>
-      <Contact></Contact>
+      <Socials></Socials>
     </div>
   );
 };