forked from M3-Academy/desafio-react-e-typescript
fix: Melhorando a identação do código com .editorconfig
This commit is contained in:
parent
91e25b1993
commit
6d66516225
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@ -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
|
||||
@ -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 (
|
||||
<div className={styles.floatElementsFooter}>
|
||||
<button className={styles.whatsappIcon} arial-label="WhatsApp">
|
||||
<a href="http://api.whatsapp.com/send?1=pt_BR&phone=5582999976243">
|
||||
<WhatsAppIcon />
|
||||
</a>
|
||||
</button>
|
||||
{pageYPosition > 90 && (
|
||||
<button
|
||||
className={styles.topoSiteIcon}
|
||||
onClick={btnScrollTop}
|
||||
arial-label="Voltar ao topo"
|
||||
>
|
||||
<img
|
||||
src="/assets/images/top-site-icon.png"
|
||||
alt="Voltar para o topo"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={styles.floatElementsFooter}>
|
||||
<button className={styles.whatsappIcon} arial-label="WhatsApp">
|
||||
<a href="http://api.whatsapp.com/send?1=pt_BR&phone=5582999976243">
|
||||
<WhatsAppIcon />
|
||||
</a>
|
||||
</button>
|
||||
{pageYPosition > 90 && (
|
||||
<button
|
||||
className={styles.topoSiteIcon}
|
||||
onClick={btnScrollTop}
|
||||
arial-label="Voltar ao topo"
|
||||
>
|
||||
<img src="/assets/images/top-site-icon.png" alt="Voltar para o topo" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,11 +3,11 @@ import FooterBottom from "./FooterBottom/FooterBottom";
|
||||
import FooterTop from "./FooterTop/FooterTop";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<Newsletter />
|
||||
<FooterTop />
|
||||
<FooterBottom />
|
||||
</footer>
|
||||
);
|
||||
return (
|
||||
<footer>
|
||||
<Newsletter />
|
||||
<FooterTop />
|
||||
<FooterBottom />
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,89 +4,88 @@ import { ReactComponent as M3Icon } from "../assets/logoM3M3Academy.svg";
|
||||
import styles from "./footerBottom.module.scss";
|
||||
|
||||
export default function FooterBottom() {
|
||||
return (
|
||||
<div className={styles.containerFooterBottom}>
|
||||
<div className={styles.footerAddress}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
</p>
|
||||
</div>
|
||||
<ul className={styles.footerPayments}>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={`${styles.paymentFooter} ${styles.mastercard}`}
|
||||
src="/assets/images/masterCardM3Academy.png"
|
||||
alt="Logo Master Card"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.visa}
|
||||
src="/assets/images/visaM3Academy.png"
|
||||
alt="Logo Visa"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.amex}
|
||||
src="/assets/images/amexM3Academy.png"
|
||||
alt="Logo American Express"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.elo}
|
||||
src="/assets/images/eloM3Academy.png"
|
||||
alt="Logo Elo"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.hipercard}
|
||||
src="/assets/images/hipercardM3Academy.png"
|
||||
alt="Logo HiperCard"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.paypal}
|
||||
src="/assets/images/paypalM3Academy.png"
|
||||
alt="Logo PayPal"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.boleto}
|
||||
src="/assets/images/boletoM3Academy.png"
|
||||
alt="Logo Boleto"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.divider}></span>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapperVtex}>
|
||||
<img
|
||||
className={styles.vtexIcon}
|
||||
src="/assets/images/vtexPCIM3Academy.png"
|
||||
alt="Logo VTEX PCI Certificado"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className={styles.containerDevelop}>
|
||||
<li>
|
||||
<span>Powered by</span>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<VTEXIcon className={styles.logoVtexFooter} />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>Developed by</span>
|
||||
<a href="https://m3ecommerce.com/">
|
||||
<M3Icon className={styles.logoM3Footer} />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={styles.containerFooterBottom}>
|
||||
<div className={styles.footerAddress}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
</p>
|
||||
</div>
|
||||
<ul className={styles.footerPayments}>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={`${styles.paymentFooter} ${styles.mastercard}`}
|
||||
src="/assets/images/masterCardM3Academy.png"
|
||||
alt="Logo Master Card"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.visa}
|
||||
src="/assets/images/visaM3Academy.png"
|
||||
alt="Logo Visa"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.amex}
|
||||
src="/assets/images/amexM3Academy.png"
|
||||
alt="Logo American Express"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.elo}
|
||||
src="/assets/images/eloM3Academy.png"
|
||||
alt="Logo Elo"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.hipercard}
|
||||
src="/assets/images/hipercardM3Academy.png"
|
||||
alt="Logo HiperCard"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.paypal}
|
||||
src="/assets/images/paypalM3Academy.png"
|
||||
alt="Logo PayPal"
|
||||
/>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapper}>
|
||||
<img
|
||||
className={styles.boleto}
|
||||
src="/assets/images/boletoM3Academy.png"
|
||||
alt="Logo Boleto"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.divider}></span>
|
||||
</li>
|
||||
<li className={styles.footerPaymentsWrapperVtex}>
|
||||
<img
|
||||
className={styles.vtexIcon}
|
||||
src="/assets/images/vtexPCIM3Academy.png"
|
||||
alt="Logo VTEX PCI Certificado"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className={styles.containerDevelop}>
|
||||
<li>
|
||||
<span>Powered by</span>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<VTEXIcon className={styles.logoVtexFooter} />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span>Developed by</span>
|
||||
<a href="https://m3ecommerce.com/">
|
||||
<M3Icon className={styles.logoM3Footer} />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<HTMLUListElement>(null),
|
||||
duvidas: useRef<HTMLUListElement>(null),
|
||||
faleConosco: useRef<HTMLUListElement>(null),
|
||||
};
|
||||
const footerLinks = {
|
||||
institucional: useRef<HTMLUListElement>(null),
|
||||
duvidas: useRef<HTMLUListElement>(null),
|
||||
faleConosco: useRef<HTMLUListElement>(null),
|
||||
};
|
||||
|
||||
const titleMenuFooter = {
|
||||
institucional: useRef<HTMLHeadingElement>(null),
|
||||
duvidas: useRef<HTMLHeadingElement>(null),
|
||||
faleConosco: useRef<HTMLHeadingElement>(null),
|
||||
};
|
||||
const titleMenuFooter = {
|
||||
institucional: useRef<HTMLHeadingElement>(null),
|
||||
duvidas: useRef<HTMLHeadingElement>(null),
|
||||
faleConosco: useRef<HTMLHeadingElement>(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<HTMLHeadingElement>) => {
|
||||
const textH2OnClick = e.currentTarget.textContent;
|
||||
const footerLinkToggle = (e: React.MouseEvent<HTMLHeadingElement>) => {
|
||||
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 (
|
||||
<div className={styles.containerFooterTop}>
|
||||
<div className={styles.wrapperFooterTop}>
|
||||
<h4 ref={titleMenuFooter.institucional} onClick={footerLinkToggle}>
|
||||
Institucional
|
||||
</h4>
|
||||
<ul
|
||||
ref={footerLinks.institucional}
|
||||
className={styles.listLinksFooterTop}
|
||||
>
|
||||
<li>
|
||||
<a href="/">Quem Somos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Política de Privacidade</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Segurança</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className={styles.linkRevendedor} href="/">
|
||||
Seja um Revendendor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.wrapperFooterTop}>
|
||||
<h4 ref={titleMenuFooter.duvidas} onClick={footerLinkToggle}>
|
||||
Dúvidas
|
||||
</h4>
|
||||
<ul ref={footerLinks.duvidas} className={styles.listLinksFooterTop}>
|
||||
<li>
|
||||
<a href="/">Entrega</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Pagamento</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Trocas e Devoluções</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Dúvidas Frequentes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.containerSupportClient}>
|
||||
<h4 ref={titleMenuFooter.faleConosco} onClick={footerLinkToggle}>
|
||||
Fale Conosco
|
||||
</h4>
|
||||
<ul ref={footerLinks.faleConosco} className={styles.listLinksFooterTop}>
|
||||
<li className={styles.supportClient}>
|
||||
<span className={styles.titleSuportClient}>
|
||||
Atendimento Ao Consumidor
|
||||
</span>
|
||||
</li>
|
||||
<li className={styles.supportClient}>
|
||||
<a href="tel:114159-9504">{`(11) 4159 9504`}</a>
|
||||
</li>
|
||||
<li className={styles.supportClient}>
|
||||
<span className={styles.titleSuportClient}>Atendimento Online</span>
|
||||
</li>
|
||||
<li className={styles.supportClient}>
|
||||
<a
|
||||
href="tel:1199433-8825"
|
||||
className={styles.numberDecoration}
|
||||
>{`(11) 99433-8825`}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.containerSocialIcons}>
|
||||
<div className={styles.wrapperSocialIcons}>
|
||||
<a href="https://facebook.com/">
|
||||
<FacebookIcon />
|
||||
</a>
|
||||
<a href="https://instagram.com/">
|
||||
<InstagramIcon />
|
||||
</a>
|
||||
<a href="https://twitter.com/">
|
||||
<TwitterIcon />
|
||||
</a>
|
||||
<a href="https://youtube.com/">
|
||||
<YouTubeIcon />
|
||||
</a>
|
||||
<a href="https://linkedin.com/">
|
||||
<LinkedinIcon />
|
||||
</a>
|
||||
return (
|
||||
<div className={styles.containerFooterTop}>
|
||||
<div className={styles.wrapperFooterTop}>
|
||||
<h4 ref={titleMenuFooter.institucional} onClick={footerLinkToggle}>
|
||||
Institucional
|
||||
</h4>
|
||||
<ul ref={footerLinks.institucional} className={styles.listLinksFooterTop}>
|
||||
<li>
|
||||
<a href="/">Quem Somos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Política de Privacidade</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Segurança</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className={styles.linkRevendedor} href="/">
|
||||
Seja um Revendendor
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.wrapperFooterTop}>
|
||||
<h4 ref={titleMenuFooter.duvidas} onClick={footerLinkToggle}>
|
||||
Dúvidas
|
||||
</h4>
|
||||
<ul ref={footerLinks.duvidas} className={styles.listLinksFooterTop}>
|
||||
<li>
|
||||
<a href="/">Entrega</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Pagamento</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Trocas e Devoluções</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Dúvidas Frequentes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.containerSupportClient}>
|
||||
<h4 ref={titleMenuFooter.faleConosco} onClick={footerLinkToggle}>
|
||||
Fale Conosco
|
||||
</h4>
|
||||
<ul ref={footerLinks.faleConosco} className={styles.listLinksFooterTop}>
|
||||
<li className={styles.supportClient}>
|
||||
<span className={styles.titleSuportClient}>Atendimento Ao Consumidor</span>
|
||||
</li>
|
||||
<li className={styles.supportClient}>
|
||||
<a href="tel:114159-9504">{`(11) 4159 9504`}</a>
|
||||
</li>
|
||||
<li className={styles.supportClient}>
|
||||
<span className={styles.titleSuportClient}>Atendimento Online</span>
|
||||
</li>
|
||||
<li className={styles.supportClient}>
|
||||
<a
|
||||
href="tel:1199433-8825"
|
||||
className={styles.numberDecoration}
|
||||
>{`(11) 99433-8825`}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles.containerSocialIcons}>
|
||||
<div className={styles.wrapperSocialIcons}>
|
||||
<a href="https://facebook.com/">
|
||||
<FacebookIcon />
|
||||
</a>
|
||||
<a href="https://instagram.com/">
|
||||
<InstagramIcon />
|
||||
</a>
|
||||
<a href="https://twitter.com/">
|
||||
<TwitterIcon />
|
||||
</a>
|
||||
<a href="https://youtube.com/">
|
||||
<YouTubeIcon />
|
||||
</a>
|
||||
<a href="https://linkedin.com/">
|
||||
<LinkedinIcon />
|
||||
</a>
|
||||
</div>
|
||||
<a className={styles.linkSocial} href="/">
|
||||
www.loremipsum.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a className={styles.linkSocial} href="/">
|
||||
www.loremipsum.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<header>
|
||||
<div className={styles.containerHeader}>
|
||||
<button
|
||||
onClick={openMenuToggle}
|
||||
className={styles.menuToggle}
|
||||
arial-label="Abrir menu de navegação"
|
||||
>
|
||||
<div className={styles.toggleOne}></div>
|
||||
<div className={styles.toggleTwo}></div>
|
||||
<div className={styles.toggleThree}></div>
|
||||
</button>
|
||||
<img
|
||||
className={styles.logo}
|
||||
src="/assets/images/Logo-M3Academy.png"
|
||||
alt="Logo M3 Academy"
|
||||
/>
|
||||
<form className={styles.formSearch} action="#">
|
||||
<input
|
||||
type="search"
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button
|
||||
className={styles.searchButton}
|
||||
type="submit"
|
||||
arial-label="Pesquisar"
|
||||
>
|
||||
<SearchIcon />
|
||||
</button>
|
||||
</form>
|
||||
<div className={styles.entrarContainer}>
|
||||
<a href="/">Entrar</a>
|
||||
<a className={styles.cartIcon} href="/">
|
||||
<CartIcon />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{showMenuDesktop === true && <MenuNav />}
|
||||
</header>
|
||||
<MenuToggle
|
||||
showMenuToggle={showMenuToggle}
|
||||
setShowMenuToggle={setShowMenuToggle}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<div className={styles.containerHeader}>
|
||||
<button
|
||||
onClick={openMenuToggle}
|
||||
className={styles.menuToggle}
|
||||
arial-label="Abrir menu de navegação"
|
||||
>
|
||||
<div className={styles.toggleOne}></div>
|
||||
<div className={styles.toggleTwo}></div>
|
||||
<div className={styles.toggleThree}></div>
|
||||
</button>
|
||||
<img
|
||||
className={styles.logo}
|
||||
src="/assets/images/Logo-M3Academy.png"
|
||||
alt="Logo M3 Academy"
|
||||
/>
|
||||
<form className={styles.formSearch} action="#">
|
||||
<input type="search" id="search" name="search" placeholder="Buscar..." />
|
||||
<button
|
||||
className={styles.searchButton}
|
||||
type="submit"
|
||||
arial-label="Pesquisar"
|
||||
>
|
||||
<SearchIcon />
|
||||
</button>
|
||||
</form>
|
||||
<div className={styles.entrarContainer}>
|
||||
<a href="/">Entrar</a>
|
||||
<a className={styles.cartIcon} href="/">
|
||||
<CartIcon />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{showMenuDesktop === true && <MenuNav />}
|
||||
</header>
|
||||
<MenuToggle showMenuToggle={showMenuToggle} setShowMenuToggle={setShowMenuToggle} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<Formik
|
||||
onSubmit={(values, { resetForm }) => {
|
||||
handleFormikSubmit(values);
|
||||
resetForm();
|
||||
}}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
<Form className={styles.formContato}>
|
||||
<h3>Preencha o formulário</h3>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="name">Nome</label>
|
||||
<ErrorMessage
|
||||
name="name"
|
||||
component="span"
|
||||
className={styles.errorForm}
|
||||
/>
|
||||
<Field id="name" name="name" placeholder="Seu nome completo" />
|
||||
</div>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="email">Email</label>
|
||||
<ErrorMessage
|
||||
name="email"
|
||||
component="span"
|
||||
className={styles.errorForm}
|
||||
/>
|
||||
<Field id="email" name="email" placeholder="Seu e-mail" />
|
||||
</div>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<ErrorMessage
|
||||
name="cpf"
|
||||
component="span"
|
||||
className={styles.errorForm}
|
||||
/>
|
||||
<Field
|
||||
name="cpf"
|
||||
render={({ field }: any) => {
|
||||
return (
|
||||
<MaskedInput
|
||||
mask={[
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
id="cpf"
|
||||
placeholder="000.000.000-00"
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={(values, { resetForm }) => {
|
||||
handleFormikSubmit(values);
|
||||
resetForm();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
<Form className={styles.formContato}>
|
||||
<h3>Preencha o formulário</h3>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="dataNasc">Data de Nascimento</label>
|
||||
<ErrorMessage
|
||||
name="dataNasc"
|
||||
component="span"
|
||||
className={styles.errorForm}
|
||||
/>
|
||||
<Field
|
||||
name="dataNasc"
|
||||
render={({ field }: any) => {
|
||||
return (
|
||||
<MaskedInput
|
||||
mask={[
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
id="dataNasc"
|
||||
placeholder="00.00.0000"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="name">Nome</label>
|
||||
<ErrorMessage name="name" component="span" className={styles.errorForm} />
|
||||
<Field id="name" name="name" placeholder="Seu nome completo" />
|
||||
</div>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="phone">Telefone</label>
|
||||
<ErrorMessage
|
||||
name="phone"
|
||||
component="span"
|
||||
className={styles.errorForm}
|
||||
/>
|
||||
<Field
|
||||
name="phone"
|
||||
render={({ field }: any) => {
|
||||
return (
|
||||
<MaskedInput
|
||||
mask={[
|
||||
"(",
|
||||
/\d/,
|
||||
/\d/,
|
||||
")",
|
||||
" ",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
id="phone"
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="email">Email</label>
|
||||
<ErrorMessage name="email" component="span" className={styles.errorForm} />
|
||||
<Field id="email" name="email" placeholder="Seu e-mail" />
|
||||
</div>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<ErrorMessage
|
||||
name="instagram"
|
||||
component="span"
|
||||
className={styles.errorForm}
|
||||
/>
|
||||
<Field id="instagram" name="instagram" placeholder="@seuuser" />
|
||||
</div>
|
||||
<div className={styles.containerTermos}>
|
||||
<label htmlFor="termos">
|
||||
<span className={styles.required}>* </span>
|
||||
<span className={styles.termosAcept}>Declaro que li e aceito</span>
|
||||
</label>
|
||||
<Field type="checkbox" id="termos" name="termos" required />
|
||||
</div>
|
||||
<button type="submit">Cadastre-se</button>
|
||||
{validSubmit && (
|
||||
<span className={styles.sucessSubmit}>
|
||||
*Formulário enviado com sucesso!
|
||||
</span>
|
||||
)}
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<ErrorMessage name="cpf" component="span" className={styles.errorForm} />
|
||||
<Field
|
||||
name="cpf"
|
||||
render={({ field }: any) => {
|
||||
return (
|
||||
<MaskedInput
|
||||
mask={[
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
id="cpf"
|
||||
placeholder="000.000.000-00"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="dataNasc">Data de Nascimento</label>
|
||||
<ErrorMessage name="dataNasc" component="span" className={styles.errorForm} />
|
||||
<Field
|
||||
name="dataNasc"
|
||||
render={({ field }: any) => {
|
||||
return (
|
||||
<MaskedInput
|
||||
mask={[
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
id="dataNasc"
|
||||
placeholder="00.00.0000"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="phone">Telefone</label>
|
||||
<ErrorMessage name="phone" component="span" className={styles.errorForm} />
|
||||
<Field
|
||||
name="phone"
|
||||
render={({ field }: any) => {
|
||||
return (
|
||||
<MaskedInput
|
||||
mask={[
|
||||
"(",
|
||||
/\d/,
|
||||
/\d/,
|
||||
")",
|
||||
" ",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
]}
|
||||
{...field}
|
||||
id="phone"
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.wrapperInput}>
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<ErrorMessage name="instagram" component="span" className={styles.errorForm} />
|
||||
<Field id="instagram" name="instagram" placeholder="@seuuser" />
|
||||
</div>
|
||||
<div className={styles.containerTermos}>
|
||||
<label htmlFor="termos">
|
||||
<span className={styles.required}>* </span>
|
||||
<span className={styles.termosAcept}>Declaro que li e aceito</span>
|
||||
</label>
|
||||
<Field type="checkbox" id="termos" name="termos" required />
|
||||
</div>
|
||||
<button type="submit">Cadastre-se</button>
|
||||
{validSubmit && (
|
||||
<span className={styles.sucessSubmit}>*Formulário enviado com sucesso!</span>
|
||||
)}
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<HashRouter>
|
||||
<div className={styles.containerInstitucional}>
|
||||
<nav>
|
||||
<ul className={styles.containerBreadcrumb}>
|
||||
<li>
|
||||
<a href="/">
|
||||
<HomeIcon className={styles.homeIcon} />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<ArrowIcon className={styles.arrowIcon} />
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Institucional</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1 className={styles.titleInstitucional}>Institucional</h1>
|
||||
return (
|
||||
<HashRouter>
|
||||
<div className={styles.containerInstitucional}>
|
||||
<nav>
|
||||
<ul className={styles.containerBreadcrumb}>
|
||||
<li>
|
||||
<a href="/">
|
||||
<HomeIcon className={styles.homeIcon} />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<ArrowIcon className={styles.arrowIcon} />
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Institucional</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1 className={styles.titleInstitucional}>Institucional</h1>
|
||||
|
||||
<div className={styles.containerInfo}>
|
||||
<nav>
|
||||
<ul>
|
||||
{listNavLinks.map((item) => {
|
||||
return (
|
||||
<li
|
||||
key={item.name}
|
||||
className={
|
||||
active === item.link ||
|
||||
(active === "" && item.name === "Sobre")
|
||||
? `${styles.active}`
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<Link onClick={() => setActive(item.link)} to={item.link}>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
<div className={styles.containerInfo}>
|
||||
<nav>
|
||||
<ul>
|
||||
{listNavLinks.map((item) => {
|
||||
return (
|
||||
<li
|
||||
key={item.name}
|
||||
className={
|
||||
active === item.link ||
|
||||
(active === "" && item.name === "Sobre")
|
||||
? `${styles.active}`
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<Link onClick={() => setActive(item.link)} to={item.link}>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<Routes>
|
||||
<Route index element={<Sobre title="Sobre" />} />
|
||||
<Route path="/sobre" element={<Sobre title="Sobre" />} />
|
||||
<Route
|
||||
path="/forma-de-entrega"
|
||||
element={<Sobre title="Forma de Entrega" />}
|
||||
/>
|
||||
<Route path="/entrega" element={<Sobre title="Entrega" />} />
|
||||
<Route
|
||||
path="/troca-e-devolucao"
|
||||
element={<Sobre title="Troca e Devolução" />}
|
||||
/>
|
||||
<Route
|
||||
path="/seguranca-e-privacidade"
|
||||
element={<Sobre title="Segurança e Privacidade" />}
|
||||
/>
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</HashRouter>
|
||||
);
|
||||
<Routes>
|
||||
<Route index element={<Sobre title="Sobre" />} />
|
||||
<Route path="/sobre" element={<Sobre title="Sobre" />} />
|
||||
<Route
|
||||
path="/forma-de-entrega"
|
||||
element={<Sobre title="Forma de Entrega" />}
|
||||
/>
|
||||
<Route path="/entrega" element={<Sobre title="Entrega" />} />
|
||||
<Route
|
||||
path="/troca-e-devolucao"
|
||||
element={<Sobre title="Troca e Devolução" />}
|
||||
/>
|
||||
<Route
|
||||
path="/seguranca-e-privacidade"
|
||||
element={<Sobre title="Segurança e Privacidade" />}
|
||||
/>
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
</HashRouter>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,42 +1,39 @@
|
||||
import styles from "./sobre.module.scss";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export default function Sobre({ title }: Props) {
|
||||
return (
|
||||
<section className={styles.contentInfo}>
|
||||
<h3>{title}</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
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?
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<section className={styles.contentInfo}>
|
||||
<h3>{title}</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
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?
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import styles from "./menuNav.module.scss";
|
||||
|
||||
export default function MenuNav() {
|
||||
return (
|
||||
<nav>
|
||||
<ul className={styles.menuNav}>
|
||||
<li>
|
||||
<a href="/">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Saiba mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
return (
|
||||
<nav>
|
||||
<ul className={styles.menuNav}>
|
||||
<li>
|
||||
<a href="/">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Saiba mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<SetStateAction<boolean>>;
|
||||
showMenuToggle: boolean;
|
||||
setShowMenuToggle: React.Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export const MenuToggle = ({
|
||||
showMenuToggle,
|
||||
setShowMenuToggle,
|
||||
}: PropsMenuTogle) => {
|
||||
return (
|
||||
<>
|
||||
{showMenuToggle ? (
|
||||
<div className={styles.containerMenuToggle}>
|
||||
<div className={styles.contentMenuToogle}>
|
||||
<div className={styles.headerMenuToggle}>
|
||||
<a href="/">Entrar</a>
|
||||
<button arial-label="Fechar menu">
|
||||
<CloseMenuIcon
|
||||
onClick={() => setShowMenuToggle((prev) => !prev)}
|
||||
className={styles.closeMenuIcon}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<MenuNav />
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowMenuToggle((prev) => !prev)}
|
||||
className={styles.closeMenu}
|
||||
></div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
export const MenuToggle = ({ showMenuToggle, setShowMenuToggle }: PropsMenuTogle) => {
|
||||
return (
|
||||
<>
|
||||
{showMenuToggle ? (
|
||||
<div className={styles.containerMenuToggle}>
|
||||
<div className={styles.contentMenuToogle}>
|
||||
<div className={styles.headerMenuToggle}>
|
||||
<a href="/">Entrar</a>
|
||||
<button arial-label="Fechar menu">
|
||||
<CloseMenuIcon
|
||||
onClick={() => setShowMenuToggle((prev) => !prev)}
|
||||
className={styles.closeMenuIcon}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<MenuNav />
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setShowMenuToggle((prev) => !prev)}
|
||||
className={styles.closeMenu}
|
||||
></div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<Formik
|
||||
onSubmit={(value, { resetForm }) => {
|
||||
handleFormikSubmit(value);
|
||||
resetForm();
|
||||
}}
|
||||
initialValues={initialValue}
|
||||
>
|
||||
<Form className={styles.formNewsletter}>
|
||||
<div className={styles.containerForm}>
|
||||
<h3>Assine nossa Newsletter</h3>
|
||||
<div className={styles.containerInputNewsletter}>
|
||||
<Field
|
||||
type="email"
|
||||
name="emailNewsletter"
|
||||
id="emailNewsletter"
|
||||
placeholder="E-mail"
|
||||
required
|
||||
/>
|
||||
<button type="submit" arial-label="Enviar email newsletter">
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={(value, { resetForm }) => {
|
||||
handleFormikSubmit(value);
|
||||
resetForm();
|
||||
}}
|
||||
initialValues={initialValue}
|
||||
>
|
||||
<Form className={styles.formNewsletter}>
|
||||
<div className={styles.containerForm}>
|
||||
<h3>Assine nossa Newsletter</h3>
|
||||
<div className={styles.containerInputNewsletter}>
|
||||
<Field
|
||||
type="email"
|
||||
name="emailNewsletter"
|
||||
id="emailNewsletter"
|
||||
placeholder="E-mail"
|
||||
required
|
||||
/>
|
||||
<button type="submit" arial-label="Enviar email newsletter">
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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(
|
||||
<React.StrictMode>
|
||||
<Home />
|
||||
</React.StrictMode>
|
||||
<React.StrictMode>
|
||||
<Home />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
@ -6,14 +6,14 @@ import Institucional from "../components/Institucional/Institucional";
|
||||
import ElementFloat from "../components/ElementFloat/ElementFloat";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div className={styles.containerHome}>
|
||||
<Header />
|
||||
<Institucional />
|
||||
<Footer />
|
||||
<ElementFloat />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={styles.containerHome}>
|
||||
<Header />
|
||||
<Institucional />
|
||||
<Footer />
|
||||
<ElementFloat />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"),
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user