forked from M3-Academy/desafio-react-e-typescript
Compare commits
29 Commits
feature/ad
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 613bbc6bfe | |||
| 4cb28191b7 | |||
| dac47ac9f4 | |||
| 825adaf989 | |||
| 8e987bf898 | |||
| a8a485ceb0 | |||
| 540d012305 | |||
| 4d8887dfe2 | |||
| e8952e776b | |||
| 18d3e25738 | |||
| 8cc9b599b9 | |||
| 33fdd701a6 | |||
| 1e5c3e229f | |||
| a8fcc1fecc | |||
| 1d633e2fd9 | |||
| 05e22c8278 | |||
| 9bf366f55f | |||
| beb84fd3c9 | |||
| 698b035baa | |||
| b40ade416c | |||
| 04738f4bcf | |||
| f0b3544eee | |||
| e453edef48 | |||
| 83600b5932 | |||
| 2c4a8ab1ee | |||
| f1154f48c4 | |||
| e0b7730cbc | |||
| 8af057c801 | |||
| 44b9a46974 |
168
package-lock.json
generated
168
package-lock.json
generated
@ -15,16 +15,21 @@
|
||||
"@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"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-modal": "^3.13.1"
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@types/react-text-mask": "^5.4.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3079,6 +3084,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -3806,6 +3819,11 @@
|
||||
"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",
|
||||
@ -3873,6 +3891,15 @@
|
||||
"@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",
|
||||
@ -7971,6 +7998,42 @@
|
||||
"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",
|
||||
@ -8346,6 +8409,19 @@
|
||||
"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",
|
||||
@ -11416,6 +11492,11 @@
|
||||
"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",
|
||||
@ -11741,6 +11822,11 @@
|
||||
"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",
|
||||
@ -13643,6 +13729,11 @@
|
||||
"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",
|
||||
@ -13952,6 +14043,11 @@
|
||||
"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",
|
||||
@ -13988,6 +14084,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
|
||||
"integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
|
||||
"integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -14060,6 +14186,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"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",
|
||||
@ -15518,6 +15655,11 @@
|
||||
"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",
|
||||
@ -15550,6 +15692,11 @@
|
||||
"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",
|
||||
@ -16858,6 +17005,23 @@
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,13 +10,17 @@
|
||||
"@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"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
@ -43,6 +47,7 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-modal": "^3.13.1"
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@types/react-text-mask": "^5.4.11"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/assets/images/arrow-right.png
Normal file
BIN
src/assets/images/arrow-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
BIN
src/assets/images/home.png
Normal file
BIN
src/assets/images/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 479 B |
BIN
src/assets/images/toTop.png
Normal file
BIN
src/assets/images/toTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
BIN
src/assets/images/whatsapp.png
Normal file
BIN
src/assets/images/whatsapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
32
src/components/FixedButtons/index.tsx
Normal file
32
src/components/FixedButtons/index.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
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 };
|
||||
30
src/components/FixedButtons/styles.module.scss
Normal file
30
src/components/FixedButtons/styles.module.scss
Normal file
@ -0,0 +1,30 @@
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,11 +3,15 @@ import { FooterBottom } from "../FooterBottom";
|
||||
import { FooterTop } from "../FooterTop";
|
||||
import { NewsLetter } from "../NewsLetter";
|
||||
|
||||
const Footer = () => {
|
||||
interface FooterProps {
|
||||
windowWidth: number;
|
||||
}
|
||||
|
||||
const Footer = ({ windowWidth }: FooterProps) => {
|
||||
return (
|
||||
<footer>
|
||||
<NewsLetter />
|
||||
<FooterTop />
|
||||
<FooterTop windowWidth={windowWidth} />
|
||||
<FooterBottom />
|
||||
</footer>
|
||||
);
|
||||
|
||||
@ -139,7 +139,6 @@
|
||||
|
||||
&__corporateName {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
order: 2;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
import facebook from "../../assets/images/facebook.png";
|
||||
import instagram from "../../assets/images/instagram.png";
|
||||
@ -6,66 +6,110 @@ import twitter from "../../assets/images/twitter.png";
|
||||
import youTube from "../../assets/images/youTube.png";
|
||||
import linkedIn from "../../assets/images/linkedIn.png";
|
||||
|
||||
const FooterTop = () => {
|
||||
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",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles["footerTop"]}>
|
||||
<div className={styles["footerTop__content"]}>
|
||||
<div className={styles["footerTop__menuList"]}>
|
||||
<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>
|
||||
{accordionData.map(({ title, content }) => (
|
||||
<Accordion
|
||||
key={title}
|
||||
title={title}
|
||||
content={content}
|
||||
windowWidth={windowWidth}
|
||||
/>
|
||||
))}
|
||||
<div>
|
||||
<div className={styles["menuLists-title"]}>
|
||||
<h1>Fale Conosco</h1>
|
||||
<button></button>
|
||||
<button type="button" onClick={() => setIsActive(!isActive)}>
|
||||
{isActive ? "-" : "+"}
|
||||
</button>
|
||||
</div>
|
||||
<ul>
|
||||
<h2>Atendimento Ao Consumidor</h2>
|
||||
<li>
|
||||
<p>(11) 4159 9504</p>
|
||||
</li>
|
||||
<h2>Atendimento Online</h2>
|
||||
<li>
|
||||
<p>(11) 99433-8825</p>
|
||||
</li>
|
||||
</ul>
|
||||
{isActive && (
|
||||
<ul>
|
||||
<h2>Atendimento Ao Consumidor</h2>
|
||||
<li>
|
||||
<p>(11) 4159 9504</p>
|
||||
</li>
|
||||
<h2>Atendimento Online</h2>
|
||||
<li>
|
||||
<p>(11) 99433-8825</p>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["footerTop__socialMedia"]}>
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
.footerTop {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-width: 0px 0px 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--black-500);
|
||||
height: 239px;
|
||||
height: auto;
|
||||
padding: 50px 0;
|
||||
|
||||
&__content {
|
||||
@ -18,10 +15,21 @@
|
||||
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 {
|
||||
@ -30,7 +38,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -39,7 +47,7 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@ -49,7 +57,7 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
@ -60,7 +68,7 @@
|
||||
|
||||
&__socialMedia {
|
||||
width: 215px;
|
||||
height: 63px;
|
||||
height: auto;
|
||||
|
||||
.socialMedia-icons {
|
||||
display: flex;
|
||||
@ -78,7 +86,80 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--black-400);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 76px;
|
||||
padding: 0 16px 0 16px;
|
||||
|
||||
.menu-mobile-button {
|
||||
display: none;
|
||||
@ -46,7 +45,7 @@
|
||||
align-items: center;
|
||||
|
||||
&__input {
|
||||
width: 29.915%;
|
||||
width: 28.721%;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-top-left-radius: 5px;
|
||||
@ -137,7 +136,6 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0 16px 0 16px;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
@ -174,6 +172,7 @@
|
||||
&__content {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
|
||||
.menu-mobile-button {
|
||||
display: block;
|
||||
@ -273,11 +272,11 @@
|
||||
|
||||
.search-desktop {
|
||||
&__input {
|
||||
width: 28.716%;
|
||||
width: 25.53%;
|
||||
height: 57px;
|
||||
padding: 12px 0 12px 16px;
|
||||
|
||||
&::placeholder {
|
||||
padding: 12px 0 12px 16px;
|
||||
font-size: 28px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
import React from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const InstitutionalMain = () => {
|
||||
return <div className={styles["main"]}></div>;
|
||||
};
|
||||
|
||||
export { InstitutionalMain };
|
||||
@ -1,3 +0,0 @@
|
||||
.main {
|
||||
height: 588px;
|
||||
}
|
||||
43
src/components/Main/About/index.tsx
Normal file
43
src/components/Main/About/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
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 };
|
||||
61
src/components/Main/About/styles.module.scss
Normal file
61
src/components/Main/About/styles.module.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
194
src/components/Main/Contact/index.tsx
Normal file
194
src/components/Main/Contact/index.tsx
Normal file
@ -0,0 +1,194 @@
|
||||
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 };
|
||||
207
src/components/Main/Contact/styles.module.scss
Normal file
207
src/components/Main/Contact/styles.module.scss
Normal file
@ -0,0 +1,207 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
src/components/Main/Delivery/index.tsx
Normal file
43
src/components/Main/Delivery/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
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 };
|
||||
61
src/components/Main/Delivery/styles.module.scss
Normal file
61
src/components/Main/Delivery/styles.module.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
src/components/Main/ExchangeAndReturn/index.tsx
Normal file
43
src/components/Main/ExchangeAndReturn/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
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 };
|
||||
61
src/components/Main/ExchangeAndReturn/styles.module.scss
Normal file
61
src/components/Main/ExchangeAndReturn/styles.module.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
74
src/components/Main/MainMenu/index.tsx
Normal file
74
src/components/Main/MainMenu/index.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
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 };
|
||||
56
src/components/Main/MainMenu/styles.module.scss
Normal file
56
src/components/Main/MainMenu/styles.module.scss
Normal file
@ -0,0 +1,56 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
src/components/Main/Payment/index.tsx
Normal file
43
src/components/Main/Payment/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
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 };
|
||||
61
src/components/Main/Payment/styles.module.scss
Normal file
61
src/components/Main/Payment/styles.module.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
src/components/Main/SecurityAndPrivacy/index.tsx
Normal file
43
src/components/Main/SecurityAndPrivacy/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
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 };
|
||||
65
src/components/Main/SecurityAndPrivacy/styles.module.scss
Normal file
65
src/components/Main/SecurityAndPrivacy/styles.module.scss
Normal file
@ -0,0 +1,65 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/components/Main/index.tsx
Normal file
44
src/components/Main/index.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
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 };
|
||||
126
src/components/Main/styles.module.scss
Normal file
126
src/components/Main/styles.module.scss
Normal file
@ -0,0 +1,126 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,45 @@
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
color: var(--black-400);
|
||||
color: var(--black-300);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
@ -31,6 +31,18 @@
|
||||
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 {
|
||||
@ -89,6 +101,11 @@
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
top: 43%;
|
||||
left: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
@ -118,6 +135,13 @@
|
||||
width: 36.88%;
|
||||
max-width: 922px;
|
||||
height: 59px;
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
top: -42%;
|
||||
left: 56%;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { FixedButtons } from "../../components/FixedButtons";
|
||||
import { Footer } from "../../components/Footer";
|
||||
import { Header } from "../../components/Header";
|
||||
import { InstitutionalMain } from "../../components/InstitutionalMain";
|
||||
import { Main } from "../../components/Main";
|
||||
import { MenuMobileModal } from "../../components/MunuMobileModal";
|
||||
|
||||
const Institutional = () => {
|
||||
const [menuMobileModal, setMenuMobileModal] = useState(false);
|
||||
const [windowWidth, setWindowWidth] = useState(0);
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", windowResize);
|
||||
@ -26,8 +27,9 @@ const Institutional = () => {
|
||||
onRequestClose={() => setMenuMobileModal(false)}
|
||||
/>
|
||||
<Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
|
||||
<InstitutionalMain />
|
||||
<Footer />
|
||||
<Main />
|
||||
<Footer windowWidth={windowWidth} />
|
||||
<FixedButtons />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
19
src/schema/FormSchema.ts
Normal file
19
src/schema/FormSchema.ts
Normal file
@ -0,0 +1,19 @@
|
||||
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"),
|
||||
});
|
||||
5
src/schema/NewsLetterSchema.ts
Normal file
5
src/schema/NewsLetterSchema.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import * as Yup from "yup";
|
||||
|
||||
export default Yup.object().shape({
|
||||
newsLetter: Yup.string().required("").email("e-Mail inválido"),
|
||||
});
|
||||
@ -9,11 +9,19 @@
|
||||
--white-400: #e5e5e5;
|
||||
--white-500: #ffffff;
|
||||
|
||||
--black-400: #303030;
|
||||
--black-300: #303030;
|
||||
--black-400: #292929;
|
||||
--black-499: #100d0e;
|
||||
--black-500: #000000;
|
||||
|
||||
--gray-100: #c4c4c4;
|
||||
--gray-200: #c6c6c6;
|
||||
--gray-201: #b9b7b7;
|
||||
--gray-300: #7d7d7d;
|
||||
|
||||
--red-500: #ff0000;
|
||||
|
||||
--green-500: #008000;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user