diff --git a/src/components/Footer/FloatingIcons/FloatingIcons.module.scss b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss new file mode 100644 index 0000000..56e022e --- /dev/null +++ b/src/components/Footer/FloatingIcons/FloatingIcons.module.scss @@ -0,0 +1,57 @@ +.floating-icons-wrapper { +// background-color: red; + position: fixed; + right: 16px; + bottom: 190px; + + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + + @media screen and (width >= 2500px) { + bottom: 229.24px; + } + + .whatsapp-button { + border: 0; + background: transparent; + + img { + width: 34px; + height: 34px; + display: block; + + @media screen and (width >= 2500px) { + width: 66px; + height: 66px; + } + } + } + + .up-button { + background: #c4c4c4; + border: 0; + border-radius: 50%; + padding: 13.5px 10.5px; + width: 34px; + height: 34px; + + @media screen and (width >= 2500px) { + width: 66px; + height: 66px; + } + + img { + width: 13px; + height: 7px; + display: block; + margin: 0 auto; + + @media screen and (width >= 2500px) { + width: 24.14px; + height: 13px; + } + } + } +} diff --git a/src/components/Footer/FloatingIcons/FloatingIcons.tsx b/src/components/Footer/FloatingIcons/FloatingIcons.tsx new file mode 100644 index 0000000..d070572 --- /dev/null +++ b/src/components/Footer/FloatingIcons/FloatingIcons.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +import styles from "./FloatingIcons.module.scss"; + +import whatsapp from "../assets/whatsapp-icon.svg"; +import arrowUp from "../assets/arrow-up.svg"; +import { Link } from "react-router-dom"; + +const FloatingIcons = () => { + return ( +
+ + +
+ ); +}; + +export { FloatingIcons }; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 6373006..8210a8c 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { FloatingIcons } from "./FloatingIcons/FloatingIcons"; import styles from "./Footer.module.scss"; import { FooterBottom } from "./FooterBottom/FooterBottom"; @@ -16,6 +17,7 @@ const Footer = () => {

www.loremipsum.com

+ diff --git a/src/components/Footer/assets/arrow-up.svg b/src/components/Footer/assets/arrow-up.svg new file mode 100644 index 0000000..a217195 --- /dev/null +++ b/src/components/Footer/assets/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Footer/assets/whatsapp-icon.svg b/src/components/Footer/assets/whatsapp-icon.svg new file mode 100644 index 0000000..2314673 --- /dev/null +++ b/src/components/Footer/assets/whatsapp-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +