feat(BackToTop): adiciona botão de voltar ao topo e whatsapp

src/components/FooterTop.tsx

@@ -7,8 +7,6 @@ import instagram from "../assets/svgs/instagram.svg";
 import twitter from "../assets/svgs/twitter.svg";
 import youtube from "../assets/svgs/youtube.svg";
 import linkedin from "../assets/svgs/linkedin.svg";
-import whatsapp from "../assets/svgs/whatsapp.svg";
-import seta from "../assets/svgs/up-arrow.svg";
 
 const FoooterTop = () => {
   return (
@@ -57,16 +55,6 @@ const FoooterTop = () => {
           www.loremipsum.com
         </a>
       </div>
-      <div className={styles["volta-pag"]}>
-        <img
-          className={styles["whatsapp-icon"]}
-          src={whatsapp}
-          alt="whatsapp"
-        />
-        <a className={styles["volta-pag__link"]} href="/">
-          <img className={styles["go-to-top"]} src={seta} alt="seta" />
-        </a>
-      </div>
     </div>
   );
 };

src/components/Header.tsx

@@ -3,12 +3,11 @@ import React from "react";
 import styles from "../styles/main.module.scss";
 import { HeaderBottom } from "./HeaderBottom";
 import { HeaderTop } from "./HeaderTop";
-import { Modal } from "./Modal";
 
 const Header = () => {
   return (
     <header>
-      <div className={styles["header-wrapper"]}>
+      <div className={styles["header-wrapper"]} id="header">
         <HeaderTop />
         <HeaderBottom />
       </div>

src/components/Main.tsx

@@ -2,12 +2,14 @@ import React from "react";
 
 import styles from "../styles/main.module.scss";
 import { Newsletter } from "./Newsletter";
+import { ScrollPage } from "./ScrollPage";
 
 const Main = () => {
   return (
     <main>
       <div className={styles["main-wrapper"]}>
         <Newsletter />
+        <ScrollPage />
       </div>
     </main>
   );

src/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import "./Modal.scss";
 import close from "../assets/svgs/close-icon.svg";
 

src/components/ScrollPage.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import styles from "../styles/main.module.scss";
+import whatsapp from "../assets/svgs/whatsapp.svg";
+import seta from "../assets/svgs/up-arrow.svg";
+
+const ScrollPage = () => {
+  const [pageYPosition, setPageYPosition] = useState(0);
+
+  function getPageYAfterScroll() {
+    setPageYPosition(window.scrollY);
+  }
+
+  window.addEventListener("scroll", getPageYAfterScroll);
+
+  return (
+    <div className={styles["volta-pag"]}>
+      <img className={styles["whatsapp-icon"]} src={whatsapp} alt="whatsapp" />
+      {pageYPosition > 600 && (
+        <a className={styles["volta-pag__link"]} href="#header">
+          <img className={styles["go-to-top"]} src={seta} alt="seta" />
+        </a>
+      )}
+    </div>
+  );
+};
+
+export { ScrollPage };

src/styles/partials/Footer.module.scss

@@ -67,30 +67,6 @@
         color: $black3;
       }
     }
-
-    .volta-pag {
-      position: absolute;
-      top: 41px;
-      right: 16px;
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-
-      &__link {
-        width: 34px;
-        height: 34px;
-        border-radius: 50%;
-        background: $gray2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .go-to-top {
-          width: 12px;
-          height: 25px;
-        }
-      }
-    }
   }
 
   &__bottom {
@@ -190,12 +166,6 @@
       }
     }
 
-    .volta-pag {
-      bottom: -96px;
-      z-index: 1;
-      top: auto;
-    }
-
     &__bottom {
       justify-content: flex-start;
       align-items: flex-start;
@@ -205,7 +175,6 @@
 
       &-text {
         margin-bottom: 15px;
-        max-width: 354px;
       }
 
       &-central {
@@ -265,17 +234,6 @@
         width: 66px;
         top: 26px;
       }
-
-      .volta-pag {
-        &__link {
-          width: 66px;
-          height: 66px;
-
-          .go-to-top {
-            width: 24px;
-          }
-        }
-      }
     }
 
     &__bottom {

src/styles/partials/MainContent.module.scss

@@ -1,4 +1,6 @@
 .main-wrapper {
+  position: relative;
+  height: 1200px;
   &__newsletter {
     display: flex;
     flex-direction: column;
@@ -63,6 +65,35 @@
       }
     }
   }
+
+  .volta-pag {
+    position: fixed;
+    bottom: 20px;
+    right: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    z-index: 1;
+
+    .whatsapp-icon {
+      width: 34px;
+    }
+
+    &__link {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      background: $gray2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .go-to-top {
+        width: 12px;
+        height: 25px;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1024px) {
@@ -134,5 +165,19 @@
         }
       }
     }
+
+    .volta-pag {
+      .whatsapp-icon {
+        width: 66px;
+      }
+      &__link {
+        width: 66px;
+        height: 66px;
+
+        .go-to-top {
+          width: 24px;
+        }
+      }
+    }
   }
 }