src/components/ScrollPage/ScrollPage.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import setaImg from "../Whatsapp/assets/image/seta.png";
+
+function topFunction() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}
+
+const ScrollPage = () => {
+  let mybutton = document.getElementById("myBtn") as HTMLElement;
+  function scrollFunction() {
+    if (
+      document.body.scrollTop > 80 ||
+      document.documentElement.scrollTop > 80
+    ) {
+      mybutton.style.display = "block";
+    } else {
+      mybutton.style.display = "none";
+    }
+  }
+
+  window.onscroll = function () {
+    scrollFunction();
+  };
+  return (
+    <button onClick={() => topFunction()} id="myBtn" title="Ir para topo">
+      <img src={setaImg} alt="seta" />
+    </button>
+  );
+};
+
+export { ScrollPage };

src/components/SearchBox/searchBox.module.scss

@@ -10,7 +10,7 @@
   gap: 10px;
   width: 264px;
   height: 32px;
-
+  font-size: 28px;
   background: #ffffff;
 
   border: 2px solid #f2f2f2;
@@ -45,6 +45,8 @@
     &::placeholder {
       font-size: 28px;
     }
+    right: 54px;
+    top: 10px;
   }
   @media screen and (max-width: 1024px) {
     right: 30px;

src/index.tsx

@@ -9,12 +9,14 @@ import { RoutesUrl } from "./components/Router/Router";
 import { Header } from "./sectors/Header/Header";
 import { Footer } from "./sectors/Footer/Footer";
 import { Newsletter } from "./components/Newsletter/Newsletter";
+import { ContactWhat } from "./sectors/ContactWhat/ContactWhat";
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
     <BrowserRouter>
+      <ContactWhat></ContactWhat>
       <Header></Header>
       <RoutesUrl></RoutesUrl>
 

src/sectors/ContactWhat/ContactWhat.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Whatsapp } from "../../components/Whatsapp/Whatsapp";
+import { ScrollPage } from "../../components/ScrollPage/ScrollPage";
+const ContactWhat = () => {
+  return (
+    <div className="scroll-wrapper">
+      <Whatsapp></Whatsapp>
+      <ScrollPage></ScrollPage>
+    </div>
+  );
+};
+
+export { ContactWhat };

src/sectors/Footer/TopFooter/TopFooter.tsx

@@ -17,7 +17,6 @@ const TopFooter = () => {
 
         <div className="top_footer_socials">
           <Socials></Socials>
-          <Whatsapp></Whatsapp>
         </div>
       </div>
       <div className="top_footerMob_wrapper">

src/styles/main.scss

@@ -12,3 +12,4 @@
 @import "partials/accordionBody.scss";
 @import "partials/footer.scss";
 @import "partials/bottom_footer.scss";
+@import "partials/scroll.scss";

src/styles/partials/scroll.scss

@@ -0,0 +1,21 @@
+.scroll-wrapper {
+  display: flex; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px; /* Place the button at the bottom of the page */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  flex-direction: column;
+  gap: 5px;
+}
+#myBtn {
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  cursor: pointer; /* Add a mouse pointer on hover */
+
+  background-color: transparent;
+  @media screen and (min-width: 2500px) {
+    img {
+      width: 66px;
+    }
+  }
+}