src/components/ButtonsFixed/ButtonsFixed.module.scss

@@ -0,0 +1,57 @@
+@import '../../variaveis';
+
+.buttons-fixeds {
+    position: fixed;
+    bottom: 229px;
+    top: auto;
+    right: 0;
+    left: auto;
+    z-index: 3;
+
+    padding-right: 16px;
+
+    @media #{$mq-tablet} {
+        bottom: 22px;
+    }
+
+    @media #{$mq-mobile} {
+        bottom: 16px;
+    }
+
+    &__list {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+
+        &__item {
+            button {
+                border: none;
+                border-radius: 100%;
+                background: transparent;
+                background-image: url('../../assets/imgs/logo-top.png');
+                width: 66px;
+                height: 66px;
+                cursor: pointer;
+
+                @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+                    width: 34px;
+                    height: 34px;
+                }
+
+                img {
+                    width: 66px;
+                    height: 66px;
+
+                    @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+                        width: 34px;
+                        height: 34px;
+                    }
+                }
+            }
+        }
+    }
+
+}

src/components/ButtonsFixed/ButtonsFixed.tsx

@@ -0,0 +1,31 @@
+
+import styles from "./ButtonsFixed.module.scss"
+
+import wpp from '../../assets/imgs/logo-whatsapp.png'
+
+const ButtonsFixeds = () => {
+
+    const scrollTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        })
+    }
+
+    return (
+        <section className={styles["buttons-fixeds"]}>
+            <ul className={styles["buttons-fixeds__list"]}>
+                <li className={styles["buttons-fixeds__list__item"]}>
+                    <a href="http://wa.me/5522999644229" target='_blank' rel="noopener noreferrer">
+                        <img src={wpp} alt="Logo Whatsapp" />
+                    </a>
+                </li>
+                <li className={styles["buttons-fixeds__list__item"]} >
+                    <button onClick={scrollTop}></button>
+                </li>
+            </ul>
+        </section>
+    )
+}
+
+export {ButtonsFixeds}

src/components/Header/Header.tsx

@@ -1,11 +1,13 @@
 import { HeaderMobile } from "./HeaderMobile/HeaderMobile"
 import { HeaderDesktop } from './HeaderDesktop/HeaderDesktop'
+import { ButtonsFixeds } from "../ButtonsFixed/ButtonsFixed"
 
 const Header = () => {
     return (
         <>
             <HeaderDesktop />
             <HeaderMobile />
+            <ButtonsFixeds />
         </>
     )
 }

src/pages/Home.module.scss

@@ -0,0 +1,2 @@
+.home {
+}

src/pages/Home.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
+import styles from './Home.module.scss'
 
 import { Footer } from '../components/Footer/Footer';
 import { Header } from '../components/Header/Header';
 
-import './Home.scss';
-
 function Home() {
     return (
-        <>
+        <div className={styles['home']}>
             <Header />
+            <div></div>
             <Footer />
-        </>
+        </div>
     );
 }