diff --git a/src/assets/imgs/logo-top.png b/src/assets/imgs/logo-top.png new file mode 100644 index 0000000..efeffee Binary files /dev/null and b/src/assets/imgs/logo-top.png differ diff --git a/src/assets/imgs/logo-whatsapp.png b/src/assets/imgs/logo-whatsapp.png new file mode 100644 index 0000000..06c276c Binary files /dev/null and b/src/assets/imgs/logo-whatsapp.png differ diff --git a/src/components/ButtonsFixed/ButtonsFixed.module.scss b/src/components/ButtonsFixed/ButtonsFixed.module.scss new file mode 100644 index 0000000..83800b5 --- /dev/null +++ b/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; + } + } + } + } + } + +} diff --git a/src/components/ButtonsFixed/ButtonsFixed.tsx b/src/components/ButtonsFixed/ButtonsFixed.tsx new file mode 100644 index 0000000..f44d4a4 --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export {ButtonsFixeds} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index b23138c..3c00e8a 100644 --- a/src/components/Header/Header.tsx +++ b/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 ( <> + ) } diff --git a/src/pages/Home.module.scss b/src/pages/Home.module.scss new file mode 100644 index 0000000..348ed5b --- /dev/null +++ b/src/pages/Home.module.scss @@ -0,0 +1,2 @@ +.home { +} diff --git a/src/pages/Home.scss b/src/pages/Home.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index ff2b8e1..f247586 100644 --- a/src/pages/Home.tsx +++ b/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 ( - <> +
+
); }