diff --git a/pagina-institucional/package-lock.json b/pagina-institucional/package-lock.json index c8b9b90..e9ee301 100644 --- a/pagina-institucional/package-lock.json +++ b/pagina-institucional/package-lock.json @@ -15,6 +15,7 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", @@ -7990,6 +7991,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", @@ -8390,6 +8427,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", @@ -11473,6 +11523,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", @@ -14017,6 +14072,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", @@ -15601,6 +15661,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", @@ -22628,6 +22693,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", @@ -22899,6 +22990,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", @@ -25122,6 +25228,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", @@ -26778,6 +26889,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", @@ -27939,6 +28055,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", diff --git a/pagina-institucional/package.json b/pagina-institucional/package.json index 0b466b9..62b6953 100644 --- a/pagina-institucional/package.json +++ b/pagina-institucional/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", diff --git a/pagina-institucional/src/assets/Boleto.svg b/pagina-institucional/src/assets/Boleto.svg new file mode 100644 index 0000000..c944f09 --- /dev/null +++ b/pagina-institucional/src/assets/Boleto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/Diners.svg b/pagina-institucional/src/assets/Diners.svg new file mode 100644 index 0000000..8effa40 --- /dev/null +++ b/pagina-institucional/src/assets/Diners.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/Elo.svg b/pagina-institucional/src/assets/Elo.svg new file mode 100644 index 0000000..8b8ca16 --- /dev/null +++ b/pagina-institucional/src/assets/Elo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/Hiper.svg b/pagina-institucional/src/assets/Hiper.svg new file mode 100644 index 0000000..fc14eb4 --- /dev/null +++ b/pagina-institucional/src/assets/Hiper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/Master.svg b/pagina-institucional/src/assets/Master.svg new file mode 100644 index 0000000..3514a31 --- /dev/null +++ b/pagina-institucional/src/assets/Master.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/Pagseguro.svg b/pagina-institucional/src/assets/Pagseguro.svg new file mode 100644 index 0000000..d049c00 --- /dev/null +++ b/pagina-institucional/src/assets/Pagseguro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/Visa.svg b/pagina-institucional/src/assets/Visa.svg new file mode 100644 index 0000000..2ac3633 --- /dev/null +++ b/pagina-institucional/src/assets/Visa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/m3footer.svg b/pagina-institucional/src/assets/m3footer.svg new file mode 100644 index 0000000..07c5257 --- /dev/null +++ b/pagina-institucional/src/assets/m3footer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/pagina-institucional/src/assets/vtex-pci-200.svg b/pagina-institucional/src/assets/vtex-pci-200.svg new file mode 100644 index 0000000..73e2dc8 --- /dev/null +++ b/pagina-institucional/src/assets/vtex-pci-200.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pagina-institucional/src/assets/vtex.svg b/pagina-institucional/src/assets/vtex.svg new file mode 100644 index 0000000..985ebc4 --- /dev/null +++ b/pagina-institucional/src/assets/vtex.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/pagina-institucional/src/components/Footer/FooterBottom.tsx b/pagina-institucional/src/components/Footer/FooterBottom.tsx index 1d8d3d3..a06b0b6 100644 --- a/pagina-institucional/src/components/Footer/FooterBottom.tsx +++ b/pagina-institucional/src/components/Footer/FooterBottom.tsx @@ -1,8 +1,48 @@ import React from "react"; +import master from "../../../src/assets/Master.svg"; +import visa from "../../../src/assets/Visa.svg"; +import diners from "../../../src/assets/Diners.svg"; +import elo from "../../../src/assets/Elo.svg"; +import hiper from "../../../src/assets/Hiper.svg"; +import pagseguro from "../../../src/assets/Pagseguro.svg"; +import boleto from "../../../src/assets/Boleto.svg"; +import vtexpci from "../../../src/assets/vtex-pci-200.svg"; +import vtex from "../../../src/assets/vtex.svg"; +import m3 from "../../../src/assets/m3footer.svg"; +import styles from "../../style/FooterBottom.module.scss"; const FooterBottom = () => { return ( -
+
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor +

+
+ +
+
+ logo mastercard + logo visa + logo mastercard + logo mastercard + logo mastercard + logo mastercard + logo mastercard +

____

+ logo mastercard +
+
+ +
+

Powered by

+ logo vtex +

Developed by

+ logo m3 +
+
); }; diff --git a/pagina-institucional/src/components/FormCustom.tsx b/pagina-institucional/src/components/FormCustom.tsx new file mode 100644 index 0000000..c0150b7 --- /dev/null +++ b/pagina-institucional/src/components/FormCustom.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; +import styles from "../style/Main.module.scss"; + +interface IFormikValues { + name: string; + email: string; +} + +const initialValues = { + name: "", + email: "", +}; + +const FormCustom = () => { + const handleFormikSubmit = (values: IFormikValues) => {}; + return ( +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+
+
+ ); +}; + +export { FormCustom }; diff --git a/pagina-institucional/src/components/Main.tsx b/pagina-institucional/src/components/Main.tsx index a6c8800..b1b184d 100644 --- a/pagina-institucional/src/components/Main.tsx +++ b/pagina-institucional/src/components/Main.tsx @@ -2,6 +2,7 @@ import React from "react"; import AccordionMenu from "../components/AccordionMenu"; import styles from "../style/Main.module.scss"; import { MenuInfo } from "../components/MenuInfo"; +import { FormCustom } from "../components/FormCustom"; const items = [ { @@ -54,7 +55,7 @@ const items = [ content: (

Contato

- +
), }, diff --git a/pagina-institucional/src/style/FooterBottom.module.scss b/pagina-institucional/src/style/FooterBottom.module.scss new file mode 100644 index 0000000..bd5afd8 --- /dev/null +++ b/pagina-institucional/src/style/FooterBottom.module.scss @@ -0,0 +1,62 @@ +.footer_wrapper { + background: #000; + color: white; + + .footerBox { + display: flex; + justify-content: space-between; + margin: 0 0 0 100px; + max-width: 80%; + } + + .footerText { + width: 234px; + height: 24px; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + color: #ffffff; + } + + .footerLogos, + figure { + display: flex; + gap: 12px; + } + + .footerRisco { + transform: rotate(90deg); + margin: 0; + width: 24px; + } + + .FooterName { + display: flex; + gap: 13px; + } + + .footerdeveloped { + width: 44.92px; + } + + .footerdevelopedm3 { + width: 28.66px; + } + + .footerDevLogo { + width: 53px; + height: 12px; + font-style: normal; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: capitalize; + align-items: center; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } +}