feat: Cria header mobile desktop

2022-12-27 16:56:25 -03:00 · 2022-12-27 16:56:25 -03:00 · 3ed4618cbf
commit 3ed4618cbf
parent 0c351a3524
45 changed files with 26773 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false
+max_line_length = 100
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,46 @@
+{
+  "name": "desafio-react-e-typescript-saulo-klein",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@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-scripts": "5.0.1",
+    "sass": "^1.57.1",
+    "typescript": "^4.9.4",
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Desafio 4</title>
+  </head>
+  <body>
+    <noscript>
+      Você precisa habilitar o JavaScript para rodar esse app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/src/assets/icons/arrow-right-home-icon.svg
+++ b/src/assets/icons/arrow-right-home-icon.svg
@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.11608 3.60396L1.6762 0.164193C1.45738 -0.0547314 1.10261 -0.0547314 0.883896 0.164193C0.665166 0.382921 0.665166 0.737679 0.883896 0.95639L3.92766 4.00006L0.883984 7.04362C0.665255 7.26244 0.665255 7.61716 0.883984 7.83589C1.10271 8.0547 1.45747 8.0547 1.67629 7.83589L5.11617 4.39607C5.22553 4.28665 5.28015 4.1434 5.28015 4.00008C5.28015 3.85668 5.22543 3.71332 5.11608 3.60396Z" fill="#C4C4C4"/>
+</svg>
--- a/src/assets/icons/arrow-up-icon.svg
+++ b/src/assets/icons/arrow-up-icon.svg
@ -0,0 +1,3 @@
+<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6 6.13647C12.5989 6.24898 12.5519 6.36118 12.4588 6.44888L12.4587 6.44902C12.2574 6.63896 11.9216 6.63894 11.7204 6.44903L11.7204 6.44902L6.7744 1.78259L6.4999 1.5236L6.2254 1.78259L1.27968 6.44882C1.27966 6.44884 1.27964 6.44886 1.27962 6.44888C1.07811 6.63886 0.742449 6.63877 0.541181 6.44888L0.541122 6.44882C0.448342 6.36133 0.401297 6.24944 0.400026 6.13719C0.401078 6.02468 0.448119 5.91242 0.541189 5.82462L0.541192 5.82461L6.13082 0.550956C6.13085 0.550933 6.13087 0.55091 6.13089 0.550887C6.22923 0.458193 6.36162 0.408533 6.49988 0.408533C6.63821 0.408533 6.77079 0.458327 6.86907 0.55102C6.86908 0.551029 6.86909 0.551037 6.8691 0.551047L12.4587 5.82475L12.4588 5.82482C12.5516 5.9124 12.5987 6.02428 12.6 6.13647Z" fill="white" stroke="white" stroke-width="0.8"/>
+</svg>
--- a/src/assets/icons/cart-icon.svg
+++ b/src/assets/icons/cart-icon.svg
@ -0,0 +1,12 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3715_4730)">
+<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
+<path d="M11.8461 21.5385C10.2132 21.5385 8.88458 22.867 8.88458 24.5C8.88458 26.133 10.2131 27.4615 11.8461 27.4615C13.4791 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8461 21.5385Z" fill="white"/>
+<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3715_4730">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/icons/close-icon.svg
+++ b/src/assets/icons/close-icon.svg
@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
+<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
+</svg>
--- a/src/assets/icons/facebook-icon.svg
+++ b/src/assets/icons/facebook-icon.svg
@ -0,0 +1,3 @@
+<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.92695 20.063V10.9297H9.98482L10.4436 7.36924H6.92695V5.09641C6.92695 4.0659 7.21133 3.36362 8.68759 3.36362L10.5674 3.36284V0.178247C10.2423 0.135911 9.1264 0.0388489 7.82762 0.0388489C5.11557 0.0388489 3.25885 1.69781 3.25885 4.74378V7.36924H0.191711V10.9297H3.25885V20.063H6.92695Z" fill="#303030"/>
+</svg>
--- a/src/assets/icons/home-icon.svg
+++ b/src/assets/icons/home-icon.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8326 7.59562L14.6903 6.4533L8.40431 0.167326C8.18118 -0.0557753 7.81942 -0.0557753 7.59628 0.167326L1.31028 6.4533L0.167381 7.59623C-0.0518699 7.82324 -0.0456085 8.185 0.18141 8.40425C0.402871 8.61814 0.753946 8.61814 0.975407 8.40425L1.14226 8.23623V15.4285C1.14226 15.7442 1.3981 16 1.71372 16H14.2857C14.6013 16 14.8572 15.7442 14.8572 15.4285V8.23623L15.0246 8.40368C15.2516 8.62293 15.6134 8.61664 15.8326 8.38965C16.0465 8.16819 16.0465 7.81708 15.8326 7.59562ZM9.71409 14.8571H6.28537V10.2855H9.71409V14.8571ZM13.7142 14.8571H10.857V9.71403C10.857 9.39841 10.6011 9.14256 10.2855 9.14256H5.7139C5.39829 9.14256 5.14244 9.39841 5.14244 9.71403V14.8571H2.28518V7.09334L7.99969 1.3788L13.7142 7.09334V14.8571Z" fill="#C4C4C4"/>
+</svg>
--- a/src/assets/icons/instagram-icon.svg
+++ b/src/assets/icons/instagram-icon.svg
@ -0,0 +1,12 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3403_1250)">
+<path d="M14.6394 0.0388336H5.65328C2.60162 0.0388336 0.118896 2.51782 0.118896 5.56473V14.5369C0.118896 17.584 2.60162 20.0628 5.65328 20.0628H14.6394C17.6913 20.0628 20.1741 17.5838 20.1741 14.5369V5.56473C20.1742 2.51782 17.6913 0.0388336 14.6394 0.0388336ZM18.3948 14.5369C18.3948 16.6043 16.7102 18.2862 14.6396 18.2862H5.65328C3.58278 18.2863 1.89829 16.6043 1.89829 14.5369V5.56473C1.89829 3.49745 3.58278 1.81546 5.65328 1.81546H14.6394C16.7101 1.81546 18.3947 3.49745 18.3947 5.56473V14.5369H18.3948Z" fill="#303030"/>
+<path d="M10.1465 4.89145C7.29695 4.89145 4.97876 7.20604 4.97876 10.0511C4.97876 12.8961 7.29695 15.2106 10.1465 15.2106C12.996 15.2106 15.3142 12.8961 15.3142 10.0511C15.3142 7.20604 12.996 4.89145 10.1465 4.89145ZM10.1465 13.4338C8.27822 13.4338 6.75815 11.9163 6.75815 10.051C6.75815 8.18555 8.27811 6.66796 10.1465 6.66796C12.0148 6.66796 13.5348 8.18555 13.5348 10.051C13.5348 11.9163 12.0147 13.4338 10.1465 13.4338Z" fill="#303030"/>
+<path d="M15.531 3.38504C15.1881 3.38504 14.8514 3.52362 14.6092 3.76642C14.3659 4.00804 14.2261 4.34442 14.2261 4.6879C14.2261 5.03031 14.3661 5.36657 14.6092 5.60937C14.8512 5.851 15.1881 5.99076 15.531 5.99076C15.875 5.99076 16.2107 5.851 16.4539 5.60937C16.6971 5.36657 16.8358 5.03019 16.8358 4.6879C16.8358 4.34442 16.6971 4.00804 16.4539 3.76642C16.2119 3.52362 15.875 3.38504 15.531 3.38504Z" fill="#303030"/>
+</g>
+<defs>
+<clipPath id="clip0_3403_1250">
+<rect width="20.0553" height="20.0241" fill="white" transform="translate(0.118896 0.0388336)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/icons/linkedin-icon.svg
+++ b/src/assets/icons/linkedin-icon.svg
@ -0,0 +1,12 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3403_1244)">
+<path d="M3.99438 5.14737H0.782357C0.639802 5.14737 0.524292 5.26293 0.524292 5.40543V15.7243C0.524292 15.8669 0.639802 15.9824 0.782357 15.9824H3.99438C4.13694 15.9824 4.25245 15.8669 4.25245 15.7243V5.40543C4.25245 5.26293 4.13694 5.14737 3.99438 5.14737Z" fill="#303030"/>
+<path d="M2.38955 0.017601C1.22083 0.017601 0.27002 0.967382 0.27002 2.13481C0.27002 3.30276 1.22083 4.2529 2.38955 4.2529C3.55735 4.2529 4.50739 3.30271 4.50739 2.13481C4.50744 0.967382 3.55735 0.017601 2.38955 0.017601Z" fill="#303030"/>
+<path d="M12.1644 4.8909C10.8743 4.8909 9.92069 5.44548 9.34227 6.07562V5.40543C9.34227 5.26293 9.22676 5.14736 9.0842 5.14736H6.00813C5.86557 5.14736 5.75006 5.26293 5.75006 5.40543V15.7243C5.75006 15.8669 5.86557 15.9824 6.00813 15.9824H9.21313C9.35569 15.9824 9.4712 15.8669 9.4712 15.7243V10.6189C9.4712 8.89844 9.9385 8.22819 11.1378 8.22819C12.4439 8.22819 12.5477 9.30267 12.5477 10.7074V15.7244C12.5477 15.8669 12.6632 15.9824 12.8058 15.9824H16.0119C16.1545 15.9824 16.27 15.8669 16.27 15.7244V10.0643C16.27 7.50608 15.7822 4.8909 12.1644 4.8909Z" fill="#303030"/>
+</g>
+<defs>
+<clipPath id="clip0_3403_1244">
+<rect width="16" height="16" fill="white" transform="translate(0.27002)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/icons/menu-icon.svg
+++ b/src/assets/icons/menu-icon.svg
@ -0,0 +1,5 @@
+<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
+<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
+<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
+</svg>
--- a/src/assets/icons/search-icon.svg
+++ b/src/assets/icons/search-icon.svg
@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2094 11.6187C14.0951 10.4091 14.6249 8.92334 14.6249 7.31267C14.6249 3.2807 11.3444 0.000183105 7.31245 0.000183105C3.28048 0.000183105 0 3.2807 0 7.31267C0 11.3446 3.28052 14.6252 7.31248 14.6252C8.92315 14.6252 10.409 14.0953 11.6186 13.2095L16.4092 18.0001L18 16.4093C18 16.4092 13.2094 11.6187 13.2094 11.6187ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1043 2.25001 7.31267C2.25001 4.52104 4.52086 2.25019 7.31248 2.25019C10.1041 2.25019 12.375 4.52104 12.375 7.31267C12.375 10.1043 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
+</svg>
--- a/src/assets/icons/twitter-icon.svg
+++ b/src/assets/icons/twitter-icon.svg
@ -0,0 +1,3 @@
+<svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.4254 2.36769C24.5101 2.76923 23.5347 3.03538 22.5178 3.16462C23.5639 2.54 24.3624 1.55846 24.7378 0.375385C23.7624 0.956923 22.6854 1.36769 21.5378 1.59692C20.6116 0.610769 19.2916 0 17.8516 0C15.0578 0 12.8085 2.26769 12.8085 5.04769C12.8085 5.44769 12.8424 5.83231 12.9254 6.19846C8.73006 5.99385 5.01775 3.98308 2.5239 0.92C2.08852 1.67538 1.83314 2.54 1.83314 3.47077C1.83314 5.21846 2.73314 6.76769 4.07467 7.66462C3.2639 7.64923 2.46852 7.41385 1.79467 7.04308C1.79467 7.05846 1.79467 7.07846 1.79467 7.09846C1.79467 9.55077 3.5439 11.5877 5.83775 12.0569C5.42698 12.1692 4.97929 12.2231 4.51467 12.2231C4.1916 12.2231 3.86544 12.2046 3.55929 12.1369C4.21314 14.1354 6.06852 15.6046 8.27467 15.6523C6.55775 16.9954 4.37775 17.8046 2.01775 17.8046C1.6039 17.8046 1.20698 17.7862 0.810059 17.7354C3.04544 19.1769 5.69467 20 8.5516 20C17.8378 20 22.9147 12.3077 22.9147 5.64C22.9147 5.41692 22.907 5.20154 22.8962 4.98769C23.8978 4.27692 24.7393 3.38923 25.4254 2.36769Z" fill="#303030"/>
+</svg>
--- a/src/assets/icons/whatsapp-icon.svg
+++ b/src/assets/icons/whatsapp-icon.svg
@ -0,0 +1,11 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3403_1267)">
+<path d="M17.0042 0H16.9958C7.62238 0 0 7.6245 0 17C0 20.7188 1.1985 24.1655 3.23638 26.9641L1.11775 33.2796L7.65213 31.1908C10.3403 32.9715 13.5469 34 17.0042 34C26.3776 34 34 26.3734 34 17C34 7.62663 26.3776 0 17.0042 0Z" fill="#4CAF50"/>
+<path d="M26.8961 24.0061C26.486 25.1642 24.8582 26.1247 23.5599 26.4052C22.6716 26.5944 21.5114 26.7452 17.6056 25.126C12.6097 23.0562 9.39249 17.9796 9.14174 17.6502C8.90161 17.3209 7.12299 14.9621 7.12299 12.5226C7.12299 10.0831 8.36186 8.89524 8.86124 8.38524C9.27136 7.96662 9.94924 7.77537 10.5995 7.77537C10.8099 7.77537 10.999 7.78599 11.169 7.79449C11.6684 7.81574 11.9191 7.84549 12.2485 8.63387C12.6586 9.62199 13.6574 12.0615 13.7764 12.3122C13.8975 12.563 14.0186 12.903 13.8486 13.2324C13.6892 13.5724 13.549 13.7232 13.2982 14.0122C13.0475 14.3012 12.8095 14.5222 12.5587 14.8325C12.3292 15.1024 12.07 15.3914 12.359 15.8907C12.648 16.3795 13.6467 18.0094 15.1172 19.3184C17.0149 21.0077 18.5534 21.5475 19.1037 21.777C19.5139 21.947 20.0026 21.9066 20.3022 21.5879C20.6826 21.1777 21.1522 20.4977 21.6304 19.8284C21.9704 19.3481 22.3996 19.2886 22.8501 19.4586C23.3091 19.618 25.738 20.8186 26.2374 21.0672C26.7367 21.318 27.0661 21.437 27.1872 21.6474C27.3062 21.8577 27.3062 22.8459 26.8961 24.0061Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3403_1267">
+<rect width="34" height="34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/icons/youtube-icon.svg
+++ b/src/assets/icons/youtube-icon.svg
@ -0,0 +1,3 @@
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.9211 2.50362C22.6578 1.52463 21.8859 0.752899 20.9071 0.489286C19.1188 0 11.9657 0 11.9657 0C11.9657 0 4.81293 0 3.02469 0.470736C2.06467 0.734069 1.27397 1.52477 1.01064 2.50362C0.540039 4.29172 0.540039 8 0.540039 8C0.540039 8 0.540039 11.727 1.01064 13.4964C1.27425 14.4752 2.04584 15.247 3.02483 15.5106C4.83176 16 11.966 16 11.966 16C11.966 16 19.1188 16 20.9071 15.5293C21.8861 15.2658 22.6578 14.4941 22.9214 13.5152C23.3919 11.727 23.3919 8.01883 23.3919 8.01883C23.3919 8.01883 23.4107 4.29172 22.9211 2.50362ZM9.68836 11.4258V4.57416L15.6365 8L9.68836 11.4258Z" fill="#303030"/>
+</svg>
--- a/src/assets/imgs/american-express.png
+++ b/src/assets/imgs/american-express.png
--- a/src/assets/imgs/boleto.png
+++ b/src/assets/imgs/boleto.png
--- a/src/assets/imgs/elo.png
+++ b/src/assets/imgs/elo.png
--- a/src/assets/imgs/hipercard.png
+++ b/src/assets/imgs/hipercard.png
--- a/src/assets/imgs/m3-academy-logo.png
+++ b/src/assets/imgs/m3-academy-logo.png
--- a/src/assets/imgs/m3-logo.png
+++ b/src/assets/imgs/m3-logo.png
--- a/src/assets/imgs/mastercard.png
+++ b/src/assets/imgs/mastercard.png
--- a/src/assets/imgs/paypal.png
+++ b/src/assets/imgs/paypal.png
--- a/src/assets/imgs/visa.png
+++ b/src/assets/imgs/visa.png
--- a/src/assets/imgs/vtex-logo.png
+++ b/src/assets/imgs/vtex-logo.png
--- a/src/assets/imgs/vtex-pci.png
+++ b/src/assets/imgs/vtex-pci.png
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@ -0,0 +1,7 @@
+import React from "react";
+
+const Footer = () => {
+    return <footer></footer>;
+};
+
+export default Footer;
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@ -0,0 +1,24 @@
+import styles from "../../styles/main.module.scss";
+import { useContext } from "react";
+import HeaderTop from "./HeaderTop";
+import HeaderBottom from "./HeaderBottom";
+import { HeaderContext } from "../../contexts/HeaderContext";
+
+interface HeaderProps {
+    isOpened: boolean;
+    setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Header = () => {
+    const { isOpened, setIsOpened } = useContext(HeaderContext);
+
+    return (
+        <header className={styles["header-page"]}>
+            <HeaderTop isOpened={isOpened} setIsOpened={setIsOpened} />
+            <HeaderBottom isOpened={isOpened} setIsOpened={setIsOpened} />
+        </header>
+    );
+};
+
+export default Header;
+export type { HeaderProps };
--- a/src/components/Header/HeaderBottom.tsx
+++ b/src/components/Header/HeaderBottom.tsx
@ -0,0 +1,25 @@
+import styles from "../../styles/main.module.scss";
+import closeIcon from "../../assets/icons/close-icon.svg";
+import { HeaderProps } from "./Header";
+
+const HeaderBottom = ({ isOpened, setIsOpened }: HeaderProps) => {
+    return (
+        <div className={`${styles["header-bottom"]} ${styles[`${isOpened && "opened"}`]}`}>
+            <div className={styles["header-bottom__menu"]}>
+                <button
+                    onClick={() => setIsOpened(!isOpened)}
+                    className={styles["header-bottom__menu-button"]}
+                >
+                    <img src={closeIcon} alt="Close Icon" />
+                </button>
+            </div>
+            <ul className={styles["header-bottom__item-list"]}>
+                <li className={styles["header-bottom__item"]}>CURSOS</li>
+                <li className={styles["header-bottom__item"]}>SAIBA MAIS</li>
+                <li className={styles["header-bottom__item"]}>INSTITUIÇÃO</li>
+            </ul>
+        </div>
+    );
+};
+
+export default HeaderBottom;
--- a/src/components/Header/HeaderTop.tsx
+++ b/src/components/Header/HeaderTop.tsx
@ -0,0 +1,76 @@
+import styles from "../../styles/main.module.scss";
+import logoM3Academy from "../../assets/imgs/m3-academy-logo.png";
+import { Formik, Form, Field } from "formik";
+import searchIcon from "../../assets/icons/search-icon.svg";
+import cartIcon from "../../assets/icons/cart-icon.svg";
+import menuIcon from "../../assets/icons/menu-icon.svg";
+import { HeaderProps } from "./Header";
+
+interface SearchFormProps {
+    search: string;
+}
+
+const initialValue = {
+    search: "",
+};
+
+const HeaderTop = ({ isOpened, setIsOpened }: HeaderProps) => {
+    const handleFormSubmit = (values: SearchFormProps) => {
+        console.log(values);
+    };
+
+    return (
+        <div className={styles["header-top"]}>
+            <button
+                className={styles["header-top__menu-button"]}
+                onClick={() => setIsOpened(!isOpened)}
+            >
+                <img className={styles["header-top__menu-icon"]} src={menuIcon} alt="" />
+            </button>
+
+            <a className={styles["header-top__logo-wrapper"]} href="#">
+                <img
+                    className={styles["header-top__logo-image"]}
+                    src={logoM3Academy}
+                    alt="M3 Academy Logo"
+                />
+            </a>
+
+            <Formik onSubmit={handleFormSubmit} initialValues={initialValue}>
+                <Form className={styles["header-search-form"]}>
+                    <Field
+                        className={styles["header-search-form__search-box"]}
+                        name="search"
+                        placeholder="Buscar..."
+                    />
+                    <button className={styles["header-search-form__search-button"]} type="submit">
+                        <img
+                            className={styles["header-search-form__search-image"]}
+                            src={searchIcon}
+                            alt="Search Icon"
+                        />
+                    </button>
+                </Form>
+            </Formik>
+
+            <div className={styles["header-login-area"]}>
+                <button
+                    className={`${styles["header-login-area__login-button"]} ${
+                        styles[`${isOpened && "opened"}`]
+                    }`}
+                >
+                    ENTRAR
+                </button>
+                <a href="#">
+                    <img
+                        className={styles["header-login-area__cart"]}
+                        src={cartIcon}
+                        alt="Cart Icon"
+                    />
+                </a>
+            </div>
+        </div>
+    );
+};
+
+export default HeaderTop;
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@ -0,0 +1,8 @@
+import React from "react";
+import styles from "../../styles/main.module.scss";
+
+const Main = () => {
+    return <main className={styles["main"]}></main>;
+};
+
+export default Main;
--- a/src/contexts/HeaderContext.tsx
+++ b/src/contexts/HeaderContext.tsx
@ -0,0 +1,18 @@
+import { createContext, useState } from "react";
+
+interface HeaderContextData {
+    isOpened: boolean;
+    setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const HeaderContext = createContext({} as HeaderContextData);
+
+export const HeaderProvider = ({ children }: any) => {
+    const [isOpened, setIsOpened] = useState(false);
+
+    return (
+        <HeaderContext.Provider value={{ isOpened, setIsOpened }}>
+            {children}
+        </HeaderContext.Provider>
+    );
+};
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import Home from "./pages/Home";
+import { HeaderProvider } from "./contexts/HeaderContext";
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+    <HeaderProvider>
+        <Home />
+    </HeaderProvider>
+);
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -0,0 +1,16 @@
+import React from "react";
+import Header from "../components/Header/Header";
+import Main from "../components/Main/Main";
+import Footer from "../components/Footer/Footer";
+
+function Home() {
+    return (
+        <>
+            <Header />
+            <Main />
+            <Footer />
+        </>
+    );
+}
+
+export default Home;
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/src/styles/main.module.scss
+++ b/src/styles/main.module.scss
@ -0,0 +1,5 @@
+@import "utils/variables.scss";
+@import "utils/mixin.scss";
+@import "utils/reset.scss";
+@import "partials/header.scss";
+@import "partials/footer.scss";
--- a/src/styles/partials/footer.scss
+++ b/src/styles/partials/footer.scss
--- a/src/styles/partials/header.scss
+++ b/src/styles/partials/header.scss
@ -0,0 +1,210 @@
+.header-page {
+    background-color: #000;
+    position: relative;
+
+    .header-top {
+        padding: 22px 100px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #c4c4c4;
+
+        @include mq(lg, max) {
+            padding: 25px 22px;
+            border: none;
+            display: grid;
+            grid-template-rows: repeat(2, 1fr);
+            grid-template-columns: repeat(3, 1fr);
+            grid-row-gap: 25px;
+        }
+
+        &__menu-button {
+            border: none;
+            background-color: transparent;
+            display: none;
+
+            @include mq(lg, max) {
+                display: block;
+            }
+        }
+
+        &__logo-wrapper {
+            width: 11%;
+            min-width: 136px;
+            max-width: 265px;
+
+            @include mq(lg, max) {
+                justify-self: center;
+            }
+        }
+
+        &__logo-image {
+            width: 100%;
+        }
+
+        .header-search-form {
+            position: relative;
+            width: 21%;
+
+            @include mq(lg, max) {
+                width: 100%;
+                grid-area: 2 / 1 / 2 / 4;
+            }
+
+            &__search-box {
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+                padding: 8px 44px 8px 16px;
+                border: 2px solid #f2f2f2;
+                border-radius: 5px;
+                width: 100%;
+                max-width: -webkit-fill-available;
+                outline: 0;
+
+                @include mq(xl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+
+                &::placeholder {
+                    color: #c6c6c6;
+                }
+            }
+
+            &__search-button {
+                border: 0;
+                background-color: transparent;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 16px;
+                cursor: pointer;
+            }
+
+            &__search-image {
+                @include mq(xl, min) {
+                    width: 35px;
+                }
+            }
+        }
+
+        .header-login-area {
+            display: flex;
+
+            @include mq(lg, max) {
+                justify-self: flex-end;
+            }
+
+            &__login-button {
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+                color: #ffffff;
+                border: 0;
+                background-color: transparent;
+                margin-right: 55px;
+                transition: all 0.2s ease-in-out;
+
+                &.false {
+                    @include mq(lg, max) {
+                        opacity: 0;
+                        top: calc(100% + 31px);
+                    }
+                }
+
+                @include mq(lg, max) {
+                    position: absolute;
+                    top: 31px;
+                    left: 16px;
+                    z-index: map-get($z-index, level-2);
+                }
+
+                @include mq(xl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+            }
+
+            &__cart {
+                @include mq(xl, min) {
+                    width: 54px;
+                }
+            }
+        }
+    }
+
+    .header-bottom {
+        padding: 14px 100px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: #ffffff;
+
+        &.false {
+            @include mq(lg, max) {
+                opacity: 0;
+                top: 100%;
+            }
+        }
+
+        @include mq(lg, max) {
+            top: 0;
+            position: absolute;
+            z-index: map-get($z-index, level-1);
+            width: 100%;
+            padding: 0 36px 0 0;
+            max-width: -webkit-fill-available;
+            height: 100vh;
+            background: rgba(69, 69, 69, 0.7);
+            transition: all 0.2s ease-in-out;
+        }
+
+        @include mq(xl, min) {
+            font-size: 28px;
+            line-height: 33px;
+        }
+
+        &__menu {
+            justify-content: flex-end;
+            background: #000;
+            padding: 31px 16px;
+            display: none;
+
+            @include mq(lg, max) {
+                display: flex;
+            }
+        }
+
+        &__menu-button {
+            border: none;
+            background: transparent;
+            cursor: pointer;
+        }
+
+        &__item-list {
+            list-style-type: none;
+            display: flex;
+
+            @include mq(lg, max) {
+                background-color: #fff;
+                flex-direction: column;
+                padding: 31px 16px;
+            }
+        }
+
+        &__item {
+            @include mq(lg, max) {
+                color: #c4c4c4;
+            }
+
+            &:not(:last-of-type) {
+                margin-right: 55px;
+
+                @include mq(lg, max) {
+                    margin-bottom: 12px;
+                }
+            }
+        }
+    }
+}
--- a/src/styles/utils/mixin.scss
+++ b/src/styles/utils/mixin.scss
@ -0,0 +1,11 @@
+@mixin mq($width, $type: min) {
+    @if map_has_key($grid-breakpoints, $width) {
+        $width: map_get($grid-breakpoints, $width);
+        @if $type == max {
+            $width: $width - 1px;
+        }
+        @media only screen and (#{$type}-width: $width) {
+            @content;
+        }
+    }
+}
--- a/src/styles/utils/reset.scss
+++ b/src/styles/utils/reset.scss
@ -0,0 +1,10 @@
+*,
+body {
+    margin: 0;
+    padding: 0;
+    font-family: $font-family;
+}
+
+img {
+    display: block;
+}
--- a/src/styles/utils/variables.scss
+++ b/src/styles/utils/variables.scss
@ -0,0 +1,21 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
+// fonts
+$font-family: "Roboto", sans-serif;
+
+/* Grid breakpoints */
+$grid-breakpoints: (
+    xs: 0,
+    sm: 375px,
+    md: 768px,
+    lg: 1025px,
+    xl: 2500px,
+) !default;
+
+$z-index: (
+    level-1: 5,
+    level-2: 10,
+    level-3: 15,
+    level-4: 20,
+    level-5: 25,
+) !default;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}