From 612b2470afd21951ad616736582d5544b2db1420 Mon Sep 17 00:00:00 2001
From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com>
Date: Thu, 12 Jan 2023 01:02:47 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20formularios,=20rotas,=20corr?=
=?UTF-8?q?e=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 61 ++++++++
package.json | 1 +
.../ButtonFloat/ButtonFloat.module.scss | 45 ++++++
.../Footer/ButtonFloat/ButtonFloat.tsx | 32 +++++
src/components/Footer/Footer.module.scss | 1 -
.../FooterSelosDev/FooterSelosDev.module.scss | 30 +++-
.../Footer/FooterSelosDev/FooterSelosDev.tsx | 8 +-
.../Footer/LinksFooter/Links/Link.tsx | 16 ---
.../LinksFooter/LinksComponent/Link.tsx | 17 +++
.../LinksFooter/LinksFooter.module.scss | 32 ++++-
.../Footer/LinksFooter/LinksFooter.tsx | 36 ++---
.../Footer/LinksFooter/NetWorks/NetWork.tsx | 25 ----
.../Footer/LinksFooter/Titles/Title.tsx | 28 ----
.../LinksFooter/TitlesComponent/Title.tsx | 33 +++++
.../Footer/Newsletter/Newsletter.module.scss | 1 +
.../Footer/PhoneFloat/PhoneFloat.module.scss | 10 ++
.../Footer/PhoneFloat/PhoneFloat.tsx | 16 +++
src/components/Footer/assets/arrowTop.svg | 3 +
src/components/Footer/assets/iconWhats.svg | 11 ++
src/components/Header/Header.module.scss | 25 ++++
src/components/Header/Header.tsx | 16 ++-
.../MenuHamburguer/MenuHamburguer.module.scss | 12 ++
.../Header/MenuHamburguer/MenuHamburguer.tsx | 8 +-
src/components/Header/assets/cart.svg | 15 +-
.../Main/Cursos/CursoCSS/CursoCss.tsx | 34 +++++
.../Main/Cursos/CursoHTML/CursoHtml.tsx | 34 +++++
.../Main/Cursos/CursoJs/CursoJs.tsx | 39 ++++++
.../Main/Cursos/CursoReact/CursoReact.tsx | 38 +++++
.../Main/Cursos/CursoSass/CursoSass.tsx | 36 +++++
.../Main/Cursos/CursoTs/CursoTs.tsx | 31 ++++
.../Main/Cursos/CursoVtex/CursoVtex.tsx | 39 ++++++
src/components/Main/Cursos/Cursos.module.scss | 130 +++++++++++++++++
src/components/Main/Cursos/Cursos.tsx | 64 +++++++++
.../Main/Cursos/IntroCurso/IntroCurso.tsx | 26 ++++
.../Main/InfoComponent/infoComponent.tsx | 40 ++++++
.../ContatoForm/ContatoForm.module.scss | 122 ++++++++++++++++
.../Institucional/ContatoForm/ContatoForm.tsx | 100 +++++++++++++
.../Main/Institucional/Entrega/Entrega.tsx | 40 ++++++
.../Institucional/Institucional.module.scss | 132 ++++++++++++++++++
.../Main/Institucional/Institucional.tsx | 58 ++++++++
.../Institucional/Pagamento/Pagamento.tsx | 40 ++++++
.../Institucional/Segurança/Seguranca.tsx | 40 ++++++
.../Main/Institucional/Sobre/Sobre.tsx | 40 ++++++
.../Institucional/TrocaeDevolução/Troca.tsx | 40 ++++++
src/components/Main/Main.tsx | 8 ++
.../Main/Saibamais/Duracao/Duracao.tsx | 28 ++++
.../Saibamais/Ferramentas/Ferramentas.tsx | 28 ++++
.../IntroSaibamais/IntroSaibamais.tsx | 26 ++++
.../Saibamais/Professores/Professores.tsx | 28 ++++
.../Main/Saibamais/Requisitos/Requisitos.tsx | 33 +++++
.../Main/Saibamais/Saibamais.module.scss | 131 +++++++++++++++++
src/components/Main/Saibamais/Saibamais.tsx | 52 +++++++
src/components/Main/assets/iconArrow.svg | 3 +
src/components/Main/assets/iconHome.svg | 3 +
src/components/Main/assets/iconPhone.svg | 3 +
src/global.scss | 2 +-
src/pages/Home.tsx | 7 +-
src/routes/Navigations.tsx | 64 +++++++++
src/schema/FormSchema.ts | 10 ++
src/variables.scss | 5 +
60 files changed, 1919 insertions(+), 117 deletions(-)
create mode 100644 src/components/Footer/ButtonFloat/ButtonFloat.module.scss
create mode 100644 src/components/Footer/ButtonFloat/ButtonFloat.tsx
delete mode 100644 src/components/Footer/Footer.module.scss
delete mode 100644 src/components/Footer/LinksFooter/Links/Link.tsx
create mode 100644 src/components/Footer/LinksFooter/LinksComponent/Link.tsx
delete mode 100644 src/components/Footer/LinksFooter/NetWorks/NetWork.tsx
delete mode 100644 src/components/Footer/LinksFooter/Titles/Title.tsx
create mode 100644 src/components/Footer/LinksFooter/TitlesComponent/Title.tsx
create mode 100644 src/components/Footer/PhoneFloat/PhoneFloat.module.scss
create mode 100644 src/components/Footer/PhoneFloat/PhoneFloat.tsx
create mode 100644 src/components/Footer/assets/arrowTop.svg
create mode 100644 src/components/Footer/assets/iconWhats.svg
create mode 100644 src/components/Main/Cursos/CursoCSS/CursoCss.tsx
create mode 100644 src/components/Main/Cursos/CursoHTML/CursoHtml.tsx
create mode 100644 src/components/Main/Cursos/CursoJs/CursoJs.tsx
create mode 100644 src/components/Main/Cursos/CursoReact/CursoReact.tsx
create mode 100644 src/components/Main/Cursos/CursoSass/CursoSass.tsx
create mode 100644 src/components/Main/Cursos/CursoTs/CursoTs.tsx
create mode 100644 src/components/Main/Cursos/CursoVtex/CursoVtex.tsx
create mode 100644 src/components/Main/Cursos/Cursos.module.scss
create mode 100644 src/components/Main/Cursos/Cursos.tsx
create mode 100644 src/components/Main/Cursos/IntroCurso/IntroCurso.tsx
create mode 100644 src/components/Main/InfoComponent/infoComponent.tsx
create mode 100644 src/components/Main/Institucional/ContatoForm/ContatoForm.module.scss
create mode 100644 src/components/Main/Institucional/ContatoForm/ContatoForm.tsx
create mode 100644 src/components/Main/Institucional/Entrega/Entrega.tsx
create mode 100644 src/components/Main/Institucional/Institucional.module.scss
create mode 100644 src/components/Main/Institucional/Institucional.tsx
create mode 100644 src/components/Main/Institucional/Pagamento/Pagamento.tsx
create mode 100644 src/components/Main/Institucional/Segurança/Seguranca.tsx
create mode 100644 src/components/Main/Institucional/Sobre/Sobre.tsx
create mode 100644 src/components/Main/Institucional/TrocaeDevolução/Troca.tsx
create mode 100644 src/components/Main/Main.tsx
create mode 100644 src/components/Main/Saibamais/Duracao/Duracao.tsx
create mode 100644 src/components/Main/Saibamais/Ferramentas/Ferramentas.tsx
create mode 100644 src/components/Main/Saibamais/IntroSaibamais/IntroSaibamais.tsx
create mode 100644 src/components/Main/Saibamais/Professores/Professores.tsx
create mode 100644 src/components/Main/Saibamais/Requisitos/Requisitos.tsx
create mode 100644 src/components/Main/Saibamais/Saibamais.module.scss
create mode 100644 src/components/Main/Saibamais/Saibamais.tsx
create mode 100644 src/components/Main/assets/iconArrow.svg
create mode 100644 src/components/Main/assets/iconHome.svg
create mode 100644 src/components/Main/assets/iconPhone.svg
create mode 100644 src/routes/Navigations.tsx
create mode 100644 src/schema/FormSchema.ts
diff --git a/package-lock.json b/package-lock.json
index ed7cc4b..03fc9ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
+ "react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
@@ -3119,6 +3120,14 @@
}
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+ "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -15126,6 +15135,36 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-router": {
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+ "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
+ "dependencies": {
+ "@remix-run/router": "1.2.1"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+ "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
+ "dependencies": {
+ "@remix-run/router": "1.2.1",
+ "react-router": "6.6.1"
+ },
+ "engines": {
+ "node": ">=14"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -20602,6 +20641,11 @@
"source-map": "^0.7.3"
}
},
+ "@remix-run/router": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+ "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
+ },
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -29245,6 +29289,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
+ "react-router": {
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+ "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
+ "requires": {
+ "@remix-run/router": "1.2.1"
+ }
+ },
+ "react-router-dom": {
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+ "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
+ "requires": {
+ "@remix-run/router": "1.2.1",
+ "react-router": "6.6.1"
+ }
+ },
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index d132605..b108498 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
+ "react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
diff --git a/src/components/Footer/ButtonFloat/ButtonFloat.module.scss b/src/components/Footer/ButtonFloat/ButtonFloat.module.scss
new file mode 100644
index 0000000..6d40543
--- /dev/null
+++ b/src/components/Footer/ButtonFloat/ButtonFloat.module.scss
@@ -0,0 +1,45 @@
+.wrapper {
+ position: fixed;
+ bottom: 170px;
+ right: 16px;
+ width: 34px;
+ height: 34px;
+ background: var(--gray-100);
+ border-radius: 50%;
+ -webkit-animation: wrapper 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+ animation: wrapper 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+ @media (max-width: 1024px) {
+ bottom: 32px;
+ }
+
+ &__iconArrow {
+ position: fixed;
+ left: 11px;
+ top: 12px;
+ }
+}
+
+@-webkit-keyframes wrapper {
+ 0% {
+ -webkit-transform: translateY(-50px);
+ transform: translateY(-50px);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+@keyframes wrapper {
+ 0% {
+ -webkit-transform: translateY(-50px);
+ transform: translateY(-50px);
+ opacity: 0;
+ }
+ 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
diff --git a/src/components/Footer/ButtonFloat/ButtonFloat.tsx b/src/components/Footer/ButtonFloat/ButtonFloat.tsx
new file mode 100644
index 0000000..931ffdd
--- /dev/null
+++ b/src/components/Footer/ButtonFloat/ButtonFloat.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from "react"
+import styleButton from "./ButtonFloat.module.scss"
+import { ReactComponent as IconArrowTop } from "../assets/arrowTop.svg"
+
+
+
+const ButtonFloat = () => {
+
+ const [scrollPage, setScrollPage] = useState(0);
+
+ useEffect(() => {
+ window.addEventListener("scroll", scrollTop)
+ }, [scrollPage]);
+
+ const scrollTop = () => {
+ setScrollPage(window.scrollY);
+ }
+
+ const subirTop = () => {
+ setScrollPage(0)
+ window.scrollTo(0, 0);
+ }
+
+ return (
+
+
+
+ )
+
+}
+
+export { ButtonFloat }
\ No newline at end of file
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
deleted file mode 100644
index 8b13789..0000000
--- a/src/components/Footer/Footer.module.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss b/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss
index 65e8a61..14ef7f9 100644
--- a/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss
+++ b/src/components/Footer/FooterSelosDev/FooterSelosDev.module.scss
@@ -15,6 +15,8 @@
&__text {
width: 21.667%;
min-height: 24px;
+ display: flex;
+ align-items: center;
@media (max-width: 1024px) {
margin: 15px 0;
@@ -63,10 +65,18 @@
height: 34px;
align-items: center;
+ @media (max-width: 1024px) {
+ height: 28px;
+ }
+
@media (min-width: 2500px) {
height: 66px;
}
+ .vtexCertified {
+ margin: 0;
+ }
+
li {
margin-right: 12px;
@@ -74,17 +84,30 @@
margin-right: 11px;
}
+ @media (min-width: 2500px) {
+ height: 39.27px;
+ }
+
figure {
height: 34px;
display: flex;
align-items: center;
+ @media (max-width: 1024px) {
+ height: 28px;
+ }
+
+ @media (min-width: 2500px) {
+ height: 39.27px;
+ }
+
img {
width: 35px;
height: 20px;
@media (max-width: 1024px) {
width: 100%;
+ width: 30px;
height: 17px;
}
@@ -97,6 +120,7 @@
.img-vtexCertified {
width: 54.61px;
height: 34px;
+ margin: 0 !important;
@media (max-width: 1024px) {
width: 45px;
@@ -134,6 +158,10 @@
width: 100%;
}
+ @media (min-width: 2500px) {
+ width: 404.17px;
+ }
+
div:nth-child(1) {
margin-right: 13px;
}
@@ -144,7 +172,6 @@
p {
margin-right: 13px;
-
font-weight: 400;
font-size: 10px;
line-height: 12px;
@@ -155,6 +182,7 @@
@media (min-width: 2500px) {
font-size: 20px;
line-height: 23px;
+ text-transform: none;
}
}
diff --git a/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx b/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx
index 60647f6..b0a9a5a 100644
--- a/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx
+++ b/src/components/Footer/FooterSelosDev/FooterSelosDev.tsx
@@ -12,6 +12,8 @@ import vtexCertifiedCard from "./assets/vtex.svg"
import vtexDev from "./assets/vtex-dev.svg"
import m3 from "./assets/m3.svg"
+import { ButtonFloat } from "../ButtonFloat/ButtonFloat"
+import { PhoneFloat } from "../PhoneFloat/PhoneFloat"
export const FooterSelosDev = () => {
@@ -68,7 +70,7 @@ export const FooterSelosDev = () => {
-
+
@@ -85,13 +87,15 @@ export const FooterSelosDev = () => {
-
Developed By
+
Developed by
+
+
)
}
diff --git a/src/components/Footer/LinksFooter/Links/Link.tsx b/src/components/Footer/LinksFooter/Links/Link.tsx
deleted file mode 100644
index d57b0d6..0000000
--- a/src/components/Footer/LinksFooter/Links/Link.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-interface linkProps {
- children?: React.ReactNode;
- text?: string;
- href: string;
-}
-
-export const Link = (props: linkProps) => {
-
- const { href, text, children } = props;
-
- return {text}{children}
-}
-
-export default Link;
\ No newline at end of file
diff --git a/src/components/Footer/LinksFooter/LinksComponent/Link.tsx b/src/components/Footer/LinksFooter/LinksComponent/Link.tsx
new file mode 100644
index 0000000..40516c7
--- /dev/null
+++ b/src/components/Footer/LinksFooter/LinksComponent/Link.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+interface linkProps {
+ children?: React.ReactNode;
+ text?: string;
+ href: string;
+ className?: string;
+}
+
+const Link = (props: linkProps) => {
+
+ const { href, text, children, className } = props;
+
+ return {text}{children}
+}
+
+export { Link };
\ No newline at end of file
diff --git a/src/components/Footer/LinksFooter/LinksFooter.module.scss b/src/components/Footer/LinksFooter/LinksFooter.module.scss
index 15f330e..1ee1979 100644
--- a/src/components/Footer/LinksFooter/LinksFooter.module.scss
+++ b/src/components/Footer/LinksFooter/LinksFooter.module.scss
@@ -30,6 +30,8 @@
@media (max-width: 1024px) {
display: flex;
justify-content: space-between;
+ height: 17px;
+ width: 100%;
}
button {
@@ -57,6 +59,7 @@
&__institucional {
width: 155px;
list-style: none;
+ animation: scale-up-tl 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
@media (max-width: 1024px) {
width: 100%;
@@ -98,6 +101,7 @@
&__duvidas {
list-style: none;
+ animation: scale-up-tl 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
@media (max-width: 1024px) {
margin: 12px 0;
@@ -141,6 +145,7 @@
&__fale-conosco {
width: 155px;
list-style: none;
+ animation: scale-up-tl 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
@media (max-width: 1024px) {
width: 100%;
@@ -228,7 +233,7 @@
@media (max-width: 1024px) {
width: 100%;
- display: flex;
+ display: block;
justify-content: flex-start;
}
@@ -237,6 +242,11 @@
justify-content: flex-end;
list-style: none;
+ @media (max-width: 1024px) {
+ width: 100%;
+ justify-content: flex-start;
+ }
+
li:last-child {
margin-right: 0;
}
@@ -335,10 +345,15 @@
&__lorem {
margin-top: 12px;
display: flex;
- justify-content: flex-end;
+ justify-content: center;
+ @media (min-width: 1025px) {
+ width: 140px;
+ position: fixed;
+ right: 175px;
+ }
@media (max-width: 1024px) {
- display: none;
+ display: block;
}
p {
font-weight: 400;
@@ -355,3 +370,14 @@
}
}
}
+
+@keyframes scale-up-tl {
+ 0% {
+ transform: scale(0.5);
+ transform-origin: 0 0;
+ }
+ 100% {
+ transform: scale(1);
+ transform-origin: 0 0;
+ }
+}
diff --git a/src/components/Footer/LinksFooter/LinksFooter.tsx b/src/components/Footer/LinksFooter/LinksFooter.tsx
index acf4acb..3da1e0a 100644
--- a/src/components/Footer/LinksFooter/LinksFooter.tsx
+++ b/src/components/Footer/LinksFooter/LinksFooter.tsx
@@ -1,13 +1,13 @@
import React, { useState, useEffect } from "react"
import styleLink from "./LinksFooter.module.scss"
-import { Title } from "./Titles/Title"
+import Title from "./TitlesComponent/Title"
import { ReactComponent as Facebook } from "./assets/facebook.svg"
import { ReactComponent as Instagram } from "./assets/instagram.svg"
import { ReactComponent as Twitter } from "./assets/twitter.svg"
import { ReactComponent as Youtube } from "./assets/youtube.svg"
import { ReactComponent as Linkedlin } from "./assets/linkedlin.svg"
import titleLinks from "./assets/titleLinks.svg"
-import { Link } from "./Links/Link"
+import { Link } from "./LinksComponent/Link"
const LinksFooter = () => {
@@ -15,26 +15,25 @@ const LinksFooter = () => {
const [openDuvidas, setOpenDuvidas] = useState(false);
const [openFaleConosco, setOpenFaleConosco] = useState(false);
-
- const handleListInstitucional = (state: boolean) => {
+ const handleListInstitucional = () => {
if (window.innerWidth < 1024) {
- setOpenInstitucional(!state);
+ setOpenInstitucional(!openInstitucional);
}
};
- const handleListDuvidas = (state: boolean) => {
+ const handleListDuvidas = () => {
if (window.innerWidth < 1024) {
- setOpenDuvidas(!state)
+ setOpenDuvidas(!openDuvidas)
}
}
- const handleFaleConosco = (state: boolean) => {
+ const handleFaleConosco = () => {
if (window.innerWidth < 1024) {
- setOpenFaleConosco(!state)
+ setOpenFaleConosco(!openFaleConosco)
}
}
- const handleResize = () => {
+ const handleLoadResize = () => {
if (window.innerWidth > 1024) {
setOpenInstitucional(true)
setOpenDuvidas(true)
@@ -47,22 +46,23 @@ const LinksFooter = () => {
}
useEffect(() => {
- window.addEventListener("load", handleResize)
- window.addEventListener("resize", handleResize)
+ window.addEventListener("load", handleLoadResize)
+ window.addEventListener("resize", handleLoadResize)
},)
return (
- < Title
- onClick={() => handleListInstitucional(openInstitucional)}
+
+ < Title onClick={handleListInstitucional}
text="Institucional"
className={styleLink["container__links__rodape__title"]}
src={titleLinks}
alt="Imagem expandir lista"
type="button"
- ariaLabel="Exibir lista" />
+ ariaLabel="Exibir lista"
+ />
{openInstitucional &&
@@ -76,7 +76,7 @@ const LinksFooter = () => {
< Title
- onClick={() => handleListDuvidas(openDuvidas)}
+ onClick={handleListDuvidas}
text="Dúvidas"
className={styleLink["container__links__rodape__title"]}
src={titleLinks}
@@ -96,7 +96,7 @@ const LinksFooter = () => {
< Title
- onClick={() => handleFaleConosco(openFaleConosco)}
+ onClick={handleFaleConosco}
text="Fale Conosco"
className={styleLink["container__links__rodape__title"]}
src={titleLinks}
@@ -106,7 +106,7 @@ const LinksFooter = () => {
{openFaleConosco &&
@@ -44,9 +48,9 @@ const Header = () => {
diff --git a/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss b/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss
index aaedb07..9e58d2e 100644
--- a/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss
+++ b/src/components/Header/MenuHamburguer/MenuHamburguer.module.scss
@@ -25,6 +25,7 @@
width: 100%;
height: 585px;
background: white;
+ animation: modal-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
&__top-modal {
display: flex;
@@ -71,3 +72,14 @@
padding-right: 36px;
background: rgba(69, 69, 69, 0.7);
}
+
+@keyframes modal-left {
+ 0% {
+ transform: translateZ(-1400px) translateX(-1000px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateZ(0) translateX(0);
+ opacity: 1;
+ }
+}
diff --git a/src/components/Header/MenuHamburguer/MenuHamburguer.tsx b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx
index 9a87f05..3070904 100644
--- a/src/components/Header/MenuHamburguer/MenuHamburguer.tsx
+++ b/src/components/Header/MenuHamburguer/MenuHamburguer.tsx
@@ -1,6 +1,7 @@
import React, { useState } from "react";
import styleModal from "./MenuHamburguer.module.scss";
import Modal from "react-modal"
+import { Link as Rota } from "react-router-dom"
import { ReactComponent as Close } from "../assets/close.svg"
import { ReactComponent as Hamburguer } from "../assets/hamburguer.svg"
@@ -16,6 +17,7 @@ const MenuHamburguer = () => {
function closeModal() {
setIsOpen(false)
}
+
return (
<>
@@ -38,9 +40,9 @@ const MenuHamburguer = () => {
}
diff --git a/src/components/Header/assets/cart.svg b/src/components/Header/assets/cart.svg
index e756ffb..165d30e 100644
--- a/src/components/Header/assets/cart.svg
+++ b/src/components/Header/assets/cart.svg
@@ -1,12 +1,5 @@
-