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 ( +