diff --git a/desafio-react-e-typescript/package.json b/desafio-react-e-typescript/package.json index ece6667..30067eb 100644 --- a/desafio-react-e-typescript/package.json +++ b/desafio-react-e-typescript/package.json @@ -10,12 +10,15 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.7.0", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/desafio-react-e-typescript/src/assets/images/arrowicon.svg b/desafio-react-e-typescript/src/assets/images/arrowicon.svg new file mode 100644 index 0000000..7ae3255 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/arrowicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-e-typescript/src/assets/images/breadcrumbicon.svg b/desafio-react-e-typescript/src/assets/images/breadcrumbicon.svg new file mode 100644 index 0000000..d58e833 --- /dev/null +++ b/desafio-react-e-typescript/src/assets/images/breadcrumbicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-e-typescript/src/components/Body/Body.module.scss b/desafio-react-e-typescript/src/components/Body/Body.module.scss new file mode 100644 index 0000000..a9e3f63 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Body.module.scss @@ -0,0 +1,283 @@ +.body-container { + margin: 30px 100px 70px 100px; + + @media screen and (min-width: 2500px) { + margin: 30px 100px 84px 100px; + height: 826px; + } + + @media screen and (max-width: 1024px) { + margin: 30px 16px 80px 16px; + } + + h1 { + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #292929; + text-align: center; + margin: 0 0 80px 0; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + } + + @media screen and (max-width: 1024px) { + margin: 0 0 40px 0; + } + } + + .menu-list-container { + display: flex; + + @media screen and (max-width: 1024px) { + display: block; + } + + .menu-list { + width: 100%; + max-width: 302px; + height: 285px; + list-style-type: none; + border-right: 1px solid black; + padding: unset; + + @media screen and (min-width: 2500px) { + max-width: 590px; + height: 465px; + } + + @media screen and (max-width: 1024px) { + max-width: unset; + border: none; + height: 224px; + } + + a { + text-decoration: none; + + li { + width: 100%; + max-width: 302px; + height: 39px; + padding: 10px 16px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: #7d7d7d; + cursor: pointer; + + @media screen and (min-width: 2500px) { + max-width: 590px; + height: 58px; + font-size: 32px; + line-height: 38px; + margin-bottom: 10px; + } + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + li.active { + color: white; + background-color: black; + max-width: unset; + } + } + + .menu-list-sobre { + color: white !important; + background-color: black; + } + } + + .form-wrapper { + max-height: 100vh; + margin-left: 30px; + + @media screen and (max-width: 1024px) { + margin: unset; + } + + h2 { + margin-bottom: 12px; + + @media screen and (max-width: 1024px) { + margin-top: 30px; + text-align: center; + } + } + + form { + width: 100%; + } + + .form-col { + position: relative; + display: flex; + flex-direction: column; + margin-bottom: 12px; + + label { + font-family: "Roboto", sans-serif; + font-size: 14px; + line-height: 16px; + color: #100d0e; + margin: 0 0 12px 15px; + } + + input { + height: 46px; + border: 1px solid black; + border-radius: 25px; + padding: 15px 0px 15px 20px; + + &::placeholder { + font-family: "Roboto", sans-serif; + font-size: 14px; + line-height: 16px; + color: #b9b7b7; + } + } + .form-invalid-feedback { + position: absolute; + right: 0; + margin-right: 20px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-align: right; + color: #ff0000; + } + } + + .form-terms { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 12px; + + label { + display: flex; + align-items: center; + margin-right: 4px; + + span { + color: red; + margin-right: 3.5px; + } + + a { + text-decoration: none; + color: #100d0e; + h3 { + font-family: "Roboto", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 16px; + text-decoration: underline; + } + } + input { + width: 18px; + height: 18px; + } + } + } + + button { + width: 100%; + height: 52px; + border: 1px solid black; + border-radius: 25px; + background-color: black; + color: white; + font-family: "Roboto", sans-serif; + font-size: 16px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + cursor: pointer; + + &:hover { + filter: brightness(80%); + } + } + } + + .form-success { + font-family: "Roboto", sans-serif; + font-size: 12px; + line-height: 14px; + color: #008000; + } + } + + .menu-list-container > div { + width: 100%; + } + + .description-container { + padding-top: 10px; + margin: 0px 0px 0px 30px; + + @media screen and (max-width: 1024px) { + padding: unset; + margin: unset; + } + + h2 { + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: #292929; + margin-bottom: 12px; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 56px; + margin: unset; + margin-bottom: 12px; + } + + @media screen and (max-width: 1024px) { + text-align: center; + margin-top: 30px; + margin-bottom: 12px; + } + } + + p { + font-family: "Roboto", sans-serif; + font-size: 13px; + line-height: 15px; + color: #7d7d7d; + margin-bottom: 20px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 30px; + } + + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 18px; + } + } + + .description-parag { + @media screen and (max-width: 1024px) { + display: none; + } + } + } +} diff --git a/desafio-react-e-typescript/src/components/Body/Body.tsx b/desafio-react-e-typescript/src/components/Body/Body.tsx new file mode 100644 index 0000000..9ac345f --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Body.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import { Route, Routes } from "react-router-dom"; + +import styles from "./Body.module.scss"; +import { BreadCrumb } from "./BreadCrumb/BreadCrumb"; +import { TabDisposition } from "./Tabs/TabDisposition"; +import { Sobre } from "../Body/Tabs/Sobre"; + +const Body = () => { + const TabsContents = [ + { + title: "Sobre", + path: "sobre", + }, + { + title: "Forma de Pagamento", + path: "pagamento", + }, + { + title: "Entrega", + path: "entrega", + }, + { + title: "Troca e Devolução", + path: "troca", + }, + { + title: "Segurança e Privacidade", + path: "seguranca", + }, + { + title: "Contato", + path: "contato", + }, + ]; + return ( +
+ +

Institucional

+ +
+ +
+ + } /> + } /> + } /> + } /> + } /> + } /> + +
+
+
+
+
+
+ ); +}; + +export { Body }; diff --git a/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.module.scss b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.module.scss new file mode 100644 index 0000000..dae7c10 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.module.scss @@ -0,0 +1,50 @@ +.breadcrumb-container { + display: flex; + align-items: center; + margin-bottom: 80px; + + button { + display: inherit; + background-color: transparent; + align-items: center; + + .breadcrumb-home { + width: 100%; + max-width: 16px; + height: 16px; + margin-right: 10px; + cursor: pointer; + + @media screen and (min-width: 2500px) { + max-width: 31px; + height: 31px; + } + } + .arrow { + width: 100%; + max-width: 4px; + height: 8px; + margin-right: 10px; + + @media screen and (min-width: 2500px) { + max-width: 9px; + height: 15px; + } + } + + a { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #c4c4c4; + text-decoration: none; + text-transform: uppercase; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + } +} diff --git a/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.tsx b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.tsx new file mode 100644 index 0000000..c5b9298 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/BreadCrumb/BreadCrumb.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +import breadcrumb from "../../../assets/images/breadcrumbicon.svg"; +import arrow from "../../../assets/images/arrowicon.svg"; + +import styles from "./BreadCrumb.module.scss"; + +const BreadCrumb = () => { + return ( + <> +
+ +
+ + ); +}; + +export { BreadCrumb }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx new file mode 100644 index 0000000..3dbab12 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/Contato.tsx @@ -0,0 +1,129 @@ +import React, { useState } from "react"; + +import styles from "../Body.module.scss"; + +import { Formik, Form, Field, ErrorMessage } from "formik"; +import FormSchema from "../../../schema/FormSchema"; + +interface IFormikValues { + name: string; + email: string; + cpf: string; + nascimento: string; + telefone: string; + instagram: string; + terms: string; +} + +const initialValues = { + name: "", + email: "", + cpf: "", + nascimento: "", + telefone: "", + instagram: "", + terms: "", +}; + +const Contato = () => { + const handleFormikSubmit = (values: IFormikValues) => {}; + const [success, isSuccess] = useState(false); + return ( +
+ { + handleFormikSubmit(values); + resetForm(); + isSuccess(true); + }} + initialValues={initialValues} + validationSchema={FormSchema} + > + { +
+

Preencha o Formulário

+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + +
+ + {success && ( + + *Formulário enviado com sucesso! + + )} +
+ } + +
+ ); +}; + +export { Contato }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/Entrega.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/Entrega.tsx new file mode 100644 index 0000000..18d5024 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/Entrega.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Entrega = () => { + return ( +
+
+

Entrega

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Entrega }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/FormaDePagamento.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/FormaDePagamento.tsx new file mode 100644 index 0000000..76a47af --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/FormaDePagamento.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Pagamento = () => { + return ( +
+
+

Forma de Pagamento

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Pagamento }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/SegurancaEPrivacidade.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/SegurancaEPrivacidade.tsx new file mode 100644 index 0000000..5511742 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/SegurancaEPrivacidade.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Seguranca = () => { + return ( +
+
+

Segurança e Privacidade

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Seguranca }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/Sobre.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/Sobre.tsx new file mode 100644 index 0000000..d22afba --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/Sobre.tsx @@ -0,0 +1,43 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Sobre = () => { + return ( +
+
+

Sobre

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Sobre }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx new file mode 100644 index 0000000..09319fe --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/TabDisposition.tsx @@ -0,0 +1,48 @@ +import React, { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; + +import styles from "../Body.module.scss"; + +interface MenuValue { + title: string; + path: string; +} + +export interface TabDispositionProps { + tabs: MenuValue[]; +} + +const TabDisposition: React.FC = ({ tabs }) => { + const [selectecTab, setselectedTab] = useState(); + useEffect(() => { + setselectedTab(tabs[0]); + }, [tabs]); + const handleClick = (tab: MenuValue) => { + setselectedTab(tab); + }; + return ( + <> + + + ); +}; + +export { TabDisposition }; diff --git a/desafio-react-e-typescript/src/components/Body/Tabs/TrocaEDevolucao.tsx b/desafio-react-e-typescript/src/components/Body/Tabs/TrocaEDevolucao.tsx new file mode 100644 index 0000000..bc3a3e8 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Body/Tabs/TrocaEDevolucao.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import styles from "../Body.module.scss"; + +const Troca = () => { + return ( +
+
+

Troca e Devolução

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae + ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed + quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. +

+

+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+
+
+ ); +}; + +export { Troca }; diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss index 0f3587c..51b8f14 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.module.scss +++ b/desafio-react-e-typescript/src/components/Footer/Footer.module.scss @@ -210,12 +210,20 @@ width: 22%; min-width: 234px; } + + @media screen and (max-width: 375px) { + margin: unset; + } } .cards { display: flex; align-items: center; + @media screen and (max-width: 375px) { + display: block; + } + .icons { width: 36px; height: 20px; diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx index 0e55425..351f522 100644 --- a/desafio-react-e-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx @@ -1,17 +1,13 @@ import React, { useState, useEffect } from "react"; import { Newsletter } from "../Newsletter/Newsletter"; -import { Accordion } from "../Footer/Accordion/Accordion"; - -import styles from "./Footer.module.scss"; +import { Accordion } from "./Accordion/Accordion"; import facebook from "../../assets/images/facebookicon.svg"; import instagram from "../../assets/images/instagramicon.svg"; import twitter from "../../assets/images/twittericon.svg"; import youtube from "../../assets/images/youtubeicon.svg"; import linkedin from "../../assets/images/linkedinicon.svg"; -import whatsapp from "../../assets/images/whatsappicon.svg"; -import gototop from "../../assets/images/gotopicon.svg"; import mastercard from "../../assets/images/mastericon.svg"; import visa from "../../assets/images/visaicon.svg"; import diners from "../../assets/images/dinersicon.svg"; @@ -20,8 +16,12 @@ import hiper from "../../assets/images/hipericon.svg"; import pagseguro from "../../assets/images/pagseguroicon.svg"; import boleto from "../../assets/images/boletoicon.svg"; import vtex from "../../assets/images/vtexicon.svg"; +import whatsapp from "../../assets/images/whatsappicon.svg"; import vtexpowered from "../../assets/images/vtexpowered.svg"; import m3developed from "../../assets/images/m3developed.svg"; +import gototop from "../../assets/images/gotopicon.svg"; + +import styles from "./Footer.module.scss"; const Footer = () => { const [visible, setVisible] = useState(false); @@ -162,9 +162,11 @@ const Footer = () => { @@ -202,7 +204,7 @@ const Footer = () => {