diff --git a/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss new file mode 100644 index 0000000..8d5373a --- /dev/null +++ b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss @@ -0,0 +1,67 @@ +@use '../../variables'; + +.buttons { + display: flex; + flex-direction: column ; + position: fixed; + right: 16px; + bottom: 190px; + + @media (min-width: 2500px) { + bottom: 229px; + } + + @media (max-width: 1024px) { + bottom: 51px; + } + + @media (max-width: 375px) { + bottom: 29px; + } + + &__whatsaspp { + margin-bottom: 5px; + + @media (min-width: 2500px) { + width: 66px; + } + + &:hover { + filter: brightness(90%) ; + } + } + + &__scrolltop { + &__circle { + width: 34px; + height: 34px; + background-color: variables.$gray-400; + border: none; + border-radius: 50%; + position: relative; + + @media (min-width: 2500px) { + width: 66px; + height: 66px; + } + + &:hover { + filter: brightness(90%) ; + } + } + + &__arrow { + position: absolute; + top: 13px; + right: 11px; + + @media (min-width: 2500px) { + width: 24px; + height: 13px; + top: 25px; + right: 21px; + } + } + } + +} diff --git a/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.tsx b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.tsx new file mode 100644 index 0000000..7e9630d --- /dev/null +++ b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +import imgWhatsApp from "./assets/whatsapp.svg"; +import imgArrow from "./assets/arrow.svg"; + +import styles from "./WhatsAppAndScrollTop.module.scss"; + +const WhatsAppAndScrollTop = () => { + + const scrollTop = () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }; + + return ( +
+ + Logo WhatApp + + + +
+ ); +} + +export{ WhatsAppAndScrollTop }; diff --git a/src/components/WhatsAppAndScrollTop/assets/arrow.svg b/src/components/WhatsAppAndScrollTop/assets/arrow.svg new file mode 100644 index 0000000..a217195 --- /dev/null +++ b/src/components/WhatsAppAndScrollTop/assets/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/WhatsAppAndScrollTop/assets/whatsapp.svg b/src/components/WhatsAppAndScrollTop/assets/whatsapp.svg new file mode 100644 index 0000000..13b56b3 --- /dev/null +++ b/src/components/WhatsAppAndScrollTop/assets/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 5828a4f..c492db5 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -6,6 +6,7 @@ import { HeaderTop } from '../components/HeaderTop/HeaderTop'; import { HeaderBottom } from '../components/HeaderBottom/HeaderBottom'; import { Newsletter } from '../components/Newsletter/Newsletter'; import { FooterBottom } from '../components/FooterBottom/FooterBottom'; +import { WhatsAppAndScrollTop } from '../components/WhatsAppAndScrollTop/WhatsAppAndScrollTop'; const Home = () => { @@ -21,6 +22,7 @@ const Home = () => { );