From 6d66516225acccf2ce40cbb4e3c6e263eba1b9cf Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Wed, 11 Jan 2023 16:48:14 -0300 Subject: [PATCH] =?UTF-8?q?fix:=20Melhorando=20a=20identa=C3=A7=C3=A3o=20d?= =?UTF-8?q?o=20c=C3=B3digo=20com=20.editorconfig?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .editorconfig | 13 + src/components/ElementFloat/ElementFloat.tsx | 63 ++- .../ElementFloat/elementFloat.module.scss | 40 +- src/components/Footer/Footer.tsx | 14 +- .../Footer/FooterBottom/FooterBottom.tsx | 169 ++++--- .../FooterBottom/footerBottom.module.scss | 464 +++++++++--------- src/components/Footer/FooterTop/FooterTop.tsx | 307 ++++++------ .../Footer/FooterTop/footerTop.module.scss | 330 ++++++------- src/components/Header/Header.tsx | 130 +++-- src/components/Header/header.module.scss | 354 ++++++------- .../Institucional/Contato/Contato.tsx | 328 ++++++------- .../Institucional/Contato/contato.module.scss | 262 +++++----- .../Institucional/Institucional.tsx | 182 +++---- src/components/Institucional/Sobre/Sobre.tsx | 67 ++- .../Institucional/Sobre/sobre.module.scss | 66 +-- .../Institucional/institucional.module.scss | 244 ++++----- src/components/MenuNav/MenuNav.tsx | 30 +- src/components/MenuNav/menuNav.module.scss | 66 +-- src/components/MenuToggle/MenuToggle.tsx | 57 +-- .../MenuToggle/menuToggle.module.scss | 108 ++-- src/components/Newsletter/Newsletter.tsx | 64 +-- .../Newsletter/newsletter.module.scss | 228 ++++----- src/index.tsx | 10 +- src/pages/Home.tsx | 16 +- src/pages/home.module.scss | 14 +- src/schema/FormSchema.ts | 70 ++- src/styles/global.scss | 31 +- 27 files changed, 1838 insertions(+), 1889 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..9e434d8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +indent_style = space +indent_size = 4 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +max_line_length = 100 diff --git a/src/components/ElementFloat/ElementFloat.tsx b/src/components/ElementFloat/ElementFloat.tsx index b1dd09c..2e0f339 100644 --- a/src/components/ElementFloat/ElementFloat.tsx +++ b/src/components/ElementFloat/ElementFloat.tsx @@ -4,41 +4,38 @@ import { useState } from "react"; import styles from "./elementFloat.module.scss"; export default function ElementFloat() { - const [pageYPosition, setPageYPosition] = useState(0); + const [pageYPosition, setPageYPosition] = useState(0); - function getPageYAfterScroll() { - setPageYPosition(window.scrollY); - } + function getPageYAfterScroll() { + setPageYPosition(window.scrollY); + } - window.addEventListener("scroll", getPageYAfterScroll); + window.addEventListener("scroll", getPageYAfterScroll); - const btnScrollTop = () => { - window.scrollTo({ - top: 0, - left: 0, - behavior: "smooth", - }); - }; + const btnScrollTop = () => { + window.scrollTo({ + top: 0, + left: 0, + behavior: "smooth", + }); + }; - return ( -
- - {pageYPosition > 90 && ( - - )} -
- ); + return ( +
+ + {pageYPosition > 90 && ( + + )} +
+ ); } diff --git a/src/components/ElementFloat/elementFloat.module.scss b/src/components/ElementFloat/elementFloat.module.scss index 85a988a..12ced9f 100644 --- a/src/components/ElementFloat/elementFloat.module.scss +++ b/src/components/ElementFloat/elementFloat.module.scss @@ -1,29 +1,29 @@ .floatElementsFooter { - position: fixed; - right: 16px; - bottom: 28px; + position: fixed; + right: 16px; + bottom: 28px; - width: 2.6562%; + width: 2.6562%; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - .whatsappIcon, - .topoSiteIcon { - width: 100%; - background: transparent; - cursor: pointer; - } - - .topoSiteIcon { - img { - width: 100%; + .whatsappIcon, + .topoSiteIcon { + width: 100%; + background: transparent; + cursor: pointer; + } + + .topoSiteIcon { + img { + width: 100%; + } } - } } @media screen and (max-width: 1024px) { - .floatElementsFooter { - width: 34px; - } + .floatElementsFooter { + width: 34px; + } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 5a60128..fac0614 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -3,11 +3,11 @@ import FooterBottom from "./FooterBottom/FooterBottom"; import FooterTop from "./FooterTop/FooterTop"; export default function Footer() { - return ( - - ); + return ( + + ); } diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx index a795716..f761ff7 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.tsx +++ b/src/components/Footer/FooterBottom/FooterBottom.tsx @@ -4,89 +4,88 @@ import { ReactComponent as M3Icon } from "../assets/logoM3M3Academy.svg"; import styles from "./footerBottom.module.scss"; export default function FooterBottom() { - return ( -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor -

-
- - -
- ); + return ( +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor +

+
+ + +
+ ); } diff --git a/src/components/Footer/FooterBottom/footerBottom.module.scss b/src/components/Footer/FooterBottom/footerBottom.module.scss index b315f54..33ccacb 100644 --- a/src/components/Footer/FooterBottom/footerBottom.module.scss +++ b/src/components/Footer/FooterBottom/footerBottom.module.scss @@ -1,275 +1,275 @@ .containerFooterBottom { - padding: 15px 100px; - background: var(--black); - color: var(--white); + padding: 15px 100px; + background: var(--black); + color: var(--white); - display: flex; - justify-content: space-between; - align-items: center; - - ul li { - list-style: none; - } - - .footerAddress { - width: 21.66%; - max-width: 234px; - - p { - font-weight: 400; - font-size: 10px; - line-height: 12px; - text-transform: capitalize; - } - } - - .footerPayments { - width: 399px; display: flex; - align-items: center; justify-content: space-between; - gap: 12px; + align-items: center; - .footerPaymentsWrapper { - display: flex; - width: 100%; - - .mastercard, - .boleto { - width: 36px; - height: 20.2px; - } - - .visa, - .amex, - .hipercard { - width: 35px; - height: 20.13px; - } - - .elo { - width: 37px; - height: 20.26px; - } - - .paypal { - width: 34px; - height: 19.07px; - } + ul li { + list-style: none; } - .divider { - background-color: var(--gray-400); - display: block; - align-items: center; - height: 24px; - width: 1px; + .footerAddress { + width: 21.66%; + max-width: 234px; + + p { + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + } } - .footerPaymentsWrapperVtex { - display: flex; - align-items: center; - width: 100%; + .footerPayments { + width: 399px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; - .vtexIcon { - width: 54.61px; - height: 34px; - } - } - } + .footerPaymentsWrapper { + display: flex; + width: 100%; - .containerDevelop { - max-width: 226px; - display: flex; - gap: 13px; + .mastercard, + .boleto { + width: 36px; + height: 20.2px; + } - li { - display: flex; - align-items: center; - gap: 12px; + .visa, + .amex, + .hipercard { + width: 35px; + height: 20.13px; + } + + .elo { + width: 37px; + height: 20.26px; + } + + .paypal { + width: 34px; + height: 19.07px; + } + } + + .divider { + background-color: var(--gray-400); + display: block; + align-items: center; + height: 24px; + width: 1px; + } + + .footerPaymentsWrapperVtex { + display: flex; + align-items: center; + width: 100%; + + .vtexIcon { + width: 54.61px; + height: 34px; + } + } } - li span { - font-weight: 400; - font-size: 10px; - line-height: 12px; - } + .containerDevelop { + max-width: 226px; + display: flex; + gap: 13px; - li a { - height: 16px; - display: flex; - align-items: center; - } + li { + display: flex; + align-items: center; + gap: 12px; + } - .logoVtexFooter { - width: 44.92px; - height: 16px; - } + li span { + font-weight: 400; + font-size: 10px; + line-height: 12px; + } - .logoM3Footer { - width: 28.66px; - height: 15.65px; + li a { + height: 16px; + display: flex; + align-items: center; + } + + .logoVtexFooter { + width: 44.92px; + height: 16px; + } + + .logoM3Footer { + width: 28.66px; + height: 15.65px; + } } - } } @media screen and (min-width: 2500px) { - .containerFooterBottom { - .footerAddress { - width: 20.3043%; - max-width: 467px; + .containerFooterBottom { + .footerAddress { + width: 20.3043%; + max-width: 467px; - p { - font-size: 20px; - line-height: 23px; - } + p { + font-size: 20px; + line-height: 23px; + } + } + + .footerPayments { + width: 692px; + + .footerPaymentsWrapper { + .mastercard, + .boleto, + .paypal { + width: 70px; + height: 39.27px; + } + + .visa, + .amex, + .hipercard { + width: 70px; + height: 40.25px; + } + + .elo { + width: 70px; + height: 38.33px; + } + } + + .footerPaymentsWrapperVtex { + .vtexIcon { + width: 106px; + height: 66px; + } + } + } + + .containerDevelop { + max-width: 404.17px; + gap: 12px; + + li span { + font-size: 20px; + line-height: 23px; + } + + .logoVtexFooter { + width: 84.22px; + height: 30px; + } + + .logoM3Footer { + width: 54.95px; + height: 30px; + } + } } - - .footerPayments { - width: 692px; - - .footerPaymentsWrapper { - .mastercard, - .boleto, - .paypal { - width: 70px; - height: 39.27px; - } - - .visa, - .amex, - .hipercard { - width: 70px; - height: 40.25px; - } - - .elo { - width: 70px; - height: 38.33px; - } - } - - .footerPaymentsWrapperVtex { - .vtexIcon { - width: 106px; - height: 66px; - } - } - } - - .containerDevelop { - max-width: 404.17px; - gap: 12px; - - li span { - font-size: 20px; - line-height: 23px; - } - - .logoVtexFooter { - width: 84.22px; - height: 30px; - } - - .logoM3Footer { - width: 54.95px; - height: 30px; - } - } - } } @media screen and (max-width: 1024px) { - .containerFooterBottom { - padding: 15px 16px; + .containerFooterBottom { + padding: 15px 16px; - display: grid; - grid-template-areas: - "payments" - "address" - "develop"; - gap: 15px; + display: grid; + grid-template-areas: + "payments" + "address" + "develop"; + gap: 15px; - .footerAddress { - grid-area: address; - width: 100%; - max-width: 258px; + .footerAddress { + grid-area: address; + width: 100%; + max-width: 258px; + } + + .footerPayments { + grid-area: payments; + max-width: 344px; + width: auto; + } + + .containerDevelop { + grid-area: develop; + } } - - .footerPayments { - grid-area: payments; - max-width: 344px; - width: auto; - } - - .containerDevelop { - grid-area: develop; - } - } } @media screen and (max-width: 430px) { - .containerFooterBottom { - .footerPayments { - .footerPaymentsWrapper { - gap: 11px; + .containerFooterBottom { + .footerPayments { + .footerPaymentsWrapper { + gap: 11px; - .mastercard, - .boleto, - .paypal, - .visa, - .amex, - .hipercard, - .elo { - width: 30px; - height: 17px; + .mastercard, + .boleto, + .paypal, + .visa, + .amex, + .hipercard, + .elo { + width: 30px; + height: 17px; + } + } + + .divider { + height: 20px; + } + + .footerPaymentsWrapperVtex { + .vtexIcon { + width: 45px; + height: 28px; + } + } } - } - - .divider { - height: 20px; - } - - .footerPaymentsWrapperVtex { - .vtexIcon { - width: 45px; - height: 28px; - } - } } - } } @media screen and (max-width: 370px) { - .containerFooterBottom { - .footerPayments { - display: inline-block; + .containerFooterBottom { + .footerPayments { + display: inline-block; - .footerPaymentsWrapper { - display: contents; - img { - width: 30.27px; - height: 16.97px; - margin-right: 11px; + .footerPaymentsWrapper { + display: contents; + img { + width: 30.27px; + height: 16.97px; + margin-right: 11px; - &:last-child { - margin-top: 11px; - } + &:last-child { + margin-top: 11px; + } + } + } + + .divider { + display: none; + } + + .footerPaymentsWrapperVtex { + .vtexIcon { + width: 45px; + height: 28px; + margin-left: -2px; + margin-top: 11px; + } + } } - } - - .divider { - display: none; - } - - .footerPaymentsWrapperVtex { - .vtexIcon { - width: 45px; - height: 28px; - margin-left: -2px; - margin-top: 11px; - } - } } - } } diff --git a/src/components/Footer/FooterTop/FooterTop.tsx b/src/components/Footer/FooterTop/FooterTop.tsx index f002603..0cac4e6 100644 --- a/src/components/Footer/FooterTop/FooterTop.tsx +++ b/src/components/Footer/FooterTop/FooterTop.tsx @@ -8,173 +8,158 @@ import { ReactComponent as LinkedinIcon } from "../assets/linkedin-icon.svg"; import styles from "./footerTop.module.scss"; export default function FooterTop() { - const footerLinks = { - institucional: useRef(null), - duvidas: useRef(null), - faleConosco: useRef(null), - }; + const footerLinks = { + institucional: useRef(null), + duvidas: useRef(null), + faleConosco: useRef(null), + }; - const titleMenuFooter = { - institucional: useRef(null), - duvidas: useRef(null), - faleConosco: useRef(null), - }; + const titleMenuFooter = { + institucional: useRef(null), + duvidas: useRef(null), + faleConosco: useRef(null), + }; - const [openList, setOpenList] = useState({ - institucional: false, - duvidas: false, - faleConosco: false, - }); + const [openList, setOpenList] = useState({ + institucional: false, + duvidas: false, + faleConosco: false, + }); - const footerLinkToggle = (e: React.MouseEvent) => { - const textH2OnClick = e.currentTarget.textContent; + const footerLinkToggle = (e: React.MouseEvent) => { + const textH2OnClick = e.currentTarget.textContent; - if (window.screen.width <= 1024) { - if (textH2OnClick === "Institucional" && !openList.institucional) { - titleMenuFooter.institucional.current?.classList.add( - `${styles.titleActive}` - ); - footerLinks.institucional.current?.classList.add(`${styles.active}`); - return setOpenList((prevState) => ({ - ...prevState, - institucional: true, - })); - } else if (textH2OnClick === "Institucional" && openList.institucional) { - titleMenuFooter.institucional.current?.classList.remove( - `${styles.titleActive}` - ); - footerLinks.institucional.current?.classList.remove(`${styles.active}`); - return setOpenList((prevState) => ({ - ...prevState, - institucional: false, - })); - } + if (window.screen.width <= 1024) { + if (textH2OnClick === "Institucional" && !openList.institucional) { + titleMenuFooter.institucional.current?.classList.add(`${styles.titleActive}`); + footerLinks.institucional.current?.classList.add(`${styles.active}`); + return setOpenList((prevState) => ({ + ...prevState, + institucional: true, + })); + } else if (textH2OnClick === "Institucional" && openList.institucional) { + titleMenuFooter.institucional.current?.classList.remove(`${styles.titleActive}`); + footerLinks.institucional.current?.classList.remove(`${styles.active}`); + return setOpenList((prevState) => ({ + ...prevState, + institucional: false, + })); + } - if (textH2OnClick === "Dúvidas" && !openList.duvidas) { - titleMenuFooter.duvidas.current?.classList.add(`${styles.titleActive}`); - footerLinks.duvidas.current?.classList.add(`${styles.active}`); - return setOpenList((prevState) => ({ ...prevState, duvidas: true })); - } else if (textH2OnClick === "Dúvidas" && openList.duvidas) { - titleMenuFooter.duvidas.current?.classList.remove( - `${styles.titleActive}` - ); - footerLinks.duvidas.current?.classList.remove(`${styles.active}`); - return setOpenList((prevState) => ({ ...prevState, duvidas: false })); - } + if (textH2OnClick === "Dúvidas" && !openList.duvidas) { + titleMenuFooter.duvidas.current?.classList.add(`${styles.titleActive}`); + footerLinks.duvidas.current?.classList.add(`${styles.active}`); + return setOpenList((prevState) => ({ ...prevState, duvidas: true })); + } else if (textH2OnClick === "Dúvidas" && openList.duvidas) { + titleMenuFooter.duvidas.current?.classList.remove(`${styles.titleActive}`); + footerLinks.duvidas.current?.classList.remove(`${styles.active}`); + return setOpenList((prevState) => ({ ...prevState, duvidas: false })); + } - if (textH2OnClick === "Fale Conosco" && !openList.faleConosco) { - titleMenuFooter.faleConosco.current?.classList.add( - `${styles.titleActive}` - ); - footerLinks.faleConosco.current?.classList.add(`${styles.active}`); - return setOpenList((prevState) => ({ - ...prevState, - faleConosco: true, - })); - } else if (textH2OnClick === "Fale Conosco" && openList.faleConosco) { - titleMenuFooter.faleConosco.current?.classList.remove( - `${styles.titleActive}` - ); - footerLinks.faleConosco.current?.classList.remove(`${styles.active}`); - return setOpenList((prevState) => ({ - ...prevState, - faleConosco: false, - })); - } - } - }; + if (textH2OnClick === "Fale Conosco" && !openList.faleConosco) { + titleMenuFooter.faleConosco.current?.classList.add(`${styles.titleActive}`); + footerLinks.faleConosco.current?.classList.add(`${styles.active}`); + return setOpenList((prevState) => ({ + ...prevState, + faleConosco: true, + })); + } else if (textH2OnClick === "Fale Conosco" && openList.faleConosco) { + titleMenuFooter.faleConosco.current?.classList.remove(`${styles.titleActive}`); + footerLinks.faleConosco.current?.classList.remove(`${styles.active}`); + return setOpenList((prevState) => ({ + ...prevState, + faleConosco: false, + })); + } + } + }; - return ( -
-
-

- Institucional -

- -
-
-

- Dúvidas -

- -
-
-

- Fale Conosco -

- -
-
-
- - - - - - - - - - - - - - - + return ( +
+
+

+ Institucional +

+ +
+
+

+ Dúvidas +

+ +
+
+

+ Fale Conosco +

+ +
+
- - www.loremipsum.com - -
-
- ); + ); } diff --git a/src/components/Footer/FooterTop/footerTop.module.scss b/src/components/Footer/FooterTop/footerTop.module.scss index e24fdbc..71c2bb8 100644 --- a/src/components/Footer/FooterTop/footerTop.module.scss +++ b/src/components/Footer/FooterTop/footerTop.module.scss @@ -1,186 +1,186 @@ .containerFooterTop { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; - padding: 50px 100px; + padding: 50px 100px; - .wrapperFooterTop { - width: 14.3518%; - } - - div h4 { - font-weight: 500; - font-size: 14px; - line-height: 16px; - - text-transform: uppercase; - - color: var(--black-100); - } - - div ul li { - list-style: none; - - font-weight: 400; - font-size: 12px; - line-height: 14px; - margin-top: 12px; - - color: var(--black-100); - - &:last-child { - text-decoration: underline; - } - } - - .containerSupportClient { - width: 14.3518%; - - .listLinksFooterTop { - display: flex; - flex-direction: column; - gap: 12px; - - .supportClient { - text-decoration: none; - margin: 0; - - &:first-child { - margin-top: 12px; - } - - .titleSuportClient { - font-weight: 500; - } - - .numberDecoration { - text-decoration: underline; - } - } - } - } - - .containerSocialIcons { - width: 19.9074%; - - .wrapperSocialIcons { - display: flex; - gap: 10px; - margin-bottom: 8px; - - a { - width: 16.279%; - display: flex; - - svg { - width: 100%; - } - } + .wrapperFooterTop { + width: 14.3518%; } - .linkSocial { - font-weight: 400; - font-size: 14px; - line-height: 16px; - - color: var(--black-100); - } - } - - .linkRevendedor { - text-decoration: underline; - } -} - -@media screen and (min-width: 2500px) { - .containerFooterTop { div h4 { - font-size: 28px; - line-height: 33px; + font-weight: 500; + font-size: 14px; + line-height: 16px; + + text-transform: uppercase; + + color: var(--black-100); } div ul li { - font-size: 24px; - line-height: 28px; + list-style: none; + + font-weight: 400; + font-size: 12px; + line-height: 14px; + margin-top: 12px; + + color: var(--black-100); + + &:last-child { + text-decoration: underline; + } + } + + .containerSupportClient { + width: 14.3518%; + + .listLinksFooterTop { + display: flex; + flex-direction: column; + gap: 12px; + + .supportClient { + text-decoration: none; + margin: 0; + + &:first-child { + margin-top: 12px; + } + + .titleSuportClient { + font-weight: 500; + } + + .numberDecoration { + text-decoration: underline; + } + } + } } .containerSocialIcons { - width: 16.9565%; - .wrapperSocialIcons { - a { - width: 17.9487%; - } - } + width: 19.9074%; - .linkSocial { - font-size: 28px; - line-height: 33px; - } + .wrapperSocialIcons { + display: flex; + gap: 10px; + margin-bottom: 8px; + + a { + width: 16.279%; + display: flex; + + svg { + width: 100%; + } + } + } + + .linkSocial { + font-weight: 400; + font-size: 14px; + line-height: 16px; + + color: var(--black-100); + } + } + + .linkRevendedor { + text-decoration: underline; + } +} + +@media screen and (min-width: 2500px) { + .containerFooterTop { + div h4 { + font-size: 28px; + line-height: 33px; + } + + div ul li { + font-size: 24px; + line-height: 28px; + } + + .containerSocialIcons { + width: 16.9565%; + .wrapperSocialIcons { + a { + width: 17.9487%; + } + } + + .linkSocial { + font-size: 28px; + line-height: 33px; + } + } } - } } @media screen and (max-width: 1024px) { - .containerFooterTop { - padding: 24px 16px; - flex-direction: column; - gap: 12px; + .containerFooterTop { + padding: 24px 16px; + flex-direction: column; + gap: 12px; - .wrapperFooterTop, - .containerSupportClient { - width: 100%; - } - - .containerSupportClient { - width: 100%; - - .listLinksFooterTop { - display: none; - } - - .active { - display: flex; - } - } - - div h4 { - display: flex; - align-items: center; - justify-content: space-between; - - text-transform: none; - &::after { - content: "+"; - display: inline-block; - line-height: 8.28px; - } - - &.titleActive::after { - content: "-"; - } - } - - .listLinksFooterTop { - display: none; - } - - .active { - display: block; - } - - .containerSocialIcons { - width: max-content; - - .wrapperSocialIcons { - margin-bottom: 12px; - a { - width: 100%; - - svg { - width: 35px; - } + .wrapperFooterTop, + .containerSupportClient { + width: 100%; + } + + .containerSupportClient { + width: 100%; + + .listLinksFooterTop { + display: none; + } + + .active { + display: flex; + } + } + + div h4 { + display: flex; + align-items: center; + justify-content: space-between; + + text-transform: none; + &::after { + content: "+"; + display: inline-block; + line-height: 8.28px; + } + + &.titleActive::after { + content: "-"; + } + } + + .listLinksFooterTop { + display: none; + } + + .active { + display: block; + } + + .containerSocialIcons { + width: max-content; + + .wrapperSocialIcons { + margin-bottom: 12px; + a { + width: 100%; + + svg { + width: 35px; + } + } + } } - } } - } } diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 64b8772..db948a8 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -8,78 +8,70 @@ import { useEffect, useState } from "react"; import styles from "./header.module.scss"; export default function Header() { - const [showMenuToggle, setShowMenuToggle] = useState(false); - const [showMenuDesktop, setShowMenuDesktop] = useState(false); + const [showMenuToggle, setShowMenuToggle] = useState(false); + const [showMenuDesktop, setShowMenuDesktop] = useState(false); - const openMenuToggle = () => { - setShowMenuToggle((prev) => !prev); - }; + const openMenuToggle = () => { + setShowMenuToggle((prev) => !prev); + }; - // MONITORAR A TELA PARA MOSTRAR OU NÃO O MENU DESKTOP - const menuDesktopControl = () => { - if (window.innerWidth > 1024) { - return setShowMenuDesktop(true); - } else { - return setShowMenuDesktop(false); - } - }; + // MONITORAR A TELA PARA MOSTRAR OU NÃO O MENU DESKTOP + const menuDesktopControl = () => { + if (window.innerWidth > 1024) { + return setShowMenuDesktop(true); + } else { + return setShowMenuDesktop(false); + } + }; - useEffect(() => { - if (window.innerWidth > 1024) { - setShowMenuDesktop(true); - } else { - setShowMenuDesktop(false); - } - }, [showMenuDesktop]); + useEffect(() => { + if (window.innerWidth > 1024) { + setShowMenuDesktop(true); + } else { + setShowMenuDesktop(false); + } + }, [showMenuDesktop]); - window.addEventListener("resize", menuDesktopControl); + window.addEventListener("resize", menuDesktopControl); - return ( - <> -
-
- - Logo M3 Academy -
- - -
- -
- {showMenuDesktop === true && } -
- - - ); + return ( + <> +
+
+ + Logo M3 Academy +
+ + +
+ +
+ {showMenuDesktop === true && } +
+ + + ); } diff --git a/src/components/Header/header.module.scss b/src/components/Header/header.module.scss index 0a18ad9..47d0b62 100644 --- a/src/components/Header/header.module.scss +++ b/src/components/Header/header.module.scss @@ -1,207 +1,207 @@ .containerHeader { - background: var(--black); - - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 100px; - - .menuToggle { - display: none; - background: transparent; - } - - .logo { - width: 12.5925%; - - padding: 25px 0; - } - - .formSearch { - width: 24.44%; - height: 32px; - - background: var(--white); - - border: 2px solid #f2f2f2; - border-radius: 5px; + background: var(--black); display: flex; align-items: center; justify-content: space-between; + padding: 0 100px; - input { - background: transparent; - padding: 0 10px 0 16px; - width: 100%; - - font-weight: 400; - font-size: 14px; - line-height: 16px; - - color: var(--gray-400); - - &::placeholder { - font-weight: 400; - font-size: 14px; - line-height: 16px; - - color: var(--gray-400); - } + .menuToggle { + display: none; + background: transparent; } - .searchButton { - background: transparent; - height: 18px; - padding-right: 16px; + .logo { + width: 12.5925%; - svg { - height: 18px; - cursor: pointer; - } - } - } - - .entrarContainer { - width: 12.5925%; - - display: flex; - justify-content: space-between; - align-items: center; - - a { - display: flex; - color: var(--white); - - font-weight: 400; - font-size: 14px; - line-height: 16px; - text-transform: uppercase; + padding: 25px 0; } - .cartIcon { - width: 20.5882%; + .formSearch { + width: 24.44%; + height: 32px; + + background: var(--white); + + border: 2px solid #f2f2f2; + border-radius: 5px; + + display: flex; + align-items: center; + justify-content: space-between; + + input { + background: transparent; + padding: 0 10px 0 16px; + width: 100%; + + font-weight: 400; + font-size: 14px; + line-height: 16px; + + color: var(--gray-400); + + &::placeholder { + font-weight: 400; + font-size: 14px; + line-height: 16px; + + color: var(--gray-400); + } + } + + .searchButton { + background: transparent; + height: 18px; + padding-right: 16px; + + svg { + height: 18px; + cursor: pointer; + } + } + } + + .entrarContainer { + width: 12.5925%; + + display: flex; + justify-content: space-between; + align-items: center; + + a { + display: flex; + color: var(--white); + + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + } + + .cartIcon { + width: 20.5882%; + } } - } } @media screen and (min-width: 2500px) { - .containerHeader { - .logo { - width: 11.5486%; - } - - .formSearch { - width: 22.3913%; - height: 57px; - - border: 2px solid #f0f0f0; - - input { - padding: 0 16px; - - font-size: 28px; - line-height: 33px; - - &::placeholder { - font-size: 28px; - line-height: 33px; + .containerHeader { + .logo { + width: 11.5486%; } - } - .searchButton { - background: transparent; - height: 35.5px; - padding-right: 11px; + .formSearch { + width: 22.3913%; + height: 57px; - svg { - height: 35.5px; + border: 2px solid #f0f0f0; + + input { + padding: 0 16px; + + font-size: 28px; + line-height: 33px; + + &::placeholder { + font-size: 28px; + line-height: 33px; + } + } + + .searchButton { + background: transparent; + height: 35.5px; + padding-right: 11px; + + svg { + height: 35.5px; + } + } + } + + .entrarContainer { + width: 9.3339%; + + a { + font-size: 28px; + line-height: 33px; + } + + .cartIcon { + width: 25.4704%; + } } - } } - - .entrarContainer { - width: 9.3339%; - - a { - font-size: 28px; - line-height: 33px; - } - - .cartIcon { - width: 25.4704%; - } - } - } } @media screen and (max-width: 1024px) { - .containerHeader { - padding: 0 16px; - padding-top: 25px; - display: grid; - grid-template-areas: - "menuToggle logo cart" - "search search search"; - grid-template-columns: 28px 136px 28px; + .containerHeader { + padding: 0 16px; + padding-top: 25px; + display: grid; + grid-template-areas: + "menuToggle logo cart" + "search search search"; + grid-template-columns: 28px 136px 28px; - .menuToggle { - grid-area: menuToggle; - display: block; - width: 28px; + .menuToggle { + grid-area: menuToggle; + display: block; + width: 28px; - cursor: pointer; + cursor: pointer; - .toggleOne, - .toggleTwo, - .toggleThree { - background: var(--white); - height: 3.5px; - width: 100%; - margin-top: 6px; - border-radius: 5px; + .toggleOne, + .toggleTwo, + .toggleThree { + background: var(--white); + height: 3.5px; + width: 100%; + margin-top: 6px; + border-radius: 5px; - &:first-child { - margin-top: 0; + &:first-child { + margin-top: 0; + } + } + } + + .logo { + grid-area: logo; + width: 100%; + padding: 0; + } + + .formSearch { + grid-area: search; + width: 100%; + height: 36px; + + margin: 25px 0; + + input { + padding-right: 0; + } + + .searchButton { + padding-right: 9px; + } + } + + .entrarContainer { + grid-area: cart; + width: 100%; + max-height: 28px; + + a { + display: none; + } + + .cartIcon { + display: flex; + width: 100%; + } } - } } - - .logo { - grid-area: logo; - width: 100%; - padding: 0; - } - - .formSearch { - grid-area: search; - width: 100%; - height: 36px; - - margin: 25px 0; - - input { - padding-right: 0; - } - - .searchButton { - padding-right: 9px; - } - } - - .entrarContainer { - grid-area: cart; - width: 100%; - max-height: 28px; - - a { - display: none; - } - - .cartIcon { - display: flex; - width: 100%; - } - } - } } diff --git a/src/components/Institucional/Contato/Contato.tsx b/src/components/Institucional/Contato/Contato.tsx index de3f787..8cf6a64 100644 --- a/src/components/Institucional/Contato/Contato.tsx +++ b/src/components/Institucional/Contato/Contato.tsx @@ -5,192 +5,166 @@ import { useState } from "react"; import styles from "./contato.module.scss"; interface IFormikValues { - name: string; - email: string; - cpf: string; - dataNasc: string; - phone: string; - instagram: string; + name: string; + email: string; + cpf: string; + dataNasc: string; + phone: string; + instagram: string; } const initialValues = { - name: "", - email: "", - cpf: "", - dataNasc: "", - phone: "", - instagram: "", + name: "", + email: "", + cpf: "", + dataNasc: "", + phone: "", + instagram: "", }; export default function Contato() { - const [validSubmit, setValidSubmit] = useState(false); - const handleFormikSubmit = (values: IFormikValues) => { - setValidSubmit(true); - }; + const [validSubmit, setValidSubmit] = useState(false); + const handleFormikSubmit = (values: IFormikValues) => { + setValidSubmit(true); + }; - return ( - { - handleFormikSubmit(values); - resetForm(); - }} - initialValues={initialValues} - validationSchema={FormSchema} - > -
-

Preencha o formulário

- -
- - - -
- -
- - - -
- -
- - - { - return ( - - ); + return ( + { + handleFormikSubmit(values); + resetForm(); }} - /> -
+ initialValues={initialValues} + validationSchema={FormSchema} + > + +

Preencha o formulário

-
- - - { - return ( - - ); - }} - /> -
+
+ + + +
-
- - - { - return ( - - ); - }} - /> -
+
+ + + +
-
- - - -
-
- - -
- - {validSubmit && ( - - *Formulário enviado com sucesso! - - )} -
- - ); +
+ + + { + return ( + + ); + }} + /> +
+ +
+ + + { + return ( + + ); + }} + /> +
+ +
+ + + { + return ( + + ); + }} + /> +
+ +
+ + + +
+
+ + +
+ + {validSubmit && ( + *Formulário enviado com sucesso! + )} + + + ); } diff --git a/src/components/Institucional/Contato/contato.module.scss b/src/components/Institucional/Contato/contato.module.scss index 684fa53..71d5f17 100644 --- a/src/components/Institucional/Contato/contato.module.scss +++ b/src/components/Institucional/Contato/contato.module.scss @@ -1,161 +1,161 @@ .formContato { - width: 100%; - h3 { - font-weight: 700; - font-size: 24px; - line-height: 28px; - color: var(--black); - - margin: 10px 0 12px; - } - - .wrapperInput { - position: relative; - } - - input, - label { width: 100%; - } + h3 { + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: var(--black); - label { - font-weight: 400; - font-size: 14px; - line-height: 16px; - - color: #100d0e; - margin-left: 15px; - } - - input { - margin: 12px 0; - height: 46px; - - border: 1px solid #100d0e; - border-radius: 25px; - - padding: 15px 20px; - - font-weight: 400; - font-size: 14px; - line-height: 16px; - - color: #b9b7b7; - - &::placeholder { - font-weight: 400; - font-size: 14px; - line-height: 16px; - - color: #b9b7b7; + margin: 10px 0 12px; } - } - .containerTermos { - display: flex; - width: max-content; - white-space: nowrap; - align-items: flex-end; - margin: 2px auto 12px auto; + .wrapperInput { + position: relative; + } + + input, + label { + width: 100%; + } label { - margin: 0; - margin-right: 4px; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + color: #100d0e; + margin-left: 15px; } input { - margin: 0; - min-width: 18px; - height: 18px; - } - } + margin: 12px 0; + height: 46px; - .required { - color: #ff0000; - } + border: 1px solid #100d0e; + border-radius: 25px; - .termosAcept { - text-decoration: underline; - } + padding: 15px 20px; - button { - width: 100%; - background: var(--black); - border-radius: 25px; - color: var(--white); - padding: 17px 0; + font-weight: 400; + font-size: 14px; + line-height: 16px; - font-weight: 400; - font-size: 16px; - line-height: 19px; - letter-spacing: 0.05em; - text-transform: uppercase; - cursor: pointer; + color: #b9b7b7; - margin-bottom: 12px; - } + &::placeholder { + font-weight: 400; + font-size: 14px; + line-height: 16px; - .errorForm { - font-weight: 400; - font-size: 12px; - line-height: 14px; - color: #ff0000; - - position: absolute; - display: flex; - right: 20px; - } - - .sucessSubmit { - font-weight: 400; - font-size: 12px; - line-height: 14px; - color: #008000; - } -} - -@media screen and (min-width: 2500px) { - .formContato { - h3 { - font-size: 48px; - line-height: 56px; - } - - label, - input { - font-size: 28px; - line-height: 33px; - } - - input { - height: 63px; - &::placeholder { - font-size: 28px; - line-height: 33px; - } + color: #b9b7b7; + } } .containerTermos { - input { - min-width: 36.4px; - height: 35.15px; - } + display: flex; + width: max-content; + white-space: nowrap; + align-items: flex-end; + margin: 2px auto 12px auto; + + label { + margin: 0; + margin-right: 4px; + } + + input { + margin: 0; + min-width: 18px; + height: 18px; + } + } + + .required { + color: #ff0000; + } + + .termosAcept { + text-decoration: underline; } button { - font-size: 32px; - line-height: 38px; + width: 100%; + background: var(--black); + border-radius: 25px; + color: var(--white); + padding: 17px 0; + + font-weight: 400; + font-size: 16px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + cursor: pointer; + + margin-bottom: 12px; } .errorForm { - font-size: 24px; - line-height: 28px; - top: 17px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #ff0000; + + position: absolute; + display: flex; + right: 20px; } .sucessSubmit { - font-size: 24px; - line-height: 28px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #008000; + } +} + +@media screen and (min-width: 2500px) { + .formContato { + h3 { + font-size: 48px; + line-height: 56px; + } + + label, + input { + font-size: 28px; + line-height: 33px; + } + + input { + height: 63px; + &::placeholder { + font-size: 28px; + line-height: 33px; + } + } + + .containerTermos { + input { + min-width: 36.4px; + height: 35.15px; + } + } + + button { + font-size: 32px; + line-height: 38px; + } + + .errorForm { + font-size: 24px; + line-height: 28px; + top: 17px; + } + + .sucessSubmit { + font-size: 24px; + line-height: 28px; + } } - } } diff --git a/src/components/Institucional/Institucional.tsx b/src/components/Institucional/Institucional.tsx index a1daf67..b314bc5 100644 --- a/src/components/Institucional/Institucional.tsx +++ b/src/components/Institucional/Institucional.tsx @@ -8,99 +8,99 @@ import { HashRouter, Route, Routes, Link } from "react-router-dom"; import { useState } from "react"; export default function Institucional() { - const hash = window.location.hash.replace("#", ""); - const [active, setActive] = useState(hash); + const hash = window.location.hash.replace("#", ""); + const [active, setActive] = useState(hash); - const listNavLinks = [ - { - link: "/sobre", - name: "Sobre", - }, - { - link: "/forma-de-entrega", - name: "Forma de Entrega", - }, - { - link: "/entrega", - name: "Entrega", - }, - { - link: "/troca-e-devolucao", - name: "Troca e Devolução", - }, - { - link: "/seguranca-e-privacidade", - name: "Segurança e Privacidade", - }, - { - link: "/contato", - name: "Contato", - }, - ]; + const listNavLinks = [ + { + link: "/sobre", + name: "Sobre", + }, + { + link: "/forma-de-entrega", + name: "Forma de Entrega", + }, + { + link: "/entrega", + name: "Entrega", + }, + { + link: "/troca-e-devolucao", + name: "Troca e Devolução", + }, + { + link: "/seguranca-e-privacidade", + name: "Segurança e Privacidade", + }, + { + link: "/contato", + name: "Contato", + }, + ]; - return ( - -
- -

Institucional

+ return ( + +
+ +

Institucional

-
- +
+ - - } /> - } /> - } - /> - } /> - } - /> - } - /> - } /> - -
-
- - ); + + } /> + } /> + } + /> + } /> + } + /> + } + /> + } /> + +
+
+ + ); } diff --git a/src/components/Institucional/Sobre/Sobre.tsx b/src/components/Institucional/Sobre/Sobre.tsx index 0ffd55f..2a9cd09 100644 --- a/src/components/Institucional/Sobre/Sobre.tsx +++ b/src/components/Institucional/Sobre/Sobre.tsx @@ -1,42 +1,39 @@ import styles from "./sobre.module.scss"; interface Props { - title: string; + title: string; } export default function Sobre({ title }: Props) { - return ( -
-

{title}

-

- 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? -

-
- ); + return ( +
+

{title}

+

+ 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? +

+
+ ); } diff --git a/src/components/Institucional/Sobre/sobre.module.scss b/src/components/Institucional/Sobre/sobre.module.scss index 87ebf6a..8b91ed6 100644 --- a/src/components/Institucional/Sobre/sobre.module.scss +++ b/src/components/Institucional/Sobre/sobre.module.scss @@ -1,49 +1,49 @@ .contentInfo { - padding-bottom: 27px; - h3 { - font-weight: 700; - font-size: 24px; - line-height: 28px; + padding-bottom: 27px; + h3 { + font-weight: 700; + font-size: 24px; + line-height: 28px; - color: var(--black-50); + color: var(--black-50); - margin: 10px 0 12px; - } + margin: 10px 0 12px; + } - p { - font-weight: 400; - font-size: 13px; - line-height: 15px; + p { + font-weight: 400; + font-size: 13px; + line-height: 15px; - color: var(--gray-500); - } + color: var(--gray-500); + } } @media screen and (min-width: 2500px) { - .contentInfo { - h3 { - font-size: 48px; - line-height: 56px; - } + .contentInfo { + h3 { + font-size: 48px; + line-height: 56px; + } - p { - font-size: 26px; - line-height: 30px; + p { + font-size: 26px; + line-height: 30px; + } } - } } @media screen and (max-width: 1024px) { - .contentInfo { - padding: 0; - h3 { - text-align: center; - } + .contentInfo { + padding: 0; + h3 { + text-align: center; + } - p { - text-align: justify; - font-size: 12px; - line-height: 18px; + p { + text-align: justify; + font-size: 12px; + line-height: 18px; + } } - } } diff --git a/src/components/Institucional/institucional.module.scss b/src/components/Institucional/institucional.module.scss index 9be0b64..2c52909 100644 --- a/src/components/Institucional/institucional.module.scss +++ b/src/components/Institucional/institucional.module.scss @@ -1,143 +1,143 @@ .containerInstitucional { - padding: 0 100px; - .containerBreadcrumb { - padding: 29px 0 0 0; - display: flex; - align-items: center; - list-style: none; + padding: 0 100px; + .containerBreadcrumb { + padding: 29px 0 0 0; + display: flex; + align-items: center; + list-style: none; - .homeIcon, - .arrowIcon { - margin-right: 10px; - display: flex; - } - - .homeIcon { - width: 16px; - } - - .arrowIcon { - width: 4.6px; - height: 8px; - } - - a { - font-weight: 400; - font-size: 12px; - line-height: 14px; - text-transform: uppercase; - color: var(--gray-400); - } - } - - .titleInstitucional { - margin: 80px 0; - text-align: center; - - font-weight: 400; - font-size: 24px; - line-height: 28px; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--black-50); - } - - .containerInfo { - display: flex; - margin-bottom: 60px; - nav { - min-width: 27.9629%; - height: 285px; - margin-right: 30px; - - border-right: 1px solid var(--black); - - ul { - li { - list-style: none; - padding: 10px 0; - - font-weight: 400; - font-size: 16px; - line-height: 19px; - color: var(--gray-500); - - a { - padding: 0 16px; - } + .homeIcon, + .arrowIcon { + margin-right: 10px; + display: flex; } - .active { - background: var(--black); - color: var(--white); - font-weight: 700; + .homeIcon { + width: 16px; + } + + .arrowIcon { + width: 4.6px; + height: 8px; + } + + a { + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; + color: var(--gray-400); + } + } + + .titleInstitucional { + margin: 80px 0; + text-align: center; + + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--black-50); + } + + .containerInfo { + display: flex; + margin-bottom: 60px; + nav { + min-width: 27.9629%; + height: 285px; + margin-right: 30px; + + border-right: 1px solid var(--black); + + ul { + li { + list-style: none; + padding: 10px 0; + + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: var(--gray-500); + + a { + padding: 0 16px; + } + } + + .active { + background: var(--black); + color: var(--white); + font-weight: 700; + } + } } - } } - } } @media screen and (min-width: 2500px) { - .containerInstitucional { - .containerBreadcrumb { - .homeIcon, - .arrowIcon { - margin-right: 12px; - } + .containerInstitucional { + .containerBreadcrumb { + .homeIcon, + .arrowIcon { + margin-right: 12px; + } - .homeIcon { - width: 31px; - } + .homeIcon { + width: 31px; + } - .arrowIcon { - width: 8.9px; - height: 15.62px; - } + .arrowIcon { + width: 8.9px; + height: 15.62px; + } - a { - font-size: 24px; - line-height: 28px; - } - } - - .titleInstitucional { - font-size: 48px; - line-height: 56px; - } - - .containerInfo { - nav { - min-width: 25.6521%; - height: 465px; - - ul { - li { - font-size: 32px; - line-height: 38px; - } + a { + font-size: 24px; + line-height: 28px; + } + } + + .titleInstitucional { + font-size: 48px; + line-height: 56px; + } + + .containerInfo { + nav { + min-width: 25.6521%; + height: 465px; + + ul { + li { + font-size: 32px; + line-height: 38px; + } + } + } } - } } - } } @media screen and (max-width: 1024px) { - .containerInstitucional { - padding: 0 16px; + .containerInstitucional { + padding: 0 16px; - .titleInstitucional { - margin-bottom: 40px; - } + .titleInstitucional { + margin-bottom: 40px; + } - .containerInfo { - flex-direction: column; - margin-bottom: 80px; - nav { - min-width: 100%; - border: 0; - height: auto; - margin-bottom: 30px; - } + .containerInfo { + flex-direction: column; + margin-bottom: 80px; + nav { + min-width: 100%; + border: 0; + height: auto; + margin-bottom: 30px; + } + } } - } } diff --git a/src/components/MenuNav/MenuNav.tsx b/src/components/MenuNav/MenuNav.tsx index e8a2e12..3bdc9b1 100644 --- a/src/components/MenuNav/MenuNav.tsx +++ b/src/components/MenuNav/MenuNav.tsx @@ -1,19 +1,19 @@ import styles from "./menuNav.module.scss"; export default function MenuNav() { - return ( - - ); + return ( + + ); } diff --git a/src/components/MenuNav/menuNav.module.scss b/src/components/MenuNav/menuNav.module.scss index 2a528cc..5ac2f5f 100644 --- a/src/components/MenuNav/menuNav.module.scss +++ b/src/components/MenuNav/menuNav.module.scss @@ -1,50 +1,50 @@ .menuNav { - border-top: 1px solid var(--gray-400); + border-top: 1px solid var(--gray-400); - display: flex; - background: var(--black); - gap: 55px; - padding: 0 100px; - max-height: 44px; + display: flex; + background: var(--black); + gap: 55px; + padding: 0 100px; + max-height: 44px; - li { - color: var(--white); - list-style: none; - text-transform: uppercase; + li { + color: var(--white); + list-style: none; + text-transform: uppercase; - font-weight: 500; - font-size: 14px; - line-height: 16px; + font-weight: 500; + font-size: 14px; + line-height: 16px; - padding: 14px 0; - } + padding: 14px 0; + } } @media screen and (min-width: 2500px) { - .menuNav { - max-height: 61px; - li { - font-size: 28px; - line-height: 33px; + .menuNav { + max-height: 61px; + li { + font-size: 28px; + line-height: 33px; + } } - } } @media screen and (max-width: 1024px) { - .menuNav { - border: 0; - padding: 0 16px; + .menuNav { + border: 0; + padding: 0 16px; - background: transparent; - flex-direction: column; - gap: 12px; + background: transparent; + flex-direction: column; + gap: 12px; - margin-top: 31px; - max-height: max-content; + margin-top: 31px; + max-height: max-content; - li { - color: var(--gray-400); - padding: 0; + li { + color: var(--gray-400); + padding: 0; + } } - } } diff --git a/src/components/MenuToggle/MenuToggle.tsx b/src/components/MenuToggle/MenuToggle.tsx index 45a82a9..087f6ee 100644 --- a/src/components/MenuToggle/MenuToggle.tsx +++ b/src/components/MenuToggle/MenuToggle.tsx @@ -5,36 +5,33 @@ import { ReactComponent as CloseMenuIcon } from "./assets/closeMenu.svg"; import styles from "./menuToggle.module.scss"; interface PropsMenuTogle { - showMenuToggle: boolean; - setShowMenuToggle: React.Dispatch>; + showMenuToggle: boolean; + setShowMenuToggle: React.Dispatch>; } -export const MenuToggle = ({ - showMenuToggle, - setShowMenuToggle, -}: PropsMenuTogle) => { - return ( - <> - {showMenuToggle ? ( -
-
-
- Entrar - -
- -
-
setShowMenuToggle((prev) => !prev)} - className={styles.closeMenu} - >
-
- ) : null} - - ); +export const MenuToggle = ({ showMenuToggle, setShowMenuToggle }: PropsMenuTogle) => { + return ( + <> + {showMenuToggle ? ( +
+
+
+ Entrar + +
+ +
+
setShowMenuToggle((prev) => !prev)} + className={styles.closeMenu} + >
+
+ ) : null} + + ); }; diff --git a/src/components/MenuToggle/menuToggle.module.scss b/src/components/MenuToggle/menuToggle.module.scss index fce6235..e11ee25 100644 --- a/src/components/MenuToggle/menuToggle.module.scss +++ b/src/components/MenuToggle/menuToggle.module.scss @@ -1,63 +1,63 @@ .containerMenuToggle { - width: 100%; - height: 100vh; - - position: fixed; - top: 0; - left: 0; - - z-index: 50; - .contentMenuToogle { - position: absolute; - width: 96.4843%; - height: 585px; - - background: var(--white); - - .headerMenuToggle { - width: 100%; - height: 78px; - - background: var(--black); - - display: flex; - align-items: center; - justify-content: space-between; - - padding: 0 16px; - - a { - color: var(--white); - - font-weight: 400; - font-size: 14px; - line-height: 16px; - text-transform: uppercase; - } - - button { - background: transparent; - .closeMenuIcon { - width: 15px; - - cursor: pointer; - } - } - } - } - - .closeMenu { width: 100%; height: 100vh; - background: rgba(69, 69, 69, 0.7); - } + position: fixed; + top: 0; + left: 0; + + z-index: 50; + .contentMenuToogle { + position: absolute; + width: 96.4843%; + height: 585px; + + background: var(--white); + + .headerMenuToggle { + width: 100%; + height: 78px; + + background: var(--black); + + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0 16px; + + a { + color: var(--white); + + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + } + + button { + background: transparent; + .closeMenuIcon { + width: 15px; + + cursor: pointer; + } + } + } + } + + .closeMenu { + width: 100%; + height: 100vh; + + background: rgba(69, 69, 69, 0.7); + } } @media screen and (max-width: 540px) { - .containerMenuToggle { - .contentMenuToogle { - width: 90.4%; + .containerMenuToggle { + .contentMenuToogle { + width: 90.4%; + } } - } } diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx index 0fb1187..0fbd9b3 100644 --- a/src/components/Newsletter/Newsletter.tsx +++ b/src/components/Newsletter/Newsletter.tsx @@ -2,43 +2,43 @@ import { Formik, Form, Field } from "formik"; import styles from "./newsletter.module.scss"; interface IFormikValue { - emailNewsletter: string; + emailNewsletter: string; } const initialValue = { - emailNewsletter: "", + emailNewsletter: "", }; export default function Newsletter() { - const handleFormikSubmit = (value: IFormikValue) => { - alert("Email cadastrado!"); - }; + const handleFormikSubmit = (value: IFormikValue) => { + alert("Email cadastrado!"); + }; - return ( - { - handleFormikSubmit(value); - resetForm(); - }} - initialValues={initialValue} - > -
-
-

Assine nossa Newsletter

-
- - -
-
-
- - ); + return ( + { + handleFormikSubmit(value); + resetForm(); + }} + initialValues={initialValue} + > +
+
+

Assine nossa Newsletter

+
+ + +
+
+
+ + ); } diff --git a/src/components/Newsletter/newsletter.module.scss b/src/components/Newsletter/newsletter.module.scss index 4f4a650..25d7ad2 100644 --- a/src/components/Newsletter/newsletter.module.scss +++ b/src/components/Newsletter/newsletter.module.scss @@ -1,140 +1,140 @@ .formNewsletter { - padding: 16px 0; - border-top: 1px solid var(--black); - border-bottom: 1px solid var(--black); + padding: 16px 0; + border-top: 1px solid var(--black); + border-bottom: 1px solid var(--black); - height: 104px; + height: 104px; - .containerForm { - width: 37.0312%; - display: flex; - flex-direction: column; - margin: 0 auto; + .containerForm { + width: 37.0312%; + display: flex; + flex-direction: column; + margin: 0 auto; - h3 { - font-weight: 500; - font-size: 18px; - line-height: 21px; - letter-spacing: 0.05em; - font-variant: small-caps; - text-transform: uppercase; + h3 { + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + text-transform: uppercase; - color: var(--black-100); - margin-bottom: 8px; - } - - .containerInputNewsletter { - display: flex; - height: 42px; - - input { - flex: 1; - background: transparent; - border: 1px solid #e5e5e5; - border-radius: 4px; - padding: 13px 16px; - - font-weight: 400; - font-size: 14px; - line-height: 16px; - color: var(--gray-400); - - &::placeholder { - font-weight: 400; - font-size: 14px; - line-height: 16px; - color: var(--gray-400); + color: var(--black-100); + margin-bottom: 8px; } - } - button { - width: 26.5822%; - background: #000000; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 4px; - margin-left: 8px; + .containerInputNewsletter { + display: flex; + height: 42px; - font-weight: 700; - font-size: 12px; - line-height: 14px; - letter-spacing: 0.05em; - text-transform: uppercase; + input { + flex: 1; + background: transparent; + border: 1px solid #e5e5e5; + border-radius: 4px; + padding: 13px 16px; - color: var(--white); - cursor: pointer; - } + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--gray-400); + + &::placeholder { + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--gray-400); + } + } + + button { + width: 26.5822%; + background: #000000; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 4px; + margin-left: 8px; + + font-weight: 700; + font-size: 12px; + line-height: 14px; + letter-spacing: 0.05em; + text-transform: uppercase; + + color: var(--white); + cursor: pointer; + } + } } - } } @media screen and (min-width: 2500px) { - .formNewsletter { - height: 141px; - .containerForm { - width: 37.3581%; + .formNewsletter { + height: 141px; + .containerForm { + width: 37.3581%; - h3 { - font-size: 36px; - line-height: 42px; - } + h3 { + font-size: 36px; + line-height: 42px; + } - .containerInputNewsletter { - height: 59px; - input { - font-size: 28px; - line-height: 33px; + .containerInputNewsletter { + height: 59px; + input { + font-size: 28px; + line-height: 33px; - &::placeholder { - font-size: 28px; - line-height: 33px; - } + &::placeholder { + font-size: 28px; + line-height: 33px; + } + } + + button { + font-size: 24px; + line-height: 28px; + } + } } - - button { - font-size: 24px; - line-height: 28px; - } - } } - } } @media screen and (max-width: 1024px) { - .formNewsletter { - padding: 16px; - height: auto; - - .containerForm { - width: 100%; - - h3 { - font-size: 14px; - line-height: 16px; - margin-bottom: 16px; - } - - .containerInputNewsletter { - flex-direction: column; + .formNewsletter { + padding: 16px; height: auto; - input { - padding: 17px 16px; - max-height: 50px; + .containerForm { + width: 100%; + + h3 { + font-size: 14px; + line-height: 16px; + margin-bottom: 16px; + } + + .containerInputNewsletter { + flex-direction: column; + height: auto; + + input { + padding: 17px 16px; + max-height: 50px; + } + + button { + width: 100%; + margin: 0; + margin-top: 16px; + padding: 17px 0; + + box-shadow: none; + border-radius: 0; + + font-size: 14px; + line-height: 16px; + } + } } - - button { - width: 100%; - margin: 0; - margin-top: 16px; - padding: 17px 0; - - box-shadow: none; - border-radius: 0; - - font-size: 14px; - line-height: 16px; - } - } } - } } diff --git a/src/index.tsx b/src/index.tsx index ce8d748..a0f3cf6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,11 +3,9 @@ import ReactDOM from "react-dom/client"; import "./styles/global.scss"; import Home from "./pages/Home"; -const root = ReactDOM.createRoot( - document.getElementById("root") as HTMLElement -); +const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( - - - + + + ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index c312451..01884be 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -6,14 +6,14 @@ import Institucional from "../components/Institucional/Institucional"; import ElementFloat from "../components/ElementFloat/ElementFloat"; function Home() { - return ( -
-
- -
- -
- ); + return ( +
+
+ +
+ ); } export default Home; diff --git a/src/pages/home.module.scss b/src/pages/home.module.scss index 84aaf31..63b8db5 100644 --- a/src/pages/home.module.scss +++ b/src/pages/home.module.scss @@ -1,10 +1,10 @@ .containerHome { - position: relative; - display: grid; - height: 100vh; - grid-template-rows: max-content max-content 1fr; + position: relative; + display: grid; + height: 100vh; + grid-template-rows: max-content max-content 1fr; - footer { - align-self: end; - } + footer { + align-self: end; + } } diff --git a/src/schema/FormSchema.ts b/src/schema/FormSchema.ts index d11a417..f10df9a 100644 --- a/src/schema/FormSchema.ts +++ b/src/schema/FormSchema.ts @@ -4,50 +4,48 @@ import { parse, isValid, isFuture } from "date-fns"; import enGb from "date-fns/locale/en-GB"; const convertDate = (value: string) => { - if (value === null || value === undefined) { - return false; - } else { - const dataFormated = value.replaceAll(".", "/"); - const parsedDate = parse(dataFormated, "P", new Date(), { locale: enGb }); + if (value === null || value === undefined) { + return false; + } else { + const dataFormated = value.replaceAll(".", "/"); + const parsedDate = parse(dataFormated, "P", new Date(), { locale: enGb }); - if (isFuture(parsedDate)) { - return false; - } else if (isValid(parsedDate)) { - return true; + if (isFuture(parsedDate)) { + return false; + } else if (isValid(parsedDate)) { + return true; + } + + return false; } - - return false; - } }; const convertPhone = (value: string) => { - if (value === null || value === undefined) { - return false; - } else { - const phoneNumbers = value.replace(/\D/g, ""); - if (phoneNumbers.length < 11) { - return false; + if (value === null || value === undefined) { + return false; } else { - return true; + const phoneNumbers = value.replace(/\D/g, ""); + if (phoneNumbers.length < 11) { + return false; + } else { + return true; + } } - } }; export default Yup.object().shape({ - name: Yup.string() - .required("*Campo obrigatório") - .min(3, "*Nome muito pequeno"), - email: Yup.string().required("*Campo obrigatório").email("*Email inválido"), - cpf: Yup.string() - .required("*Campo obrigatório") - .test("cpf", "*CPF Inválido", (value) => cpfValid.isValid(value!)), - dataNasc: Yup.string() - .required("*Campo obrigatório") - .test("dataNasc", "*Data Inválida", (data) => convertDate(data!)), - phone: Yup.string() - .required("*Campo obrigatório") - .test("phone", "*Telefone Inválido", (phone) => convertPhone(phone!)), - instagram: Yup.string() - .matches(/^@/, "*@ no início é obrigatório") - .min(4, "*Nome de usuario muito curto"), + name: Yup.string().required("*Campo obrigatório").min(3, "*Nome muito pequeno"), + email: Yup.string().required("*Campo obrigatório").email("*Email inválido"), + cpf: Yup.string() + .required("*Campo obrigatório") + .test("cpf", "*CPF Inválido", (value) => cpfValid.isValid(value!)), + dataNasc: Yup.string() + .required("*Campo obrigatório") + .test("dataNasc", "*Data Inválida", (data) => convertDate(data!)), + phone: Yup.string() + .required("*Campo obrigatório") + .test("phone", "*Telefone Inválido", (phone) => convertPhone(phone!)), + instagram: Yup.string() + .matches(/^@/, "*@ no início é obrigatório") + .min(4, "*Nome de usuario muito curto"), }); diff --git a/src/styles/global.scss b/src/styles/global.scss index f677956..31313a3 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,32 +1,31 @@ :root { - --black: #000000; - --black-100: #303030; - --black-50: #292929; + --black: #000000; + --black-100: #303030; + --black-50: #292929; - --white: #ffffff; + --white: #ffffff; - --gray-500: #7d7d7d; - --gray-400: #c4c4c4; + --gray-500: #7d7d7d; + --gray-400: #c4c4c4; } * { - margin: 0; - padding: 0; - box-sizing: border-box; - border: none; - text-decoration: none; - outline: none; + margin: 0; + padding: 0; + box-sizing: border-box; + border: none; + text-decoration: none; + outline: none; } body { - font-family: "Roboto", sans-serif; + font-family: "Roboto", sans-serif; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } a { - color: inherit; + color: inherit; }