feat: Adiciona função do botão de retornar ao topo

src/components/Footer/FooterTop.tsx

@@ -8,8 +8,20 @@ import twitterIcon from "../../assets/icons/twitter-icon.svg";
 import youtubeIcon from "../../assets/icons/youtube-icon.svg";
 import linkedinIcon from "../../assets/icons/linkedin-icon.svg";
 import arrowUp from "../../assets/icons/arrow-up-icon.svg";
+import { useState } from "react";
 
 const FooterTop = () => {
+    const returnTop = () => {
+        window.scrollTo(0, 0);
+    };
+
+    const [hasScrolled, setHasScrolled] = useState(false);
+
+    document.addEventListener("scroll", () => {
+        if (window.scrollY > 0) setHasScrolled(true);
+        else setHasScrolled(false);
+    });
+
     const footerList1 = [
         "Quem Somos",
         "Política de Privacidade",
@@ -45,34 +57,44 @@ const FooterTop = () => {
             <div className={styles["social-media"]}>
                 <ul className={styles["social-media__list"]}>
                     <li className={styles["social-media__item"]}>
-                        <IconSocialMedia src={facebookIcon} alt="" />
+                        <IconSocialMedia src={facebookIcon} alt="Facebook Icon" />
                     </li>
 
                     <li className={styles["social-media__item"]}>
-                        <IconSocialMedia src={instagramIcon} alt="" />
+                        <IconSocialMedia src={instagramIcon} alt="Instagram Icon" />
                     </li>
 
                     <li className={styles["social-media__item"]}>
-                        <IconSocialMedia src={twitterIcon} alt="" />
+                        <IconSocialMedia src={twitterIcon} alt="Twitter Icon" />
                     </li>
 
                     <li className={styles["social-media__item"]}>
-                        <IconSocialMedia src={youtubeIcon} alt="" />
+                        <IconSocialMedia src={youtubeIcon} alt="Youtube Icon" />
                     </li>
 
                     <li className={styles["social-media__item"]}>
-                        <IconSocialMedia src={linkedinIcon} alt="" />
+                        <IconSocialMedia src={linkedinIcon} alt="Linkedin Icon" />
                     </li>
                 </ul>
 
-                <p className={styles["social-media__social-link"]}>www.loremipsum.com</p>
+                <a
+                    href="https://www.loremipsum.com"
+                    className={styles["social-media__social-link"]}
+                >
+                    www.loremipsum.com
+                </a>
             </div>
 
             <div className={styles["util-buttons"]}>
                 <a href="#" className={styles["util-buttons__whatsapp"]}>
                     <img src={whatsAppICon} alt="Whatsapp Icon" />
                 </a>
-                <button className={styles["util-buttons__return-top"]}>
+                <button
+                    onClick={returnTop}
+                    className={`${styles["util-buttons__return-top"]} ${
+                        styles[`${hasScrolled && "show"}`]
+                    }`}
+                >
                     <img src={arrowUp} alt="Seta para Cima" />
                 </button>
             </div>

src/styles/partials/footer.scss

@@ -171,6 +171,7 @@
                 font-size: 14px;
                 line-height: 16px;
                 color: #303030;
+                text-decoration: none;
 
                 @include mq(lg, max) {
                     display: none;
@@ -184,17 +185,20 @@
         }
 
         .util-buttons {
-            position: absolute;
-            top: 27px;
+            position: fixed;
             right: 16px;
+            bottom: 190px;
 
             @include mq(lg, max) {
-                bottom: 21px;
+                bottom: 27px;
                 right: 17px;
-                top: auto;
                 z-index: map-get($z-index, level-1);
             }
 
+            @include mq(xl, min) {
+                bottom: 229px;
+            }
+
             &__whatsapp img {
                 @include mq(xl, min) {
                     width: 66px;
@@ -212,6 +216,14 @@
                 align-items: center;
                 justify-content: center;
                 margin-top: 5px;
+                transition: opacity 0.2s ease-in-out;
+                opacity: 0;
+                pointer-events: none;
+
+                &.show {
+                    opacity: 1;
+                    pointer-events: all;
+                }
 
                 @include mq(xl, min) {
                     width: 66px;

src/styles/utils/reset.scss

@@ -3,6 +3,7 @@ body {
     margin: 0;
     padding: 0;
     font-family: $font-family;
+    scroll-behavior: smooth;
 }
 
 img {