Compare commits

..

No commits in common. "main" and "feature/adiciona-underline-footer-top" have entirely different histories.

38 changed files with 101 additions and 11194 deletions

168
package-lock.json generated
View File

@ -15,21 +15,16 @@
"@types/node": "^16.18.11",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"sass": "^1.57.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@types/react-modal": "^3.13.1",
"@types/react-text-mask": "^5.4.11"
"@types/react-modal": "^3.13.1"
}
},
"node_modules/@adobe/css-tools": {
@ -3084,14 +3079,6 @@
}
}
},
"node_modules/@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
"engines": {
"node": ">=14"
}
},
"node_modules/@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -3819,11 +3806,6 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"node_modules/@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"node_modules/@types/mime": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@ -3891,15 +3873,6 @@
"@types/react": "*"
}
},
"node_modules/@types/react-text-mask": {
"version": "5.4.11",
"resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
"integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -7998,42 +7971,6 @@
"node": ">= 6"
}
},
"node_modules/formik": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
"funding": [
{
"type": "individual",
"url": "https://opencollective.com/formik"
}
],
"dependencies": {
"deepmerge": "^2.1.1",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-fast-compare": "^2.0.1",
"tiny-warning": "^1.0.2",
"tslib": "^1.10.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/formik/node_modules/deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/formik/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -8409,19 +8346,6 @@
"he": "bin/he"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hoist-non-react-statics/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -11492,11 +11416,6 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -11822,11 +11741,6 @@
"multicast-dns": "cli.js"
}
},
"node_modules/nanoclone": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
},
"node_modules/nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -13729,11 +13643,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/property-expr": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
"integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
},
"node_modules/proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@ -14043,11 +13952,6 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-fast-compare": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -14084,36 +13988,6 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.6.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
"integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
"dependencies": {
"@remix-run/router": "1.2.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.6.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
"integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
"dependencies": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -14186,17 +14060,6 @@
}
}
},
"node_modules/react-text-mask": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
"dependencies": {
"prop-types": "^15.5.6"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -15655,11 +15518,6 @@
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
},
"node_modules/tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@ -15692,11 +15550,6 @@
"node": ">=0.6"
}
},
"node_modules/toposort": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
},
"node_modules/tough-cookie": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@ -17005,23 +16858,6 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/yup": {
"version": "0.32.11",
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
"integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
"dependencies": {
"@babel/runtime": "^7.15.4",
"@types/lodash": "^4.14.175",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"nanoclone": "^0.2.1",
"property-expr": "^2.0.4",
"toposort": "^2.0.2"
},
"engines": {
"node": ">=10"
}
}
}
}

View File

@ -10,17 +10,13 @@
"@types/node": "^16.18.11",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"sass": "^1.57.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
@ -47,7 +43,6 @@
]
},
"devDependencies": {
"@types/react-modal": "^3.13.1",
"@types/react-text-mask": "^5.4.11"
"@types/react-modal": "^3.13.1"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 270 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 479 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 738 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -1,32 +0,0 @@
import React from "react";
import whatsappIcon from "../../assets/images/whatsapp.png";
import toTopIcon from "../../assets/images/toTop.png";
import styles from "./styles.module.scss";
const FixedButtons = () => {
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
<div className={styles["fixedButtons"]}>
<button type="button" title="whatsappButton">
<a
href="https://wa.me/+5571999999999"
target="_blank"
rel="noopener noreferrer"
>
<img src={whatsappIcon} alt="" />
</a>
</button>
<button type="button" title="toTopButton" onClick={scrollToTop}>
<img src={toTopIcon} alt="" />
</button>
</div>
);
};
export { FixedButtons };

View File

@ -1,30 +0,0 @@
.fixedButtons {
position: fixed;
display: flex;
flex-direction: column;
bottom: 1%;
right: 1%;
button {
border: none;
background: transparent;
}
@media (max-width: 1024px) {
bottom: 1.5%;
right: 1.5%;
}
@media (min-width: 2500px) {
gap: 5px;
button {
width: 66px;
height: 66px;
img {
width: 100%;
height: 100%;
}
}
}
}

View File

@ -3,15 +3,11 @@ import { FooterBottom } from "../FooterBottom";
import { FooterTop } from "../FooterTop";
import { NewsLetter } from "../NewsLetter";
interface FooterProps {
windowWidth: number;
}
const Footer = ({ windowWidth }: FooterProps) => {
const Footer = () => {
return (
<footer>
<NewsLetter />
<FooterTop windowWidth={windowWidth} />
<FooterTop />
<FooterBottom />
</footer>
);

View File

@ -139,6 +139,7 @@
&__corporateName {
width: 100%;
max-width: 100%;
height: auto;
order: 2;
margin-bottom: 15px;

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React from "react";
import styles from "./styles.module.scss";
import facebook from "../../assets/images/facebook.png";
import instagram from "../../assets/images/instagram.png";
@ -6,110 +6,66 @@ import twitter from "../../assets/images/twitter.png";
import youTube from "../../assets/images/youTube.png";
import linkedIn from "../../assets/images/linkedIn.png";
interface FooterTopProps {
windowWidth: number;
}
interface AccordionProps extends FooterTopProps {
title: string;
content: string[];
}
const Accordion = ({ title, content, windowWidth }: AccordionProps) => {
const [isActive, setIsActive] = useState(false);
useEffect(() => {
if (windowWidth > 1024) {
setIsActive(true);
} else if (windowWidth <= 1024) {
setIsActive(false);
}
}, [windowWidth]);
return (
<div>
<div className={styles["menuLists-title"]}>
<h1>{title}</h1>
<button type="button" onClick={() => setIsActive(!isActive)}>
{isActive ? "-" : "+"}
</button>
</div>
{isActive && (
<ul>
{content.map((item) => (
<li key={item}>
<a href="#">{item}</a>
</li>
))}
</ul>
)}
</div>
);
};
const FooterTop = ({ windowWidth }: FooterTopProps) => {
const [isActive, setIsActive] = useState(false);
useEffect(() => {
if (windowWidth > 1024) {
setIsActive(true);
} else if (windowWidth <= 1024) {
setIsActive(false);
}
}, [windowWidth]);
const accordionData = [
{
title: "Institucional",
content: [
"Quem Somos",
"Política de Privacidade",
"Segurança",
"Seja um Revendedor",
],
},
{
title: "Dúvidas",
content: [
"Entrega",
"Pagamento",
"Trocas e Devoluções",
"Dúvidas Frequentes",
],
},
];
const FooterTop = () => {
return (
<div className={styles["footerTop"]}>
<div className={styles["footerTop__content"]}>
<div className={styles["footerTop__menuList"]}>
{accordionData.map(({ title, content }) => (
<Accordion
key={title}
title={title}
content={content}
windowWidth={windowWidth}
/>
))}
<div>
<div className={styles["menuLists-title"]}>
<h1>Institucional</h1>
<button></button>
</div>
<ul>
<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 href="#">Seja um Revendedor</a>
</li>
</ul>
</div>
<div>
<div className={styles["menuLists-title"]}>
<h1>Dúvidas</h1>
<button></button>
</div>
<ul>
<li>
<a href="#">Entrega</a>
</li>
<li>
<a href="#">Pagamento</a>
</li>
<li>
<a href="#">Troca e Devoluções</a>
</li>
<li>
<a href="#">Dúvidas Frquentes</a>
</li>
</ul>
</div>
<div>
<div className={styles["menuLists-title"]}>
<h1>Fale Conosco</h1>
<button type="button" onClick={() => setIsActive(!isActive)}>
{isActive ? "-" : "+"}
</button>
<button></button>
</div>
{isActive && (
<ul>
<h2>Atendimento Ao Consumidor</h2>
<li>
<p>&#40;11&#41; 4159 9504</p>
</li>
<h2>Atendimento Online</h2>
<li>
<p>&#40;11&#41; 99433-8825</p>
</li>
</ul>
)}
<ul>
<h2>Atendimento Ao Consumidor</h2>
<li>
<p>&#40;11&#41; 4159 9504</p>
</li>
<h2>Atendimento Online</h2>
<li>
<p>&#40;11&#41; 99433-8825</p>
</li>
</ul>
</div>
</div>
<div className={styles["footerTop__socialMedia"]}>

View File

@ -1,7 +1,10 @@
.footerTop {
display: flex;
justify-content: center;
height: auto;
border-width: 0px 0px 1px 1px;
border-style: solid;
border-color: var(--black-500);
height: 239px;
padding: 50px 0;
&__content {
@ -15,21 +18,10 @@
justify-content: space-between;
width: 707px;
height: 100%;
margin-right: 50px;
.menuLists-title {
display: flex;
align-items: center;
justify-content: space-between;
height: 14px;
margin-bottom: 12px;
button {
display: none;
border: none;
background: transparent;
font-size: 18px;
}
}
h1 {
@ -38,7 +30,7 @@
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: var(--black-300);
color: var(--black-400);
}
h2 {
@ -47,7 +39,7 @@
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: var(--black-300);
color: var(--black-400);
margin-bottom: 12px;
}
@ -57,7 +49,7 @@
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: var(--black-300);
color: var(--black-400);
margin-bottom: 12px;
&:last-child {
@ -68,7 +60,7 @@
&__socialMedia {
width: 215px;
height: auto;
height: 63px;
.socialMedia-icons {
display: flex;
@ -86,80 +78,7 @@
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--black-300);
}
}
@media (max-width: 1024px) {
padding: 24px 16px 30px 16px;
&__content {
width: 100%;
flex-direction: column;
}
&__menuList {
flex-direction: column;
margin: 0;
width: 100%;
gap: 12px;
.menuLists-title {
button {
display: block;
}
}
h1 {
text-transform: none;
}
}
}
@media (min-width: 2500px) {
height: 297px;
&__content {
width: 92.037%;
}
&__menuList {
width: 1531px;
.menuLists-title {
height: 28px;
}
h1 {
font-size: 28px;
line-height: 33px;
}
h2 {
font-size: 24px;
line-height: 28px;
}
li {
font-size: 24px;
line-height: 28px;
}
}
&__socialMedia {
width: 390px;
.socialMedia-icons {
img {
width: 70px;
height: 70px;
}
}
.socialMeida-site {
font-size: 28px;
line-height: 33px;
}
color: var(--black-400);
}
}
}

View File

@ -11,6 +11,7 @@
justify-content: center;
align-items: center;
height: 76px;
padding: 0 16px 0 16px;
.menu-mobile-button {
display: none;
@ -45,7 +46,7 @@
align-items: center;
&__input {
width: 28.721%;
width: 29.915%;
height: 32px;
border: none;
border-top-left-radius: 5px;
@ -136,6 +137,7 @@
display: flex;
justify-content: center;
width: 100%;
padding: 0 16px 0 16px;
nav {
display: flex;
@ -172,7 +174,6 @@
&__content {
width: 100%;
justify-content: space-between;
padding: 0 16px;
.menu-mobile-button {
display: block;
@ -272,11 +273,11 @@
.search-desktop {
&__input {
width: 25.53%;
width: 28.716%;
height: 57px;
padding: 12px 0 12px 16px;
&::placeholder {
padding: 12px 0 12px 16px;
font-size: 28px;
line-height: 32px;
}

View File

@ -0,0 +1,8 @@
import React from "react";
import styles from "./styles.module.scss";
const InstitutionalMain = () => {
return <div className={styles["main"]}></div>;
};
export { InstitutionalMain };

View File

@ -0,0 +1,3 @@
.main {
height: 588px;
}

View File

@ -1,43 +0,0 @@
import React from "react";
import { MainMenu } from "../MainMenu";
import styles from "./styles.module.scss";
const About = () => {
return (
<div className={styles["content"]}>
<MainMenu />
<div className={styles["content__text"]}>
<h1>Sobre</h1>
<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.
<br />
<br />
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.
<br />
<br />
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>
</div>
</div>
);
};
export { About };

View File

@ -1,61 +0,0 @@
.content {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 285px;
&__text {
width: 69.26%;
height: 100%;
h1 {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: var(--black-400);
margin: 12px 0;
}
p {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: var(--gray-300);
}
}
@media (max-width: 1024px) {
flex-direction: column;
&__text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
p {
text-align: justify;
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

View File

@ -1,194 +0,0 @@
import React, { useState } from "react";
import { MainMenu } from "../MainMenu";
import styles from "./styles.module.scss";
import { Formik, Form, Field, ErrorMessage } from "formik";
import FormSchema from "../../../schema/FormSchema";
import MaskedInput from "react-text-mask";
interface FormikValues {
name: string;
email: string;
cpf: string;
birthDate: string;
phone: string;
instagram: string;
}
const initialValues = {
name: "",
email: "",
cpf: "",
birthDate: "",
phone: "",
instagram: "",
};
const cpfNumberMask = [
/\d/,
/\d/,
/\d/,
".",
/\d/,
/\d/,
/\d/,
".",
/\d/,
/\d/,
/\d/,
"-",
/\d/,
/\d/,
];
const bhirtDateMask = [
/\d/,
/\d/,
".",
/\d/,
/\d/,
".",
/\d/,
/\d/,
/\d/,
/\d/,
];
const phoneNumberMask = [
"(",
/[1-9]/,
/\d/,
")",
" ",
/\d/,
/\d/,
/\d/,
/\d/,
/\d/,
"-",
/\d/,
/\d/,
/\d/,
/\d/,
];
const Contact = () => {
const [successMessage, setSuccessMessage] = useState(false);
const handleFormikSubmit = (values: FormikValues, { resetForm }: any) => {
resetForm({ values: "" });
setSuccessMessage(true);
setTimeout(() => setSuccessMessage(false), 3000);
};
return (
<div className={styles["content"]}>
<MainMenu />
<div className={styles["content__text"]}>
<h1>Preencha o Formulário</h1>
<Formik
onSubmit={handleFormikSubmit}
initialValues={initialValues}
validationSchema={FormSchema}
>
<Form className={styles["form"]}>
<div className={styles["form__input"]}>
<label htmlFor="name">Nome</label>
<Field id="name" name="name" placeholder="Seu nome completo" />
<ErrorMessage
component="span"
name="name"
className={styles["form__invalidFeedback"]}
/>
</div>
<div className={styles["form__input"]}>
<label htmlFor="email">E-mail</label>
<Field id="email" name="email" placeholder="Seu e-mail" />
<ErrorMessage
component="span"
name="email"
className={styles["form__invalidFeedback"]}
/>
</div>
<div className={styles["form__input"]}>
<label htmlFor="cpf">CPF</label>
<Field id="cpf" name="cpf">
{({ field }: any) => (
<MaskedInput
{...field}
mask={cpfNumberMask}
id="cpf"
placeholder="000.000.000-00"
type="text"
/>
)}
</Field>
<ErrorMessage
component="span"
name="cpf"
className={styles["form__invalidFeedback"]}
/>
</div>
<div className={styles["form__input"]}>
<label htmlFor="birthDate">Data de Nascimento:</label>
<Field id="birthDate" name="birthDate">
{({ field }: any) => (
<MaskedInput
{...field}
mask={bhirtDateMask}
id="birthDate"
placeholder="00.00.0000"
type="text"
/>
)}
</Field>
<ErrorMessage
component="span"
name="birthDate"
className={styles["form__invalidFeedback"]}
/>
</div>
<div className={styles["form__input"]}>
<label htmlFor="phone">Telefone:</label>
<Field id="phone" name="phone">
{({ field }: any) => (
<MaskedInput
{...field}
mask={phoneNumberMask}
id="phone"
placeholder="(00) 00000-0000"
type="text"
/>
)}
</Field>
<ErrorMessage
component="span"
name="phone"
className={styles["form__invalidFeedback"]}
/>
</div>
<div className={styles["form__input"]}>
<label htmlFor="instagram">Instagram</label>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
</div>
<div className={styles["form__checkbox"]}>
<span>*</span>
<label htmlFor="acceptTerms">Declaro que li e aceito</label>
<Field type="checkbox" name="acceptTerms" />
<ErrorMessage component="span" name="acceptTerms" />
</div>
<button type="submit">CADASTRE-SE</button>
{successMessage ? (
<span className={styles["form__successMessage"]}>
*Formulário enviado com sucesso!
</span>
) : (
""
)}
</Form>
</Formik>
</div>
</div>
);
};
export { Contact };

View File

@ -1,207 +0,0 @@
.content {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 285px;
&__text {
width: 69.26%;
height: 100%;
h1 {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: var(--black-400);
margin: 12px 0;
}
p {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: var(--gray-300);
}
.form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: auto;
position: relative;
&__input {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
position: relative;
width: 100%;
label {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
margin-left: 15px;
color: var(--black-499);
}
input {
height: 46px;
background: var(--white-500);
border: 1px solid var(--black-499);
border-radius: 25px;
padding: 15px 0 15px 20px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--gray-201);
&::placeholder {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--gray-201);
}
}
span {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--red-500);
position: absolute;
right: 2.5%;
top: 20%;
}
}
&__checkbox {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
margin-bottom: 12px;
position: relative;
max-width: 169.92px;
span {
color: var(--red-500);
position: absolute;
left: -5%;
}
label {
text-decoration: underline;
}
}
button {
height: 52.44px;
background: var(--black-500);
border: none;
border-radius: 25px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: 0.05em;
color: var(--white-500);
width: 100%;
}
&__successMessage {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--green-500);
position: absolute;
bottom: -4%;
left: 0;
}
}
}
@media (max-width: 1024px) {
flex-direction: column;
&__text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
}
@media (min-width: 2500px) {
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
.form {
&__input {
label {
font-size: 28px;
line-height: 33px;
}
input {
height: 63px;
font-size: 28px;
line-height: 33px;
&::placeholder {
font-size: 28px;
line-height: 33px;
}
}
}
span {
font-size: 24px;
line-height: 28px;
right: 1.5%;
top: 15%;
}
&__checkbox {
font-size: 28px;
line-height: 33px;
max-width: 333.68px;
input {
width: 36.4px;
height: 35.15px;
border-radius: 3px;
}
}
button {
height: 71px;
font-size: 32px;
line-height: 38px;
}
&__successMessage {
top: 101% !important;
}
}
}
}
}

View File

@ -1,43 +0,0 @@
import React from "react";
import { MainMenu } from "../MainMenu";
import styles from "./styles.module.scss";
const Delivery = () => {
return (
<div className={styles["content"]}>
<MainMenu />
<div className={styles["content__text"]}>
<h1>Entrega</h1>
<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.
<br />
<br />
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.
<br />
<br />
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>
</div>
</div>
);
};
export { Delivery };

View File

@ -1,61 +0,0 @@
.content {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 285px;
&__text {
width: 69.26%;
height: 100%;
h1 {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: var(--black-400);
margin: 12px 0;
}
p {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: var(--gray-300);
}
}
@media (max-width: 1024px) {
flex-direction: column;
&__text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
p {
text-align: justify;
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

View File

@ -1,43 +0,0 @@
import React from "react";
import { MainMenu } from "../MainMenu";
import styles from "./styles.module.scss";
const ExchangeAndReturn = () => {
return (
<div className={styles["content"]}>
<MainMenu />
<div className={styles["content__text"]}>
<h1>Troca e Devolução</h1>
<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.
<br />
<br />
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.
<br />
<br />
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>
</div>
</div>
);
};
export { ExchangeAndReturn };

View File

@ -1,61 +0,0 @@
.content {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 285px;
&__text {
width: 69.26%;
height: 100%;
h1 {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: var(--black-400);
margin: 12px 0;
}
p {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: var(--gray-300);
}
}
@media (max-width: 1024px) {
flex-direction: column;
&__text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
p {
text-align: justify;
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

View File

@ -1,74 +0,0 @@
import React from "react";
import { NavLink } from "react-router-dom";
import styles from "./styles.module.scss";
const MainMenu = () => {
return (
<div className={styles["menu"]}>
<ul>
<li>
<NavLink
to="/"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Sobre
</NavLink>
</li>
<li>
<NavLink
to="/payment"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Forma de Pagamento
</NavLink>
</li>
<li>
<NavLink
to="/delivery"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Entrega
</NavLink>
</li>
<li>
<NavLink
to="/exchange"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Troca e Devolução
</NavLink>
</li>
<li>
<NavLink
to="/security"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Segurança e Privacidade
</NavLink>
</li>
<li>
<NavLink
to="/contact"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Contato
</NavLink>
</li>
</ul>
</div>
);
};
export { MainMenu };

View File

@ -1,56 +0,0 @@
.menu {
border-width: 0 1px 0 0;
border-style: solid;
border-color: var(--black-500);
width: 27.963%;
height: 100%;
padding-bottom: 51px;
li {
height: 39px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: var(--gray-300);
a {
display: block;
line-height: 39px;
padding-left: 16px;
}
&:hover {
background: var(--black-500);
color: var(--white-500);
}
}
.active {
background: var(--black-500);
color: var(--white-500);
}
@media (max-width: 1024px) {
border-width: none;
border-style: none;
width: 100%;
margin-bottom: 30px;
}
@media (min-width: 2500px) {
width: 25.6522%;
padding-bottom: 117px;
li {
height: 58px;
font-size: 32px;
line-height: 38px;
a {
line-height: 38px;
padding: 10px 0 10px 16px;
}
}
}
}

View File

@ -1,43 +0,0 @@
import React from "react";
import { MainMenu } from "../MainMenu";
import styles from "./styles.module.scss";
const Payment = () => {
return (
<div className={styles["content"]}>
<MainMenu />
<div className={styles["content__text"]}>
<h1>Formas de Pagamento</h1>
<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.
<br />
<br />
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.
<br />
<br />
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>
</div>
</div>
);
};
export { Payment };

View File

@ -1,61 +0,0 @@
.content {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 285px;
&__text {
width: 69.26%;
height: 100%;
h1 {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: var(--black-400);
margin: 12px 0;
}
p {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: var(--gray-300);
}
}
@media (max-width: 1024px) {
flex-direction: column;
&__text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
p {
text-align: justify;
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

View File

@ -1,43 +0,0 @@
import React from "react";
import { MainMenu } from "../MainMenu";
import styles from "./styles.module.scss";
const SecurityAndPrivacy = () => {
return (
<div className={styles["content"]}>
<MainMenu />
<div className={styles["content__text"]}>
<h1>Segurança e Privacidade</h1>
<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.
<br />
<br />
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.
<br />
<br />
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>
</div>
</div>
);
};
export { SecurityAndPrivacy };

View File

@ -1,65 +0,0 @@
.content {
display: flex;
justify-content: space-between;
width: 100%;
min-height: 285px;
&__text {
width: 69.26%;
height: 100%;
h1 {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: var(--black-400);
margin: 12px 0;
@media (max-width: 299px) {
font-size: 22px;
}
}
p {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: var(--gray-300);
}
}
@media (max-width: 1024px) {
flex-direction: column;
&__text {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
p {
text-align: justify;
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

View File

@ -1,44 +0,0 @@
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import styles from "./styles.module.scss";
import homeIcon from "../../assets/images/home.png";
import arrowRightIcon from "../../assets/images/arrow-right.png";
import { About } from "./About";
import { Payment } from "./Payment";
import { Delivery } from "./Delivery";
import { ExchangeAndReturn } from "./ExchangeAndReturn";
import { SecurityAndPrivacy } from "./SecurityAndPrivacy";
import { Contact } from "./Contact";
const Main = () => {
return (
<main className={styles["main"]}>
<div className={styles["main__container"]}>
<div className={styles["main__way"]}>
<span className={styles["homeIcon"]}>
<img src={homeIcon} alt="Home" />
</span>
<span className={styles["arrowIcon"]}>
<img src={arrowRightIcon} alt="Seta" />
</span>
<p>INSTITUCIONAL</p>
</div>
<div className={styles["main__title"]}>
<h1>Institucional</h1>
</div>
<Router>
<Routes>
<Route path="/" element={<About />} />
<Route path="/payment" element={<Payment />} />
<Route path="/delivery" element={<Delivery />} />
<Route path="/exchange" element={<ExchangeAndReturn />} />
<Route path="/security" element={<SecurityAndPrivacy />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
</div>
</main>
);
};
export { Main };

View File

@ -1,126 +0,0 @@
.main {
display: flex;
justify-content: center;
height: auto;
margin-bottom: 70px;
&__container {
width: 84.375%;
height: 100%;
}
&__top {
width: 100%;
height: 100%;
}
&__way {
display: flex;
align-items: flex-end;
gap: 9.7px;
width: 100%;
height: 44px;
.homeIcon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.arrowIcon {
width: 8px;
height: 8px;
position: relative;
img {
position: absolute;
bottom: 50%;
width: 100%;
height: 100%;
}
}
p {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--gray-100);
}
}
&__title {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 189px;
h1 {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--black-400);
}
}
@media (max-width: 1024px) {
padding: 0 16px;
margin-bottom: 81px;
&__container {
width: 100%;
}
&__title {
height: 148px;
position: relative;
h1 {
position: absolute;
bottom: 30%;
}
}
}
@media (min-width: 2500px) {
&__container {
width: 92%;
}
&__way {
height: 60.25px;
.homeIcon {
width: 31.25px;
height: 31.25px;
}
.arrowIcon {
width: 15.62px;
height: 15.62px;
}
p {
font-size: 24px;
line-height: 28px;
}
}
&__title {
height: 218px;
h1 {
font-size: 48px;
line-height: 56px;
}
}
}
}

View File

@ -1,45 +1,22 @@
import React from "react";
import styles from "./styles.module.scss";
import { Formik, Form, Field, ErrorMessage } from "formik";
import NewsletterSchema from "../../schema/NewsLetterSchema";
interface FormikValues {
newsLetter: string;
}
const initialValues = {
newsLetter: "",
};
const NewsLetter = () => {
const handleNewsletterSubmit = (values: FormikValues, { resetForm }: any) => {
console.log(values);
resetForm({ values: "" });
};
return (
<section className={styles["newsLetter"]}>
<div className={styles["newsLetter__title"]}>
<h1>Assine nossa Newsletter</h1>
</div>
<Formik
onSubmit={handleNewsletterSubmit}
initialValues={initialValues}
validationSchema={NewsletterSchema}
>
<Form className={styles["newsLetter__container"]}>
<Field
id="newsLetter"
name="newsLetter"
className={styles["newsLetter__input"]}
placeholder="E-mail"
/>
<ErrorMessage component="span" name="newsLetter" />
<button type="submit" className={styles["newsLetter__button"]}>
Enviar
</button>
</Form>
</Formik>
<form className={styles["newsLetter__container"]}>
<input
className={styles["newsLetter__input"]}
type="text"
placeholder="E-mail"
/>
<button className={styles["newsLetter__button"]} type="submit">
Enviar
</button>
</form>
</section>
);
};

View File

@ -20,7 +20,7 @@
line-height: 21px;
letter-spacing: 0.05em;
font-variant: small-caps;
color: var(--black-300);
color: var(--black-400);
text-transform: uppercase;
}
}
@ -31,18 +31,6 @@
height: 42px;
width: 37.09%;
max-width: 474.75px;
position: relative;
span {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: var(--red-500);
position: absolute;
top: -30%;
left: 55%;
}
}
&__input {
@ -101,11 +89,6 @@
width: 100%;
max-width: 100%;
flex-direction: column;
span {
top: 43%;
left: 0%;
}
}
&__input {
@ -135,13 +118,6 @@
width: 36.88%;
max-width: 922px;
height: 59px;
span {
font-size: 24px;
line-height: 28px;
top: -42%;
left: 56%;
}
}
&__input {

View File

@ -1,13 +1,12 @@
import React, { useState, useEffect } from "react";
import { FixedButtons } from "../../components/FixedButtons";
import { Footer } from "../../components/Footer";
import { Header } from "../../components/Header";
import { Main } from "../../components/Main";
import { InstitutionalMain } from "../../components/InstitutionalMain";
import { MenuMobileModal } from "../../components/MunuMobileModal";
const Institutional = () => {
const [menuMobileModal, setMenuMobileModal] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [windowWidth, setWindowWidth] = useState(0);
useEffect(() => {
window.addEventListener("resize", windowResize);
@ -27,9 +26,8 @@ const Institutional = () => {
onRequestClose={() => setMenuMobileModal(false)}
/>
<Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
<Main />
<Footer windowWidth={windowWidth} />
<FixedButtons />
<InstitutionalMain />
<Footer />
</>
);
};

View File

@ -1,19 +0,0 @@
import * as Yup from "yup";
export default Yup.object().shape({
name: Yup.string()
.min(3, "Mínimo de 03 caracteres")
.required("*Campo Obrigatório"),
email: Yup.string().required("*Campo Obrigatório").email("e-Mail inválido"),
cpf: Yup.string()
.matches(/^\d{3}.\d{3}.\d{3}-\d{2}$/, "CPF inválido")
.required("*Campo Obrigatório"),
birthDate: Yup.string()
.matches(/^\d{2}([./-])\d{2}\1\d{4}$/, "Data inválida")
.required("*Campo Obrigatório"),
phone: Yup.string()
.matches(/(\(?\d{2}\)?\s)?(\d{4,5}\-\d{4})/g, "Número de telefone inválido")
.required("*Campo Obrigatório"),
acceptTerms: Yup.bool().required(),
newsLetter: Yup.string().email("e-Mail inválido"),
});

View File

@ -1,5 +0,0 @@
import * as Yup from "yup";
export default Yup.object().shape({
newsLetter: Yup.string().required("").email("e-Mail inválido"),
});

View File

@ -9,19 +9,11 @@
--white-400: #e5e5e5;
--white-500: #ffffff;
--black-300: #303030;
--black-400: #292929;
--black-499: #100d0e;
--black-400: #303030;
--black-500: #000000;
--gray-100: #c4c4c4;
--gray-200: #c6c6c6;
--gray-201: #b9b7b7;
--gray-300: #7d7d7d;
--red-500: #ff0000;
--green-500: #008000;
}
a {

9440
yarn.lock

File diff suppressed because it is too large Load Diff