diff --git a/src/components/Button/Buttom.tsx b/src/components/Button/Buttom.tsx new file mode 100644 index 0000000..9fcdb9e --- /dev/null +++ b/src/components/Button/Buttom.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +interface Btn { + text: string; + type: "button" | "submit" | "reset"; + className: string; +} + +const Button = ( props: Btn ) => { + const { text, type, className } = props; + + return ( + + ); +}; + +export { Button }; diff --git a/src/components/FooterBottom/FooterBottom.module.scss b/src/components/FooterBottom/FooterBottom.module.scss new file mode 100644 index 0000000..adc8389 --- /dev/null +++ b/src/components/FooterBottom/FooterBottom.module.scss @@ -0,0 +1,149 @@ +@use '../../variables'; + +.footer-bottom { + background-color: variables.$black; + height: 100%; + + &__wrapper { + display: flex; + padding: 15px 100px; + justify-content: space-between; + align-items: center; + + @media (max-width: 1024px) { + display: grid; + grid-template-columns: 100%; + padding: 15px 16px; + gap: 15px; + } + } + + &__address { + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: variables.$white; + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + + @media (max-width: 1024px) { + grid-area: 2; + } + } + + &__payments-icons { + display: flex; + align-items: center; + gap: 12px; + + @media ((min-width: 1025px) and (max-width: 1100px)) { + gap: 6px; + } + + @media (min-width: 370px) and (max-width: 425px) { + gap: 11px; + } + + @media (max-width: 369px) { + flex-wrap: wrap; + } + + .li-card { + display: flex; + } + + .card { + width: auto; + height: 20px; + + @media (min-width: 2500px) { + height: 39px; + } + + @media (max-width: 420px) { + height: 17px; + } + } + + .li-divider { + border: 1px solid variables.$gray-400; + height: 24px; + + @media (max-width: 420px) { + height: 20px; + } + } + + .li-vtexpci { + width: auto; + height: 34px; + + @media (min-width: 2500px) { + height: 66px; + } + + @media (max-width: 420px) { + height: 28px; + } + } + } + + &__developedby { + display: flex; + align-items: center; + gap: 13px; + + @media (min-width: 2500px) { + gap: 12px; + } + + @media ((min-width: 1025px) and (max-width: 1150px)) { + gap: 7px; + } + + &__li, + &__text { + display: flex; + align-items: center; + } + + &__text { + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: variables.$white; + + @media (min-width: 2500px) { + font-size: 20px; + line-height: 23px; + } + } + + &__logo-vtex { + width: 44px; + + @media (min-width: 2500px) { + width: 84px; + } + + &:hover { + filter: brightness(80%); + } + } + + &__logo-m3 { + width: 28px; + + @media (min-width: 2500px) { + width: 54px; + } + + &:hover { + filter: brightness(80%); + } + } + } +} diff --git a/src/components/FooterBottom/FooterBottom.tsx b/src/components/FooterBottom/FooterBottom.tsx new file mode 100644 index 0000000..a17402b --- /dev/null +++ b/src/components/FooterBottom/FooterBottom.tsx @@ -0,0 +1,116 @@ +import React from "react"; + +import styles from "./FooterBottom.module.scss"; + +import imgLogoVtex from "./assets/vtex-logo.svg"; +import imgLogoM3 from "./assets/m3-logo.svg"; +import imgLogoMaster from "./assets/Master.png"; +import imgLogoVisa from "./assets/Visa.png"; +import imgLogoAmericanExpress from "./assets/AmericanExpress.png"; +import imgLogoElo from "./assets/Elo.png"; +import imgLogoHipercard from "./assets/Hiper.png"; +import imgLogoPayPal from "./assets/PayPal.png"; +import imgLogoBoleto from "./assets/Boleto.png"; +import imgLogoVtexPCI from "./assets/vtex-pci-200.png"; + +import { IconList } from "../IconList/IconList"; +import { ItemList } from "../ItemList/ItemList"; + +const FooterBottom = () => { + return ( +
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing

+

Elit, sed do eiusmod tempor

+
+ + + + + +
+
+ ); +}; + +export { FooterBottom }; diff --git a/src/components/FooterBottom/assets/AmericanExpress.png b/src/components/FooterBottom/assets/AmericanExpress.png new file mode 100644 index 0000000..41cd78c Binary files /dev/null and b/src/components/FooterBottom/assets/AmericanExpress.png differ diff --git a/src/components/FooterBottom/assets/Boleto.png b/src/components/FooterBottom/assets/Boleto.png new file mode 100644 index 0000000..178bfef Binary files /dev/null and b/src/components/FooterBottom/assets/Boleto.png differ diff --git a/src/components/FooterBottom/assets/Elo.png b/src/components/FooterBottom/assets/Elo.png new file mode 100644 index 0000000..284c6cb Binary files /dev/null and b/src/components/FooterBottom/assets/Elo.png differ diff --git a/src/components/FooterBottom/assets/Hiper.png b/src/components/FooterBottom/assets/Hiper.png new file mode 100644 index 0000000..f4bb374 Binary files /dev/null and b/src/components/FooterBottom/assets/Hiper.png differ diff --git a/src/components/FooterBottom/assets/Master.png b/src/components/FooterBottom/assets/Master.png new file mode 100644 index 0000000..50821de Binary files /dev/null and b/src/components/FooterBottom/assets/Master.png differ diff --git a/src/components/FooterBottom/assets/PayPal.png b/src/components/FooterBottom/assets/PayPal.png new file mode 100644 index 0000000..ab7c7cd Binary files /dev/null and b/src/components/FooterBottom/assets/PayPal.png differ diff --git a/src/components/FooterBottom/assets/Visa.png b/src/components/FooterBottom/assets/Visa.png new file mode 100644 index 0000000..b361e32 Binary files /dev/null and b/src/components/FooterBottom/assets/Visa.png differ diff --git a/src/components/FooterBottom/assets/m3-logo.svg b/src/components/FooterBottom/assets/m3-logo.svg new file mode 100644 index 0000000..780c92a --- /dev/null +++ b/src/components/FooterBottom/assets/m3-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/FooterBottom/assets/vtex-logo.svg b/src/components/FooterBottom/assets/vtex-logo.svg new file mode 100644 index 0000000..b6fd99e --- /dev/null +++ b/src/components/FooterBottom/assets/vtex-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/FooterBottom/assets/vtex-pci-200.png b/src/components/FooterBottom/assets/vtex-pci-200.png new file mode 100644 index 0000000..8764672 Binary files /dev/null and b/src/components/FooterBottom/assets/vtex-pci-200.png differ diff --git a/src/components/FooterMenu/FooterMenu.module.scss b/src/components/FooterMenu/FooterMenu.module.scss new file mode 100644 index 0000000..80bc14d --- /dev/null +++ b/src/components/FooterMenu/FooterMenu.module.scss @@ -0,0 +1,120 @@ +@use '../../variables'; + +.footer-menu { + display: flex; + gap: 121px; + + @media (min-width: 2500px) { + gap: 293px; + } + + @media ((min-width: 1025px) and (max-width: 1170px)) { + gap: 75px; + } + + @media (max-width: 1024px) { + flex-direction: column; + gap: 0; + } + + &__top { + &__title-wrapper { + @media (max-width: 1024px) { + display: flex; + justify-content: space-between; + } + } + + &__title, + &__item, + &__item-title, + &__title-active { + color: variables.$black-300; + margin-bottom: 12px; + } + + &__title, + &__title-active { + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + @media (max-width: 1024px) { + cursor: pointer; + } + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + &__title { + @media (max-width: 1024px) { + &:hover { + filter: contrast(60%); + } + } + } + + &__title-active { + text-decoration-line: underline; + } + + &__plus-sign { + font-weight: 500; + color: variables.$black-300; + cursor: pointer; + + @media (min-width: 1025px) { + display: none; + } + } + + &__items { + @media (max-width: 1024px) { + visibility: visible; + opacity: 1; + padding-bottom: 12px; + transition: .3s ease; + transform: translateY(0); + } + } + + &__items-inactive { + @media (max-width: 1024px) { + visibility: hidden; + opacity: 0; + height: 0; + transform: translateY(-20%); + } + } + + &__item, + &__item-title { + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + &__item { + &:hover { + text-decoration-line: underline; + } + } + + &__item-title { + font-weight: 500; + + @media ((min-width: 1025px) and (max-width: 2499px)){ + width: 150px; + } + } + } +} diff --git a/src/components/FooterMenu/FooterMenu.tsx b/src/components/FooterMenu/FooterMenu.tsx new file mode 100644 index 0000000..74133cd --- /dev/null +++ b/src/components/FooterMenu/FooterMenu.tsx @@ -0,0 +1,126 @@ +import {useState} from "react"; + +import styles from "./FooterMenu.module.scss"; + +import { ItemList } from "../ItemList/ItemList"; + +const FooterMenu = () => { + + const [isActive, setIsActive] = useState(false); + const [isActive2, setIsActive2] = useState(false); + const [isActive3, setIsActive3] = useState(false); + + return ( +
+ +
+ +
setIsActive(!isActive)}> + +

+ INSTITUCIONAL +

+ +
+ {isActive ? "-" : "+"} +
+
+ + +
+ +
+ +
setIsActive2(!isActive2)}> + +

+ DÚVIDAS +

+ +
+ {isActive2 ? "-" : "+"} +
+
+ + +
+ +
+ +
setIsActive3(!isActive3)}> + +

+ FALE CONOSCO +

+ +
+ {isActive3 ? "-" : "+"} +
+
+ + +
+
+ ); +} + +export { FooterMenu }; diff --git a/src/components/FooterTop/FooterTop.module.scss b/src/components/FooterTop/FooterTop.module.scss new file mode 100644 index 0000000..b1fd4bf --- /dev/null +++ b/src/components/FooterTop/FooterTop.module.scss @@ -0,0 +1,15 @@ +@use '../../variables'; + +.footer-top { + display: flex; + justify-content: space-between; + margin: 50px 0; + padding: 0 100px; + + @media (max-width: 1024px) { + flex-direction: column; + justify-content: flex-start; + margin: 24px 0; + padding: 0 16px; + } +} diff --git a/src/components/FooterTop/FooterTop.tsx b/src/components/FooterTop/FooterTop.tsx new file mode 100644 index 0000000..9dec508 --- /dev/null +++ b/src/components/FooterTop/FooterTop.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +import styles from "./FooterTop.module.scss"; + +import { RedesSociais } from "../RedesSociais/RedesSociais"; +import { FooterMenu } from "../FooterMenu/FooterMenu"; + +const FooterTop = () => { + + return ( +
+ + +
+ ); +} + +export { FooterTop }; diff --git a/src/components/IconList/IconList.tsx b/src/components/IconList/IconList.tsx new file mode 100644 index 0000000..db73f22 --- /dev/null +++ b/src/components/IconList/IconList.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +interface Icon { + src: string; + alt: string; + imgClassName?: string; + liClassName?: string; +} + +const IconList = ( props: Icon ) => { + const { src, alt, imgClassName, liClassName } = props; + + return ( +
  • + {alt} +
    • + ); +}; + +export { IconList }; diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx new file mode 100644 index 0000000..0ec46da --- /dev/null +++ b/src/components/ItemList/ItemList.tsx @@ -0,0 +1,14 @@ +import React from "react"; + +interface Icon { + text: string; + textClassName?: string; +} + +const ItemList = ( props: Icon) => { + const { text, textClassName } = props; + + return
  • { text }
    • ; +}; + +export { ItemList }; diff --git a/src/components/ItemNavBar/ItemNavBar.module.scss b/src/components/ItemNavBar/ItemNavBar.module.scss deleted file mode 100644 index 1f5b977..0000000 --- a/src/components/ItemNavBar/ItemNavBar.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use '../../variables'; - -.nav-bar__item { - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-transform: uppercase; - color: variables.$white; - cursor: pointer; - - @media (min-width: 3600px) { - font-size: 32px; - line-height: 38px; - } - - @media ((min-width: 2500px) and (max-width: 3599px)) { - font-size: 28px; - line-height: 33px; - } - - @media (max-width: 1024px) { - color: variables.$gray-400; - margin-bottom: 12px; - } - - &:hover { - filter: brightness(80%); - } -} diff --git a/src/components/ItemNavBar/ItemNavBar.tsx b/src/components/ItemNavBar/ItemNavBar.tsx deleted file mode 100644 index 7d37cf7..0000000 --- a/src/components/ItemNavBar/ItemNavBar.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -import styles from "./ItemNavBar.module.scss"; - -const ItemNavBar = ( props:any) => { - const { text } = props; - return
  • { text }
    • ; -}; - -export { ItemNavBar }; diff --git a/src/components/Newsletter/Newsletter.module.scss b/src/components/Newsletter/Newsletter.module.scss new file mode 100644 index 0000000..c436dd7 --- /dev/null +++ b/src/components/Newsletter/Newsletter.module.scss @@ -0,0 +1,200 @@ +@use '../../variables'; + +.newsletter { + + &__container { + display: flex; + justify-content: center; + align-items: center; + border-top: 1px solid variables.$black; + border-bottom: 1px solid variables.$black; + } + + &__form { + display: flex; + flex-direction: column; + gap: 8px; + margin: 16px 0; + position: relative; + + @media (min-width: 3600px) { + margin: 18px 0; + } + + @media (max-width: 1024px) { + width: 100%; + padding: 0 16px; + gap: 16px; + } + + &__title { + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + color: variables.$black-300; + text-align: left; + + @media (min-width: 3600px) { + font-size: 40px; + line-height: 48px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 36px; + line-height: 42px; + } + + @media (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } + } + + &__items { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 8px; + + @media (max-width: 1024px) { + flex-direction: column; + align-items: stretch; + gap: 16px; + } + + &__email { + input { + background: variables.$white; + border: 1px solid variables.$gray-600; + border-radius: 4px; + width: 100%; + min-width: 340px; + height: 42px; + font-size: 14px; + line-height: 16px; + color: variables.$gray-400; + padding: 13px 16px; + + &::placeholder { + font-size: 14px; + line-height: 16px; + color: variables.$gray-400; + } + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 36px; + min-width: 720px; + height: 64px; + + &::placeholder { + font-size: 32px; + line-height: 36px; + } + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + min-width: 668px; + height: 59px; + + &::placeholder { + font-size: 28px; + line-height: 33px; + } + } + + @media (max-width: 1024px) { + min-width: 100%; + padding: 17px 16px; + } + } + } + + &__btn { + width: 126px; + height: 42px; + background: variables.$black; + border: none; + box-shadow: 0px 4px 4px variables.$shadow; + border-radius: 4px; + + display: flex; + align-items: center; + justify-content: center; + + font-weight: 700; + font-size: 12px; + line-height: 14px; + letter-spacing: 0.05em; + color: variables.$white; + padding: 20px 14px; + text-transform: uppercase; + + &:hover { + filter: opacity(.8); + } + + &:active { + filter: opacity(1); + } + + @media (min-width: 3600px) { + width: 280px; + height: 64px; + font-size: 28px; + line-height: 32px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + width: 246px; + height: 59px; + font-size: 24px; + line-height: 28px; + } + + @media (max-width: 1024px) { + width: 100%; + font-size: 14px; + line-height: 16px; + box-shadow: none; + } + } + } + } +} + +span { + font-size: 12px; + line-height: 14px; + color: variables.$red; + position: absolute; + right: 0; + top: 14px; + + @media (min-width: 3600px) { + font-size: 26px; + line-height: 30px; + top: 20px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 24px; + line-height: 28px; + top: 20px; + } + + @media (min-width: 350px) and (max-width: 1024px) { + right: 16px; + } + + @media (max-width: 349px) { + font-size: 11px; + top: 18px; + right: 16px; + } +} diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx new file mode 100644 index 0000000..2466510 --- /dev/null +++ b/src/components/Newsletter/Newsletter.tsx @@ -0,0 +1,56 @@ +import React from "react"; + +import { Formik, Form, Field, ErrorMessage, FormikHelpers} from "formik"; + +import styles from "./Newsletter.module.scss"; + +import NewsletterSchema from "./Schema/NewsletterSchema"; +import { Button } from "../Button/Buttom"; + +interface NewsletterValue { + email: string; +} + +const initialValue = { + email: "", +} + +let listEmail: Array = []; + +const Newsletter = () => { + + const handleSubmit = (values: NewsletterValue, actions: FormikHelpers) => { + listEmail.push(values); + console.log(listEmail); + actions.resetForm(); + }; + + return ( +
    + + + {({errors, touched}) => ( +
    +

    ASSINE NOSSA NEWSLETTER

    + +
    +
    + + +
    + +
    +
    + )} + +     +
    + ); +}; + +export {Newsletter}; diff --git a/src/components/Newsletter/Schema/NewsletterSchema.ts b/src/components/Newsletter/Schema/NewsletterSchema.ts new file mode 100644 index 0000000..1064606 --- /dev/null +++ b/src/components/Newsletter/Schema/NewsletterSchema.ts @@ -0,0 +1,5 @@ +import * as Yup from "yup"; + +export default Yup.object().shape({ + email: Yup.string().email("*E-mail Inválido").required("") +}); diff --git a/src/components/RedesSociais/RedesSociais.module.scss b/src/components/RedesSociais/RedesSociais.module.scss new file mode 100644 index 0000000..fa52094 --- /dev/null +++ b/src/components/RedesSociais/RedesSociais.module.scss @@ -0,0 +1,46 @@ +@use '../../variables'; + +.redes-sociais { + &__container { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 12px; + } + + &__icons { + display: flex; + gap: 10px; + + &__icon { + width: 35px; + + &:hover { + filter: contrast(30%); + } + + &:active { + filter: contrast(100%); + } + + @media (min-width: 2500px) { + width: 70px; + } + } + } + + &__link { + font-size: 14px; + line-height: 16px; + color: variables.$black-300; + + &:hover { + text-decoration-line: underline; + } + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } +} diff --git a/src/components/RedesSociais/RedesSociais.tsx b/src/components/RedesSociais/RedesSociais.tsx new file mode 100644 index 0000000..1a31278 --- /dev/null +++ b/src/components/RedesSociais/RedesSociais.tsx @@ -0,0 +1,64 @@ +import React from "react"; + +import styles from "./RedesSociais.module.scss"; + +import imgFacebook from "./assets/facebook-icon.svg"; +import imgInstagram from "./assets/instagram-icon.svg"; +import imgTwitter from "./assets/twitter-icon.svg"; +import imgYouTube from "./assets/youtube-icon.svg"; +import imgLinkdin from "./assets/linkedin-icon.svg"; + +import { IconList } from "../IconList/IconList"; + +const RedesSociais = () => { + + return ( +
    + + + www.loremipsum.com +
    + ); +} + +export { RedesSociais }; diff --git a/src/components/RedesSociais/assets/facebook-icon.svg b/src/components/RedesSociais/assets/facebook-icon.svg new file mode 100644 index 0000000..17d16fd --- /dev/null +++ b/src/components/RedesSociais/assets/facebook-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/RedesSociais/assets/instagram-icon.svg b/src/components/RedesSociais/assets/instagram-icon.svg new file mode 100644 index 0000000..8a8998b --- /dev/null +++ b/src/components/RedesSociais/assets/instagram-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/RedesSociais/assets/linkedin-icon.svg b/src/components/RedesSociais/assets/linkedin-icon.svg new file mode 100644 index 0000000..0e74f6b --- /dev/null +++ b/src/components/RedesSociais/assets/linkedin-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/RedesSociais/assets/twitter-icon.svg b/src/components/RedesSociais/assets/twitter-icon.svg new file mode 100644 index 0000000..429d79f --- /dev/null +++ b/src/components/RedesSociais/assets/twitter-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/RedesSociais/assets/youtube-icon.svg b/src/components/RedesSociais/assets/youtube-icon.svg new file mode 100644 index 0000000..8894c8b --- /dev/null +++ b/src/components/RedesSociais/assets/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss new file mode 100644 index 0000000..69f7886 --- /dev/null +++ b/src/components/WhatsAppAndScrollTop/WhatsAppAndScrollTop.module.scss @@ -0,0 +1,70 @@ +@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%) ; + } + + &:active { + filter: brightness(100%); + } + } + + &__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/global.scss b/src/global.scss index a8b8b11..9711fbf 100644 --- a/src/global.scss +++ b/src/global.scss @@ -15,6 +15,10 @@ body, height: 100%; } +body { + position: relative; +} + *:focus { outline: 0; } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 4ef54c4..d8c8f6b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,22 +1,31 @@ -import React from 'react'; +import React from "react"; import styles from "./Home.module.scss"; -import { HeaderTop } from '../components/HeaderTop/HeaderTop'; -import { HeaderBottom } from '../components/HeaderBottom/HeaderBottom'; +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 { FooterTop } from "../components/FooterTop/FooterTop"; +import { WhatsAppAndScrollTop } from "../components/WhatsAppAndScrollTop/WhatsAppAndScrollTop"; const Home = () => { return ( <> -
    - - -
    +
    + + +
    -
    +
    -
    + ); }