forked from M3-Academy/desafio-react-e-typescript
Compare commits
23 Commits
feature/he
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| e5b3061398 | |||
| 7264458c4a | |||
| d2c104ff51 | |||
| 3936bd6a7c | |||
| 70b44d5c2f | |||
| 875c0aea75 | |||
| 2ba848d18e | |||
| bee11a3783 | |||
| 62e1e06d66 | |||
| 648fe1b266 | |||
| 1154eff9e9 | |||
| cab3168a0c | |||
| 78a91f6da3 | |||
| 64068f73b3 | |||
| 32d883c865 | |||
| 69f73c8118 | |||
| 9d44030714 | |||
| c3a67c2fa1 | |||
| de0c5f430f | |||
| 8a60bc4054 | |||
| 7d342076d9 | |||
| fa11438b6c | |||
| 22419b2397 |
363
package-lock.json
generated
363
package-lock.json
generated
@ -15,11 +15,15 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"cpf-cnpj-validator": "^1.0.3",
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.57.1"
|
||||
@ -2206,6 +2210,53 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/@hapi/address": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-4.1.0.tgz",
|
||||
"integrity": "sha512-SkszZf13HVgGmChdHo/PxchnSaCJ6cetVqLzyciudzZRT0jcOouIF/Q93mgjw8cce+D+4F4C1Z/WrfFN+O3VHQ==",
|
||||
"deprecated": "Moved to 'npm install @sideway/address'",
|
||||
"dependencies": {
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@hapi/formula": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz",
|
||||
"integrity": "sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A==",
|
||||
"deprecated": "Moved to 'npm install @sideway/formula'"
|
||||
},
|
||||
"node_modules/@hapi/hoek": {
|
||||
"version": "9.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
|
||||
"integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
|
||||
},
|
||||
"node_modules/@hapi/joi": {
|
||||
"version": "17.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-17.1.1.tgz",
|
||||
"integrity": "sha512-p4DKeZAoeZW4g3u7ZeRo+vCDuSDgSvtsB/NpfjXEHTUjSeINAi/RrVOWiVQ1isaoLzMvFEhe8n5065mQq1AdQg==",
|
||||
"deprecated": "Switch to 'npm install joi'",
|
||||
"dependencies": {
|
||||
"@hapi/address": "^4.0.1",
|
||||
"@hapi/formula": "^2.0.0",
|
||||
"@hapi/hoek": "^9.0.0",
|
||||
"@hapi/pinpoint": "^2.0.0",
|
||||
"@hapi/topo": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@hapi/pinpoint": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.0.tgz",
|
||||
"integrity": "sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw==",
|
||||
"deprecated": "Moved to 'npm install @sideway/pinpoint'"
|
||||
},
|
||||
"node_modules/@hapi/topo": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
|
||||
"integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
|
||||
"dependencies": {
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
|
||||
@ -3077,6 +3128,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",
|
||||
@ -3804,6 +3863,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",
|
||||
@ -5665,6 +5729,14 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/cpf-cnpj-validator": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cpf-cnpj-validator/-/cpf-cnpj-validator-1.0.3.tgz",
|
||||
"integrity": "sha512-Slh7iv+sf2FhP9xFRMExuaDF7ndERVzmjBZHqwWG+GqHSqPmEggvLuKUUFJZxb+G804rjqRnnu5eCkbeChqM/Q==",
|
||||
"dependencies": {
|
||||
"@hapi/joi": "^17.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
@ -7955,6 +8027,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",
|
||||
@ -8330,6 +8438,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",
|
||||
@ -11401,6 +11522,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",
|
||||
@ -11726,6 +11852,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",
|
||||
@ -13628,6 +13759,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",
|
||||
@ -13937,6 +14073,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",
|
||||
@ -13950,6 +14091,36 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
},
|
||||
"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",
|
||||
@ -15481,6 +15652,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",
|
||||
@ -15513,6 +15689,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",
|
||||
@ -16813,6 +16994,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"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
@ -18230,6 +18428,49 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@hapi/address": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-4.1.0.tgz",
|
||||
"integrity": "sha512-SkszZf13HVgGmChdHo/PxchnSaCJ6cetVqLzyciudzZRT0jcOouIF/Q93mgjw8cce+D+4F4C1Z/WrfFN+O3VHQ==",
|
||||
"requires": {
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"@hapi/formula": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-2.0.0.tgz",
|
||||
"integrity": "sha512-V87P8fv7PI0LH7LiVi8Lkf3x+KCO7pQozXRssAHNXXL9L1K+uyu4XypLXwxqVDKgyQai6qj3/KteNlrqDx4W5A=="
|
||||
},
|
||||
"@hapi/hoek": {
|
||||
"version": "9.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
|
||||
"integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
|
||||
},
|
||||
"@hapi/joi": {
|
||||
"version": "17.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-17.1.1.tgz",
|
||||
"integrity": "sha512-p4DKeZAoeZW4g3u7ZeRo+vCDuSDgSvtsB/NpfjXEHTUjSeINAi/RrVOWiVQ1isaoLzMvFEhe8n5065mQq1AdQg==",
|
||||
"requires": {
|
||||
"@hapi/address": "^4.0.1",
|
||||
"@hapi/formula": "^2.0.0",
|
||||
"@hapi/hoek": "^9.0.0",
|
||||
"@hapi/pinpoint": "^2.0.0",
|
||||
"@hapi/topo": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"@hapi/pinpoint": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.0.tgz",
|
||||
"integrity": "sha512-vzXR5MY7n4XeIvLpfl3HtE3coZYO4raKXW766R6DZw/6aLqR26iuZ109K7a0NtF2Db0jxqh7xz2AxkUwpUFybw=="
|
||||
},
|
||||
"@hapi/topo": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
|
||||
"integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
|
||||
"requires": {
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"@humanwhocodes/config-array": {
|
||||
"version": "0.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
|
||||
@ -18859,6 +19100,11 @@
|
||||
"source-map": "^0.7.3"
|
||||
}
|
||||
},
|
||||
"@remix-run/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@ -19399,6 +19645,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.191",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
|
||||
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
|
||||
},
|
||||
"@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
@ -20808,6 +21059,14 @@
|
||||
"yaml": "^1.10.0"
|
||||
}
|
||||
},
|
||||
"cpf-cnpj-validator": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cpf-cnpj-validator/-/cpf-cnpj-validator-1.0.3.tgz",
|
||||
"integrity": "sha512-Slh7iv+sf2FhP9xFRMExuaDF7ndERVzmjBZHqwWG+GqHSqPmEggvLuKUUFJZxb+G804rjqRnnu5eCkbeChqM/Q==",
|
||||
"requires": {
|
||||
"@hapi/joi": "^17.1.0"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
|
||||
@ -22472,6 +22731,32 @@
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
},
|
||||
"formik": {
|
||||
"version": "2.2.9",
|
||||
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
|
||||
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
|
||||
"requires": {
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"deepmerge": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
|
||||
@ -22730,6 +23015,21 @@
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
|
||||
},
|
||||
"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==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"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=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -24944,6 +25244,11 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
@ -25189,6 +25494,11 @@
|
||||
"thunky": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"nanoclone": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
|
||||
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.3.4",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
|
||||
@ -26373,6 +26683,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
@ -26595,6 +26910,11 @@
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -26605,6 +26925,23 @@
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
|
||||
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1"
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
|
||||
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
|
||||
"requires": {
|
||||
"@remix-run/router": "1.2.1",
|
||||
"react-router": "6.6.2"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
|
||||
@ -27732,6 +28069,11 @@
|
||||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"tmpl": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
|
||||
@ -27755,6 +28097,11 @@
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
|
||||
},
|
||||
"toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
|
||||
@ -28748,6 +29095,20 @@
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
|
||||
},
|
||||
"yup": {
|
||||
"version": "0.32.11",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
|
||||
"integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
|
||||
"requires": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,11 +10,15 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"cpf-cnpj-validator": "^1.0.3",
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -24,12 +24,12 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<title>Institucional</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -38,6 +38,5 @@
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
--></body>
|
||||
</html>
|
||||
|
||||
151
src/components/Large/Footer/Footer.tsx
Normal file
151
src/components/Large/Footer/Footer.tsx
Normal file
@ -0,0 +1,151 @@
|
||||
import React from "react"
|
||||
import iconFacebook from "./assets/icon-facebook.svg"
|
||||
import iconInstagram from "./assets/icon-instagram.svg"
|
||||
import iconTwitter from "./assets/icon-twitter.svg"
|
||||
import iconYoutube from "./assets/icon-youtube.svg"
|
||||
import iconLinkedin from "./assets/icon-linkedin.svg"
|
||||
import iconM3 from "./assets/icon-m3.png"
|
||||
import logoBoleto from "./assets/logo-boleto.png"
|
||||
import logoDiners from "./assets/logo-diners.png"
|
||||
import logoElo from "./assets/logo-elo.png"
|
||||
import logoHiper from "./assets/logo-hiper.png"
|
||||
import logoMaster from "./assets/logo-master.png"
|
||||
import logoPagseguro from "./assets/logo-pagseguro.png"
|
||||
import logoVisa from "./assets/logo-visa.png"
|
||||
import logoVtexPci from "./assets/logo-vtex-pci-200.png"
|
||||
import logoVtex from "./assets/logo-vtex.png"
|
||||
import { FooterMenu } from "../../Medium/FooterMenu"
|
||||
import { LinkLi } from "../../Small/LinkLi"
|
||||
import styles from "./footer.module.scss";
|
||||
|
||||
const Footer = () => {
|
||||
const menuListData = [
|
||||
{
|
||||
title: "Institucional",
|
||||
content1: `Quem Somos`,
|
||||
content2: `Política de Privacidade`,
|
||||
content3: `Segurança`,
|
||||
content4: `Seja um Revendedor`,
|
||||
},
|
||||
{
|
||||
title: "Dúvidas",
|
||||
content1: `Entrega`,
|
||||
content2: `Pagamento`,
|
||||
content3: `Trocas e Devoluções`,
|
||||
content4: `Dúvidas Frequentes`,
|
||||
},
|
||||
{
|
||||
title: "Fale Conosco",
|
||||
content1: `Atendimento ao Consumidor`,
|
||||
content2: `(11) 4159 9504`,
|
||||
content3: `Atendimento Online`,
|
||||
content4: `(11) 99433-8825`,
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<footer>
|
||||
<div className={styles["newsletter-wrapper"]}>
|
||||
<div className={styles["newsletter"]}>
|
||||
<h3 className={styles["newsletter-title"]}>Assine nossa newsletter</h3>
|
||||
<form className={styles["second-wrapper"]}>
|
||||
<input className={styles["newsletter-input"]} type="email" name="email" placeholder="E-mail" required/>
|
||||
<button className={styles["newsletter-btn"]} type="submit">Enviar</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-top"]}>
|
||||
<ul className={styles["menu-footer-mobile"]}>
|
||||
{menuListData.map(
|
||||
({title, content1, content2, content3, content4}, index) => (
|
||||
<FooterMenu
|
||||
title={title}
|
||||
content1={content1}
|
||||
content2={content2}
|
||||
content3={content3}
|
||||
content4={content4}
|
||||
key={index}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
<ul className={styles["menu-footer"]}>
|
||||
<li className={styles["menu-footer-title"]}>Institucional</li>
|
||||
<LinkLi href={"/quem-somos"} content={"Quem Somos"} />
|
||||
<LinkLi href={"/politica-de-privacidade"} content={"Política de Privacidade"} />
|
||||
<LinkLi href={"/segurança"} content={"Segurança"} />
|
||||
<LinkLi href={"/seja-um-revendedor"} content={"Seja um Revendedor"} />
|
||||
</ul>
|
||||
<ul className={styles["menu-footer"]}>
|
||||
<li className={styles["menu-footer-title"]}>Dúvidas</li>
|
||||
<LinkLi href={"/entrega"} content={"Entrega"} />
|
||||
<LinkLi href={"/pagamento"} content={"Pagamento"} />
|
||||
<LinkLi href={"/trocas-e-devolucoes"} content={"Trocas e Devoluções"} />
|
||||
<LinkLi href={"/duvidas-frequentes"} content={"Dúvidas Frequentes"} />
|
||||
</ul>
|
||||
<ul className={styles["menu-footer"]}>
|
||||
<li className={styles["menu-footer-title"]}>Fale Conosco</li>
|
||||
<li className={styles["bold"]}>Atendimento Ao Consumidor</li>
|
||||
<LinkLi href={"/(11)4159-9504"} content={"(11) 4159-9504"} />
|
||||
<li className={styles["bold"]}>Atendimento Online</li>
|
||||
<LinkLi href={"/(11)99433-8824"} content={"(11) 99433-8824"} />
|
||||
</ul>
|
||||
|
||||
<div className={styles["social"]}>
|
||||
<div className={styles["social-links"]}>
|
||||
<a href="/">
|
||||
<img src={iconFacebook} alt="Icone do Facebook dentro de um circulo" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={iconInstagram} alt="Icone do Instagram dentro de um circulo" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={iconTwitter} alt="Icone do Twitter dentro de um circulo" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={iconYoutube} alt="Icone do YouTube dentro de um circulo" />
|
||||
</a>
|
||||
<a href="/">
|
||||
<img src={iconLinkedin} alt="Icone do Linkedin dentro de um circulo" />
|
||||
</a>
|
||||
</div>
|
||||
<a className={styles["link"]} href="www.loremipsum.com">www.loremipsum.com</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles["footer-bottom"]}>
|
||||
<div className={styles["social-reason"]}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor
|
||||
</div>
|
||||
|
||||
<div className={styles["payment-metods"]}>
|
||||
<img src={logoMaster} alt="Logo MasterCard" className={styles["logoMaster"]}/>
|
||||
<img src={logoVisa} alt="Logo Visa" className={styles["logoVisa"]}/>
|
||||
<img src={logoDiners} alt="Logo Diners" className={styles["logoDiners"]}/>
|
||||
<img src={logoElo} alt="Logo Elo" className={styles["logoElo"]}/>
|
||||
<img src={logoHiper} alt="Logo Hiper" className={styles["logoHiper"]}/>
|
||||
<img src={logoPagseguro} alt="Logo Pagseguro" className={styles["logoPagseguro"]}/>
|
||||
<img src={logoBoleto} alt="Logo boleto" className={styles["logoBoleto"]}/>
|
||||
<div className={styles["line"]}></div>
|
||||
<img src={logoVtexPci} alt="Logo vtex pci" className={styles["logoVtexPci"]}/>
|
||||
</div>
|
||||
|
||||
<div className={styles["authors"]}>
|
||||
<div className={styles["vtex"]}>
|
||||
<span>Powered by</span>
|
||||
<img src={logoVtex} alt="Logo da Vtex" />
|
||||
</div>
|
||||
<div className={styles["m3"]}>
|
||||
<span>Developed by</span>
|
||||
<img src={iconM3} alt="Logo M3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export { Footer }
|
||||
|
Before Width: | Height: | Size: 683 B After Width: | Height: | Size: 683 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 426 B After Width: | Height: | Size: 426 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 787 B After Width: | Height: | Size: 787 B |
|
Before Width: | Height: | Size: 768 B After Width: | Height: | Size: 768 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 865 B After Width: | Height: | Size: 865 B |
|
Before Width: | Height: | Size: 744 B After Width: | Height: | Size: 744 B |
|
Before Width: | Height: | Size: 684 B After Width: | Height: | Size: 684 B |
|
Before Width: | Height: | Size: 834 B After Width: | Height: | Size: 834 B |
|
Before Width: | Height: | Size: 952 B After Width: | Height: | Size: 952 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 554 B After Width: | Height: | Size: 554 B |
424
src/components/Large/Footer/footer.module.scss
Normal file
424
src/components/Large/Footer/footer.module.scss
Normal file
@ -0,0 +1,424 @@
|
||||
@import "../../../global.scss";
|
||||
|
||||
footer {
|
||||
.newsletter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: 1px solid $color-black;
|
||||
border-bottom: 1px solid $color-black;
|
||||
padding: 16px 0;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: $color-gray-200;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.second-wrapper {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.newsletter-input {
|
||||
padding: 12px 15px;
|
||||
width: 340px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $color-gray-650;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: $color-gray-600;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 669px;
|
||||
height: 59px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 16px 15px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: $color-gray-600;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $color-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter-btn {
|
||||
cursor: pointer;
|
||||
padding: 14px 0;
|
||||
width: 126px;
|
||||
background-color: $color-black;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 246px;
|
||||
height: 59px;
|
||||
font-size: 28px;
|
||||
line-height: 28.13px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 17px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
padding: 50px 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 16px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-footer-mobile {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
#FaleConosco li:nth-child(2),
|
||||
#FaleConosco li:nth-child(4) {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 155px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $color-gray-200;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
li a {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray-200;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
li.bold {
|
||||
font-family: $font-family-Roboto;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray-200;
|
||||
font-weight: 500;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
margin-left: 37px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-links {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.link {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-200;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 100px;
|
||||
background-color: $color-black;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 15px 16px;
|
||||
}
|
||||
|
||||
.social-reason {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 234px;
|
||||
color: $color-white;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 467px;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-metods {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
gap: 3.2%;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 24px;
|
||||
min-width: 1px;
|
||||
background-color: $color-gray-600;
|
||||
}
|
||||
|
||||
img {
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
|
||||
&:last-child {
|
||||
width: 106px;
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
&.logoMaster,
|
||||
&.logoBoleto {
|
||||
width: 3.63%;
|
||||
}
|
||||
|
||||
&.logoVisa,
|
||||
&.logoDiners,
|
||||
&.logoHiper {
|
||||
width: 3.529%;
|
||||
}
|
||||
|
||||
&.logoElo {
|
||||
width: 3.73%;
|
||||
}
|
||||
|
||||
&.logoPagseguro {
|
||||
width: 3.428%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 5.505%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
&.logoMaster,
|
||||
&.logoBoleto,
|
||||
&.logoVisa,
|
||||
&.logoDiners,
|
||||
&.logoHiper,
|
||||
&.logoElo,
|
||||
&.logoPagseguro {
|
||||
width: 8.75%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 13.12%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.authors {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
color: $color-white;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.m3,
|
||||
.vtex {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.m3 img {
|
||||
@media (min-width: 2500px) {
|
||||
width: 54.95px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex img {
|
||||
@media (min-width: 2500px) {
|
||||
width: 84.22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
90
src/components/Large/Form/ContactForm.tsx
Normal file
90
src/components/Large/Form/ContactForm.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import { Formik, Form, Field, ErrorMessage } from 'formik'
|
||||
import FormSchema from '../../../schema/FormSchema';
|
||||
import styles from './contactForm.module.scss'
|
||||
|
||||
interface IFormikValues{
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
birthDate: string;
|
||||
phone: string;
|
||||
instagram: string;
|
||||
check: boolean;
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
name: '',
|
||||
email: '',
|
||||
cpf: '',
|
||||
birthDate: '',
|
||||
phone: '',
|
||||
instagram: '',
|
||||
check: false
|
||||
}
|
||||
|
||||
const ContactForm = () => {
|
||||
const handleFormikSubmit = (values: IFormikValues, { resetForm }: any) => {
|
||||
let successMessage:any = document.querySelector('.success-message')
|
||||
|
||||
let intervalo = window.setInterval(function () {
|
||||
successMessage.innerText = '*Formulário enviado com sucesso!'
|
||||
}, 800)
|
||||
|
||||
window.setTimeout(function () {
|
||||
clearInterval(intervalo)
|
||||
successMessage.innerText = ''
|
||||
}, 30000)
|
||||
|
||||
resetForm({values: ''})
|
||||
}
|
||||
|
||||
return <Formik
|
||||
onSubmit={handleFormikSubmit}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
<Form className={styles['contact-form']}>
|
||||
<div className={styles['form-input-box']}>
|
||||
<label htmlFor='name'>Nome</label>
|
||||
<ErrorMessage component='span' name='name' className={styles['form-invalid-feedback']}/>
|
||||
<Field id='name' name='name' placeholder='Seu nome completo' className={styles['form-input']} />
|
||||
</div>
|
||||
<div className={styles['form-input-box']}>
|
||||
<label htmlFor='email'>E-mail</label>
|
||||
<ErrorMessage component='span' name='email' className={styles['form-invalid-feedback']}/>
|
||||
<Field id='email' name='email' placeholder='Seu e-mail' className={styles['form-input']}/>
|
||||
</div>
|
||||
<div className={styles['form-input-box']}>
|
||||
<label htmlFor='cpf'>CPF</label>
|
||||
<ErrorMessage component='span' name='cpf' className={styles['form-invalid-feedback']}/>
|
||||
<Field id='cpf' name='cpf' placeholder='000.000.000-00' className={styles['form-input']}/>
|
||||
</div>
|
||||
<div className={styles['form-input-box']}>
|
||||
<label htmlFor='birthDate'>Data de Nascimento:</label>
|
||||
<ErrorMessage component='span' name='birthDate' className={styles['form-invalid-feedback']}/>
|
||||
<Field id='birthDate' name='birthDate' placeholder='00.00.0000' className={styles['form-input']}/>
|
||||
</div>
|
||||
<div className={styles['form-input-box']}>
|
||||
<label htmlFor='phone'>Telefone:</label>
|
||||
<ErrorMessage component='span' name='phone' className={styles['form-invalid-feedback']}/>
|
||||
<Field id='phone' name='phone' placeholder='(00) 00000-0000' className={styles['form-input']}/>
|
||||
</div>
|
||||
<div className={styles['form-input-box']}>
|
||||
<label htmlFor='instagram'>Instagram</label>
|
||||
<Field id='instagram' name='instagram' placeholder='@seuuser-' className={styles['form-input']}/>
|
||||
</div>
|
||||
|
||||
<div className={styles['check-input-box']}>
|
||||
<ErrorMessage component='span' name='check' className={styles['form-invalid-feedback-check' ]}/>
|
||||
<span>*</span>
|
||||
<label htmlFor='check'>Declaro que li e aceito</label>
|
||||
<Field type='checkbox' id='check' name='check' className={styles['checkbox-custom']}/>
|
||||
</div>
|
||||
|
||||
<button type='submit' className={styles['form-submit-btn']}>Cadastre-se</button>
|
||||
<div className={styles['success-message']}></div>
|
||||
</Form>
|
||||
</Formik>
|
||||
}
|
||||
|
||||
export { ContactForm }
|
||||
172
src/components/Large/Form/contactForm.module.scss
Normal file
172
src/components/Large/Form/contactForm.module.scss
Normal file
@ -0,0 +1,172 @@
|
||||
@import "../../../global.scss";
|
||||
|
||||
.contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-input-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
label {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black-200;
|
||||
padding-left: 15px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 25px;
|
||||
border: solid 1px $color-black-200;
|
||||
padding: 15px 20px;
|
||||
font-family: $font-family-Roboto;
|
||||
color: $color-gray-600;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-450;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.form-invalid-feedback {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-right: 120px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding-top: 15px;
|
||||
color: $color-red;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check-input-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4.28px;
|
||||
padding-left: 15px;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black-200;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.form-invalid-feedback-check {
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.checkbox-custom {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: 1px solid $color-black;
|
||||
width: 18.64px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 36.4px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='26' height='20' viewBox='0 0 26 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.42323 18.9338L1.29823 10.8088C0.810095 10.3207 0.810095 9.5292 1.29823 9.04101L3.06595 7.27324C3.55409 6.78506 4.34559 6.78506 4.83373 7.27324L10.3071 12.7466L22.0305 1.02324C22.5186 0.535105 23.3101 0.535105 23.7983 1.02324L25.566 2.79101C26.0541 3.27915 26.0541 4.0706 25.566 4.55879L11.191 18.9338C10.7028 19.422 9.91137 19.422 9.42323 18.9338V18.9338Z' fill='black'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-submit-btn {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background-color: $color-black;
|
||||
padding: 16.72px 0;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
padding: 16.5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: $color-green;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
52
src/components/Large/Header/Header.tsx
Normal file
52
src/components/Large/Header/Header.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { useState } from 'react'
|
||||
import iconCart from './assets/icon-cart.svg';
|
||||
import iconLupa from './assets/icon-lupa.svg';
|
||||
import iconMenu from './assets/icon-menu.svg';
|
||||
import iconClose from './assets/icon-close.svg';
|
||||
import logoM3Academy from './assets//logo-m3-academy.png';
|
||||
import { LinkLi } from '../../Small/LinkLi';
|
||||
import styles from './header.module.scss';
|
||||
|
||||
const Header = () => {
|
||||
const [active, setMode] = useState(false);
|
||||
const ToggleMode = () => {
|
||||
setMode(!active)
|
||||
}
|
||||
|
||||
return (
|
||||
<header className={active ? styles['active'] : ""}>
|
||||
<div className={styles['header-wrapper']}>
|
||||
<button className={styles['menu-mobile']} onClick={ToggleMode}>
|
||||
<img src={iconMenu} alt="Menu" />
|
||||
</button>
|
||||
<a href='/home' className={styles['logo-m3-academy']}>
|
||||
<img src={logoM3Academy} alt="Logo M3 Academy" />
|
||||
</a>
|
||||
<div className={styles["search-bar"]}>
|
||||
<input className={styles['search-input']} type="search" name="search" placeholder='Buscar..'/>
|
||||
<img className={styles['icon-lupa']} src={iconLupa} alt="Icone de pesquisar" />
|
||||
</div>
|
||||
<div className={styles["right"]}>
|
||||
<button className={styles['btn-entrar']}>Entrar</button>
|
||||
<button className={styles['icon-cart']}>
|
||||
<img src={iconCart} alt="Icone de carrinho de compras" />
|
||||
</button>
|
||||
<button className={styles['btn-close']} onClick={ToggleMode}>
|
||||
<img src={iconClose} alt="Icone de fechar" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav className={styles['navbar']}>
|
||||
<div className={styles["menu"]}>
|
||||
<ul>
|
||||
<LinkLi href={"/cursos"} content={'Cursos'} />
|
||||
<LinkLi href={"/saiba-mais"} content={'Saiba mais'} />
|
||||
<LinkLi href={"/institucionais"} content={'Institucionais'} />
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export { Header }
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
4
src/components/Large/Header/assets/icon-close.svg
Normal file
4
src/components/Large/Header/assets/icon-close.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
|
||||
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
|
Before Width: | Height: | Size: 655 B After Width: | Height: | Size: 655 B |
|
Before Width: | Height: | Size: 688 B After Width: | Height: | Size: 688 B |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
287
src/components/Large/Header/header.module.scss
Normal file
287
src/components/Large/Header/header.module.scss
Normal file
@ -0,0 +1,287 @@
|
||||
@import "../../../global.scss";
|
||||
|
||||
header {
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $color-black;
|
||||
padding: 22px 100px;
|
||||
border-bottom: solid 1px $color-gray-600;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 25px 16px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"menu logo cart"
|
||||
"input input input";
|
||||
}
|
||||
|
||||
.menu-mobile {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
grid-area: menu;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-m3-academy {
|
||||
cursor: pointer;
|
||||
width: 136px;
|
||||
height: 25.86px;
|
||||
|
||||
img {
|
||||
width: 136px;
|
||||
height: 25.86px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: logo;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 265.62px;
|
||||
height: 50.5px;
|
||||
|
||||
img {
|
||||
width: 265.62px;
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 24.815%;
|
||||
height: 36px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: input;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 57px;
|
||||
width: 22.3914%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
border: 2px solid $color-gray-700;
|
||||
border-radius: 5px;
|
||||
color: $color-gray-500;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-500;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16.41px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: inherit;
|
||||
padding: 12px 16px;
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-lupa {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: -27px;
|
||||
float: right;
|
||||
margin-right: 18px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 35.15px;
|
||||
width: 35.15px;
|
||||
top: -46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 55px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: cart;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-entrar {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 54.68px;
|
||||
width: 54.68px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.navbar {
|
||||
background-color: $color-black;
|
||||
padding: 14px 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 55px;
|
||||
|
||||
li a {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 32.81px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Menu sidebar
|
||||
&.active {
|
||||
nav.navbar {
|
||||
display: block;
|
||||
width: 0;
|
||||
|
||||
.menu {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $blur-gray;
|
||||
|
||||
ul {
|
||||
z-index: 3;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: $color-white;
|
||||
padding: 31px 0 404px 16px;
|
||||
margin: 78px 36px 0 0;
|
||||
|
||||
li a {
|
||||
color: $color-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.btn-entrar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
position: fixed;
|
||||
margin-right: 36px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
width: -webkit-fill-available;
|
||||
background: black;
|
||||
padding: 31px 16px 31px 16px;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
right: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tirando o X da barra de pesquisa */
|
||||
input[type="search"]::-ms-clear {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
input[type="search"]::-ms-reveal {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
71
src/components/Large/Main/Main.tsx
Normal file
71
src/components/Large/Main/Main.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { useState } from "react"
|
||||
import { BrowserRouter as Router, Link } from 'react-router-dom'
|
||||
import { ContactForm } from "../Form/ContactForm";
|
||||
import { BackToTopAndWhatsapp } from "../../Small/BackToTopAndWhatsapp";
|
||||
|
||||
import iconHome from "./assets/icon-home.svg";
|
||||
import iconArrowRight from "./assets/icon-arrow-right.svg"
|
||||
import styles from "./main.module.scss";
|
||||
|
||||
const Main = () => {
|
||||
let [isActive, setIsActive] = useState(false);
|
||||
|
||||
return (
|
||||
<main>
|
||||
<div className={styles["article-name"]}>
|
||||
<img className={styles["icon-home"]} src={iconHome} alt="Icone de casa" />
|
||||
<img className={styles["icon-arrow-right"]} src={iconArrowRight} alt="Seta para direita" />
|
||||
<h5 className={styles["article-name-title"]}>Institucional</h5>
|
||||
</div>
|
||||
|
||||
<h1 className={styles["article-title"]}>
|
||||
Institucional
|
||||
</h1>
|
||||
|
||||
<article className={styles["article-container"]}>
|
||||
<ul className={styles["sections-list"]}>
|
||||
<Router>
|
||||
<li onClick={() => setIsActive(isActive = false)} className={isActive ? "" : styles["active-li"]}>
|
||||
<Link to={'/institucional/sobre'}>Sobre</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={'/institucional/forma-de-pagamento'}>Forma de Pagamento</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={'/institucional/entrega'}>Entrega</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={'/institucional/troca-e-devolucao'}>Troca e Devolução</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={'/institucional/seguranca-e-privacidade'}>Segurança e Privacidade</Link>
|
||||
</li>
|
||||
<li onClick={() => setIsActive(isActive = true)} className={isActive ? styles["active-li"] : ""}>
|
||||
<Link to={'/institucional/contato'}>Contato</Link>
|
||||
</li>
|
||||
</Router>
|
||||
</ul>
|
||||
|
||||
<section className={isActive ? styles["section-about"] : `${styles["section-about"]} ${styles["active"]}`}>
|
||||
<h2 className={styles["section-title"]}>Sobre</h2>
|
||||
<div className={styles["section-description"]}>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<br/>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
|
||||
<br/>
|
||||
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={isActive ? `${styles["section-form"]} ${styles["active"]}` : styles["section-form"]}>
|
||||
<h2 className={styles["section-title"]}>Preencha o formulário</h2>
|
||||
<ContactForm />
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<BackToTopAndWhatsapp />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export { Main }
|
||||
3
src/components/Large/Main/assets/icon-arrow-right.svg
Normal file
3
src/components/Large/Main/assets/icon-arrow-right.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.11608 3.60396L1.6762 0.164193C1.45738 -0.0547314 1.10261 -0.0547314 0.883896 0.164193C0.665166 0.382921 0.665166 0.737679 0.883896 0.95639L3.92766 4.00006L0.883984 7.04362C0.665255 7.26244 0.665255 7.61716 0.883984 7.83589C1.10271 8.0547 1.45747 8.0547 1.67629 7.83589L5.11617 4.39607C5.22553 4.28665 5.28015 4.1434 5.28015 4.00008C5.28015 3.85668 5.22543 3.71332 5.11608 3.60396Z" fill="#C4C4C4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 510 B |
|
Before Width: | Height: | Size: 986 B After Width: | Height: | Size: 986 B |
163
src/components/Large/Main/main.module.scss
Normal file
163
src/components/Large/Main/main.module.scss
Normal file
@ -0,0 +1,163 @@
|
||||
@import "../../../global.scss";
|
||||
|
||||
main {
|
||||
padding: 29px 100px 70px 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 29px 16px 70px 16px;
|
||||
}
|
||||
|
||||
.article-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
gap: 8.75px;
|
||||
|
||||
img.icon-home {
|
||||
width: 31.25px;
|
||||
}
|
||||
|
||||
img.icon-arrow-right {
|
||||
width: 15.62px;
|
||||
}
|
||||
}
|
||||
|
||||
h5.article-name-title {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: uppercase;
|
||||
color: $color-gray-600;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1.article-title {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: $color-gray-200;
|
||||
margin: 80px 0;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 80px 0 40px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
article.article-container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
ul.sections-list {
|
||||
border-right: 1px solid $color-black;
|
||||
width: 28.094%;
|
||||
height: 285px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 25.6523%;
|
||||
height: 465px;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
font-family: $font-family-Roboto;
|
||||
color: $color-gray-350;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
padding: 10px 0 10px 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.active-li {
|
||||
color: $color-white;
|
||||
background-color: $color-black;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section.active {
|
||||
display: block;
|
||||
width: 69.26%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 73.044%;
|
||||
}
|
||||
|
||||
h2.section-title {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 12px;
|
||||
color: $color-gray-200;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-description p {
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $color-gray-350;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/components/Medium/FooterMenu.module.scss
Normal file
36
src/components/Medium/FooterMenu.module.scss
Normal file
@ -0,0 +1,36 @@
|
||||
@import "../../global.scss";
|
||||
|
||||
.footer-menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.footer-menu-title {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-200;
|
||||
|
||||
.close-open-menu {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-menu-content {
|
||||
cursor: pointer;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: $color-gray-200;
|
||||
|
||||
&:last-child {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
src/components/Medium/FooterMenu.tsx
Normal file
37
src/components/Medium/FooterMenu.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import React, { useState } from 'react'
|
||||
import { LinkLi } from '../Small/LinkLi';
|
||||
import styles from './FooterMenu.module.scss'
|
||||
|
||||
interface footerMenuProps{
|
||||
title: string;
|
||||
content1: string;
|
||||
content2: string;
|
||||
content3: string;
|
||||
content4: string;
|
||||
}
|
||||
|
||||
const FooterMenu = (props: footerMenuProps) => {
|
||||
const [isActive, setIsActive] = useState(false)
|
||||
|
||||
return (
|
||||
<div className={styles["footer-menu-item"]} id={props.title.replace(/\s/g, '')}>
|
||||
<div
|
||||
className={styles["footer-menu-title"]}
|
||||
onClick={() => setIsActive(!isActive)}
|
||||
>
|
||||
<div>{props.title}</div>
|
||||
<div className={styles['close-open-menu']}>{isActive ? '-' : '+'}</div>
|
||||
</div>
|
||||
{isActive && (
|
||||
<>
|
||||
<LinkLi classNameLi={styles["footer-menu-content"]} href={"/" + props.content1.replace(/\s/g, '').toLowerCase()} content={props.content1} />
|
||||
<LinkLi classNameLi={styles["footer-menu-content"]} href={"/" + props.content2.replace(/\s/g, '').toLowerCase()} content={props.content2} />
|
||||
<LinkLi classNameLi={styles["footer-menu-content"]} href={"/" + props.content3.replace(/\s/g, '').toLowerCase()} content={props.content3} />
|
||||
<LinkLi classNameLi={styles["footer-menu-content"]} href={"/" + props.content4.replace(/\s/g, '').toLowerCase()} content={props.content4} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { FooterMenu }
|
||||
56
src/components/Small/BackToTopAndWhatsapp.module.scss
Normal file
56
src/components/Small/BackToTopAndWhatsapp.module.scss
Normal file
@ -0,0 +1,56 @@
|
||||
.back-to-top {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
bottom: 190px;
|
||||
right: 16px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
bottom: 229.24px;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
bottom: 21px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.whatsapp {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
bottom: 229px;
|
||||
right: 16px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
bottom: 300.24px;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
bottom: 55px;
|
||||
}
|
||||
}
|
||||
41
src/components/Small/BackToTopAndWhatsapp.tsx
Normal file
41
src/components/Small/BackToTopAndWhatsapp.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
import { useEffect, useState } from "react";
|
||||
import iconWhatsapp from './assets/icon-whatsapp.svg';
|
||||
import iconBackToTop from './assets/icon-back-to-top.svg';
|
||||
import styles from './BackToTopAndWhatsapp.module.scss';
|
||||
|
||||
const BackToTopAndWhatsapp = () => {
|
||||
const [showButton, setShowButton] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", () => {
|
||||
if (window.pageYOffset > 150) {
|
||||
setShowButton(true);
|
||||
} else {
|
||||
setShowButton(false);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{showButton && (
|
||||
<button onClick={scrollToTop} className={styles["back-to-top"]}>
|
||||
<img src={iconBackToTop} alt="Icone ir para o topo da pagina" />
|
||||
</button>
|
||||
)}
|
||||
<a className={styles["whatsapp"]} href="https://wa.me/5519996489694?text=Ol%C3%A1+Mateus+como+vai%3F">
|
||||
<img src={iconWhatsapp} alt="Icone para entrar em contato através do Whatsapp" />
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { BackToTopAndWhatsapp }
|
||||
22
src/components/Small/LinkLi.tsx
Normal file
22
src/components/Small/LinkLi.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
|
||||
interface linkLiProps{
|
||||
href: string;
|
||||
className?: string;
|
||||
classNameLi?: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
const LinkLi = (props: linkLiProps) => {
|
||||
const { href, className, classNameLi, content } = props
|
||||
|
||||
return (
|
||||
<li className={classNameLi}>
|
||||
<a href={href} className={className}>
|
||||
{content}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export { LinkLi }
|
||||
4
src/components/Small/assets/icon-back-to-top.svg
Normal file
4
src/components/Small/assets/icon-back-to-top.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17Z" fill="#C4C4C4"/>
|
||||
<path d="M23.6 19.1365C23.5989 19.249 23.5519 19.3612 23.4588 19.4489L23.4587 19.449C23.2574 19.639 22.9216 19.6389 22.7204 19.449L22.7204 19.449L17.7744 14.7826L17.4999 14.5236L17.2254 14.7826L12.2797 19.4488C12.2797 19.4488 12.2796 19.4489 12.2796 19.4489C12.0781 19.6389 11.7424 19.6388 11.5412 19.4489L11.5411 19.4488C11.4483 19.3613 11.4013 19.2494 11.4 19.1372C11.4011 19.0247 11.4481 18.9124 11.5412 18.8246L11.5412 18.8246L17.1308 13.551C17.1308 13.5509 17.1309 13.5509 17.1309 13.5509C17.2292 13.4582 17.3616 13.4085 17.4999 13.4085C17.6382 13.4085 17.7708 13.4583 17.8691 13.551C17.8691 13.551 17.8691 13.551 17.8691 13.551L23.4587 18.8247L23.4588 18.8248C23.5516 18.9124 23.5987 19.0243 23.6 19.1365Z" fill="white" stroke="white" stroke-width="0.8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1006 B |
11
src/components/Small/assets/icon-whatsapp.svg
Normal file
11
src/components/Small/assets/icon-whatsapp.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3715_5593)">
|
||||
<path d="M17.0042 0H16.9958C7.62238 0 0 7.6245 0 17C0 20.7188 1.1985 24.1655 3.23638 26.9641L1.11775 33.2796L7.65213 31.1908C10.3403 32.9715 13.5469 34 17.0042 34C26.3776 34 34 26.3734 34 17C34 7.62663 26.3776 0 17.0042 0Z" fill="#4CAF50"/>
|
||||
<path d="M26.8962 24.0061C26.486 25.1642 24.8583 26.1247 23.5599 26.4052C22.6717 26.5944 21.5114 26.7452 17.6057 25.126C12.6098 23.0562 9.39255 17.9796 9.1418 17.6502C8.90167 17.3209 7.12305 14.9621 7.12305 12.5226C7.12305 10.0831 8.36192 8.89524 8.8613 8.38524C9.27142 7.96661 9.9493 7.77536 10.5995 7.77536C10.8099 7.77536 10.999 7.78599 11.169 7.79449C11.6684 7.81574 11.9192 7.84549 12.2485 8.63386C12.6587 9.62199 13.6574 12.0615 13.7764 12.3122C13.8975 12.563 14.0187 12.903 13.8487 13.2324C13.6893 13.5724 13.549 13.7232 13.2983 14.0122C13.0475 14.3012 12.8095 14.5222 12.5588 14.8325C12.3293 15.1024 12.07 15.3914 12.359 15.8907C12.648 16.3795 13.6468 18.0094 15.1173 19.3184C17.0149 21.0077 18.5534 21.5475 19.1038 21.777C19.5139 21.947 20.0027 21.9066 20.3023 21.5879C20.6827 21.1777 21.1523 20.4977 21.6304 19.8284C21.9704 19.3481 22.3997 19.2886 22.8502 19.4586C23.3092 19.618 25.738 20.8186 26.2374 21.0672C26.7368 21.318 27.0662 21.437 27.1873 21.6474C27.3063 21.8577 27.3063 22.8459 26.8962 24.0061Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3715_5593">
|
||||
<rect width="34" height="34" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -1,7 +0,0 @@
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div>Footer</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@ -1,42 +0,0 @@
|
||||
import './header.scss'
|
||||
import iconCart from '../../assets/svgs/icon-cart.svg';
|
||||
import iconLupa from '../../assets/svgs/icon-lupa.svg';
|
||||
import iconMenu from '../../assets/svgs/icon-menu.svg';
|
||||
import logoM3Academy from '../../assets/imgs/logo-m3-academy.png';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<img className='menu-mobile' src={iconMenu} alt="Menu" />
|
||||
<img className='logo-m3-academy' src={logoM3Academy} alt="Logo M3 Academy" />
|
||||
<div className="search-bar">
|
||||
<input className='search-input' type="search" name="" id="" placeholder='Buscar..'/>
|
||||
<img className='icon-lupa' src={iconLupa} alt="Icone de lupa" />
|
||||
</div>
|
||||
<div className="right">
|
||||
<a className='btn btn-entrar' href="/entrar">Entrar</a>
|
||||
<a href="/cart">
|
||||
<img className='icon-cart' src={iconCart} alt="Icone de carrinho de compras" />
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/cursos">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/saiba-mais">Sabia mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/institucionais">Insititucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,163 +0,0 @@
|
||||
@import "../../styles/utils/variaveis";
|
||||
|
||||
header,
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"menu logo cart"
|
||||
"input input input";
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: $color-black;
|
||||
padding: 22px 100px;
|
||||
border-bottom: solid 1px $color-gray-600;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 25px 16px;
|
||||
}
|
||||
|
||||
.menu-mobile {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
grid-area: menu;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-m3-academy {
|
||||
cursor: pointer;
|
||||
width: 136px;
|
||||
height: 25.86px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: logo;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 24.815%;
|
||||
height: 36px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: input;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
border: 2px solid $color-gray-700;
|
||||
border-radius: 5px;
|
||||
|
||||
color: $color-gray-500;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-500;
|
||||
font-family: $font-family-Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16.41px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-lupa {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: -27px;
|
||||
float: right;
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 55px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
grid-area: cart;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-entrar {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: $color-black;
|
||||
padding: 14px 100px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
gap: 55px;
|
||||
|
||||
li a {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* clears the ‘X’ from Internet Explorer */
|
||||
input[type="search"]::-ms-clear {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
input[type="search"]::-ms-reveal {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
/* clears the ‘X’ from Chrome */
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
54
src/global.scss
Normal file
54
src/global.scss
Normal file
@ -0,0 +1,54 @@
|
||||
// Font
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
|
||||
$font-family-Roboto: "Roboto", sans-serif;
|
||||
|
||||
// Colors
|
||||
$color-black: #000;
|
||||
$color-black-200: #100d0e;
|
||||
|
||||
$color-gray-200: #303030;
|
||||
$color-gray-300: #5e5e5e;
|
||||
$color-gray-350: #7d7d7d;
|
||||
$color-gray-400: #919191;
|
||||
$color-gray-450: #b9b7b7;
|
||||
$color-gray-500: #c6c6c6;
|
||||
$color-gray-600: #c4c4c4;
|
||||
$color-gray-650: #e5e5e5;
|
||||
$color-gray-700: #f2f2f2;
|
||||
$color-gray-800: #f9f9f9;
|
||||
$blur-gray: rgba(69, 69, 69, 0.7);
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
$color-red: #ff0000;
|
||||
|
||||
$color-blue: #5200ff;
|
||||
|
||||
$color-green: #008000;
|
||||
|
||||
//Reset CSS
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
// Pages
|
||||
@import "./pages/institucional.scss";
|
||||
@ -1,13 +1,12 @@
|
||||
import './global.scss'
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './pages/App';
|
||||
|
||||
import './styles/main.scss'
|
||||
import Institucional from './pages/Institucional';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<App />
|
||||
<Institucional />
|
||||
);
|
||||
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
import Header from "../components/header/Header";
|
||||
import Footer from "../components/footer/Footer";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Header />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
15
src/pages/Institucional.tsx
Normal file
15
src/pages/Institucional.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Header } from "../components/Large/Header/Header";
|
||||
import { Footer } from "../components/Large/Footer/Footer";
|
||||
import { Main } from "../components/Large/Main/Main";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<Header />
|
||||
<Main />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -1,7 +1,5 @@
|
||||
body {
|
||||
background-color: white;
|
||||
|
||||
background-color: $color-white;
|
||||
width: 100%;
|
||||
|
||||
font-family: $font-family-Roboto;
|
||||
}
|
||||
2
src/react-app-env.d.ts
vendored
2
src/react-app-env.d.ts
vendored
@ -2,3 +2,5 @@ declare module "*.png";
|
||||
declare module "*.svg";
|
||||
declare module "*.jpeg";
|
||||
declare module "*.jpg";
|
||||
declare module "*.css";
|
||||
declare module "*.scss";
|
||||
|
||||
11
src/schema/FormSchema.ts
Normal file
11
src/schema/FormSchema.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import * as Yup from "yup"
|
||||
|
||||
export default Yup.object().shape({
|
||||
name: Yup.string().min(3, "*Nome precisa ter no minimo três carácteres").required("*Campo Obrigatório"),
|
||||
email: Yup.string().required("*Campo Obrigatório").email("*Email inválido"),
|
||||
cpf: Yup.string().required("*Campo Obrigatório"),
|
||||
birthDate: Yup.string().required("*Campo Obrigatório"),
|
||||
phone: Yup.string().required("*Campo Obrigatório"),
|
||||
check: Yup.boolean().oneOf([true],''),
|
||||
})
|
||||
@ -1,9 +0,0 @@
|
||||
// Utils
|
||||
@import "./utils/reset";
|
||||
@import "./utils/variaveis";
|
||||
|
||||
// Pages
|
||||
@import "../pages/app.scss";
|
||||
|
||||
// Components
|
||||
@import "../components/header/header.scss";
|
||||
@ -1,13 +0,0 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
// Font
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
|
||||
|
||||
$font-family-Roboto: "Roboto";
|
||||
|
||||
// Colors
|
||||
$color-black: #000;
|
||||
|
||||
$color-gray-200: #303030;
|
||||
$color-gray-300: #5e5e5e;
|
||||
$color-gray-400: #919191;
|
||||
$color-gray-500: #c6c6c6;
|
||||
$color-gray-600: #c4c4c4;
|
||||
$color-gray-700: #f2f2f2;
|
||||
$color-gray-800: #f9f9f9;
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
$color-red: #ff0000;
|
||||
|
||||
$color-blue: #5200ff;
|
||||
Loading…
Reference in New Issue
Block a user