react-project/src/components/FixedIcons/FixedIcons.tsx

@@ -0,0 +1,26 @@
+import icons from "./assets/modules/FixedIcons.module.scss";
+
+import whats from "./assets/svgs/whatsapp.svg";
+import arrow from "./assets/svgs/arrow.svg";
+
+const FixedIcons = () => {
+  return (
+    <div className={icons["icons"]}>
+      <a href="/" className={icons["icons__whats"]}>
+        <figure>
+          <img src={whats} alt="Ícone WhatsApp" />
+        </figure>
+      </a>
+      <div
+        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+        className={icons["icons__arrow"]}
+      >
+        <figure>
+          <img src={arrow} alt="Ícone subir ao topo" />
+        </figure>
+      </div>
+    </div>
+  );
+};
+
+export { FixedIcons };

react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss

@@ -1,10 +1,18 @@
 .icons {
   position: fixed;
-  bottom: 190px;
+  bottom: 200px;
   right: 16px;
 
   @media screen and (min-width: 2500px) {
-    bottom: 230px;
+    bottom: 215px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    bottom: 50px;
+  }
+
+  @media screen and (max-width: 599px) {
+    bottom: 29px;
   }
 
   &__whats {
@@ -31,14 +39,23 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
+
+    figure {
+      display: contents;
+
+      img {
+        transform: translateY(-2px);
+      }
+    }
 
     @media screen and (min-width: 2500px) {
       width: 66px;
       height: 66px;
-    }
 
-    figure {
-      display: contents;
+      img {
+        width: 26px;
+      }
     }
   }
 }

react-project/src/components/MainInstitucional/Contato.tsx

@@ -27,7 +27,6 @@ const initialValues = {
 };
 
 const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
-
 const cpfMask = [
   /\d/,
   /\d/,
@@ -44,7 +43,6 @@ const cpfMask = [
   /\d/,
   /\d/,
 ];
-
 const phoneNumberMask = [
   "(",
   /\d/,

react-project/src/components/WhatsApp/WhatsApp.tsx

@@ -1,23 +0,0 @@
-import whats from "./assets/modules/WhatsApp.module.scss";
-
-import icon from "./assets/svgs/whatsapp.svg";
-import arrow from "./assets/svgs/arrow.svg";
-
-const WhatsApp = () => {
-  return (
-    <div className={whats["icons"]}>
-      <a href="/" className={whats["icons__whats"]}>
-        <figure>
-          <img src={icon} alt="Ícone de whatsapp" />
-        </figure>
-      </a>
-      <div className={whats["icons__arrow"]}>
-        <figure>
-          <img src={arrow} alt="Ícone de flecha" />
-        </figure>
-      </div>
-    </div>
-  );
-};
-
-export { WhatsApp };

react-project/src/pages/Institucional.tsx

@@ -3,7 +3,7 @@ import "../assets/styles/variables.scss";
 import { Header } from "../components/Header/Header";
 import { HeaderMobile } from "../components/Header/HeaderMobile";
 import { Main } from "../components/MainInstitucional/Main";
-import { WhatsApp } from "../components/WhatsApp/WhatsApp";
+import { FixedIcons } from "../components/FixedIcons/FixedIcons";
 import { Footer } from "../components/Footer/Footer";
 
 const Institucional = () => {
@@ -14,7 +14,7 @@ const Institucional = () => {
         <HeaderMobile />
       </header>
       <Main />
-      <WhatsApp />
+      <FixedIcons />
       <Footer />
     </>
   );