diff --git a/src/assets/svgs/seta-para-cima.svg b/src/assets/svgs/seta-para-cima.svg new file mode 100644 index 0000000..e158908 --- /dev/null +++ b/src/assets/svgs/seta-para-cima.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/whatsapp.svg b/src/assets/svgs/whatsapp.svg new file mode 100644 index 0000000..2c3cd42 --- /dev/null +++ b/src/assets/svgs/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx index a225893..4ac9ff3 100644 --- a/src/components/MainContent.tsx +++ b/src/components/MainContent.tsx @@ -12,6 +12,8 @@ import { Contato } from "../components/main/components/Contato"; import home from "../assets/svgs/home.svg"; import seta from "../assets/svgs/seta.svg"; +import whats from "../assets/svgs/whatsapp.svg"; +import setaCima from "../assets/svgs/seta-para-cima.svg"; const MainContent = () => { return ( @@ -45,6 +47,25 @@ const MainContent = () => { } /> + + + Whatsapp + + + Volte ao Topo + ); }; diff --git a/src/components/main-content.module.scss b/src/components/main-content.module.scss index 1436e12..c95cfeb 100644 --- a/src/components/main-content.module.scss +++ b/src/components/main-content.module.scss @@ -140,4 +140,51 @@ } } } + + .main-link-topButton { + img { + width: auto; + } + + .main-whatssap-link, + .main-content-backToTop { + position: fixed; + z-index: 6; + right: 16px; + } + + .main-whatssap-link { + bottom: 220px; + + @media screen and (min-width: 2500px) { + height: 66px; + } + + @media screen and (max-width: 1024px) { + bottom: 90px; + } + } + + .main-content-backToTop { + background: variables.$color-grey; + padding: 13px 10px; + border-radius: 50%; + width: 34px; + height: 34px; + + bottom: 180px; + + @media screen and (min-width: 2500px) { + width: 66px; + height: 66px; + padding: 25px 20px; + + bottom: 150px; + } + + @media screen and (max-width: 1024px) { + bottom: 50px; + } + } + } }