Merge pull request 'development' (#28 ) from development into main

Reviewed-on: #28
Merge pull request 'feat: adiciona validação quantidade mínima caracteres input nome' (#27 ) from feature/adiciona-validacao-input-nome into development
2023-01-13 19:00:53 +00:00 · 2023-01-13 19:00:30 +00:00 · 2023-01-13 15:57:30 -03:00 · 2023-01-12 14:14:31 +00:00 · 2023-01-12 14:12:08 +00:00 · 2023-01-12 11:10:02 -03:00
59 changed files with 12397 additions and 185 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,12 +15,21 @@
        "@types/node": "^16.18.11",
        "@types/react": "^18.0.26",
        "@types/react-dom": "^18.0.10",
+        "formik": "^2.2.9",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-modal": "^3.16.1",
+        "react-router-dom": "^6.6.1",
        "react-scripts": "5.0.1",
+        "react-text-mask": "^5.5.0",
        "sass": "^1.57.1",
        "typescript": "^4.9.4",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "yup": "^0.32.11"
+      },
+      "devDependencies": {
+        "@types/react-modal": "^3.13.1",
+        "@types/react-text-mask": "^5.4.11"
      }
    },
    "node_modules/@adobe/css-tools": {
@ -3075,6 +3084,14 @@
        }
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
+      "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -3802,6 +3819,11 @@
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
+    },
    "node_modules/@types/mime": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@ -3860,6 +3882,24 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-modal": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz",
+      "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-text-mask": {
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz",
+      "integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -7454,6 +7494,11 @@
        "url": "https://github.com/sindresorhus/execa?sponsor=1"
      }
    },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
    "node_modules/exit": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@ -7953,6 +7998,42 @@
        "node": ">= 6"
      }
    },
+    "node_modules/formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/formik/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -8328,6 +8409,19 @@
        "he": "bin/he"
      }
    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "node_modules/hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -11398,6 +11492,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -11723,6 +11822,11 @@
        "multicast-dns": "cli.js"
      }
    },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
    "node_modules/nanoid": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -13625,6 +13729,11 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@ -13934,11 +14043,39 @@
      "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",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -13947,6 +14084,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.1.tgz",
+      "integrity": "sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.1.tgz",
+      "integrity": "sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==",
+      "dependencies": {
+        "@remix-run/router": "1.2.1",
+        "react-router": "6.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -14019,6 +14186,17 @@
        }
      }
    },
+    "node_modules/react-text-mask": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
+      "integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
+      "dependencies": {
+        "prop-types": "^15.5.6"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -15477,6 +15655,11 @@
      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
    "node_modules/tmpl": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@ -15509,6 +15692,11 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
    "node_modules/tough-cookie": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
@ -15885,6 +16073,14 @@
        "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==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@ -16809,6 +17005,23 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "dependencies": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -10,12 +10,17 @@
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
+    "formik": "^2.2.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.6.1",
    "react-scripts": "5.0.1",
+    "react-text-mask": "^5.5.0",
    "sass": "^1.57.1",
    "typescript": "^4.9.4",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
@ -40,5 +45,9 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "@types/react-modal": "^3.13.1",
+    "@types/react-text-mask": "^5.4.11"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,10 +1,10 @@
 import React from "react";
-import { Header } from "./components/Header";
+import { Institutional } from "./pages/Institutional";

 function App() {
  return (
    <>
-      <Header />
+      <Institutional />
    </>
  );
 }
--- a/src/assets/images/AmExp.png
+++ b/src/assets/images/AmExp.png
--- a/src/assets/images/Boleto.png
+++ b/src/assets/images/Boleto.png
--- a/src/assets/images/Elo.png
+++ b/src/assets/images/Elo.png
--- a/src/assets/images/Hiper.png
+++ b/src/assets/images/Hiper.png
--- a/src/assets/images/M3.png
+++ b/src/assets/images/M3.png
--- a/src/assets/images/Master.png
+++ b/src/assets/images/Master.png
--- a/src/assets/images/PayPal.png
+++ b/src/assets/images/PayPal.png
--- a/src/assets/images/Visa.png
+++ b/src/assets/images/Visa.png
--- a/src/assets/images/Vtex.png
+++ b/src/assets/images/Vtex.png
--- a/src/assets/images/arrow-right.png
+++ b/src/assets/images/arrow-right.png
--- a/src/assets/images/close-icon.png
+++ b/src/assets/images/close-icon.png
--- a/src/assets/images/facebook.png
+++ b/src/assets/images/facebook.png
--- a/src/assets/images/home.png
+++ b/src/assets/images/home.png
--- a/src/assets/images/instagram.png
+++ b/src/assets/images/instagram.png
--- a/src/assets/images/linkedIn.png
+++ b/src/assets/images/linkedIn.png
--- a/src/assets/images/menu-button.png
+++ b/src/assets/images/menu-button.png
--- a/src/assets/images/toTop.png
+++ b/src/assets/images/toTop.png
--- a/src/assets/images/twitter.png
+++ b/src/assets/images/twitter.png
--- a/src/assets/images/vtex-pci-200.png
+++ b/src/assets/images/vtex-pci-200.png
--- a/src/assets/images/whatsapp.png
+++ b/src/assets/images/whatsapp.png
--- a/src/assets/images/youTube.png
+++ b/src/assets/images/youTube.png
--- a/src/components/FixedButtons/index.tsx
+++ b/src/components/FixedButtons/index.tsx
@ -0,0 +1,32 @@
+import React from "react";
+import whatsappIcon from "../../assets/images/whatsapp.png";
+import toTopIcon from "../../assets/images/toTop.png";
+import styles from "./styles.module.scss";
+
+const FixedButtons = () => {
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <div className={styles["fixedButtons"]}>
+      <button type="button" title="whatsappButton">
+        <a
+          href="https://wa.me/+5571999999999"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src={whatsappIcon} alt="" />
+        </a>
+      </button>
+      <button type="button" title="toTopButton" onClick={scrollToTop}>
+        <img src={toTopIcon} alt="" />
+      </button>
+    </div>
+  );
+};
+
+export { FixedButtons };
--- a/src/components/FixedButtons/styles.module.scss
+++ b/src/components/FixedButtons/styles.module.scss
@ -0,0 +1,30 @@
+.fixedButtons {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  bottom: 1%;
+  right: 1%;
+
+  button {
+    border: none;
+    background: transparent;
+  }
+
+  @media (max-width: 1024px) {
+    bottom: 1.5%;
+    right: 1.5%;
+  }
+
+  @media (min-width: 2500px) {
+    gap: 5px;
+    button {
+      width: 66px;
+      height: 66px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@ -0,0 +1,20 @@
+import React from "react";
+import { FooterBottom } from "../FooterBottom";
+import { FooterTop } from "../FooterTop";
+import { NewsLetter } from "../NewsLetter";
+
+interface FooterProps {
+  windowWidth: number;
+}
+
+const Footer = ({ windowWidth }: FooterProps) => {
+  return (
+    <footer>
+      <NewsLetter />
+      <FooterTop windowWidth={windowWidth} />
+      <FooterBottom />
+    </footer>
+  );
+};
+
+export { Footer };
--- a/src/components/FooterBottom/index.tsx
+++ b/src/components/FooterBottom/index.tsx
@ -0,0 +1,73 @@
+import React from "react";
+import styles from "./styles.module.scss";
+import master from "../../assets/images/Master.png";
+import visa from "../../assets/images/Visa.png";
+import amExp from "../../assets/images/AmExp.png";
+import elo from "../../assets/images/Elo.png";
+import hiper from "../../assets/images/Hiper.png";
+import payPal from "../../assets/images/PayPal.png";
+import boleto from "../../assets/images/Boleto.png";
+import vtexPci from "../../assets/images/vtex-pci-200.png";
+import vtex from "../../assets/images/Vtex.png";
+import m3 from "../../assets/images/M3.png";
+
+const FooterBottom = () => {
+  return (
+    <div className={styles["footerBottom"]}>
+      <div className={styles["footerBottom__content"]}>
+        <div className={styles["footerBottom__corporateName"]}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor
+          </p>
+        </div>
+        <div className={styles["footerBottom__paymentMethods"]}>
+          <div className={styles["footerBottom__paymentIcons"]}>
+            <ul>
+              <li>
+                <img src={master} alt="" />
+              </li>
+              <li>
+                <img src={visa} alt="" />
+              </li>
+              <li>
+                <img src={amExp} alt="" />
+              </li>
+              <li>
+                <img src={elo} alt="" />
+              </li>
+              <li>
+                <img src={hiper} alt="" />
+              </li>
+              <li>
+                <img src={payPal} alt="" />
+              </li>
+              <li>
+                <img src={boleto} alt="" />
+              </li>
+            </ul>
+          </div>
+          <div className={styles["footerBottom__vtexPci"]}>
+            <img src={vtexPci} alt="Selo Vtex" />
+          </div>
+        </div>
+        <div className={styles["footerBottom__authors"]}>
+          <div className={styles["footerBottom__vtex"]}>
+            <span className={styles["poweredBy"]}>Powered by</span>
+            <span>
+              <img src={vtex} alt="Vtex" />
+            </span>
+          </div>
+          <div className={styles["footerBottom__m3"]}>
+            <span className={styles["developedBy"]}>Developed by</span>
+            <span>
+              <img src={m3} alt="M3" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { FooterBottom };
--- a/src/components/FooterBottom/styles.module.scss
+++ b/src/components/FooterBottom/styles.module.scss
@ -0,0 +1,251 @@
+.footerBottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+  background: var(--black-500);
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 84.375%;
+    height: 34px;
+  }
+
+  &__corporateName {
+    width: 21.707%;
+    max-width: 234.42px;
+    height: 24px;
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      text-transform: capitalize;
+      color: var(--white-500);
+    }
+  }
+
+  &__paymentMethods {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 36.921%;
+    max-width: 398.72px;
+    height: 100%;
+  }
+
+  &__paymentIcons {
+    border-right: 1px solid var(--gray-100);
+    width: 82.762%;
+    height: 20px;
+
+    ul {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &:last-child {
+        margin-right: 12px;
+      }
+
+      img {
+        width: 100%;
+        height: 20px;
+      }
+    }
+  }
+
+  &__vtexPci {
+    width: 13.696%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__authors {
+    display: flex;
+    justify-content: space-between;
+    width: 20.965%;
+    max-width: 226.58px;
+    height: 16px;
+  }
+
+  &__vtex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 49.03%;
+    height: 100%;
+
+    .poweredBy {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      text-transform: capitalize;
+      color: var(--white-500);
+    }
+
+    img {
+      width: 100%;
+      height: 16px;
+    }
+  }
+
+  &__m3 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 45.491%;
+    height: 100%;
+
+    .developedBy {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      text-transform: capitalize;
+      color: var(--white-500);
+    }
+
+    img {
+      width: 100%;
+      height: 16px;
+    }
+  }
+
+  @media (min-width: 1025px) and (max-width: 1145px) {
+    .poweredBy,
+    .developedBy {
+      font-size: 8px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    height: 116px;
+    padding: 0 16px;
+
+    &__content {
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__corporateName {
+      width: 100%;
+      height: auto;
+      order: 2;
+      margin-bottom: 15px;
+    }
+
+    &__paymentMethods {
+      width: 100%;
+      height: 28px;
+      order: 1;
+      margin-bottom: 15px;
+    }
+
+    &__paymentIcons {
+      width: 82.762%;
+
+      img {
+        height: 17px !important;
+      }
+    }
+
+    &__vtexPci {
+      padding-right: 9.6px;
+
+      @media (min-width: 280px) and (max-width: 360px) {
+        padding: 0;
+      }
+    }
+
+    &__authors {
+      width: 25.811%;
+      min-width: 226.58px;
+      order: 3;
+    }
+  }
+
+  @media (min-width: 2500px) {
+    height: 96px;
+
+    &__content {
+      width: 92%;
+      height: 66px;
+    }
+
+    &__corporateName {
+      width: 20.305%;
+      max-width: 467px;
+      height: 47px;
+
+      p {
+        font-size: 20px;
+        line-height: 23px;
+      }
+    }
+
+    &__paymentMethods {
+      width: 30.087%;
+      max-width: 692px;
+    }
+
+    &__paymentIcons {
+      width: 82.95%;
+      height: 40px;
+
+      img {
+        min-width: 70px;
+        height: 100% !important;
+      }
+    }
+
+    &__vtexPci {
+      width: 15.32%;
+    }
+
+    &__authors {
+      width: 17.5653%;
+      max-width: 404px;
+      height: 30px;
+    }
+
+    &__vtex {
+      width: 51.041%;
+      height: 100%;
+
+      .poweredBy {
+        font-size: 20px;
+        line-height: 23px;
+      }
+
+      img {
+        width: 92.55%;
+        height: 100%;
+      }
+    }
+
+    &__m3 {
+      width: 46.03%;
+      height: 100%;
+
+      .developedBy {
+        font-size: 20px;
+        line-height: 23px;
+      }
+
+      img {
+        width: 94.75%;
+        height: 100%;
+      }
+    }
+  }
+}
--- a/src/components/FooterTop/index.tsx
+++ b/src/components/FooterTop/index.tsx
@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+import styles from "./styles.module.scss";
+import facebook from "../../assets/images/facebook.png";
+import instagram from "../../assets/images/instagram.png";
+import twitter from "../../assets/images/twitter.png";
+import youTube from "../../assets/images/youTube.png";
+import linkedIn from "../../assets/images/linkedIn.png";
+
+interface FooterTopProps {
+  windowWidth: number;
+}
+
+interface AccordionProps extends FooterTopProps {
+  title: string;
+  content: string[];
+}
+
+const Accordion = ({ title, content, windowWidth }: AccordionProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    if (windowWidth > 1024) {
+      setIsActive(true);
+    } else if (windowWidth <= 1024) {
+      setIsActive(false);
+    }
+  }, [windowWidth]);
+
+  return (
+    <div>
+      <div className={styles["menuLists-title"]}>
+        <h1>{title}</h1>
+        <button type="button" onClick={() => setIsActive(!isActive)}>
+          {isActive ? "-" : "+"}
+        </button>
+      </div>
+      {isActive && (
+        <ul>
+          {content.map((item) => (
+            <li key={item}>
+              <a href="#">{item}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+const FooterTop = ({ windowWidth }: FooterTopProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    if (windowWidth > 1024) {
+      setIsActive(true);
+    } else if (windowWidth <= 1024) {
+      setIsActive(false);
+    }
+  }, [windowWidth]);
+
+  const accordionData = [
+    {
+      title: "Institucional",
+      content: [
+        "Quem Somos",
+        "Política de Privacidade",
+        "Segurança",
+        "Seja um Revendedor",
+      ],
+    },
+    {
+      title: "Dúvidas",
+      content: [
+        "Entrega",
+        "Pagamento",
+        "Trocas e Devoluções",
+        "Dúvidas Frequentes",
+      ],
+    },
+  ];
+
+  return (
+    <div className={styles["footerTop"]}>
+      <div className={styles["footerTop__content"]}>
+        <div className={styles["footerTop__menuList"]}>
+          {accordionData.map(({ title, content }) => (
+            <Accordion
+              key={title}
+              title={title}
+              content={content}
+              windowWidth={windowWidth}
+            />
+          ))}
+          <div>
+            <div className={styles["menuLists-title"]}>
+              <h1>Fale Conosco</h1>
+              <button type="button" onClick={() => setIsActive(!isActive)}>
+                {isActive ? "-" : "+"}
+              </button>
+            </div>
+            {isActive && (
+              <ul>
+                <h2>Atendimento Ao Consumidor</h2>
+                <li>
+                  <p>&#40;11&#41; 4159 9504</p>
+                </li>
+                <h2>Atendimento Online</h2>
+                <li>
+                  <p>&#40;11&#41; 99433-8825</p>
+                </li>
+              </ul>
+            )}
+          </div>
+        </div>
+        <div className={styles["footerTop__socialMedia"]}>
+          <div className={styles["socialMedia-icons"]}>
+            <a href="#">
+              <img src={facebook} alt="" />
+            </a>
+            <a href="#">
+              <img src={instagram} alt="" />
+            </a>
+            <a href="#">
+              <img src={twitter} alt="" />
+            </a>
+            <a href="#">
+              <img src={youTube} alt="" />
+            </a>
+            <a href="#">
+              <img src={linkedIn} alt="" />
+            </a>
+          </div>
+          <div className={styles["socialMeida-site"]}>
+            <a href="#">www.loremipsum.com</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { FooterTop };
--- a/src/components/FooterTop/styles.module.scss
+++ b/src/components/FooterTop/styles.module.scss
@ -0,0 +1,165 @@
+.footerTop {
+  display: flex;
+  justify-content: center;
+  height: auto;
+  padding: 50px 0;
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    width: 84.442%;
+  }
+
+  &__menuList {
+    display: flex;
+    justify-content: space-between;
+    width: 707px;
+    height: 100%;
+    margin-right: 50px;
+
+    .menuLists-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 14px;
+      margin-bottom: 12px;
+
+      button {
+        display: none;
+        border: none;
+        background: transparent;
+        font-size: 18px;
+      }
+    }
+
+    h1 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-transform: uppercase;
+      color: var(--black-300);
+    }
+
+    h2 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 14px;
+      text-transform: capitalize;
+      color: var(--black-300);
+      margin-bottom: 12px;
+    }
+
+    li {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      text-transform: capitalize;
+      color: var(--black-300);
+      margin-bottom: 12px;
+
+      &:last-child {
+        text-decoration-line: underline;
+      }
+    }
+  }
+
+  &__socialMedia {
+    width: 215px;
+    height: auto;
+
+    .socialMedia-icons {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      img {
+        width: 35px;
+        height: 35px;
+      }
+    }
+
+    .socialMeida-site {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: var(--black-300);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    padding: 24px 16px 30px 16px;
+
+    &__content {
+      width: 100%;
+      flex-direction: column;
+    }
+
+    &__menuList {
+      flex-direction: column;
+      margin: 0;
+      width: 100%;
+      gap: 12px;
+
+      .menuLists-title {
+        button {
+          display: block;
+        }
+      }
+
+      h1 {
+        text-transform: none;
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    height: 297px;
+
+    &__content {
+      width: 92.037%;
+    }
+
+    &__menuList {
+      width: 1531px;
+
+      .menuLists-title {
+        height: 28px;
+      }
+
+      h1 {
+        font-size: 28px;
+        line-height: 33px;
+      }
+
+      h2 {
+        font-size: 24px;
+        line-height: 28px;
+      }
+
+      li {
+        font-size: 24px;
+        line-height: 28px;
+      }
+    }
+
+    &__socialMedia {
+      width: 390px;
+
+      .socialMedia-icons {
+        img {
+          width: 70px;
+          height: 70px;
+        }
+      }
+
+      .socialMeida-site {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+}
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@ -1,40 +1,50 @@
 import React from "react";
-import "./styles.scss";
+import styles from "./styles.module.scss";
 import logo from "../../assets/images/logo.png";
 import cart from "../../assets/images/header-cart.png";
 import search from "../../assets/images/header-search.png";
+import menuButton from "../../assets/images/menu-button.png";

-const Header = () => {
+interface HeaderProps {
+  handleOpenMenuMobileModal: () => void;
+}
+
+const Header = ({ handleOpenMenuMobileModal }: HeaderProps) => {
  return (
-    <header className="header">
-      <div className="header__content">
-        <div className="header__content-top">
-          <div className="logo">
-            <a href="/">
-              <img src={logo} alt="Logo da M3" />
-            </a>
-          </div>
-          <div className="search-desktop">
-            <input
-              className="search-desktop__input"
-              type="text"
-              placeholder="Buscar..."
-            />
-            <button className="search-desktop__button" type="button">
-              <img src={search} alt="Pesquisar" />
-            </button>
-          </div>
-          <div className="buttons">
-            <button className="buttons__logIn" type="button">
-              ENTRAR
-            </button>
-            <button className="buttons__cart" type="button">
-              <img src={cart} alt="Carrinho" />
-            </button>
-          </div>
+    <header className={styles["header"]}>
+      <div className={styles["header__content"]}>
+        <button
+          type="button"
+          className={styles["menu-mobile-button"]}
+          onClick={handleOpenMenuMobileModal}
+        >
+          <img src={menuButton} alt="Menu mobile" />
+        </button>
+        <div className={styles["logo"]}>
+          <a href="/">
+            <img src={logo} alt="Logo da M3" />
+          </a>
+        </div>
+        <div className={styles["search-desktop"]}>
+          <input
+            className={styles["search-desktop__input"]}
+            type="text"
+            placeholder="Buscar..."
+          />
+          <button className={styles["search-desktop__button"]} type="button">
+            <img src={search} alt="Pesquisar" />
+          </button>
+        </div>
+        <div className={styles["buttons"]}>
+          <button className={styles["buttons__logIn"]} type="button">
+            ENTRAR
+          </button>
+          <button className={styles["buttons__cart"]} type="button">
+            <img src={cart} alt="Carrinho" />
+          </button>
        </div>
      </div>
-      <div className="header__nav">
+      <div className={styles["header__nav"]}>
        <nav>
          <ul>
            <li>
@ -49,6 +59,16 @@ const Header = () => {
          </ul>
        </nav>
      </div>
+      <div className={styles["search-mobile"]}>
+        <input
+          className={styles["search-mobile__input"]}
+          type="text"
+          placeholder="Buscar..."
+        />
+        <button className={styles["search-mobile__button"]} type="button">
+          <img src={search} alt="Pesquisar" />
+        </button>
+      </div>
    </header>
  );
 };
--- a/src/components/Header/styles.module.scss
+++ b/src/components/Header/styles.module.scss
@ -0,0 +1,332 @@
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  background: var(--black-500);
+
+  &__content {
+    width: 84.375%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 76px;
+
+    .menu-mobile-button {
+      display: none;
+    }
+
+    .logo,
+    .buttons {
+      height: 100%;
+    }
+
+    .logo {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 136px;
+
+      a {
+        width: 100%;
+      }
+
+      img {
+        width: 100%;
+        height: 25.86px;
+        cursor: pointer;
+      }
+    }
+
+    .search-desktop {
+      display: flex;
+      flex-grow: 1;
+      justify-content: center;
+      align-items: center;
+
+      &__input {
+        width: 28.721%;
+        height: 32px;
+        border: none;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+        padding: 8px 0 8px 16px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--gray-200);
+
+        &::placeholder {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          color: var(--gray-200);
+        }
+      }
+
+      &__button {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: var(--white-500);
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        padding-right: 7px;
+        transition: 0.3s;
+
+        &:hover {
+          filter: brightness(85%);
+        }
+
+        img {
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+
+    .buttons {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 13%;
+      max-width: 136.23px;
+
+      &__logIn {
+        width: 53px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        text-transform: uppercase;
+        color: var(--white-500);
+        background: transparent;
+        border: none;
+        transition: 0.3s;
+
+        &:hover {
+          filter: brightness(75%);
+        }
+      }
+
+      &__cart {
+        width: 28px;
+        height: 28px;
+        background: var(--black-500);
+        border: none;
+        transition: 0.3s;
+
+        &:hover {
+          filter: brightness(80%);
+        }
+
+        img {
+          width: 28px;
+          height: 28px;
+        }
+      }
+    }
+  }
+
+  &__nav {
+    border-top: 1px solid var(--gray-100);
+    height: 44px;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    nav {
+      display: flex;
+      align-items: center;
+      width: 84.375%;
+    }
+
+    ul {
+      display: flex;
+      gap: 55px;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-transform: uppercase;
+      color: var(--white-500);
+
+      li {
+        cursor: pointer;
+        transition: 0.3s;
+
+        &:hover {
+          filter: brightness(80%);
+        }
+      }
+    }
+  }
+
+  .search-mobile {
+    display: none;
+  }
+
+  @media (max-width: 1024px) {
+    &__content {
+      width: 100%;
+      justify-content: space-between;
+      padding: 0 16px;
+
+      .menu-mobile-button {
+        display: block;
+        background: transparent;
+        border: none;
+        width: 28px;
+        height: 22.5px;
+        cursor: pointer;
+        transition: 0.3s;
+
+        &:hover {
+          filter: brightness(80%);
+        }
+
+        img {
+          width: 28px;
+          height: 22.5px;
+        }
+      }
+      .search-desktop {
+        display: none;
+      }
+
+      .buttons {
+        width: 2.823%;
+        justify-content: flex-end;
+
+        &__logIn {
+          display: none;
+        }
+      }
+    }
+
+    &__nav {
+      display: none;
+    }
+
+    .search-mobile {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      padding: 0 16px 25px 16px;
+
+      &__input {
+        width: 100%;
+        height: 36px;
+        border: none;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        &::placeholder {
+          padding: 8px 0 8px 16px;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          color: var(--gray-200);
+        }
+      }
+
+      &__button {
+        width: 32px;
+        height: 36px;
+        border: none;
+        background: var(--white-500);
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        padding-right: 7px;
+        transition: 0.3s;
+
+        &:hover {
+          filter: brightness(85%);
+        }
+
+        img {
+          width: 18px;
+          height: 18px;
+        }
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    &__content {
+      width: 91.987%;
+      height: 101px;
+      padding: 0;
+
+      .logo {
+        width: 265.62px;
+
+        img {
+          height: 50.5px;
+        }
+      }
+
+      .search-desktop {
+        &__input {
+          width: 25.53%;
+          height: 57px;
+          padding: 12px 0 12px 16px;
+
+          &::placeholder {
+            font-size: 28px;
+            line-height: 32px;
+          }
+        }
+
+        &__button {
+          width: 57px;
+          height: 57px;
+
+          img {
+            width: 35.15px;
+            height: 35.15px;
+          }
+        }
+      }
+
+      .buttons {
+        width: 10.334%;
+        max-width: 237.64px;
+
+        &__logIn {
+          width: 105px;
+          font-size: 28px;
+          line-height: 33px;
+        }
+
+        &__cart {
+          width: 54.68px;
+          height: 54.68px;
+
+          img {
+            width: 54.68px;
+            height: 54.68px;
+          }
+        }
+      }
+    }
+
+    &__nav {
+      height: 61px;
+      padding: 0;
+
+      nav {
+        width: 91.987%;
+      }
+
+      ul {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+  }
+}
--- a/src/components/Header/styles.scss
+++ b/src/components/Header/styles.scss
@ -1,152 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  background: var(--black-500);
-
-  &__content {
-    width: 84.375%;
-
-    &-top {
-      display: flex;
-      justify-content: center;
-      height: 76px;
-
-      .logo,
-      .buttons {
-        height: 100%;
-      }
-
-      .logo {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        img {
-          width: 100%;
-          height: 25.86px;
-          cursor: pointer;
-        }
-      }
-
-      .search-desktop {
-        display: flex;
-        flex-grow: 1;
-        justify-content: center;
-        align-items: center;
-
-        &__input {
-          width: 28.668%;
-          height: 32px;
-          border: none;
-          border-top-left-radius: 5px;
-          border-bottom-left-radius: 5px;
-
-          &::placeholder {
-            padding: 8px 0 8px 16px;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 16px;
-            color: var(--gray-200);
-          }
-        }
-
-        &__button {
-          width: 32px;
-          height: 32px;
-          border: none;
-          background: var(--white-500);
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-          padding-right: 7px;
-          transition: 0.3s;
-
-          &:hover {
-            filter: brightness(85%);
-          }
-
-          img {
-            width: 18px;
-            height: 18px;
-          }
-        }
-      }
-
-      .buttons {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 55px;
-
-        &__logIn {
-          font-style: normal;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 16px;
-          text-transform: uppercase;
-          color: var(--white-500);
-          background: transparent;
-          border: none;
-          transition: 0.3s;
-
-          &:hover {
-            filter: brightness(80%);
-          }
-        }
-
-        &__cart {
-          width: 28px;
-          height: 28px;
-          background: var(--black-500);
-          border: none;
-          transition: 0.3s;
-
-          &:hover {
-            filter: brightness(85%);
-          }
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  &__nav {
-    border-top: 1px solid var(--gray-100);
-    height: 44px;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-
-    nav {
-      display: flex;
-      align-items: center;
-      width: 84.375%;
-    }
-
-    ul {
-      display: flex;
-      gap: 55px;
-      font-style: normal;
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 16px;
-      text-transform: uppercase;
-      color: var(--white-500);
-
-      li {
-        cursor: pointer;
-        transition: 0.3s;
-
-        &:hover {
-          filter: brightness(80%);
-        }
-      }
-    }
-  }
-}
--- a/src/components/Main/About/index.tsx
+++ b/src/components/Main/About/index.tsx
@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const About = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Sobre</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+          <br />
+          <br />
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+          <br />
+          <br />
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export { About };
--- a/src/components/Main/About/styles.module.scss
+++ b/src/components/Main/About/styles.module.scss
@ -0,0 +1,61 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 285px;
+
+  &__text {
+    width: 69.26%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    min-height: 465px;
+
+    &__text {
+      width: 73.044%;
+      h1 {
+        font-size: 48px;
+        line-height: 56px;
+      }
+
+      p {
+        font-size: 26px;
+        line-height: 30px;
+      }
+    }
+  }
+}
--- a/src/components/Main/Contact/index.tsx
+++ b/src/components/Main/Contact/index.tsx
@ -0,0 +1,194 @@
+import React, { useState } from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import FormSchema from "../../../schema/FormSchema";
+import MaskedInput from "react-text-mask";
+
+interface FormikValues {
+  name: string;
+  email: string;
+  cpf: string;
+  birthDate: string;
+  phone: string;
+  instagram: string;
+}
+
+const initialValues = {
+  name: "",
+  email: "",
+  cpf: "",
+  birthDate: "",
+  phone: "",
+  instagram: "",
+};
+
+const cpfNumberMask = [
+  /\d/,
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  /\d/,
+  "-",
+  /\d/,
+  /\d/,
+];
+
+const bhirtDateMask = [
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  ".",
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+];
+
+const phoneNumberMask = [
+  "(",
+  /[1-9]/,
+  /\d/,
+  ")",
+  " ",
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+  "-",
+  /\d/,
+  /\d/,
+  /\d/,
+  /\d/,
+];
+
+const Contact = () => {
+  const [successMessage, setSuccessMessage] = useState(false);
+
+  const handleFormikSubmit = (values: FormikValues, { resetForm }: any) => {
+    resetForm({ values: "" });
+    setSuccessMessage(true);
+    setTimeout(() => setSuccessMessage(false), 3000);
+  };
+
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Preencha o Formulário</h1>
+        <Formik
+          onSubmit={handleFormikSubmit}
+          initialValues={initialValues}
+          validationSchema={FormSchema}
+        >
+          <Form className={styles["form"]}>
+            <div className={styles["form__input"]}>
+              <label htmlFor="name">Nome</label>
+              <Field id="name" name="name" placeholder="Seu nome completo" />
+              <ErrorMessage
+                component="span"
+                name="name"
+                className={styles["form__invalidFeedback"]}
+              />
+            </div>
+            <div className={styles["form__input"]}>
+              <label htmlFor="email">E-mail</label>
+              <Field id="email" name="email" placeholder="Seu e-mail" />
+              <ErrorMessage
+                component="span"
+                name="email"
+                className={styles["form__invalidFeedback"]}
+              />
+            </div>
+            <div className={styles["form__input"]}>
+              <label htmlFor="cpf">CPF</label>
+              <Field id="cpf" name="cpf">
+                {({ field }: any) => (
+                  <MaskedInput
+                    {...field}
+                    mask={cpfNumberMask}
+                    id="cpf"
+                    placeholder="000.000.000-00"
+                    type="text"
+                  />
+                )}
+              </Field>
+              <ErrorMessage
+                component="span"
+                name="cpf"
+                className={styles["form__invalidFeedback"]}
+              />
+            </div>
+            <div className={styles["form__input"]}>
+              <label htmlFor="birthDate">Data de Nascimento:</label>
+              <Field id="birthDate" name="birthDate">
+                {({ field }: any) => (
+                  <MaskedInput
+                    {...field}
+                    mask={bhirtDateMask}
+                    id="birthDate"
+                    placeholder="00.00.0000"
+                    type="text"
+                  />
+                )}
+              </Field>
+              <ErrorMessage
+                component="span"
+                name="birthDate"
+                className={styles["form__invalidFeedback"]}
+              />
+            </div>
+            <div className={styles["form__input"]}>
+              <label htmlFor="phone">Telefone:</label>
+              <Field id="phone" name="phone">
+                {({ field }: any) => (
+                  <MaskedInput
+                    {...field}
+                    mask={phoneNumberMask}
+                    id="phone"
+                    placeholder="(00) 00000-0000"
+                    type="text"
+                  />
+                )}
+              </Field>
+              <ErrorMessage
+                component="span"
+                name="phone"
+                className={styles["form__invalidFeedback"]}
+              />
+            </div>
+            <div className={styles["form__input"]}>
+              <label htmlFor="instagram">Instagram</label>
+              <Field id="instagram" name="instagram" placeholder="@seuuser" />
+            </div>
+            <div className={styles["form__checkbox"]}>
+              <span>*</span>
+              <label htmlFor="acceptTerms">Declaro que li e aceito</label>
+              <Field type="checkbox" name="acceptTerms" />
+              <ErrorMessage component="span" name="acceptTerms" />
+            </div>
+            <button type="submit">CADASTRE-SE</button>
+            {successMessage ? (
+              <span className={styles["form__successMessage"]}>
+                *Formulário enviado com sucesso!
+              </span>
+            ) : (
+              ""
+            )}
+          </Form>
+        </Formik>
+      </div>
+    </div>
+  );
+};
+
+export { Contact };
--- a/src/components/Main/Contact/styles.module.scss
+++ b/src/components/Main/Contact/styles.module.scss
@ -0,0 +1,207 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 285px;
+
+  &__text {
+    width: 69.26%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      height: auto;
+      position: relative;
+
+      &__input {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-bottom: 12px;
+        position: relative;
+        width: 100%;
+
+        label {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          margin-left: 15px;
+          color: var(--black-499);
+        }
+
+        input {
+          height: 46px;
+          background: var(--white-500);
+          border: 1px solid var(--black-499);
+          border-radius: 25px;
+          padding: 15px 0 15px 20px;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          color: var(--gray-201);
+
+          &::placeholder {
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            color: var(--gray-201);
+          }
+        }
+
+        span {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 14px;
+          color: var(--red-500);
+          position: absolute;
+          right: 2.5%;
+          top: 20%;
+        }
+      }
+
+      &__checkbox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        margin-bottom: 12px;
+        position: relative;
+        max-width: 169.92px;
+
+        span {
+          color: var(--red-500);
+          position: absolute;
+          left: -5%;
+        }
+
+        label {
+          text-decoration: underline;
+        }
+      }
+
+      button {
+        height: 52.44px;
+        background: var(--black-500);
+        border: none;
+        border-radius: 25px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 19px;
+        letter-spacing: 0.05em;
+        color: var(--white-500);
+        width: 100%;
+      }
+
+      &__successMessage {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 14px;
+        color: var(--green-500);
+        position: absolute;
+        bottom: -4%;
+        left: 0;
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  @media (min-width: 2500px) {
+    &__text {
+      width: 73.044%;
+      h1 {
+        font-size: 48px;
+        line-height: 56px;
+      }
+
+      .form {
+        &__input {
+          label {
+            font-size: 28px;
+            line-height: 33px;
+          }
+
+          input {
+            height: 63px;
+            font-size: 28px;
+            line-height: 33px;
+
+            &::placeholder {
+              font-size: 28px;
+              line-height: 33px;
+            }
+          }
+        }
+
+        span {
+          font-size: 24px;
+          line-height: 28px;
+          right: 1.5%;
+          top: 15%;
+        }
+
+        &__checkbox {
+          font-size: 28px;
+          line-height: 33px;
+          max-width: 333.68px;
+
+          input {
+            width: 36.4px;
+            height: 35.15px;
+            border-radius: 3px;
+          }
+        }
+
+        button {
+          height: 71px;
+          font-size: 32px;
+          line-height: 38px;
+        }
+
+        &__successMessage {
+          top: 101% !important;
+        }
+      }
+    }
+  }
+}
--- a/src/components/Main/Delivery/index.tsx
+++ b/src/components/Main/Delivery/index.tsx
@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const Delivery = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Entrega</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+          <br />
+          <br />
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+          <br />
+          <br />
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export { Delivery };
--- a/src/components/Main/Delivery/styles.module.scss
+++ b/src/components/Main/Delivery/styles.module.scss
@ -0,0 +1,61 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 285px;
+
+  &__text {
+    width: 69.26%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    min-height: 465px;
+
+    &__text {
+      width: 73.044%;
+      h1 {
+        font-size: 48px;
+        line-height: 56px;
+      }
+
+      p {
+        font-size: 26px;
+        line-height: 30px;
+      }
+    }
+  }
+}
--- a/src/components/Main/ExchangeAndReturn/index.tsx
+++ b/src/components/Main/ExchangeAndReturn/index.tsx
@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const ExchangeAndReturn = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Troca e Devolução</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+          <br />
+          <br />
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+          <br />
+          <br />
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export { ExchangeAndReturn };
--- a/src/components/Main/ExchangeAndReturn/styles.module.scss
+++ b/src/components/Main/ExchangeAndReturn/styles.module.scss
@ -0,0 +1,61 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 285px;
+
+  &__text {
+    width: 69.26%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    min-height: 465px;
+
+    &__text {
+      width: 73.044%;
+      h1 {
+        font-size: 48px;
+        line-height: 56px;
+      }
+
+      p {
+        font-size: 26px;
+        line-height: 30px;
+      }
+    }
+  }
+}
--- a/src/components/Main/MainMenu/index.tsx
+++ b/src/components/Main/MainMenu/index.tsx
@ -0,0 +1,74 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import styles from "./styles.module.scss";
+
+const MainMenu = () => {
+  return (
+    <div className={styles["menu"]}>
+      <ul>
+        <li>
+          <NavLink
+            to="/"
+            className={({ isActive }) =>
+              isActive ? `${styles["active"]}` : undefined
+            }
+          >
+            Sobre
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/payment"
+            className={({ isActive }) =>
+              isActive ? `${styles["active"]}` : undefined
+            }
+          >
+            Forma de Pagamento
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/delivery"
+            className={({ isActive }) =>
+              isActive ? `${styles["active"]}` : undefined
+            }
+          >
+            Entrega
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/exchange"
+            className={({ isActive }) =>
+              isActive ? `${styles["active"]}` : undefined
+            }
+          >
+            Troca e Devolução
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/security"
+            className={({ isActive }) =>
+              isActive ? `${styles["active"]}` : undefined
+            }
+          >
+            Segurança e Privacidade
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            to="/contact"
+            className={({ isActive }) =>
+              isActive ? `${styles["active"]}` : undefined
+            }
+          >
+            Contato
+          </NavLink>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export { MainMenu };
--- a/src/components/Main/MainMenu/styles.module.scss
+++ b/src/components/Main/MainMenu/styles.module.scss
@ -0,0 +1,56 @@
+.menu {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: var(--black-500);
+  width: 27.963%;
+  height: 100%;
+  padding-bottom: 51px;
+
+  li {
+    height: 39px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    color: var(--gray-300);
+
+    a {
+      display: block;
+      line-height: 39px;
+      padding-left: 16px;
+    }
+
+    &:hover {
+      background: var(--black-500);
+      color: var(--white-500);
+    }
+  }
+
+  .active {
+    background: var(--black-500);
+    color: var(--white-500);
+  }
+
+  @media (max-width: 1024px) {
+    border-width: none;
+    border-style: none;
+    width: 100%;
+    margin-bottom: 30px;
+  }
+
+  @media (min-width: 2500px) {
+    width: 25.6522%;
+    padding-bottom: 117px;
+
+    li {
+      height: 58px;
+      font-size: 32px;
+      line-height: 38px;
+
+      a {
+        line-height: 38px;
+        padding: 10px 0 10px 16px;
+      }
+    }
+  }
+}
--- a/src/components/Main/Payment/index.tsx
+++ b/src/components/Main/Payment/index.tsx
@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const Payment = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Formas de Pagamento</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+          <br />
+          <br />
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+          <br />
+          <br />
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export { Payment };
--- a/src/components/Main/Payment/styles.module.scss
+++ b/src/components/Main/Payment/styles.module.scss
@ -0,0 +1,61 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 285px;
+
+  &__text {
+    width: 69.26%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    min-height: 465px;
+
+    &__text {
+      width: 73.044%;
+      h1 {
+        font-size: 48px;
+        line-height: 56px;
+      }
+
+      p {
+        font-size: 26px;
+        line-height: 30px;
+      }
+    }
+  }
+}
--- a/src/components/Main/SecurityAndPrivacy/index.tsx
+++ b/src/components/Main/SecurityAndPrivacy/index.tsx
@ -0,0 +1,43 @@
+import React from "react";
+import { MainMenu } from "../MainMenu";
+import styles from "./styles.module.scss";
+
+const SecurityAndPrivacy = () => {
+  return (
+    <div className={styles["content"]}>
+      <MainMenu />
+      <div className={styles["content__text"]}>
+        <h1>Segurança e Privacidade</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+          <br />
+          <br />
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+          <br />
+          <br />
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export { SecurityAndPrivacy };
--- a/src/components/Main/SecurityAndPrivacy/styles.module.scss
+++ b/src/components/Main/SecurityAndPrivacy/styles.module.scss
@ -0,0 +1,65 @@
+.content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 285px;
+
+  &__text {
+    width: 69.26%;
+    height: 100%;
+
+    h1 {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      color: var(--black-400);
+      margin: 12px 0;
+
+      @media (max-width: 299px) {
+        font-size: 22px;
+      }
+    }
+
+    p {
+      font-family: "Roboto";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 15px;
+      color: var(--gray-300);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    min-height: 465px;
+
+    &__text {
+      width: 73.044%;
+      h1 {
+        font-size: 48px;
+        line-height: 56px;
+      }
+
+      p {
+        font-size: 26px;
+        line-height: 30px;
+      }
+    }
+  }
+}
--- a/src/components/Main/index.tsx
+++ b/src/components/Main/index.tsx
@ -0,0 +1,44 @@
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import styles from "./styles.module.scss";
+import homeIcon from "../../assets/images/home.png";
+import arrowRightIcon from "../../assets/images/arrow-right.png";
+import { About } from "./About";
+import { Payment } from "./Payment";
+import { Delivery } from "./Delivery";
+import { ExchangeAndReturn } from "./ExchangeAndReturn";
+import { SecurityAndPrivacy } from "./SecurityAndPrivacy";
+import { Contact } from "./Contact";
+
+const Main = () => {
+  return (
+    <main className={styles["main"]}>
+      <div className={styles["main__container"]}>
+        <div className={styles["main__way"]}>
+          <span className={styles["homeIcon"]}>
+            <img src={homeIcon} alt="Home" />
+          </span>
+          <span className={styles["arrowIcon"]}>
+            <img src={arrowRightIcon} alt="Seta" />
+          </span>
+          <p>INSTITUCIONAL</p>
+        </div>
+        <div className={styles["main__title"]}>
+          <h1>Institucional</h1>
+        </div>
+        <Router>
+          <Routes>
+            <Route path="/" element={<About />} />
+            <Route path="/payment" element={<Payment />} />
+            <Route path="/delivery" element={<Delivery />} />
+            <Route path="/exchange" element={<ExchangeAndReturn />} />
+            <Route path="/security" element={<SecurityAndPrivacy />} />
+            <Route path="/contact" element={<Contact />} />
+          </Routes>
+        </Router>
+      </div>
+    </main>
+  );
+};
+
+export { Main };
--- a/src/components/Main/styles.module.scss
+++ b/src/components/Main/styles.module.scss
@ -0,0 +1,126 @@
+.main {
+  display: flex;
+  justify-content: center;
+  height: auto;
+  margin-bottom: 70px;
+
+  &__container {
+    width: 84.375%;
+    height: 100%;
+  }
+
+  &__top {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__way {
+    display: flex;
+    align-items: flex-end;
+    gap: 9.7px;
+    width: 100%;
+    height: 44px;
+
+    .homeIcon {
+      width: 16px;
+      height: 16px;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .arrowIcon {
+      width: 8px;
+      height: 8px;
+      position: relative;
+
+      img {
+        position: absolute;
+        bottom: 50%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      color: var(--gray-100);
+    }
+  }
+
+  &__title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 189px;
+
+    h1 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--black-400);
+    }
+  }
+
+  @media (max-width: 1024px) {
+    padding: 0 16px;
+    margin-bottom: 81px;
+
+    &__container {
+      width: 100%;
+    }
+
+    &__title {
+      height: 148px;
+      position: relative;
+
+      h1 {
+        position: absolute;
+        bottom: 30%;
+      }
+    }
+  }
+
+  @media (min-width: 2500px) {
+    &__container {
+      width: 92%;
+    }
+
+    &__way {
+      height: 60.25px;
+
+      .homeIcon {
+        width: 31.25px;
+        height: 31.25px;
+      }
+
+      .arrowIcon {
+        width: 15.62px;
+        height: 15.62px;
+      }
+
+      p {
+        font-size: 24px;
+        line-height: 28px;
+      }
+    }
+
+    &__title {
+      height: 218px;
+
+      h1 {
+        font-size: 48px;
+        line-height: 56px;
+      }
+    }
+  }
+}
--- a/src/components/MunuMobileModal/index.tsx
+++ b/src/components/MunuMobileModal/index.tsx
@ -0,0 +1,43 @@
+import React from "react";
+import Modal from "react-modal";
+import styles from "./styles.module.scss";
+import closeIcon from "../../assets/images/close-icon.png";
+
+interface MenuMobileModalProps {
+  isOpen: boolean;
+  onRequestClose: () => void;
+}
+
+const MenuMobileModal = ({ isOpen, onRequestClose }: MenuMobileModalProps) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      overlayClassName={styles["modal-overlay"]}
+      className={styles["modal"]}
+      ariaHideApp={false}
+    >
+      <div className={styles["modal__header"]}>
+        <button className={styles["modal__logIn"]} type="button">
+          ENTRAR
+        </button>
+        <button
+          type="button"
+          className={styles["modal__close"]}
+          onClick={onRequestClose}
+        >
+          <img src={closeIcon} alt="Fechar" />
+        </button>
+      </div>
+      <div className={styles["modal__nav"]}>
+        <ul>
+          <li>Cursos</li>
+          <li>Saiba Mais</li>
+          <li>Institucionais</li>
+        </ul>
+      </div>
+    </Modal>
+  );
+};
+
+export { MenuMobileModal };
--- a/src/components/MunuMobileModal/styles.module.scss
+++ b/src/components/MunuMobileModal/styles.module.scss
@ -0,0 +1,86 @@
+.modal-overlay {
+  background: rgba(69, 69, 69, 0.7);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding-right: 36px;
+}
+
+.modal {
+  background: var(--white-500);
+  width: 100%;
+  height: 100%;
+  max-height: 585px;
+  position: relative;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 78px;
+    background: var(--black-500);
+    padding: 0 16px;
+  }
+
+  &__logIn {
+    width: 53px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: var(--white-500);
+    background: transparent;
+    border: none;
+    transition: 0.3s;
+
+    &:hover {
+      filter: brightness(75%);
+    }
+  }
+
+  &__close {
+    border: none;
+    background: transparent;
+    width: 15px;
+    height: 15px;
+    transition: 0.3s;
+
+    &:hover {
+      filter: brightness(75%);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__nav {
+    display: flex;
+    padding: 31px 16px 16px 16px;
+
+    ul {
+      gap: 55px;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 16px;
+      text-transform: uppercase;
+      color: var(--gray-100);
+
+      li {
+        margin-bottom: 12px;
+        cursor: pointer;
+        transition: 0.3s;
+
+        &:hover {
+          filter: brightness(90%);
+        }
+      }
+    }
+  }
+}
--- a/src/components/NewsLetter/index.tsx
+++ b/src/components/NewsLetter/index.tsx
@ -0,0 +1,47 @@
+import React from "react";
+import styles from "./styles.module.scss";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import NewsletterSchema from "../../schema/NewsLetterSchema";
+
+interface FormikValues {
+  newsLetter: string;
+}
+
+const initialValues = {
+  newsLetter: "",
+};
+
+const NewsLetter = () => {
+  const handleNewsletterSubmit = (values: FormikValues, { resetForm }: any) => {
+    console.log(values);
+    resetForm({ values: "" });
+  };
+
+  return (
+    <section className={styles["newsLetter"]}>
+      <div className={styles["newsLetter__title"]}>
+        <h1>Assine nossa Newsletter</h1>
+      </div>
+      <Formik
+        onSubmit={handleNewsletterSubmit}
+        initialValues={initialValues}
+        validationSchema={NewsletterSchema}
+      >
+        <Form className={styles["newsLetter__container"]}>
+          <Field
+            id="newsLetter"
+            name="newsLetter"
+            className={styles["newsLetter__input"]}
+            placeholder="E-mail"
+          />
+          <ErrorMessage component="span" name="newsLetter" />
+          <button type="submit" className={styles["newsLetter__button"]}>
+            Enviar
+          </button>
+        </Form>
+      </Formik>
+    </section>
+  );
+};
+
+export { NewsLetter };
--- a/src/components/NewsLetter/styles.module.scss
+++ b/src/components/NewsLetter/styles.module.scss
@ -0,0 +1,164 @@
+.newsLetter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-width: 1px 0px;
+  border-style: solid;
+  border-color: var(--black-500);
+  width: 100%;
+  padding: 16px 0;
+
+  &__title {
+    width: 37.09%;
+    max-width: 474.75px;
+    margin-bottom: 8px;
+
+    h1 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      font-variant: small-caps;
+      color: var(--black-300);
+      text-transform: uppercase;
+    }
+  }
+
+  &__container {
+    display: flex;
+    justify-content: space-between;
+    height: 42px;
+    width: 37.09%;
+    max-width: 474.75px;
+    position: relative;
+
+    span {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      color: var(--red-500);
+      position: absolute;
+      top: -30%;
+      left: 55%;
+    }
+  }
+
+  &__input {
+    height: 100%;
+    width: 71.73%;
+    border: 1px solid var(--white-400);
+    border-radius: 4px;
+    padding: 13px 16px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: var(--gray-100);
+
+    &::placeholder {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: var(--gray-100);
+    }
+  }
+
+  &__button {
+    height: 100%;
+    width: 26.583%;
+    background: var(--black-500);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    border: none;
+    color: var(--white-500);
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 1024px) {
+    height: 181px;
+    padding: 16px;
+
+    &__title {
+      width: 100%;
+      max-width: 100%;
+
+      h1 {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+
+    &__container {
+      height: 116px;
+      width: 100%;
+      max-width: 100%;
+      flex-direction: column;
+
+      span {
+        top: 43%;
+        left: 0%;
+      }
+    }
+
+    &__input {
+      width: 100%;
+      height: 50px;
+      border-radius: 0;
+      margin-bottom: 16px;
+    }
+
+    &__button {
+      width: 100%;
+      height: 50px;
+      border-radius: 0;
+    }
+  }
+
+  @media (min-width: 2500px) {
+    &__title {
+      max-width: 922px;
+      h1 {
+        font-size: 36px;
+        line-height: 42px;
+      }
+    }
+
+    &__container {
+      width: 36.88%;
+      max-width: 922px;
+      height: 59px;
+
+      span {
+        font-size: 24px;
+        line-height: 28px;
+        top: -42%;
+        left: 56%;
+      }
+    }
+
+    &__input {
+      width: 72.452%;
+      font-size: 28px;
+      line-height: 33px;
+
+      &::placeholder {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+
+    &__button {
+      width: 26.682%;
+      font-size: 24px;
+      line-height: 28px;
+    }
+  }
+}
--- a/src/pages/Institutional/index.tsx
+++ b/src/pages/Institutional/index.tsx
@ -0,0 +1,37 @@
+import React, { useState, useEffect } from "react";
+import { FixedButtons } from "../../components/FixedButtons";
+import { Footer } from "../../components/Footer";
+import { Header } from "../../components/Header";
+import { Main } from "../../components/Main";
+import { MenuMobileModal } from "../../components/MunuMobileModal";
+
+const Institutional = () => {
+  const [menuMobileModal, setMenuMobileModal] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    window.addEventListener("resize", windowResize);
+    function windowResize() {
+      setWindowWidth(window.innerWidth);
+    }
+
+    if (windowWidth > 1024) {
+      setMenuMobileModal(false);
+    }
+  }, [windowWidth]);
+
+  return (
+    <>
+      <MenuMobileModal
+        isOpen={menuMobileModal}
+        onRequestClose={() => setMenuMobileModal(false)}
+      />
+      <Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
+      <Main />
+      <Footer windowWidth={windowWidth} />
+      <FixedButtons />
+    </>
+  );
+};
+
+export { Institutional };
--- a/src/schema/FormSchema.ts
+++ b/src/schema/FormSchema.ts
@ -0,0 +1,19 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  name: Yup.string()
+    .min(3, "Mínimo de 03 caracteres")
+    .required("*Campo Obrigatório"),
+  email: Yup.string().required("*Campo Obrigatório").email("e-Mail inválido"),
+  cpf: Yup.string()
+    .matches(/^\d{3}.\d{3}.\d{3}-\d{2}$/, "CPF inválido")
+    .required("*Campo Obrigatório"),
+  birthDate: Yup.string()
+    .matches(/^\d{2}([./-])\d{2}\1\d{4}$/, "Data inválida")
+    .required("*Campo Obrigatório"),
+  phone: Yup.string()
+    .matches(/(\(?\d{2}\)?\s)?(\d{4,5}\-\d{4})/g, "Número de telefone inválido")
+    .required("*Campo Obrigatório"),
+  acceptTerms: Yup.bool().required(),
+  newsLetter: Yup.string().email("e-Mail inválido"),
+});
--- a/src/schema/NewsLetterSchema.ts
+++ b/src/schema/NewsLetterSchema.ts
@ -0,0 +1,5 @@
+import * as Yup from "yup";
+
+export default Yup.object().shape({
+  newsLetter: Yup.string().required("").email("e-Mail inválido"),
+});
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -6,16 +6,27 @@
 }

 :root {
+  --white-400: #e5e5e5;
  --white-500: #ffffff;

+  --black-300: #303030;
+  --black-400: #292929;
+  --black-499: #100d0e;
  --black-500: #000000;

  --gray-100: #c4c4c4;
  --gray-200: #c6c6c6;
+  --gray-201: #b9b7b7;
+  --gray-300: #7d7d7d;
+
+  --red-500: #ff0000;
+
+  --green-500: #008000;
 }

 a {
  all: unset;
+  cursor: pointer;
 }

 ul {
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rafael Sampaio de Oliveira	613bbc6bfe	Merge pull request 'development' (#28 ) from development into main Reviewed-on: #28	2023-01-13 19:00:53 +00:00
Rafael Sampaio de Oliveira	4cb28191b7	Merge pull request 'feat: adiciona validação quantidade mínima caracteres input nome' (#27 ) from feature/adiciona-validacao-input-nome into development Reviewed-on: #27	2023-01-13 19:00:30 +00:00
Rafael Sampaio	dac47ac9f4	feat: adiciona validação quantidade mínima caracteres input nome	2023-01-13 15:57:30 -03:00
Rafael Sampaio de Oliveira	825adaf989	Merge pull request 'development' (#26 ) from development into main Reviewed-on: #26	2023-01-12 14:14:31 +00:00
Rafael Sampaio de Oliveira	8e987bf898	Merge pull request 'feat: adiciona temporizador mensagem de sucesso formulário' (#25 ) from feature/adiciona-temporizador-mensagem-sucesso-formulario into development Reviewed-on: #25	2023-01-12 14:12:08 +00:00
Rafael Sampaio	a8a485ceb0	feat: adiciona temporizador mensagem de sucesso formulário	2023-01-12 11:10:02 -03:00
Rafael Sampaio de Oliveira	540d012305	Merge pull request 'development' (#24 ) from development into main Reviewed-on: #24	2023-01-10 16:02:30 +00:00
Rafael Sampaio de Oliveira	4d8887dfe2	Merge pull request 'refactor: ajusta footer top mobile conforme alterações no figma' (#23 ) from refactor/ajusta-footer-top-mobile into development Reviewed-on: #23	2023-01-10 16:02:01 +00:00
Rafael Sampaio	e8952e776b	refactor: ajusta footer top mobile conforme alterações no figma	2023-01-10 13:00:56 -03:00
Rafael Sampaio de Oliveira	18d3e25738	Merge pull request 'development' (#22 ) from development into main Reviewed-on: #22	2023-01-09 20:33:05 +00:00
Rafael Sampaio de Oliveira	8cc9b599b9	Merge pull request 'refactor: ajusta mensagem de validação do newsletter' (#21 ) from refactor/ajusta-mensagem-validacao-newsletter into development Reviewed-on: #21	2023-01-09 20:26:45 +00:00
Rafael Sampaio	33fdd701a6	refactor: ajusta mensagem de validação do newsletter	2023-01-09 17:25:49 -03:00
Rafael Sampaio de Oliveira	1e5c3e229f	Merge pull request 'feat: adiciona botões fixos whatsapp e para o topo' (#20 ) from feature/adiciona-botoes-fixos-whatsapp-para-o-topo into development Reviewed-on: #20	2023-01-09 19:52:08 +00:00
Rafael Sampaio	a8fcc1fecc	feat: adiciona botões fixos whatsapp e para o topo	2023-01-09 16:50:55 -03:00
Rafael Sampaio de Oliveira	1d633e2fd9	Merge pull request 'feat: adiciona validação inputs formulário' (#19 ) from feature/adiciona-validacao-inputs-formulario into development Reviewed-on: #19	2023-01-09 17:59:37 +00:00
Rafael Sampaio	05e22c8278	feat: adiciona validação inputs formulário	2023-01-09 14:55:48 -03:00
Rafael Sampaio de Oliveira	9bf366f55f	Merge pull request 'feat: adiciona formulário 2500px' (#18 ) from feature/adiciona-formulario-2500px into development Reviewed-on: #18	2023-01-08 11:18:25 +00:00
Rafael Sampaio	beb84fd3c9	feat: adiciona formulário 2500px	2023-01-08 08:16:59 -03:00
Rafael Sampaio de Oliveira	698b035baa	Merge pull request 'feat: adiciona formulário 375px e 1024px' (#17 ) from feature/adiciona-formulario-375px-1024px into development Reviewed-on: #17	2023-01-08 10:13:33 +00:00
Rafael Sampaio	b40ade416c	feat: adiciona formulário 375px e 1024px	2023-01-08 07:12:13 -03:00
Rafael Sampaio de Oliveira	04738f4bcf	Merge pull request 'feat: cria formulário 1280px' (#16 ) from feature/cria-formulario-1280px into development Reviewed-on: #16	2023-01-07 20:50:39 +00:00
Rafael Sampaio	f0b3544eee	feat: cria formulário 1280px	2023-01-07 17:48:30 -03:00
Rafael Sampaio de Oliveira	e453edef48	Merge pull request 'feat: cria main 1280px e adiciona react-router-dom' (#15 ) from feature/cria-main-1280px-adiciona-react-router-dom into development Reviewed-on: #15	2023-01-05 20:05:59 +00:00
Rafael Sampaio	83600b5932	feat: cria main 1280px e adiciona react-router-dom	2023-01-05 17:03:19 -03:00
Rafael Sampaio de Oliveira	2c4a8ab1ee	Merge pull request 'feat: adiciona menu accordion' (#14 ) from feature/adiciona-menu-accordion into development Reviewed-on: #14	2023-01-04 18:37:22 +00:00
Rafael Sampaio	f1154f48c4	feat: adiciona menu accordion	2023-01-04 15:32:08 -03:00
Rafael Sampaio de Oliveira	e0b7730cbc	Merge pull request 'feat: adiciona footer top 2500px' (#13 ) from feature/adiciona-footer-top-2500px into development Reviewed-on: #13	2023-01-03 16:59:31 +00:00
Rafael Sampaio	8af057c801	feat: adiciona footer top 2500px	2023-01-03 13:57:54 -03:00
Rafael Sampaio de Oliveira	44b9a46974	Merge pull request 'feat: adiciona underline ao ultimo item da lista do footer top' (#12 ) from feature/adiciona-underline-footer-top into development Reviewed-on: #12	2023-01-03 12:10:16 +00:00
Rafael Sampaio	cd75d744a4	feat: adiciona underline ao ultimo item da lista do footer top	2023-01-03 09:09:19 -03:00
Rafael Sampaio de Oliveira	50ffde6adc	Merge pull request 'feat: cria footer top 1280px' (#11 ) from feature/cria-footer-top-1280px into development Reviewed-on: #11	2023-01-03 12:00:55 +00:00
Rafael Sampaio	69aa562b16	feat: cria footer top 1280px	2023-01-03 08:58:14 -03:00
Rafael Sampaio de Oliveira	6e2b2d632d	Merge pull request 'feat: adiciona footer bottom 2500px' (#10 ) from feature/adiciona-footer-bottom-2500px into development Reviewed-on: #10	2023-01-02 12:17:05 +00:00
Rafael Sampaio	0206dcb1b8	feat: adiciona footer bottom 2500px	2023-01-02 09:16:22 -03:00
Rafael Sampaio de Oliveira	46b01fb16f	Merge pull request 'feat: adiciona footer bottom 1024px e 375px' (#9 ) from feature/adiciona-footer-bottom-1024px-375px into development Reviewed-on: #9	2023-01-02 11:16:59 +00:00
Rafael Sampaio	ce6ead4fa9	feat: adiciona footer bottom 1024px e 375px	2023-01-02 08:14:21 -03:00
Rafael Sampaio de Oliveira	08a5896dab	Merge pull request 'refactor: ajusta footer bottom 1280px' (#8 ) from refactor/ajusta-footer-bottom-1280px into development Reviewed-on: #8	2022-12-31 14:09:31 +00:00
Rafael Sampaio	775ba96946	refactor: ajusta footer bottom 1280px	2022-12-31 11:08:53 -03:00
Rafael Sampaio de Oliveira	b76aab9dee	Merge pull request 'feat: cria footer bottom 1280px' (#7 ) from feature/cria-footer-bottom-1280px into development Reviewed-on: #7	2022-12-31 13:56:35 +00:00
Rafael Sampaio	62172b869b	feat: cria footer bottom 1280px	2022-12-31 10:55:09 -03:00
Rafael Sampaio de Oliveira	1c3be028f6	Merge pull request 'feat: cria newsLetter desktop e mobile' (#6 ) from feature/cria-newsLatter-2500px-1280px-1024px-375px into development Reviewed-on: #6	2022-12-31 11:16:23 +00:00
Rafael Sampaio	8f0dff58b4	feat: cria newsLetter desktop e mobile	2022-12-31 07:39:31 -03:00
Rafael Sampaio de Oliveira	b65bdde120	Merge pull request 'feat: adiciona menu mobile 375px e 1024px' (#5 ) from feature/adiciona-menu-mobile-375px-1024px into development Reviewed-on: #5	2022-12-30 15:25:58 +00:00
Rafael Sampaio	a18ce69038	feat: adiciona menu mobile 375px e 1024px	2022-12-30 12:23:31 -03:00
Rafael Sampaio de Oliveira	8ad0598a6d	Merge pull request 'feat: cria header 2500px' (#4 ) from feature/cria-header-2500px into development Reviewed-on: #4	2022-12-29 11:01:21 +00:00
Rafael Sampaio	633b142868	feat: cria header 2500px	2022-12-29 08:00:15 -03:00
Rafael Sampaio de Oliveira	54e4ab6377	Merge pull request 'refactor: adiciona css modules' (#3 ) from refactor/adiciona-css-modules into development Reviewed-on: #3	2022-12-29 10:00:32 +00:00
Rafael Sampaio	a6c335be63	refactor: adiciona css modules	2022-12-29 06:58:33 -03:00
Rafael Sampaio de Oliveira	6990681aed	Merge pull request 'feat: cria header 1024px e 375px' (#2 ) from feature/cria-header-1024px-375px into development Reviewed-on: #2	2022-12-28 21:31:31 +00:00
Rafael Sampaio	ce0afd9a55	feat: cria header 1024px e 375px	2022-12-28 18:30:20 -03:00
Rafael Sampaio de Oliveira	013bbd32e2	Merge pull request 'feat: cria header 1280px' (#1 ) from feature/cria-header-1280px into development Reviewed-on: #1	2022-12-28 18:51:23 +00:00