Merge pull request 'develop' (#24 ) from develop into main

Reviewed-on: #24
Merge pull request 'feat(error-message): concerta mensagem de erro na validação do checkbox em resolução desktop' (#23 ) from feature/error-message into develop
2023-01-19 23:22:53 +00:00 · 2023-01-19 23:15:08 +00:00 · 2023-01-19 20:13:59 -03:00 · 2023-01-19 22:49:02 +00:00 · 2023-01-19 19:46:06 -03:00 · 2023-01-19 22:14:07 +00:00
28 changed files with 1586 additions and 2 deletions
--- a/README.md
+++ b/README.md
@ -2,12 +2,22 @@

 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

+## About
+
+This project is an institutional page, with a mobile sidebar 'menu
+hamburger', contact form with formik, accordion menu in the footer, input validation using yup and route navigation with no need to reload the page!
+
+Este Projeto é uma página institucional, com 'menu hamburguer' mobile, formulário de contato com formik, menu acordeon no footer, validação de inputs utilizando yup e navegação por rotas sem necessidade de reload da página!
+
 ## Available Scripts

 In the project directory, you can run:

 ### `npm start`

+Rode o projeto no modo de desenvolvimento. \
+Abra [http://localhost:3000](http://localhost:3000) para ve-lo no navegador.
+
 Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

@ -44,3 +54,19 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

 To learn React, check out the [React documentation](https://reactjs.org/).
+
+## Libraries that I used
+
+React
+react-dom
+react-router-dom
+typescript
+sass
+react-headless-accordion
+Classnames
+Formik
+Yup
+
+## Node version
+
+node: ^16.18.11
--- a/package-lock.json
+++ b/package-lock.json
@ -16,11 +16,14 @@
        "@types/react": "^18.0.26",
        "@types/react-dom": "^18.0.10",
        "classnames": "^2.3.2",
+        "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": {
        "react-headless-accordion": "^1.0.2",
@ -3079,6 +3082,14 @@
        }
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -3806,6 +3817,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",
@ -7968,6 +7984,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",
@ -8343,6 +8395,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",
@ -11414,6 +11479,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",
@ -11739,6 +11809,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",
@ -13641,6 +13716,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",
@ -13950,6 +14030,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-headless-accordion": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
@ -13972,6 +14057,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",
@ -15503,6 +15618,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",
@ -15535,6 +15655,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",
@ -16835,6 +16960,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": {
@ -18881,6 +19023,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",
@ -19421,6 +19568,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",
@ -22499,6 +22651,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",
@ -22757,6 +22935,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",
@ -24971,6 +25164,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",
@ -25216,6 +25414,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",
@ -26400,6 +26603,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",
@ -26622,6 +26830,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-headless-accordion": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
@ -26639,6 +26852,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",
@ -27766,6 +27996,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",
@ -27789,6 +28024,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",
@ -28782,6 +29022,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"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -11,11 +11,14 @@
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "classnames": "^2.3.2",
+    "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",
--- a/src/assets/svgs/home.svg
+++ b/src/assets/svgs/home.svg
@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3715_5676)">
+<path d="M15.8327 7.59562L14.6904 6.4533L8.40443 0.167326C8.1813 -0.0557753 7.81954 -0.0557753 7.59641 0.167326L1.3104 6.4533L0.167503 7.59623C-0.0517478 7.82324 -0.0454864 8.185 0.181532 8.40425C0.402993 8.61814 0.754068 8.61814 0.975529 8.40425L1.14238 8.23623V15.4285C1.14238 15.7442 1.39823 16 1.71384 16H14.2858C14.6014 16 14.8573 15.7442 14.8573 15.4285V8.23623L15.0247 8.40368C15.2517 8.62293 15.6135 8.61664 15.8327 8.38965C16.0466 8.16819 16.0466 7.81708 15.8327 7.59562ZM9.71421 14.8571H6.28549V10.2855H9.71421V14.8571ZM13.7144 14.8571H10.8571V9.71403C10.8571 9.39841 10.6013 9.14256 10.2856 9.14256H5.71403C5.39841 9.14256 5.14256 9.39841 5.14256 9.71403V14.8571H2.28531V7.09334L7.99982 1.3788L13.7144 7.09334V14.8571Z" fill="#C4C4C4"/>
+</g>
+<defs>
+<clipPath id="clip0_3715_5676">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/svgs/seta-para-cima.svg
+++ b/src/assets/svgs/seta-para-cima.svg
@ -0,0 +1,3 @@
+<svg width="25" height="13" viewBox="0 0 25 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7428 11.3959C23.741 11.6959 23.6177 11.9953 23.373 12.226L23.3728 12.2261C22.8668 12.7035 22.037 12.7035 21.5311 12.2261L21.5232 12.2345L21.5311 12.2261L12.3457 3.5599L12.0712 3.30091L11.7967 3.5599L2.61178 12.2258C2.10549 12.7033 1.27571 12.7032 0.769767 12.2259L0.769708 12.2258C0.525704 11.9957 0.402467 11.6972 0.400037 11.398C0.401876 11.0981 0.525111 10.7986 0.769782 10.5678L0.769785 10.5678L11.1506 0.773762C11.4013 0.537307 11.7333 0.415846 12.0712 0.415846C12.4093 0.415846 12.7415 0.537566 12.9922 0.773969L23.3728 10.568L23.3729 10.5681C23.6171 10.7983 23.7403 11.0968 23.7428 11.3959Z" fill="white" stroke="white" stroke-width="0.8"/>
+</svg>
--- a/src/assets/svgs/seta.svg
+++ b/src/assets/svgs/seta.svg
@ -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.1162 3.60396L1.67632 0.164193C1.45751 -0.0547314 1.10273 -0.0547314 0.884018 0.164193C0.665288 0.382921 0.665288 0.737679 0.884018 0.95639L3.92778 4.00006L0.884106 7.04362C0.665377 7.26244 0.665377 7.61716 0.884106 7.83589C1.10284 8.0547 1.45759 8.0547 1.67641 7.83589L5.11629 4.39607C5.22566 4.28665 5.28028 4.1434 5.28028 4.00008C5.28028 3.85668 5.22555 3.71332 5.1162 3.60396Z" fill="#C4C4C4"/>
+</svg>
--- a/src/assets/svgs/whatsapp.svg
+++ b/src/assets/svgs/whatsapp.svg
@ -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_5917)">
+<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_5917">
+<rect width="34" height="34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/MainContent.tsx
+++ b/src/components/MainContent.tsx
@ -0,0 +1,73 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+import style from "./main-content.module.scss";
+
+import { Sobre } from "../components/main/components/Sobre";
+import { FormasDePagamento } from "../components/main/components/FormasDePagamento";
+import { Entrega } from "../components/main/components/Entrega";
+import { TrocaEDevolucao } from "../components/main/components/TrocaEDevolucao";
+import { SegurancaEPrivacidade } from "../components/main/components/SegurancaEPrivacidade";
+import { Contato } from "../components/main/components/Contato";
+
+import home from "../assets/svgs/home.svg";
+import seta from "../assets/svgs/seta.svg";
+import whats from "../assets/svgs/whatsapp.svg";
+import setaCima from "../assets/svgs/seta-para-cima.svg";
+
+const MainContent = () => {
+  return (
+    <main className={style["main-content-container"]}>
+      <section className={style["main-content-top-container"]}>
+        <div className={style["main-content-bread-wrapper"]}>
+          <a href="/">
+            <img src={home} alt="Home" />
+          </a>
+
+          <figure>
+            <img src={seta} alt="Seta" />
+          </figure>
+          <span>institucional</span>
+        </div>
+        <div className={style["main-content-title-wrapper"]}>
+          <h1>institucional</h1>
+        </div>
+      </section>
+      <Router>
+        <Routes>
+          <Route path="/" element={<Sobre />} />
+          <Route path="/sobre" element={<Sobre />} />
+          <Route path="/forma-de-pagamento" element={<FormasDePagamento />} />
+          <Route path="/entrega" element={<Entrega />} />
+          <Route path="/troca-e-devolucao" element={<TrocaEDevolucao />} />
+          <Route
+            path="/seguranca-e-privacidade"
+            element={<SegurancaEPrivacidade />}
+          />
+          <Route path="/contato" element={<Contato />} />
+        </Routes>
+      </Router>
+
+      <a
+        className={style["main-link-topButton"]}
+        href="https://api.whatsapp.com/send/?phone=%2B5522997240484&text&type=phone_number&app_absent=0"
+        target="_blank"
+      >
+        <img
+          className={style["main-whatssap-link"]}
+          src={whats}
+          alt="Whatsapp"
+        />
+      </a>
+      <a className={style["main-link-topButton"]} href="#">
+        <img
+          className={style["main-content-backToTop"]}
+          src={setaCima}
+          alt="Volte ao Topo"
+        />
+      </a>
+    </main>
+  );
+};
+
+export { MainContent };
--- a/src/components/Newsletter.tsx
+++ b/src/components/Newsletter.tsx
@ -0,0 +1,60 @@
+import React from "react";
+import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
+import style from "./newsletter.module.scss";
+import NewsletterSchema from "../schema/NewsletterSchema";
+
+interface INewsletter {
+  newsletter: string;
+}
+
+const initialValues = {
+  newsletter: "",
+};
+
+const Newsletter = () => {
+  const handleSubmit = (values: INewsletter) => {
+    console.log(values);
+  };
+  return (
+    <section className={style["newsletter-container"]}>
+      <div className={style["newsletter-wrapper"]}>
+        <h2 className={style["newsletter-title"]}>Assine nossa Newsletter</h2>
+
+        <Formik
+          onSubmit={handleSubmit}
+          initialValues={initialValues}
+          validationSchema={NewsletterSchema}
+        >
+          {({ errors, touched }) => (
+            <Form className={style["newsletter-form"]}>
+              <div className={style["newsletter-form-wrapper"]}>
+                <div className={style["newsletter-input"]}>
+                  <Field
+                    id="newsletter"
+                    name="newsletter"
+                    placeholder="E-mail"
+                  />
+                  <ErrorMessage
+                    component="span"
+                    name="newsletter"
+                    className={
+                      errors.newsletter && touched.newsletter
+                        ? style["form-feedback"]
+                        : ""
+                    }
+                  />
+                </div>
+
+                <button className={style["newsletter-button"]} type="submit">
+                  ENVIAR
+                </button>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </section>
+  );
+};
+
+export { Newsletter };
--- a/src/components/footer-bottom.module.scss
+++ b/src/components/footer-bottom.module.scss
@ -5,6 +5,10 @@
  height: 64px;
  background: variables.$color-black;

+  @media screen and (min-width: 2500px) {
+    height: 96px;
+  }
+
  @media screen and (max-width: 1024px) {
    height: 134px;
  }
@ -37,8 +41,14 @@
      text-transform: capitalize;
      color: variables.$color-white;

+      @media screen and (min-width: 2500px) {
+        font-size: 20px;
+        line-height: 23px;
+      }
+
      @media screen and (max-width: 1024px) {
        order: 1;
+        width: 100%;
      }
    }

@ -52,6 +62,13 @@

      @media screen and (max-width: 1024px) {
        justify-content: flex-start;
+        width: 100%;
+      }
+
+      .creditcard {
+        @media screen and (min-width: 2500px) {
+          height: 40px;
+        }
      }

      .footer-line {
@ -59,6 +76,12 @@
        border: 1px solid variables.$color-grey;
        transform: rotate(90deg);
      }
+
+      .vtex-certified {
+        @media screen and (min-width: 2500px) {
+          height: 66px;
+        }
+      }
    }

    .footer-copyright {
@ -71,6 +94,15 @@
      @media screen and (max-width: 1024px) {
        justify-content: flex-start;
        order: 2;
+        width: 100%;
+      }
+
+      a {
+        img {
+          @media screen and (min-width: 2500px) {
+            height: 30px;
+          }
+        }
      }

      span {
@ -78,7 +110,13 @@
        font-size: 10px;
        line-height: 12px;
        text-transform: capitalize;
+        white-space: nowrap;
        color: variables.$color-white;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 20px;
+          line-height: 23px;
+        }
      }
    }
  }
--- a/src/components/footer-top.module.scss
+++ b/src/components/footer-top.module.scss
@ -9,6 +9,10 @@
  display: flex;
  position: relative;

+  @media screen and (min-width: 2500px) {
+    height: 297px;
+  }
+
  .footer-wrapper {
    display: flex;
    justify-content: space-between;
@ -90,6 +94,10 @@
      display: flex;
      gap: 121px;

+      @media screen and (min-width: 2500px) {
+        gap: 293px;
+      }
+
      @media screen and (max-width: 1024px) {
        display: none;
      }
@ -105,6 +113,11 @@
          line-height: 16px;
          text-transform: uppercase;
          color: variables.$color-black3;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 28px;
+            line-height: 33px;
+          }
        }

        h4 {
@ -113,6 +126,11 @@
          line-height: 14px;
          text-transform: capitalize;
          color: variables.$color-black3;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 24px;
+            line-height: 28px;
+          }
        }

        a {
@ -122,6 +140,11 @@
          text-transform: capitalize;
          text-decoration: none;
          color: variables.$color-black3;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 24px;
+            line-height: 28px;
+          }
        }
      }
    }
@ -141,6 +164,12 @@
    .footer-social-media-wrapper {
      display: flex;
      gap: 10px;
+
+      img {
+        @media screen and (min-width: 2500px) {
+          height: 70px;
+        }
+      }
    }

    a {
@ -149,6 +178,11 @@
      line-height: 16px;
      text-decoration: none;
      color: variables.$color-black3;
+
+      @media screen and (min-width: 2500px) {
+        font-size: 28px;
+        line-height: 33px;
+      }
    }
  }
 }
--- a/src/components/header-top.module.scss
+++ b/src/components/header-top.module.scss
@ -41,6 +41,10 @@
        border: 0;
        font-size: 0;
        width: 0;
+
+        img {
+          width: auto;
+        }
      }

      .dropdown-menu {
--- a/src/components/main-content.module.scss
+++ b/src/components/main-content.module.scss
@ -0,0 +1,229 @@
+@use "../variables.module.scss";
+
+.main-content-container {
+  width: 100%;
+  background: variables.$color-white;
+  padding: 29px 0 40px 0;
+
+  .main-content-top-container {
+    width: 80.46875%;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+      padding: 0 16px;
+    }
+
+    .main-content-bread-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 9.73px;
+
+      a {
+        img {
+          width: 100%;
+          height: 16px;
+
+          @media screen and (min-width: 2500px) {
+            height: 31.25px;
+          }
+        }
+      }
+
+      figure {
+        img {
+          width: 100%;
+          height: 8px;
+
+          @media screen and (min-width: 2500px) {
+            height: 15.62px;
+          }
+        }
+      }
+
+      span {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: variables.$color-grey;
+        text-transform: uppercase;
+
+        @media screen and (min-width: 2500px) {
+          font-weight: 400;
+          font-size: 24px;
+          line-height: 28px;
+        }
+      }
+    }
+
+    .main-content-title-wrapper {
+      text-align: center;
+      padding: 80px 0;
+
+      h1 {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 28px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: variables.$color-black2;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 48px;
+          line-height: 56px;
+        }
+      }
+
+      @media screen and (max-width: 1024px) {
+        padding: 80px 0 40px 0;
+      }
+    }
+  }
+
+  .main-content-wrapper {
+    width: 80.46875%;
+    display: flex;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+      flex-direction: column;
+    }
+
+    .main-content-list {
+      width: 29.32038%;
+      height: 285px;
+      border-right: 1px solid variables.$color-black;
+
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+        border: 0;
+      }
+
+      .main-content-item {
+        padding: 5px 0 5px 16px;
+
+        @media screen and (max-width: 1024px) {
+          padding: 10px 16px;
+        }
+
+        a {
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 19px;
+          color: variables.$color-grey3;
+          text-decoration: none;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 32px;
+            line-height: 38px;
+          }
+        }
+
+        .selected {
+          display: flex;
+          padding: 10px 16px;
+          background: variables.$color-black;
+          color: variables.$color-white;
+        }
+      }
+    }
+
+    .main-content-text {
+      width: 72.62135%;
+
+      @media screen and (max-width: 1024px) {
+        width: 100%;
+        border: 0;
+      }
+
+      .main-content-text-wrapper {
+        margin-left: 30px;
+
+        @media screen and (max-width: 1024px) {
+          margin-left: 0;
+          padding: 0 16px;
+        }
+      }
+
+      h2 {
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 28px;
+        color: variables.$color-black2;
+        margin-bottom: 12px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 48px;
+          line-height: 56px;
+        }
+
+        @media screen and (max-width: 1024px) {
+          text-align: center;
+        }
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 15px;
+        color: variables.$color-grey3;
+        margin-bottom: 12px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 26px;
+          line-height: 30px;
+
+          margin-bottom: 24px;
+        }
+      }
+    }
+  }
+
+  .main-link-topButton {
+    img {
+      width: auto;
+    }
+
+    .main-whatssap-link,
+    .main-content-backToTop {
+      position: fixed;
+      z-index: 6;
+      right: 16px;
+    }
+
+    .main-whatssap-link {
+      bottom: 220px;
+
+      @media screen and (min-width: 2500px) {
+        height: 66px;
+      }
+
+      @media screen and (max-width: 1024px) {
+        bottom: 90px;
+      }
+    }
+
+    .main-content-backToTop {
+      background: variables.$color-grey;
+      padding: 13px 10px;
+      border-radius: 50%;
+      width: 34px;
+      height: 34px;
+
+      bottom: 180px;
+
+      @media screen and (min-width: 2500px) {
+        width: 66px;
+        height: 66px;
+        padding: 25px 20px;
+
+        bottom: 150px;
+      }
+
+      @media screen and (max-width: 1024px) {
+        bottom: 50px;
+      }
+    }
+  }
+}
--- a/src/components/main/components/Contato.tsx
+++ b/src/components/main/components/Contato.tsx
@ -0,0 +1,21 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+import { MainForm } from "./MainForm";
+
+import style from "../../main-content.module.scss";
+
+const Contato = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Preencha o formulário</h2>
+          <MainForm />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Contato };
--- a/src/components/main/components/Entrega.tsx
+++ b/src/components/main/components/Entrega.tsx
@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const Entrega = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Entrega</h2>
+          <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>
+          <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>
+          <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>
+      </div>
+    </section>
+  );
+};
+
+export { Entrega };
--- a/src/components/main/components/FormasDePagamento.tsx
+++ b/src/components/main/components/FormasDePagamento.tsx
@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const FormasDePagamento = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Formas de Pagamento</h2>
+          <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>
+          <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>
+          <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>
+      </div>
+    </section>
+  );
+};
+
+export { FormasDePagamento };
--- a/src/components/main/components/MainForm.tsx
+++ b/src/components/main/components/MainForm.tsx
@ -0,0 +1,136 @@
+import React from "react";
+import { Field, Form, Formik, ErrorMessage } from "formik";
+
+import style from "../../main/components/main-form.module.scss";
+import FormMainSchema from "../../../schema/FormMainSchema";
+
+interface IFormMain {
+  name: string;
+  email: string;
+  cpf: string;
+  nowDate: string;
+  tel: string;
+  inst: string;
+  check: boolean;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  nowDate: "",
+  tel: "",
+  inst: "",
+  check: false,
+};
+
+const MainForm = () => {
+  return (
+    <section className={style["main-form-container"]}>
+      <Formik
+        onSubmit={(values: IFormMain, { resetForm }) => {
+          console.log(values);
+          resetForm();
+          console.log("blah");
+        }}
+        initialValues={initialValues}
+        validationSchema={FormMainSchema}
+      >
+        {({ errors, touched, isSubmitting }) => (
+          <Form className={style["main-form"]}>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="name">Nome</label>
+              <Field id="name" name="name" placeholder="Seu nome completo" />
+              <ErrorMessage
+                component="span"
+                name="name"
+                className={errors.name && touched ? style["form-feedback"] : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="email">E-mail</label>
+              <Field id="email" name="email" placeholder="Seu e-mail" />
+              <ErrorMessage
+                component="span"
+                name="email"
+                className={
+                  errors.email && touched ? style["form-feedback"] : ""
+                }
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="cpf">CPF</label>
+              <Field id="cpf" name="cpf" placeholder="000.000.000-00" />
+              <ErrorMessage
+                component="span"
+                name="cpf"
+                className={errors.cpf && touched ? style["form-feedback"] : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="nowDate">Data de Nascimento:</label>
+              <Field
+                type="date"
+                id="nowDate"
+                name="nowDate"
+                placeholder="00.00.0000"
+              />
+              <ErrorMessage
+                component="span"
+                name="date"
+                className={
+                  errors.nowDate && touched ? style["form-feedback"] : ""
+                }
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="tel">Telefone:</label>
+              <Field id="tel" name="tel" placeholder="(00) 00000-0000" />
+              <ErrorMessage
+                component="span"
+                name="tel"
+                className={errors.tel && touched ? style["form-feedback"] : ""}
+              />
+            </div>
+            <div className={style["main-form-item-wrapper"]}>
+              <label htmlFor="inst">Instagram</label>
+              <Field id="inst" name="inst" placeholder="@seuuser" />
+              <ErrorMessage
+                component="span"
+                name="inst"
+                className={errors.inst && touched ? style["form-feedback"] : ""}
+              />
+            </div>
+
+            <div className={style["main-form-checkbox"]}>
+              <label htmlFor="check">
+                <span className={style["main-form-dot"]}>* </span>
+                <span className={style["main-form-span"]}>
+                  Declaro que li e aceito
+                </span>
+                <Field type="checkbox" id="check" name="check" />
+                <ErrorMessage
+                  component="span"
+                  name="check"
+                  className={
+                    errors.check && touched ? style["form-feedback"] : ""
+                  }
+                />
+              </label>
+            </div>
+
+            <button
+              className={style["main-form-button"]}
+              type="submit"
+              disabled={isSubmitting}
+            >
+              CADASTRE-SE
+            </button>
+          </Form>
+        )}
+      </Formik>
+    </section>
+  );
+};
+
+export { MainForm };
--- a/src/components/main/components/MainMenu.tsx
+++ b/src/components/main/components/MainMenu.tsx
@ -0,0 +1,79 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import classnames from "classnames";
+
+import style from "../../main-content.module.scss";
+
+const MainMenu = () => {
+  const activeClassName = style["selected"];
+  return (
+    <div className={style["main-content-list"]}>
+      <nav>
+        <ul className={style["teste"]}>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/sobre"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Sobre
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/forma-de-pagamento"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Forma de Pagamento
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/entrega"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Entrega
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/troca-e-devolucao"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Troca e Devolução
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/seguranca-e-privacidade"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Segurança e Privacidade
+            </NavLink>
+          </li>
+          <li className={classnames(style["main-content-item"])}>
+            <NavLink
+              to="/contato"
+              className={({ isActive }) =>
+                isActive ? activeClassName : undefined
+              }
+            >
+              Contato
+            </NavLink>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+};
+
+export { MainMenu };
--- a/src/components/main/components/SegurancaEPrivacidade.tsx
+++ b/src/components/main/components/SegurancaEPrivacidade.tsx
@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const SegurancaEPrivacidade = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Segurança e Privacidade</h2>
+          <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>
+          <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>
+          <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>
+      </div>
+    </section>
+  );
+};
+
+export { SegurancaEPrivacidade };
--- a/src/components/main/components/Sobre.tsx
+++ b/src/components/main/components/Sobre.tsx
@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const Sobre = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Sobre</h2>
+          <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>
+          <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>
+          <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>
+      </div>
+    </section>
+  );
+};
+
+export { Sobre };
--- a/src/components/main/components/TrocaEDevolucao.tsx
+++ b/src/components/main/components/TrocaEDevolucao.tsx
@ -0,0 +1,46 @@
+import React from "react";
+import { MainMenu } from "./MainMenu";
+
+import style from "../../main-content.module.scss";
+
+const TrocaEDevolucao = () => {
+  return (
+    <section className={style["main-content-wrapper"]}>
+      <MainMenu />
+      <div className={style["main-content-text"]}>
+        <div className={style["main-content-text-wrapper"]}>
+          <h2>Troca e Devolução</h2>
+          <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>
+          <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>
+          <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>
+      </div>
+    </section>
+  );
+};
+
+export { TrocaEDevolucao };
--- a/src/components/main/components/main-form.module.scss
+++ b/src/components/main/components/main-form.module.scss
@ -0,0 +1,167 @@
+@use "../../../variables.module.scss";
+
+.main-form-container {
+  width: 100%;
+  height: 650px;
+
+  @media screen and (min-width: 2500px) {
+    height: 900px;
+  }
+
+  .main-form {
+    width: 100%;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+
+    .main-form-item-wrapper {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      label {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: variables.$color-black4;
+
+        margin-left: 15px;
+        margin-bottom: 12px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
+      }
+
+      input {
+        padding: 15px 20px;
+        border: 1px solid variables.$color-black4;
+        border-radius: 25px;
+
+        margin-bottom: 12px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
+      }
+
+      input::placeholder {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: variables.$color-grey6;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
+      }
+
+      .form-feedback {
+        position: absolute;
+        right: 20px;
+        bottom: 60px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: variables.$color-red;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 24px;
+          line-height: 28px;
+
+          bottom: 80px;
+        }
+      }
+    }
+
+    .main-form-checkbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 12px;
+      margin-top: 12px;
+
+      label {
+        display: flex;
+      }
+
+      input {
+        margin-left: 4.28px;
+
+        @media screen and (min-width: 2500px) {
+          width: 35.15px;
+          height: 35.15px;
+        }
+      }
+
+      .main-form-dot,
+      .main-form-span {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 28px;
+          line-height: 33px;
+        }
+      }
+
+      .main-form-dot {
+        color: variables.$color-red;
+      }
+
+      .main-form-span {
+        color: variables.$color-black4;
+        text-decoration: underline;
+      }
+
+      .form-feedback {
+        position: absolute;
+        right: 18%;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: variables.$color-red;
+
+        @media screen and (min-width: 2500px) {
+          font-size: 24px;
+          line-height: 28px;
+
+          right: 15%;
+        }
+
+        @media screen and (max-width: 360px) {
+          display: flex;
+        }
+      }
+    }
+
+    .main-form-button {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 19px;
+      letter-spacing: 0.05em;
+      color: variables.$color-white;
+
+      outline: 0;
+      border: 0;
+      padding: 17px 0;
+
+      background: variables.$color-black;
+      border-radius: 25px;
+
+      @media screen and (min-width: 2500px) {
+        font-size: 32px;
+        line-height: 38px;
+      }
+
+      @media screen and (max-width: 360px) {
+        margin-top: 4px;
+      }
+    }
+  }
+}
--- a/src/components/newsletter.module.scss
+++ b/src/components/newsletter.module.scss
@ -0,0 +1,151 @@
+@use "../variables.module.scss";
+
+.newsletter-container {
+  width: 100%;
+  height: 104px;
+  border-top: 1px solid variables.$color-black;
+  background: variables.$color-white;
+
+  @media screen and (min-width: 2500px) {
+    height: 141.24px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    height: auto;
+  }
+
+  .newsletter-form {
+    width: 100%;
+  }
+
+  .newsletter-wrapper {
+    width: 36.40625%;
+    padding: 16px 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-direction: column;
+    margin: 0 auto;
+
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+      padding: 16px;
+    }
+
+    .newsletter-title {
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: variables.$color-black3;
+
+      margin-bottom: 8px;
+
+      @media screen and (min-width: 2500px) {
+        font-size: 36px;
+        line-height: 42px;
+      }
+
+      @media screen and (max-width: 1024px) {
+        font-size: 14px;
+        line-height: 16px;
+
+        margin-bottom: 16px;
+      }
+    }
+
+    .newsletter-form-wrapper {
+      display: flex;
+      justify-content: flex-start;
+      gap: 8px;
+
+      @media screen and (max-width: 1024px) {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .newsletter-input {
+        position: relative;
+
+        input {
+          width: 100%;
+          min-width: 340px;
+          height: 42px;
+          padding: 13px 16px;
+          border: 1px solid variables.$color-grey2;
+          border-radius: 4px;
+
+          @media screen and (min-width: 2500px) {
+            min-width: 668px;
+
+            font-size: 28px;
+            line-height: 33px;
+          }
+
+          @media screen and (max-width: 1024px) {
+            min-width: 100%;
+          }
+        }
+
+        input::placeholder {
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          color: variables.$color-grey;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 28px;
+            line-height: 33px;
+          }
+        }
+
+        .form-feedback {
+          position: absolute;
+          right: -30px;
+          bottom: 45px;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 14px;
+          color: variables.$color-red;
+
+          @media screen and (min-width: 2500px) {
+            font-size: 24px;
+            line-height: 28px;
+
+            right: -95px;
+          }
+        }
+      }
+
+      .newsletter-button {
+        width: 126px;
+        height: 42px;
+        padding: 14px 20px;
+        outline: 0;
+        border: 0;
+        background: variables.$color-black;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 4px;
+
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 14px;
+        text-align: center;
+        letter-spacing: 0.05em;
+        color: variables.$color-white;
+
+        @media screen and (min-width: 2500px) {
+          width: 246px;
+
+          font-size: 24px;
+        }
+
+        @media screen and (max-width: 1024px) {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
--- a/src/globals.module.scss
+++ b/src/globals.module.scss
@ -34,4 +34,6 @@ li {

 img {
  display: block;
+  width: 100%;
+  object-fit: contain;
 }
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -4,12 +4,16 @@ import { HeaderTop } from "../components/HeaderTop";
 import { HeaderBottom } from "../components/HeaderBottom";
 import { FooterBottom } from "../components/FooterBottom";
 import { FooterTop } from "../components/FooterTop";
+import { Newsletter } from "../components/Newsletter";
+import { MainContent } from "../components/MainContent";

 function Home() {
  return (
    <div className="App">
      <HeaderTop />
      <HeaderBottom />
+      <MainContent />
+      <Newsletter />
      <FooterTop />
      <FooterBottom />
    </div>
--- a/src/schema/FormMainSchema.ts
+++ b/src/schema/FormMainSchema.ts
@ -0,0 +1,37 @@
+import * as Yup from "yup";
+
+const getFormatedDate = (currentDate: string) => {
+  return currentDate.split("/").reverse().join("-");
+};
+
+const getFormatedCPF = (currentCPF: string) => {
+  return currentCPF.split(".").reverse().join("-");
+};
+
+const getFormatedTel = (currentTel: string) => {
+  return currentTel.split("()").reverse().join("-");
+};
+
+const getFormatedInst = (currentInst: string) => {
+  return currentInst.split("@").join("@");
+};
+
+export default Yup.object().shape({
+  name: Yup.string()
+    .min(2, "Nome deve conter pelo menos 2 letras!")
+    .required("*Campo Obrigatório"),
+  email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
+  cpf: Yup.string()
+    .min(11, getFormatedCPF("111.111.111-11"))
+    .required("*Campo Obrigatório"),
+  nowDate: Yup.date()
+    .max(8, getFormatedDate(new Date().toLocaleDateString()))
+    .required("*Campo Obrigatório"),
+  tel: Yup.string()
+    .required("*Campo Obrigatório")
+    .min(11, getFormatedTel("(22)99999-9999")),
+  inst: Yup.string().min(3, getFormatedInst("@seuuser")).notRequired(),
+  check: Yup.boolean()
+    .oneOf([true], "Você deve aceitar os termos!")
+    .required("*Campo Obrigatório"),
+});
--- a/src/schema/NewsletterSchema.ts
+++ b/src/schema/NewsletterSchema.ts
@ -0,0 +1,7 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  newsletter: Yup.string()
+    .required("*Campo Obrigatório")
+    .email("Email inválido"),
+});
--- a/src/variables.module.scss
+++ b/src/variables.module.scss
@ -9,6 +9,7 @@ $font-primary: "Roboto", sans-serif;
 $color-black: #000000;
 $color-black2: #292929;
 $color-black3: #303030;
+$color-black4: #100d0e;

 $color-white: #ffffff;

@ -17,6 +18,7 @@ $color-grey2: #e5e5e5;
 $color-grey3: #7d7d7d;
 $color-grey4: #f2f2f2;
 $color-grey5: #c6c6c6;
+$color-grey6: #b9b7b7;

 $color-red: #ff0000;
Author	SHA1	Message	Date
Manuela Luana Schumacker Tavares	14ebb33d5c	Merge pull request 'develop' (#24 ) from develop into main Reviewed-on: #24	2023-01-19 23:22:53 +00:00
Manuela Luana Schumacker Tavares	2e15340fef	Merge pull request 'feat(error-message): concerta mensagem de erro na validação do checkbox em resolução desktop' (#23 ) from feature/error-message into develop Reviewed-on: #23	2023-01-19 23:15:08 +00:00
ManuelaLuanaSchumackerTavares	5d2345ff79	feat(error-message): concerta mensagem de erro na validação do checkbox em resolução desktop	2023-01-19 20:13:59 -03:00
Manuela Luana Schumacker Tavares	e1866af5df	Merge pull request 'feat(form): Torna os avisos de campo obrigatório responsivos para telas maiores de 2500px' (#22 ) from feature/all-form-responsive-big-screen into develop Reviewed-on: #22	2023-01-19 22:49:02 +00:00
ManuelaLuanaSchumackerTavares	0d7f1da5c8	feat(form): Torna os avisos de campo obrigatório responsivos para telas maiores de 2500px	2023-01-19 19:46:06 -03:00
Manuela Luana Schumacker Tavares	e978734dd3	Merge pull request 'feat(footer-top): Torna o footer top responsivo para telas maiores que 2500px' (#21 ) from feature/footer-top-responsive-big-screen into develop Reviewed-on: #21	2023-01-19 22:14:07 +00:00
ManuelaLuanaSchumackerTavares	26b5c30524	feat(footer-top): Torna o footer top responsivo para telas maiores que 2500px	2023-01-19 19:11:09 -03:00
Manuela Luana Schumacker Tavares	bad04a2938	Merge pull request 'feat(footer-bottom): Torna footer bottom responsivo para telas maiores que 2500px' (#20 ) from feature/footer-bottom-big-screen into develop Reviewed-on: #20	2023-01-19 21:58:57 +00:00
ManuelaLuanaSchumackerTavares	d98ae5f0d3	feat(footer-bottom): Torna footer bottom responsivo para telas maiores que 2500px	2023-01-19 18:57:46 -03:00
Manuela Luana Schumacker Tavares	034da2087a	Merge pull request 'feat(newsletter-responsive): Torna a newsletter responsiva para telas maiores de 2500px' (#19 ) from feature/newsletter-responsive-big-screen into develop Reviewed-on: #19	2023-01-19 21:44:28 +00:00
ManuelaLuanaSchumackerTavares	6700d94f3b	feat(newsletter-responsive): Torna a newsletter responsiva para telas maiores de 2500px	2023-01-19 18:42:58 -03:00
Manuela Luana Schumacker Tavares	b1098e2434	Merge pull request 'feat(main-content): Adapta o conteúdo principal para telas maiores de 2500px' (#18 ) from feature/main-content-responsive-big-screen into develop Reviewed-on: #18	2023-01-19 21:30:12 +00:00
ManuelaLuanaSchumackerTavares	da3ae2baff	feat(main-content): Adapta o conteúdo principal para telas maiores de 2500px	2023-01-19 18:28:30 -03:00
Manuela Luana Schumacker Tavares	43594dee97	Merge pull request 'feat(return-top-button): Adiciona link de volta-ao-topo e link para whatssap' (#17 ) from feature/return-to-top-button into develop Reviewed-on: #17	2023-01-19 21:13:50 +00:00
ManuelaLuanaSchumackerTavares	d4580bd4a5	feat(return-top-button): Adiciona link de volta-ao-topo e link para whatssap	2023-01-19 18:12:39 -03:00
Manuela Luana Schumacker Tavares	f632ee2b06	Merge pull request 'docs(reademe): atualiza Readme com detalhes do projeto' (#16 ) from feature/readme into develop Reviewed-on: #16	2023-01-19 19:44:36 +00:00
ManuelaLuanaSchumackerTavares	00b7c5ac2e	docs(reademe): atualiza Readme com detalhes do projeto	2023-01-19 16:43:19 -03:00
Manuela Luana Schumacker Tavares	910f5bc99c	Merge pull request 'feat(main-content-top): Adiciona menu breadcrumb e título da pagina intitucional' (#15 ) from feature/main-content-top into develop Reviewed-on: #15	2023-01-19 18:40:57 +00:00
ManuelaLuanaSchumackerTavares	600f2a1b7e	feat(main-content-top): Adiciona menu breadcrumb e título da pagina intitucional	2023-01-19 15:39:47 -03:00
Manuela Luana Schumacker Tavares	033320f2e0	Merge pull request 'fix(generals): Concerta footer quebrado, menu hamburguer que sumiu e newsletter quebrada' (#14 ) from fix/form-required-mensage into develop Reviewed-on: #14	2023-01-19 18:11:45 +00:00
ManuelaLuanaSchumackerTavares	7a1c3c8d6d	fix(generals): Concerta footer quebrado, menu hamburguer que sumiu e newsletter quebrada	2023-01-19 15:10:54 -03:00
Manuela Luana Schumacker Tavares	d023ac0d78	Merge pull request 'fix(required-mensage): Concerta mensagens de campo vazio e aplica estilo' (#13 ) from fix/form-required-mensage into develop Reviewed-on: #13	2023-01-19 17:41:12 +00:00
ManuelaLuanaSchumackerTavares	1f38486a6b	fix(required-mensage): Concerta mensagens de campo vazio e aplica estilo	2023-01-19 14:39:23 -03:00
Manuela Luana Schumacker Tavares	05a9be1f61	Merge pull request 'feat(main-content-form): Cria formulario com validacao de inputs usando formik e yup' (#12 ) from feature/formulario-contato into develop Reviewed-on: #12	2023-01-19 00:02:20 +00:00
ManuelaLuanaSchumackerTavares	aec5ddcd1d	feat(main-content-form): Cria formulario com validacao de inputs usando formik e yup	2023-01-18 21:00:52 -03:00
Manuela Luana Schumacker Tavares	1201c229d0	Merge pull request 'feat(main-content): Adiciona menu de navegação no conteúdo principal da página responsivo' (#11 ) from feature/main-content-menu into develop Reviewed-on: #11	2023-01-17 18:06:06 +00:00
ManuelaLuanaSchumackerTavares	eb7fba79c1	feat(main-content): Adiciona menu de navegação no conteúdo principal da página responsivo	2023-01-17 15:03:59 -03:00
Manuela Luana Schumacker Tavares	0049bdeb18	Merge pull request 'feat(newsletter): Adiciona campo de newsletter responsivo e com validação de email' (#10 ) from feature/newsletter-input into develop Reviewed-on: #10	2023-01-15 17:46:30 +00:00
ManuelaLuanaSchumackerTavares	f15dc37850	feat(newsletter): Adiciona campo de newsletter responsivo e com validação de email	2023-01-15 14:45:26 -03:00
Manuela Luana Schumacker Tavares	b9c491ba4f	Merge pull request 'fix(footer-top): Concerta bug de footer mobile sobrepondo desktop' (#9 ) from hotfix/footer-top-responsive into develop Reviewed-on: #9	2023-01-14 18:38:00 +00:00