From 693734f3eb29d64a32b6aa68c975ab3f92e2ae28 Mon Sep 17 00:00:00 2001 From: WellingtonWDS Date: Fri, 20 Jan 2023 18:23:26 -0300 Subject: [PATCH] feat(main) Formulario e responsividade --- package-lock.json | 282 +++++++++++++++++++++++++++- package.json | 5 +- src/components/Content/Content.scss | 239 ++++++++++++++++++++++- src/components/Content/Content.tsx | 18 +- src/components/Header/Header.scss | 2 +- src/components/Tabs/Contact.tsx | 154 ++++++++++++++- src/global.css | 19 ++ src/index.tsx | 8 +- src/schema/FormSchema.ts | 11 ++ 9 files changed, 716 insertions(+), 22 deletions(-) create mode 100644 src/schema/FormSchema.ts diff --git a/package-lock.json b/package-lock.json index a71bb22..497afbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,10 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "react-router-dom": "^6.7.0" + "formik": "^2.2.9", + "react-input-mask": "^2.0.4", + "react-router-dom": "^6.7.0", + "yup": "^0.32.11" } }, "node_modules/@adobe/css-tools": { @@ -3814,6 +3817,12 @@ "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==", + "dev": true + }, "node_modules/@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -7971,6 +7980,45 @@ "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==", + "dev": true, + "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==", + "dev": true, + "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==", + "dev": true + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -8346,6 +8394,21 @@ "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==", + "dev": true, + "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==", + "dev": true + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -8716,6 +8779,15 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dev": true, + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -11416,6 +11488,12 @@ "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==", + "dev": true + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -11741,6 +11819,12 @@ "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==", + "dev": true + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -13643,6 +13727,12 @@ "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==", + "dev": true + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -13952,6 +14042,26 @@ "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==", + "dev": true + }, + "node_modules/react-input-mask": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", + "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==", + "dev": true, + "dependencies": { + "invariant": "^2.2.4", + "warning": "^4.0.2" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-dom": ">=0.14.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15527,6 +15637,12 @@ "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==", + "dev": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -15559,6 +15675,12 @@ "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==", + "dev": true + }, "node_modules/tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -15935,6 +16057,15 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -16859,6 +16990,24 @@ "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==", + "dev": true, + "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": { @@ -19451,6 +19600,12 @@ "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==", + "dev": true + }, "@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -22524,6 +22679,35 @@ "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==", + "dev": true, + "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==", + "dev": true + }, + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true + } + } + }, "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -22782,6 +22966,23 @@ "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==", + "dev": true, + "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==", + "dev": true + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -23056,6 +23257,15 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dev": true, + "requires": { + "loose-envify": "^1.0.0" + } + }, "ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -24995,6 +25205,12 @@ "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==", + "dev": true + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -25240,6 +25456,12 @@ "thunky": "^1.0.2" } }, + "nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==", + "dev": true + }, "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -26424,6 +26646,12 @@ } } }, + "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==", + "dev": true + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -26646,6 +26874,22 @@ "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==", + "dev": true + }, + "react-input-mask": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", + "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==", + "dev": true, + "requires": { + "invariant": "^2.2.4", + "warning": "^4.0.2" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -27801,6 +28045,12 @@ "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==", + "dev": true + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -27824,6 +28074,12 @@ "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==", + "dev": true + }, "tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -28100,6 +28356,15 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -28817,6 +29082,21 @@ "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==", + "dev": true, + "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" + } } } } diff --git a/package.json b/package.json index c37a47d..9dc3bbb 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,9 @@ ] }, "devDependencies": { - "react-router-dom": "^6.7.0" + "formik": "^2.2.9", + "react-input-mask": "^2.0.4", + "react-router-dom": "^6.7.0", + "yup": "^0.32.11" } } diff --git a/src/components/Content/Content.scss b/src/components/Content/Content.scss index 1e4e9ed..465d20b 100644 --- a/src/components/Content/Content.scss +++ b/src/components/Content/Content.scss @@ -6,6 +6,7 @@ .tabs { display: flex; + width: 28%; ul { margin: 0; @@ -15,6 +16,7 @@ .tab-items { display: flex; flex-direction: column; + width: -webkit-fill-available; list-style: none; border-right: 1px solid black; @@ -27,6 +29,7 @@ font-size: 16px; line-height: 19px; color: #7d7d7d; + cursor: pointer; } .tab-active { @@ -43,7 +46,7 @@ .tab-view { display: flex; - width: 100%; + width: 70%; padding-left: 30px; h2, @@ -67,6 +70,240 @@ font-size: 13px; line-height: 15px; color: #7d7d7d; + + .contact { + width: 100%; + } + // Formulario + + .form { + width: 100%; + } + + .form-input { + display: flex; + flex-direction: column; + margin-bottom: 12px; + position: relative; + + .form-label { + padding-left: 15px; + margin-bottom: 12px; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: #100d0e; + } + + .form-field { + width: auto; + background: #ffffff; + border: 1px solid #100d0e; + border-radius: 25px; + padding: 15px 20px; + + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + .form-field::-webkit-input-placeholder { + color: #b9b7b7; + } + + .form-invalid-feedback { + position: absolute; + right: 15px; + top: 13px; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-align: right; + color: #ff0000; + } + } + + .termos-condicoes { + width: 100%; + text-align: center; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-decoration: underline; + color: #100d0e; + + .required { + color: #ff0000; + } + } + + .btn-submit-form { + width: 100%; + justify-content: center; + padding: 15px 0; + margin-top: 12px; + background: #000000; + border-radius: 25px; + text-transform: uppercase; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + display: flex; + align-items: center; + letter-spacing: 0.05em; + color: #ffffff; + cursor: pointer; + } + } + } +} + +// Telas maiores + +@media screen and (min-width: 2000px) { + .content { + .tabs { + .tab-items { + .tab-item { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 38px; + color: #7d7d7d; + } + + .tab-active { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + font-size: 32px; + line-height: 38px; + color: #ffffff; + } + } + } + + .tab-view { + .tab-view-title { + font-family: "Roboto"; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 56px; + color: #292929; + } + + .tab-view-content { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 26px; + line-height: 30px; + color: #7d7d7d; + + // Formulario + + .form-input { + display: flex; + flex-direction: column; + margin-bottom: 12px; + position: relative; + + .form-label { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + color: #100d0e; + } + + .form-field { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + width: auto; + background: #ffffff; + border: 1px solid #100d0e; + } + + .form-invalid-feedback { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + text-align: right; + } + } + + .termos-condicoes { + width: 100%; + text-align: center; + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + + .required { + color: #ff0000; + } + } + + .btn-submit-form { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 38px; + /* identical to box height */ + + display: flex; + align-items: center; + letter-spacing: 0.05em; + cursor: pointer; + } + } + } + } +} + +// Tablet <= 1024 +@media screen and (max-width: 1024px) { + .content { + flex-direction: column; + margin: 40px 16px; + + .tabs { + width: 100%; + + .tab-items { + border-right: 0px solid black; + } + } + + .tab-view { + width: 100%; + padding-left: 0px; + margin-top: 30px; + z-index: -1; + + .tab-view-title { + text-align: center; + } } } } diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index 491e402..aa846cd 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -95,16 +95,14 @@ const Content = () => { function TabContent() { return ( -
- - }> - }> - }> - }> - }> - }> - -
+ + }> + }> + }> + }> + }> + }> + ); } export { Content }; diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 55afd85..07b090a 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -224,7 +224,7 @@ header { background: rgba(69, 69, 69, 0.7); position: absolute; top: 0; - height: 100%; + height: 1500px; width: 100%; .side-menu { diff --git a/src/components/Tabs/Contact.tsx b/src/components/Tabs/Contact.tsx index 7e88626..089f96d 100644 --- a/src/components/Tabs/Contact.tsx +++ b/src/components/Tabs/Contact.tsx @@ -1,9 +1,157 @@ import React from "react"; +import { Formik, Form, Field, ErrorMessage } from "formik"; +import FormSchema from "../../schema/FormSchema"; +const InputMask = require("react-input-mask"); + +interface IFormikValues { + name: string; + email: string; + cpf: string; + dataNasc: string; + phone: string; + instagram: string; +} +const initialValues = { + name: "", + email: "", + cpf: "", + dataNasc: "", + phone: "", + instagram: "", +}; + const Contact = () => { + const handleFormikSubmit = (values: IFormikValues) => { + console.log(values); + }; return ( -
-

Contato

-
+
+

Preencha o formulário

+
+ +
+ {/* NOME */} +
+ + + +
+ + {/* EMAIL */} +
+ + + +
+ + {/* CPF */} +
+ + + +
+ + {/* DATA DE NASCIMENTO */} +
+ + + +
+ + {/* TELEFONE */} +
+ + + +
+ + {/* INSTAGRAM */} +
+ + +
+
+ + +
+ + +
+ +
); }; diff --git a/src/global.css b/src/global.css index e12dfe3..aa275a1 100644 --- a/src/global.css +++ b/src/global.css @@ -30,3 +30,22 @@ h1 { .title { margin: 80px auto; } + +@media screen and (max-width: 1024px) { + .title { + margin-top: 80px auto 40px; + } +} + +@media screen and (min-width: 2000px) { + h1 { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + font-size: 48px; + line-height: 56px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #292929; + } +} diff --git a/src/index.tsx b/src/index.tsx index 2f93372..2f8fa91 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,9 +8,7 @@ const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( - - - - - + + + ); diff --git a/src/schema/FormSchema.ts b/src/schema/FormSchema.ts new file mode 100644 index 0000000..92d94e8 --- /dev/null +++ b/src/schema/FormSchema.ts @@ -0,0 +1,11 @@ +import * as Yup from "yup"; + +export default Yup.object().shape({ + name: Yup.string() + .min(3, "*Insira no mínimo 3 caracteres") + .required("*Campo obrigatório"), + email: Yup.string().required("*Campo obrigatório").email("*Email inválido"), + cpf: Yup.string().required("*Campo obrigatório"), + dataNasc: Yup.string().required("*Campo obrigatório"), + phone: Yup.string().required("*Campo obrigatório"), +});