From 5b6bd759de3a8d298681b2da35001d0317b4b3d9 Mon Sep 17 00:00:00 2001
From: Naian <naianfelix123@gmail.com>
Date: Tue, 17 Jan 2023 15:03:18 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20fun=C3=A7=C3=A3o=20dos=20flo?=
 =?UTF-8?q?at=20bottons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 desafio5/package-lock.json                    | 26 +++++++++++++++++
 desafio5/package.json                         |  3 ++
 desafio5/src/components/Footer/Footer.tsx     | 29 ++++++++++---------
 .../src/components/Footer/FooterMobile.tsx    | 17 +++++++----
 .../{footer.module.css => footer.module.scss} | 16 +++++-----
 .../components/Footer/footerMobile.module.css | 16 +++++-----
 desafio5/src/components/Header/Header.tsx     |  2 +-
 .../src/components/Header/HeaderMobile.tsx    |  2 +-
 .../src/components/Header/header.module.css   |  6 ++--
 .../components/Header/headerMobile.module.css |  7 ++---
 .../Newsletter/newsletter.module.css          |  6 ++--
 desafio5/src/style/index.css                  |  4 +++
 12 files changed, 90 insertions(+), 44 deletions(-)
 rename desafio5/src/components/Footer/{footer.module.css => footer.module.scss} (91%)

diff --git a/desafio5/package-lock.json b/desafio5/package-lock.json
index 68f112b..93a20dc 100644
--- a/desafio5/package-lock.json
+++ b/desafio5/package-lock.json
@@ -20,6 +20,9 @@
         "react-scripts": "5.0.1",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "sass": "^1.57.1"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -8609,6 +8612,12 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz",
+      "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==",
+      "devOptional": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14479,6 +14488,23 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.57.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
diff --git a/desafio5/package.json b/desafio5/package.json
index 178045b..1d8cf6e 100644
--- a/desafio5/package.json
+++ b/desafio5/package.json
@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "sass": "^1.57.1"
   }
 }
diff --git a/desafio5/src/components/Footer/Footer.tsx b/desafio5/src/components/Footer/Footer.tsx
index b6e1402..533e129 100644
--- a/desafio5/src/components/Footer/Footer.tsx
+++ b/desafio5/src/components/Footer/Footer.tsx
@@ -14,18 +14,14 @@ import instagram from "../../assets/img/insta.svg";
 import twitter from "../../assets/img/twitter.svg";
 import youtube from "../../assets/img/youtube.svg";
 import linkedin from "../../assets/img/link.svg";
-import style from "./footer.module.css";
+import style from "./footer.module.scss";
 
 const Footer = () => {
-  // const [open, setOpen] = useState(false);
-  // const clickAccordion = () => {
-  //   setOpen(true);
-  // };
   return (
     <>
       <div className={style["footer-top"]}>
         <section className={style["institucional"]}>
-          <h1>INSTITUCIONAL</h1>
+          <h2>INSTITUCIONAL</h2>
           <div className={style["wrapper"]}>
             <a href="/">Quem Somos</a>
 
@@ -40,7 +36,7 @@ const Footer = () => {
         </section>
 
         <section className={style["duvidas"]}>
-          <h1>DÚVIDAS</h1>
+          <h2>DÚVIDAS</h2>
           <div className={style["wrapper"]}>
             <a href="/">Entrega</a>
 
@@ -55,11 +51,11 @@ const Footer = () => {
         </section>
 
         <section className={style["fale-conosco"]}>
-          <h1>FALE CONOSCO</h1>
+          <h2>FALE CONOSCO</h2>
           <div className={style["wrapper"]}>
-            <h2>Atendimento ao Consumidor</h2>
+            <h3>Atendimento ao Consumidor</h3>
             <a href="/">(11) 4159 9504</a>
-            <h2>Atendimento Online</h2>
+            <h3>Atendimento Online</h3>
             <a className={style["last-link"]} href="/">
               (11) 99433-8825
             </a>
@@ -109,8 +105,15 @@ const Footer = () => {
           </a>
         </div>
         <div className={style["float-buttons"]}>
-          <button className={style["button-whats"]}></button>
-          <button className={style["up-button"]}></button>
+          <a
+            className={style["button-whats"]}
+            target="blank"
+            href="https://wa.me/+55022997886109">
+            .
+          </a>
+          <a href="#header" className={style["up-button"]}>
+            .
+          </a>
         </div>
       </div>
 
@@ -129,7 +132,7 @@ const Footer = () => {
           <img className={style["icons"]} src={hiper} alt="Hipercard" />
           <img className={style["icons"]} src={paypal} alt="Pay Pal" />
           <img className={style["icons"]} src={boleto} alt="Boleto" />
-          <span className="divisor"></span>
+          <span className={style["divisor"]}></span>
           <img className={style["icon-vtex"]} src={vtex} alt="Vtex" />
         </div>
         <div className={style["powered"]}>
diff --git a/desafio5/src/components/Footer/FooterMobile.tsx b/desafio5/src/components/Footer/FooterMobile.tsx
index 29bcd82..88489ae 100644
--- a/desafio5/src/components/Footer/FooterMobile.tsx
+++ b/desafio5/src/components/Footer/FooterMobile.tsx
@@ -100,9 +100,9 @@ const FooterMobile = () => {
             className={`${style["wrapper"]} ${
               accordions.faleConosco ? style["active"] : ""
             }`}>
-            <h2>Atendimento ao Consumidor</h2>
+            <h3>Atendimento ao Consumidor</h3>
             <a href="/">(11) 4159 9504</a>
-            <h2>Atendimento Online</h2>
+            <h3>Atendimento Online</h3>
             <a className={style["last-link"]} href="/">
               (11) 99433-8825
             </a>
@@ -152,8 +152,15 @@ const FooterMobile = () => {
           </a>
         </div>
         <div className={style["float-buttons"]}>
-          <button className={style["button-whats"]}></button>
-          <button className={style["up-button"]}></button>
+          <a
+            className={style["button-whats"]}
+            target="blank"
+            href="https://wa.me/+55022997886109">
+            .
+          </a>
+          <a href="#header-mobile" className={style["up-button"]}>
+            .
+          </a>
         </div>
       </div>
 
@@ -172,7 +179,7 @@ const FooterMobile = () => {
           <img className={style["icons"]} src={hiper} alt="Hipercard" />
           <img className={style["icons"]} src={paypal} alt="Pay Pal" />
           <img className={style["icons"]} src={boleto} alt="Boleto" />
-          <span className="divisor"></span>
+          <span className={style["divisor"]}></span>
           <img className={style["icon-vtex"]} src={vtex} alt="Vtex" />
         </div>
         <div className={style["powered"]}>
diff --git a/desafio5/src/components/Footer/footer.module.css b/desafio5/src/components/Footer/footer.module.scss
similarity index 91%
rename from desafio5/src/components/Footer/footer.module.css
rename to desafio5/src/components/Footer/footer.module.scss
index 267d422..6fd7f28 100644
--- a/desafio5/src/components/Footer/footer.module.css
+++ b/desafio5/src/components/Footer/footer.module.scss
@@ -5,9 +5,8 @@
   padding: 50px 100px;
 }
 
-h1 {
-  font-family: "Roboto";
-  font-style: normal;
+h2 {
+  font-family: "Roboto", sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 16px;
@@ -17,8 +16,8 @@ h1 {
   text-transform: uppercase;
 }
 
-h2 {
-  font-family: "Roboto";
+h3 {
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 12px;
@@ -30,7 +29,7 @@ h2 {
 }
 
 a {
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
@@ -51,6 +50,7 @@ a {
 
 .last-link {
   margin: 0;
+  text-decoration: underline;
 }
 
 .icons-top {
@@ -127,7 +127,7 @@ a {
 }
 
 p {
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 10px;
@@ -153,6 +153,7 @@ p {
   background-size: 100% 100%;
   background-color: transparent;
   border: 0;
+  margin: 0;
   cursor: pointer;
 }
 
@@ -164,6 +165,7 @@ p {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
+  margin-bottom: 0;
   border: 0;
 }
 
diff --git a/desafio5/src/components/Footer/footerMobile.module.css b/desafio5/src/components/Footer/footerMobile.module.css
index 0ab92e3..aace8ef 100644
--- a/desafio5/src/components/Footer/footerMobile.module.css
+++ b/desafio5/src/components/Footer/footerMobile.module.css
@@ -6,7 +6,7 @@
 
 .button-title {
   margin-bottom: 12px;
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
@@ -59,7 +59,7 @@ button {
 }
 
 p {
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 10px;
@@ -72,7 +72,6 @@ p {
 .footer-bottom {
   flex-direction: column;
   align-items: flex-start;
-  padding: 15px 16px;
   background: #000000;
   display: flex;
   justify-content: space-between;
@@ -87,10 +86,6 @@ p {
   min-width: 234px;
 }
 
-.cards {
-  margin-bottom: 15px;
-}
-
 .powered {
   display: flex;
   align-items: center;
@@ -100,6 +95,7 @@ p {
 .cards {
   display: flex;
   align-items: center;
+  margin-bottom: 15px;
 }
 
 .icons {
@@ -132,6 +128,10 @@ p {
   width: 1px;
 }
 
+.last-link {
+  text-decoration: underline;
+}
+
 .float-buttons {
   position: fixed;
   top: 80%;
@@ -148,6 +148,7 @@ p {
   background-size: 100% 100%;
   background-color: transparent;
   border: 0;
+  margin: 0;
   cursor: pointer;
 }
 
@@ -159,6 +160,7 @@ p {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
+  margin-bottom: 0;
   border: 0;
 }
 
diff --git a/desafio5/src/components/Header/Header.tsx b/desafio5/src/components/Header/Header.tsx
index 7c03795..2c323b2 100644
--- a/desafio5/src/components/Header/Header.tsx
+++ b/desafio5/src/components/Header/Header.tsx
@@ -6,7 +6,7 @@ import style from "./header.module.css";
 
 const Header = () => {
   return (
-    <div className={style["header"]}>
+    <div id="header" className={style["header"]}>
       <div>
         <div className={style["header-wrapper"]}>
           <div>
diff --git a/desafio5/src/components/Header/HeaderMobile.tsx b/desafio5/src/components/Header/HeaderMobile.tsx
index 27c57fa..04db074 100644
--- a/desafio5/src/components/Header/HeaderMobile.tsx
+++ b/desafio5/src/components/Header/HeaderMobile.tsx
@@ -9,7 +9,7 @@ const HeaderMobile = () => {
   };
   return (
     <>
-      <div className={style["header"]}>
+      <div id="header-mobile" className={style["header"]}>
         <div className={style["header-wrapper"]}>
           <button onClick={clickBurguer} className={style["burguer"]} />
           <img className={style["logom3"]} src={logoM3} alt="Logo M3" />
diff --git a/desafio5/src/components/Header/header.module.css b/desafio5/src/components/Header/header.module.css
index 628f7b2..c65d94e 100644
--- a/desafio5/src/components/Header/header.module.css
+++ b/desafio5/src/components/Header/header.module.css
@@ -20,7 +20,7 @@
   height: 14px;
   outline: 0;
   margin: 8px 0 8px 16px;
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;
@@ -58,7 +58,7 @@
   background: transparent;
   color: #ffffff;
   margin: 0 55px 0 0;
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;
@@ -88,7 +88,7 @@
 .cursos,
 .saiba-mais,
 .institucionais {
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
diff --git a/desafio5/src/components/Header/headerMobile.module.css b/desafio5/src/components/Header/headerMobile.module.css
index fc7d82d..75a7e67 100644
--- a/desafio5/src/components/Header/headerMobile.module.css
+++ b/desafio5/src/components/Header/headerMobile.module.css
@@ -26,12 +26,11 @@
 }
 
 .input {
-  height: 100%;
   width: 100%;
   height: 36px;
   border: 0;
   outline: 0;
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;
@@ -111,7 +110,7 @@
 .button-login {
   background-color: transparent;
   border: 0;
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -143,7 +142,7 @@
 }
 
 .menu-burguer-li {
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
diff --git a/desafio5/src/components/Newsletter/newsletter.module.css b/desafio5/src/components/Newsletter/newsletter.module.css
index 4cc9d28..796726b 100644
--- a/desafio5/src/components/Newsletter/newsletter.module.css
+++ b/desafio5/src/components/Newsletter/newsletter.module.css
@@ -22,7 +22,7 @@
 }
 
 .newsletter-label {
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 500;
   font-size: 18px;
@@ -34,7 +34,7 @@
 
 .button-submit {
   background-color: #000;
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 700;
   font-size: 12px;
@@ -60,7 +60,7 @@
 }
 
 .newsletter-wrapper input::placeholder {
-  font-family: "Roboto";
+  font-family: "Roboto", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
diff --git a/desafio5/src/style/index.css b/desafio5/src/style/index.css
index 2b822c4..59b29ef 100644
--- a/desafio5/src/style/index.css
+++ b/desafio5/src/style/index.css
@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",