feat(header): Adiciona a estrutura inicial do projeto e adiciona o header para o desktop

This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-27 14:30:46 -03:00
parent 0c351a3524
commit f276ec3e9e
36 changed files with 29467 additions and 0 deletions

23
.gitignore vendored Normal file
View File

@ -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*

28940
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

46
package.json Normal file
View File

@ -0,0 +1,46 @@
{
"name": "my-app",
"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"
]
}
}

43
public/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
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/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
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>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 92 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

12
src/assets/svgs/cart.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

9
src/assets/svgs/elo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -0,0 +1,11 @@
<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3403_1237)">
<path d="M19.927 28.063V18.9297H22.9848L23.4436 15.3692H19.927V13.0964C19.927 12.0659 20.2113 11.3636 21.6876 11.3636L23.5674 11.3628V8.17825C23.2423 8.13591 22.1264 8.03885 20.8276 8.03885C18.1156 8.03885 16.2589 9.69781 16.2589 12.7438V15.3692H13.1917V18.9297H16.2589V28.063H19.927Z" fill="#303030"/>
</g>
<circle cx="18.2142" cy="17.8641" r="16.8641" stroke="#303030" stroke-width="2"/>
<defs>
<clipPath id="clip0_3403_1237">
<rect width="19.9812" height="20.0241" fill="white" transform="translate(8.38892 8.03883)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 683 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

3
src/assets/svgs/home.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 848 B

View File

@ -0,0 +1,13 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3403_1249)">
<path d="M22.6394 8.03883H13.6533C10.6016 8.03883 8.1189 10.5178 8.1189 13.5647V22.5369C8.1189 25.584 10.6016 28.0628 13.6533 28.0628H22.6394C25.6913 28.0628 28.1741 25.5838 28.1741 22.5369V13.5647C28.1742 10.5178 25.6913 8.03883 22.6394 8.03883ZM26.3948 22.5369C26.3948 24.6043 24.7102 26.2862 22.6396 26.2862H13.6533C11.5828 26.2863 9.89829 24.6043 9.89829 22.5369V13.5647C9.89829 11.4975 11.5828 9.81546 13.6533 9.81546H22.6394C24.7101 9.81546 26.3947 11.4975 26.3947 13.5647V22.5369H26.3948Z" fill="#303030"/>
<path d="M18.1465 12.8914C15.297 12.8914 12.9788 15.206 12.9788 18.0511C12.9788 20.8961 15.297 23.2106 18.1465 23.2106C20.996 23.2106 23.3142 20.8961 23.3142 18.0511C23.3142 15.206 20.996 12.8914 18.1465 12.8914ZM18.1465 21.4338C16.2782 21.4338 14.7582 19.9163 14.7582 18.051C14.7582 16.1856 16.2781 14.668 18.1465 14.668C20.0148 14.668 21.5348 16.1856 21.5348 18.051C21.5348 19.9163 20.0147 21.4338 18.1465 21.4338Z" fill="#303030"/>
<path d="M23.531 11.385C23.1881 11.385 22.8514 11.5236 22.6092 11.7664C22.3659 12.008 22.2261 12.3444 22.2261 12.6879C22.2261 13.0303 22.3661 13.3666 22.6092 13.6094C22.8512 13.851 23.1881 13.9908 23.531 13.9908C23.875 13.9908 24.2107 13.851 24.4539 13.6094C24.6971 13.3666 24.8358 13.0302 24.8358 12.6879C24.8358 12.3444 24.6971 12.008 24.4539 11.7664C24.2119 11.5236 23.875 11.385 23.531 11.385Z" fill="#303030"/>
</g>
<circle cx="17.9442" cy="17.8641" r="16.8641" stroke="#303030" stroke-width="2"/>
<defs>
<clipPath id="clip0_3403_1249">
<rect width="20.0553" height="20.0241" fill="white" transform="translate(8.1189 8.03883)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,13 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="18.1341" cy="17.8641" r="16.8641" stroke="#303030" stroke-width="2"/>
<g clip-path="url(#clip0_3403_1242)">
<path d="M13.9944 14.1474H10.7824C10.6398 14.1474 10.5243 14.2629 10.5243 14.4054V24.7243C10.5243 24.8669 10.6398 24.9824 10.7824 24.9824H13.9944C14.1369 24.9824 14.2524 24.8669 14.2524 24.7243V14.4054C14.2524 14.2629 14.1369 14.1474 13.9944 14.1474Z" fill="#303030"/>
<path d="M12.3896 9.0176C11.2208 9.0176 10.27 9.96738 10.27 11.1348C10.27 12.3028 11.2208 13.2529 12.3896 13.2529C13.5573 13.2529 14.5074 12.3027 14.5074 11.1348C14.5074 9.96738 13.5573 9.0176 12.3896 9.0176Z" fill="#303030"/>
<path d="M22.1644 13.8909C20.8743 13.8909 19.9207 14.4455 19.3423 15.0756V14.4054C19.3423 14.2629 19.2268 14.1474 19.0842 14.1474H16.0081C15.8656 14.1474 15.7501 14.2629 15.7501 14.4054V24.7243C15.7501 24.8669 15.8656 24.9824 16.0081 24.9824H19.2131C19.3557 24.9824 19.4712 24.8669 19.4712 24.7243V19.6189C19.4712 17.8984 19.9385 17.2282 21.1378 17.2282C22.4439 17.2282 22.5477 18.3027 22.5477 19.7074V24.7244C22.5477 24.8669 22.6632 24.9824 22.8058 24.9824H26.0119C26.1545 24.9824 26.27 24.8669 26.27 24.7244V19.0643C26.27 16.5061 25.7822 13.8909 22.1644 13.8909Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_3403_1242">
<rect width="16" height="16" fill="white" transform="translate(10.27 9)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

10
src/assets/svgs/lupa.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3876_15)">
<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"/>
</g>
<defs>
<clipPath id="clip0_3876_15">
<rect width="18" height="18" rx="5" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 804 B

View File

@ -0,0 +1,4 @@
<svg width="29" height="16" viewBox="0 0 29 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.0307 5.35265C16.5833 4.75923 16.0213 4.26574 15.3795 3.90266C14.7376 3.53958 14.0296 3.31463 13.2992 3.24172C12.5688 3.1688 11.8315 3.24947 11.1328 3.47874C10.4342 3.708 9.78905 4.081 9.23731 4.57466L8.76065 4.20512C5.48598 1.85172 0.900479 3.85017 0.471483 7.88109C0.34098 9.82306 0.307571 11.7705 0.371384 13.716C0.360856 13.9656 0.400742 14.2148 0.488564 14.4481C0.576387 14.6813 0.710272 14.8937 0.88191 15.072C1.05355 15.2503 1.25928 15.3906 1.48632 15.4844C1.71337 15.5782 1.95689 15.6234 2.20177 15.6172C2.44143 15.6161 2.6784 15.5656 2.89845 15.4688C3.11851 15.3719 3.31709 15.2307 3.48227 15.0536C3.64746 14.8764 3.77583 14.6671 3.85968 14.438C3.94352 14.209 3.98111 13.9651 3.97019 13.7208C3.97019 12.3205 3.97019 10.9201 3.97019 9.51486C3.96633 9.09827 3.99502 8.68203 4.05599 8.27009C4.13287 7.84846 4.3634 7.47217 4.70121 7.21688C5.03901 6.96159 5.45905 6.84624 5.87684 6.89403C6.28524 6.92544 6.66838 7.10772 6.95445 7.4067C7.24052 7.70568 7.40987 8.10082 7.43076 8.51807C7.45459 9.03348 7.43076 9.5489 7.43076 10.0643C7.43076 11.3188 7.43076 12.5733 7.43076 13.8278C7.42587 14.1917 7.53195 14.5481 7.73434 14.8478C7.93673 15.1474 8.22541 15.3755 8.56045 15.5005C9.77594 16.0159 11.0153 15.1115 11.0391 13.6868C11.0391 12.0287 11.0391 10.3706 11.0868 8.71256C11.1028 8.31175 11.2229 7.92246 11.4347 7.58449C11.6364 7.28647 11.9287 7.0645 12.2665 6.95289C12.6042 6.84127 12.9685 6.84622 13.3032 6.96696C13.6808 7.0749 14.0109 7.31113 14.2388 7.63653C14.4668 7.96193 14.579 8.357 14.5569 8.75633C14.5569 10.4339 14.5569 12.1114 14.5569 13.7889C14.5569 14.0296 14.6033 14.268 14.6937 14.4904C14.784 14.7128 14.9163 14.9149 15.0832 15.0851C15.2501 15.2553 15.4482 15.3904 15.6662 15.4825C15.8842 15.5746 16.1179 15.622 16.3539 15.622C16.5899 15.622 16.8236 15.5746 17.0416 15.4825C17.2596 15.3904 17.4577 15.2553 17.6246 15.0851C17.7914 14.9149 17.9238 14.7128 18.0141 14.4904C18.1044 14.268 18.1509 14.0296 18.1509 13.7889C18.1509 12.0725 18.1509 10.3852 18.1509 8.64449C18.1542 7.4494 17.7592 6.28865 17.0307 5.35265Z" fill="white"/>
<path d="M26.035 6.32487L25.4678 6.08661C26.0302 5.63927 26.5641 5.25514 27.0407 4.81752C27.4642 4.4774 27.8298 4.06832 28.1228 3.60679C28.9808 1.97302 27.77 0.0718221 25.8491 0.0280605C24.0759 0.00374847 22.3075 0.00374847 20.5343 0.00374847C20.3171 -0.0115626 20.0992 0.0201443 19.8949 0.0967889C19.6905 0.173434 19.5044 0.293284 19.3486 0.448477C19.1929 0.60367 19.0711 0.790699 18.9912 0.997294C18.9113 1.20389 18.8751 1.42538 18.8851 1.64724C18.8638 1.87321 18.891 2.10119 18.9648 2.31538C19.0385 2.52956 19.157 2.72483 19.3121 2.88764C19.4671 3.05046 19.6551 3.17692 19.8628 3.25828C20.0706 3.33964 20.2932 3.37394 20.5152 3.3588C21.3828 3.3588 22.2503 3.3588 23.1178 3.3588C23.2656 3.40743 23.4181 3.40743 23.7041 3.40743C22.5268 4.37991 21.44 5.30376 20.3675 6.21789C19.6763 6.80138 19.4666 7.43836 19.7097 8.16285C19.8388 8.52047 20.0794 8.82497 20.3946 9.02963C20.7097 9.23429 21.082 9.3278 21.4543 9.29579C22.3742 9.29579 23.2989 9.29579 24.2189 9.29579C24.4252 9.25688 24.6374 9.26476 24.8404 9.31886C25.0434 9.37297 25.2322 9.47198 25.3935 9.60888C25.5548 9.74577 25.6846 9.91719 25.7736 10.111C25.8627 10.3048 25.9089 10.5162 25.9089 10.7302C25.9089 10.9442 25.8627 11.1556 25.7736 11.3494C25.6846 11.5432 25.5548 11.7146 25.3935 11.8515C25.2322 11.9884 25.0434 12.0874 24.8404 12.1415C24.6374 12.1956 24.4252 12.2035 24.2189 12.1646C23.0273 12.1646 21.8356 12.1646 20.6439 12.1646C20.2262 12.1876 19.833 12.3731 19.5453 12.6829C19.2576 12.9927 19.0972 13.4032 19.0972 13.83C19.0972 14.2567 19.2576 14.6672 19.5453 14.977C19.833 15.2868 20.2262 15.4723 20.6439 15.4954C21.888 15.4954 23.1369 15.4954 24.381 15.4954C25.4738 15.4671 26.5239 15.0565 27.3553 14.3323C28.1867 13.6082 28.7488 12.6145 28.9474 11.5179C29.1057 10.4443 28.9043 9.34753 28.3758 8.40513C27.8473 7.46273 27.0225 6.72978 26.035 6.32487Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

9
src/assets/svgs/visa.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -0,0 +1,7 @@
<svg width="46" height="16" viewBox="0 0 46 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.3909 5.99083H31.7838V11.4557C31.7838 11.558 31.6953 11.6456 31.5921 11.6456H30.3535C30.2503 11.6456 30.1619 11.558 30.1619 11.4557V5.99083H28.5399C28.4957 5.99083 28.4367 5.97622 28.4072 5.94699C28.3778 5.91777 28.3483 5.87394 28.3483 5.81549V4.8511C28.3483 4.80727 28.363 4.74882 28.4072 4.7196C28.4367 4.69037 28.4957 4.66115 28.5399 4.67576H33.3909C33.4941 4.67576 33.5826 4.74882 33.5826 4.8511V5.81549C33.5826 5.91777 33.4941 5.99083 33.3909 5.99083Z" fill="white"/>
<path d="M38.5661 11.6017C37.9321 11.6894 37.2834 11.7332 36.6493 11.7186C35.4255 11.7186 34.3492 11.4118 34.3492 9.70216V6.58983C34.3492 4.88024 35.4403 4.588 36.6641 4.588C37.2981 4.57339 37.9321 4.61723 38.5661 4.7049C38.6988 4.71951 38.7578 4.77796 38.7578 4.89485V5.77157C38.7578 5.87385 38.6693 5.96152 38.5661 5.96152H36.5756C36.1333 5.96152 35.9711 6.10764 35.9711 6.60444V7.45193H38.4924C38.5956 7.45193 38.6841 7.53961 38.6841 7.64189V8.53321C38.6841 8.6355 38.5956 8.72317 38.4924 8.72317H35.9711V9.71678C35.9711 10.199 36.1333 10.3597 36.5756 10.3597H38.5661C38.6693 10.3597 38.7578 10.4474 38.7578 10.5497V11.4264C38.7578 11.5286 38.6988 11.5871 38.5661 11.6017Z" fill="white"/>
<path d="M45.7027 11.6455H44.1987C44.0955 11.6601 43.9923 11.6016 43.9481 11.4993L42.6358 9.45367L41.4562 11.4555C41.3972 11.5724 41.3235 11.6455 41.2203 11.6455H39.8196C39.7901 11.6455 39.7459 11.6455 39.7164 11.6162C39.6869 11.587 39.6721 11.5578 39.6721 11.5139C39.6721 11.4847 39.6869 11.4701 39.6869 11.4555L41.7364 8.06555L39.6574 4.85094C39.6426 4.83632 39.6426 4.8071 39.6426 4.79249C39.6426 4.71943 39.7164 4.66098 39.7901 4.67559H41.3383C41.4415 4.67559 41.5152 4.76327 41.5742 4.85094L42.7832 6.75048L43.9628 4.85094C44.007 4.74865 44.0955 4.69021 44.1987 4.67559H45.5995C45.6732 4.67559 45.7469 4.71943 45.7469 4.79249C45.7469 4.8071 45.7322 4.83632 45.7322 4.85094L43.6679 8.09477L45.8206 11.4555C45.8354 11.4847 45.8501 11.5139 45.8501 11.5432C45.8354 11.6016 45.7764 11.6455 45.7027 11.6455Z" fill="white"/>
<path d="M26.0923 4.69058C26.0186 4.69058 25.9596 4.73442 25.9449 4.80748L24.5736 9.84857C24.5589 9.95085 24.5294 9.99469 24.4409 9.99469C24.3524 9.99469 24.323 9.95085 24.3082 9.84857L22.937 4.80748C22.9222 4.73442 22.8632 4.69058 22.7895 4.69058H21.433C21.3888 4.69058 21.3445 4.70519 21.3151 4.74903C21.2856 4.77825 21.2708 4.82209 21.2856 4.86592C21.2856 4.86592 22.9665 10.6522 22.9812 10.7107C23.2024 11.3974 23.7479 11.7335 24.4409 11.7335C25.1044 11.7627 25.7089 11.339 25.9006 10.7107C25.9301 10.6376 27.5668 4.86592 27.5668 4.86592C27.5815 4.82209 27.5668 4.77825 27.5373 4.74903C27.5078 4.71981 27.4636 4.69058 27.4193 4.69058H26.0923Z" fill="white"/>
<path d="M18.4251 0H4.31453C3.79847 0 3.32664 0.277625 3.07599 0.70137C2.81058 1.13973 2.79584 1.68037 3.03175 2.11872L4.44723 4.77808H1.88167C1.55729 4.77808 1.24766 4.93881 1.07072 5.21644C0.893786 5.49406 0.893786 5.84475 1.04123 6.13699L5.58257 14.6411C5.74476 14.9479 6.06914 15.1379 6.40826 15.1379C6.74739 15.1379 7.07177 14.9479 7.23396 14.6411L8.47251 12.3324L10.0207 15.2402C10.2713 15.7078 10.7727 16 11.3035 16C11.8343 16 12.3356 15.7078 12.5863 15.2402L19.6637 2.04566C19.8996 1.60731 19.8848 1.08128 19.6194 0.672146C19.3835 0.248402 18.9117 0 18.4251 0ZM12.1144 5.56712L9.01806 11.3242C8.91485 11.5288 8.70842 11.6457 8.47251 11.6457C8.23659 11.6457 8.03017 11.5142 7.92696 11.3242L4.87483 5.62557C4.78636 5.45023 4.78636 5.24566 4.88957 5.07032C4.99278 4.89498 5.18446 4.79269 5.37614 4.79269H11.6279C11.8195 4.79269 11.9965 4.88036 12.0849 5.0411C12.2029 5.20183 12.2029 5.40639 12.1144 5.56712Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -0,0 +1,9 @@
<svg width="55" height="34" viewBox="0 0 55 34" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="54.6061" height="34" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_3403_1281" transform="translate(0 -0.00590909) scale(0.005 0.0080303)"/>
</pattern>
<image id="image0_3403_1281" width="200" height="126" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,4 @@
<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="18.4041" cy="17.8641" r="16.8641" stroke="#303030" stroke-width="2"/>
<path d="M28.9211 12.5036C28.6578 11.5246 27.8859 10.7529 26.9071 10.4893C25.1188 10 17.9657 10 17.9657 10C17.9657 10 10.8129 10 9.02469 10.4707C8.06467 10.7341 7.27397 11.5248 7.01064 12.5036C6.54004 14.2917 6.54004 18 6.54004 18C6.54004 18 6.54004 21.727 7.01064 23.4964C7.27425 24.4752 8.04584 25.247 9.02483 25.5106C10.8318 26 17.966 26 17.966 26C17.966 26 25.1188 26 26.9071 25.5293C27.8861 25.2658 28.6578 24.4941 28.9214 23.5152C29.3919 21.727 29.3919 18.0188 29.3919 18.0188C29.3919 18.0188 29.4107 14.2917 28.9211 12.5036ZM15.6884 21.4258V14.5742L21.6365 18L15.6884 21.4258Z" fill="#303030"/>
</svg>

After

Width:  |  Height:  |  Size: 787 B

View File

@ -0,0 +1,30 @@
import React from "react";
import { Formik, Form, Field } from "formik";
import lupa from "../assets/svgs/lupa.svg";
import styles from "../styles/main.module.scss";
const initialValues = {
name: "",
};
const CustomForm = () => {
const handleFormikSubmit = () => {};
return (
<Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
<Form>
<div className={styles["campo-busca"]}>
<Field
className={styles["campo-busca__input"]}
name="name"
placeholder="Buscar..."
/>
<img className={styles["campo-busca__img"]} src={lupa} alt="" />
</div>
</Form>
</Formik>
);
};
export { CustomForm };

18
src/components/Header.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import styles from "../styles/main.module.scss";
import { HeaderBottom } from "./HeaderBottom";
import { HeaderTop } from "./HeaderTop";
const Header = () => {
return (
<header>
<div className={styles["header-wrapper"]}>
<HeaderTop />
<HeaderBottom />
</div>
</header>
);
};
export { Header };

View File

@ -0,0 +1,21 @@
import React from "react";
import styles from "../styles/main.module.scss";
const HeaderBottom = () => {
return (
<div className={styles["header-wrapper__bottom"]}>
<a href="/" className={styles["header-wrapper__bottom-items"]}>
CURSOS
</a>
<a href="/" className={styles["header-wrapper__bottom-items"]}>
SAIBA MAIS
</a>
<a href="/" className={styles["header-wrapper__bottom-items"]}>
INSTITUCIONAIS
</a>
</div>
);
};
export { HeaderBottom };

View File

@ -0,0 +1,25 @@
import React from "react";
import styles from "../styles/main.module.scss";
import logo from "../assets/images/logo-M3Academy.png";
import cart from "../assets/svgs/cart.svg";
import { CustomForm } from "./CustomForm";
const HeaderTop = () => {
return (
<div className={styles["header-wrapper__top"]}>
<img
className={styles["header-wrapper__top-logo"]}
src={logo}
alt="logo"
/>
<CustomForm />
<div className={styles["header-wrapper__top-carrinho"]}>
<a href="/">ENTRAR</a>
<img src={cart} alt="" />
</div>
</div>
);
};
export { HeaderTop };

12
src/index.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import ReactDOM from "react-dom";
import "./styles/main.module.scss";
import { Home } from "./pages/Home";
ReactDOM.render(
<React.StrictMode>
<Home />
</React.StrictMode>,
document.getElementById("root")
);

12
src/pages/Home.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import { Header } from "../components/Header";
const Home = () => {
return (
<>
<Header />
</>
);
};
export { Home };

1
src/react-app-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="react-scripts" />

View File

@ -0,0 +1,30 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&family=Roboto:wght@400;700&display=swap");
body,
input,
button {
font-size: 16px;
font-family: $roboto;
}
body {
margin: 0;
}
button {
cursor: pointer;
}
@media screen and (min-width: 2000px) {
body,
input,
button {
font-size: 28px;
}
}
@media screen and (min-width: 2300px) {
body,
input,
button {
font-size: 32px;
}
}

View File

@ -0,0 +1,8 @@
//variables
@import "./utils/variables.scss";
//Resets and Global
@import "./common/global.scss";
//Project Parts
@import "./partials/Header.module.scss";

View File

@ -0,0 +1,68 @@
.header-wrapper {
background-color: $black;
&__top {
padding: 22px 100px;
border-bottom: 1px solid $gray2;
display: flex;
justify-content: space-between;
align-items: center;
&-logo {
}
form {
width: 24.5%;
}
.campo-busca {
position: relative;
border-radius: 5px;
&__input {
color: $gray3;
font-size: 14px;
line-height: 16px;
border-radius: 5px;
padding: 8px 0 8px 16px;
width: calc(100% - 20px);
outline: none;
}
&__img {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
}
}
&-carrinho {
display: flex;
align-items: center;
width: 12.6%;
justify-content: space-between;
a {
text-decoration: none;
font-size: 14px;
line-height: 16px;
font-weight: 400;
color: $white;
}
}
}
&__bottom {
display: flex;
gap: 55px;
padding: 14px 0 14px 100px;
&-items {
text-decoration: none;
color: $white;
font-size: 14px;
line-height: 16px;
}
}
}

View File

@ -0,0 +1,12 @@
//Colors
//pattern
$black: #000000;
$black2: #292929;
$white: #ffffff;
$gray: #7d7d7d;
$gray2: #c4c4c4;
$gray3: #c6c6c6;
//Fonts
$roboto: "Roboto", sans-serif;

26
tsconfig.json Normal file
View File

@ -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"
]
}