forked from M3-Academy/desafio-react-e-typescript
Merge pull request 'feature/desafio-react-e-typescript' (#1) from feature/desafio-react-e-typescript into main
Reviewed-on: #1
This commit is contained in:
commit
e20ee434da
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal 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*
|
||||
29632
package-lock.json
generated
Normal file
29632
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
54
package.json
Normal file
54
package.json
Normal file
@ -0,0 +1,54 @@
|
||||
{
|
||||
"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",
|
||||
"cpf": "^2.0.1",
|
||||
"date-fns": "^2.29.3",
|
||||
"formik": "^2.2.9",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-text-mask": "^5.5.0",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^0.32.11",
|
||||
"yup-phone": "^1.3.2"
|
||||
},
|
||||
"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"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-text-mask": "^5.4.11"
|
||||
}
|
||||
}
|
||||
43
public/index.html
Normal file
43
public/index.html
Normal 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>
|
||||
BIN
src/assets/images/logo-M3Academy.png
Normal file
BIN
src/assets/images/logo-M3Academy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
9
src/assets/svgs/americanExpress.svg
Normal file
9
src/assets/svgs/americanExpress.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 92 KiB |
9
src/assets/svgs/boleto.svg
Normal file
9
src/assets/svgs/boleto.svg
Normal file
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
12
src/assets/svgs/cart.svg
Normal 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 |
4
src/assets/svgs/close-icon.svg
Normal file
4
src/assets/svgs/close-icon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 638 B |
9
src/assets/svgs/elo.svg
Normal file
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 |
11
src/assets/svgs/facebook.svg
Normal file
11
src/assets/svgs/facebook.svg
Normal 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 |
9
src/assets/svgs/hipercard.svg
Normal file
9
src/assets/svgs/hipercard.svg
Normal file
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
3
src/assets/svgs/home.svg
Normal 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 |
13
src/assets/svgs/instagram.svg
Normal file
13
src/assets/svgs/instagram.svg
Normal 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 |
13
src/assets/svgs/linkedin.svg
Normal file
13
src/assets/svgs/linkedin.svg
Normal 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
10
src/assets/svgs/lupa.svg
Normal 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 |
4
src/assets/svgs/m3-logo.svg
Normal file
4
src/assets/svgs/m3-logo.svg
Normal 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 |
9
src/assets/svgs/mastercard.svg
Normal file
9
src/assets/svgs/mastercard.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
5
src/assets/svgs/menu-icon.svg
Normal file
5
src/assets/svgs/menu-icon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 688 B |
3
src/assets/svgs/more.svg
Normal file
3
src/assets/svgs/more.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 220 B |
9
src/assets/svgs/paypal.svg
Normal file
9
src/assets/svgs/paypal.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 28 KiB |
3
src/assets/svgs/seta.svg
Normal file
3
src/assets/svgs/seta.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 510 B |
11
src/assets/svgs/twitter.svg
Normal file
11
src/assets/svgs/twitter.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4091_422)">
|
||||
<circle cx="17.5" cy="17.5" r="16.5" stroke="#303030" stroke-width="2"/>
|
||||
<path d="M29.9915 10.1563C29.0947 10.5497 28.1392 10.8104 27.143 10.937C28.1679 10.3251 28.95 9.36358 29.3178 8.20462C28.3623 8.7743 27.3073 9.1767 26.183 9.40126C25.2757 8.43521 23.9826 7.83688 22.572 7.83688C19.8351 7.83688 17.6317 10.0584 17.6317 12.7817C17.6317 13.1735 17.6648 13.5503 17.7462 13.909C13.6363 13.7086 9.99968 11.7388 7.55666 8.73813C7.13015 9.47812 6.87997 10.3251 6.87997 11.2369C6.87997 12.949 7.76163 14.4666 9.07583 15.3453C8.28158 15.3302 7.50241 15.0996 6.8423 14.7364C6.8423 14.7515 6.8423 14.7711 6.8423 14.7907C6.8423 17.193 8.55588 19.1884 10.803 19.6481C10.4006 19.7581 9.96201 19.8108 9.50686 19.8108C9.19037 19.8108 8.87086 19.7928 8.57095 19.7264C9.21147 21.6842 11.029 23.1235 13.1902 23.1702C11.5083 24.4859 9.37273 25.2786 7.06083 25.2786C6.65541 25.2786 6.26658 25.2605 5.87775 25.2108C8.06757 26.623 10.6628 27.4293 13.4615 27.4293C22.5584 27.4293 27.5319 19.8937 27.5319 13.3619C27.5319 13.1434 27.5243 12.9324 27.5138 12.7229C28.4949 12.0266 29.3193 11.157 29.9915 10.1563Z" fill="#303030"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4091_422">
|
||||
<rect width="35" height="35" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
src/assets/svgs/up-arrow.svg
Normal file
3
src/assets/svgs/up-arrow.svg
Normal file
@ -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="M0.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.63823 0.408533 6.77081 0.458336 6.8691 0.551047L12.4587 5.82475L12.4588 5.82482C12.5516 5.9124 12.5987 6.02428 12.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.0781 6.63886 0.742447 6.63877 0.541181 6.44888L0.541122 6.44882C0.448342 6.36133 0.401297 6.24944 0.400026 6.13719Z" fill="white" stroke="white" stroke-width="0.8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 844 B |
9
src/assets/svgs/visa.svg
Normal file
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 |
7
src/assets/svgs/vtex-logo.svg
Normal file
7
src/assets/svgs/vtex-logo.svg
Normal 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 |
9
src/assets/svgs/vtex-pci.svg
Normal file
9
src/assets/svgs/vtex-pci.svg
Normal 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 |
11
src/assets/svgs/whatsapp.svg
Normal file
11
src/assets/svgs/whatsapp.svg
Normal file
@ -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_4095_717)">
|
||||
<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.4859 25.1643 24.8582 26.1248 23.5598 26.4053C22.6716 26.5944 21.5113 26.7453 17.6056 25.126C12.6097 23.0563 9.39243 17.9796 9.14168 17.6503C8.90155 17.3209 7.12292 14.9621 7.12292 12.5226C7.12292 10.0831 8.3618 8.89527 8.86118 8.38527C9.2713 7.96664 9.94917 7.77539 10.5994 7.77539C10.8098 7.77539 10.9989 7.78602 11.1689 7.79452C11.6683 7.81577 11.9191 7.84552 12.2484 8.63389C12.6586 9.62202 13.6573 12.0615 13.7763 12.3123C13.8974 12.563 14.0186 12.903 13.8486 13.2324C13.6892 13.5724 13.5489 13.7233 13.2982 14.0123C13.0474 14.3013 12.8094 14.5223 12.5587 14.8325C12.3292 15.1024 12.0699 15.3914 12.3589 15.8908C12.6479 16.3795 13.6467 18.0094 15.1172 19.3184C17.0148 21.0078 18.5533 21.5475 19.1037 21.777C19.5138 21.947 20.0026 21.9066 20.3022 21.5879C20.6826 21.1778 21.1522 20.4978 21.6303 19.8284C21.9703 19.3481 22.3996 19.2886 22.8501 19.4586C23.3091 19.618 25.7379 20.8186 26.2373 21.0673C26.7367 21.318 27.0661 21.437 27.1872 21.6474C27.3062 21.8578 27.3062 22.8459 26.8961 24.0061Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4095_717">
|
||||
<rect width="34" height="34" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
4
src/assets/svgs/youtube.svg
Normal file
4
src/assets/svgs/youtube.svg
Normal 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 |
17
src/components/Caminho.tsx
Normal file
17
src/components/Caminho.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import home from "../assets/svgs/home.svg";
|
||||
import seta from "../assets/svgs/seta.svg";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
|
||||
const Caminho = () => {
|
||||
return (
|
||||
<div className={styles["main-wrapper__caminho"]}>
|
||||
<img className={styles["caminho-image"]} src={home} alt="home" />
|
||||
<img className={styles["caminho-seta"]} src={seta} alt="seta" />
|
||||
<a href="/">INSTITUCIONAL</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Caminho };
|
||||
39
src/components/Conteudo.tsx
Normal file
39
src/components/Conteudo.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
import { Menu } from "./Menu";
|
||||
import { Contato } from "./Routes/Contato";
|
||||
import { Sobre } from "./Routes/Sobre";
|
||||
|
||||
const Conteudo = () => {
|
||||
return (
|
||||
<div className={styles["main-wrapper__conteudo"]}>
|
||||
<div className={styles["principal"]}>
|
||||
<Router>
|
||||
<Menu />
|
||||
<Routes>
|
||||
<Route path="/" element={<Sobre titulo="Sobre" />} />
|
||||
<Route path="/sobre" element={<Sobre titulo="Sobre" />} />
|
||||
<Route
|
||||
path="/pagamento"
|
||||
element={<Sobre titulo="Forma de Pagamento" />}
|
||||
/>
|
||||
<Route path="/entrega" element={<Sobre titulo="Entrega" />} />
|
||||
<Route
|
||||
path="/troca"
|
||||
element={<Sobre titulo="Troca e Devolução" />}
|
||||
/>
|
||||
<Route
|
||||
path="/seguranca"
|
||||
element={<Sobre titulo="Segurança e Privacidade" />}
|
||||
/>
|
||||
<Route path="/contato" element={<Contato />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Conteudo };
|
||||
37
src/components/CustomForm.tsx
Normal file
37
src/components/CustomForm.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
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: "",
|
||||
};
|
||||
interface ICampoProps {
|
||||
place: string;
|
||||
button: string;
|
||||
}
|
||||
|
||||
const CustomForm = ({ place, button }: ICampoProps) => {
|
||||
const handleFormikSubmit = () => {};
|
||||
|
||||
return (
|
||||
<Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
|
||||
<Form>
|
||||
<div className={styles["campo-busca"]}>
|
||||
<Field
|
||||
className={styles["campo-busca__input"]}
|
||||
name="name"
|
||||
placeholder={place}
|
||||
/>
|
||||
<button className={styles["campo-busca__img"]}>
|
||||
{button}
|
||||
<img src={lupa} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export { CustomForm };
|
||||
18
src/components/Footer.tsx
Normal file
18
src/components/Footer.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
import { FoooterBottom } from "./FooterBottom";
|
||||
import { FoooterTop } from "./FooterTop";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer>
|
||||
<div className={styles["footer-wrapper"]}>
|
||||
<FoooterTop />
|
||||
<FoooterBottom />
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export { Footer };
|
||||
51
src/components/FooterBottom.tsx
Normal file
51
src/components/FooterBottom.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
import master from "../assets/svgs/mastercard.svg";
|
||||
import visa from "../assets/svgs/visa.svg";
|
||||
import american from "../assets/svgs/americanExpress.svg";
|
||||
import elo from "../assets/svgs/elo.svg";
|
||||
import hiper from "../assets/svgs/hipercard.svg";
|
||||
import paypal from "../assets/svgs/paypal.svg";
|
||||
import boleto from "../assets/svgs/boleto.svg";
|
||||
import pci from "../assets/svgs/vtex-pci.svg";
|
||||
import vtex from "../assets/svgs/vtex-logo.svg";
|
||||
import m3 from "../assets/svgs/m3-logo.svg";
|
||||
|
||||
const FoooterBottom = () => {
|
||||
return (
|
||||
<div className={styles["footer-wrapper__bottom"]}>
|
||||
<p className={styles["footer-wrapper__bottom-text"]}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor
|
||||
</p>
|
||||
<div className={styles["footer-wrapper__bottom-central"]}>
|
||||
<div className={styles["payments"]}>
|
||||
<img src={master} alt="mastercard" />
|
||||
<img src={visa} alt="visa" />
|
||||
<img src={american} alt="AmericanExpress" />
|
||||
<img src={elo} alt="Elo" />
|
||||
<img src={hiper} alt="hipercard" />
|
||||
<img src={paypal} alt="paypal" />
|
||||
<img src={boleto} alt="boleto" />
|
||||
</div>
|
||||
<div className={styles["divisor"]}></div>
|
||||
<div className={styles["certificado"]}>
|
||||
<img src={pci} alt="VtexPci" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["footer-wrapper__bottom-credits"]}>
|
||||
<div className={styles["powered"]}>
|
||||
<p className={styles["powered-text"]}>Powered by</p>
|
||||
<img className={styles["powered-img"]} src={vtex} alt="Vtex-logo" />
|
||||
</div>
|
||||
<div className={styles["developed"]}>
|
||||
<p className={styles["developed-text"]}>Developed By</p>
|
||||
<img className={styles["developed-img"]} src={m3} alt="Vtex-logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FoooterBottom };
|
||||
62
src/components/FooterTop.tsx
Normal file
62
src/components/FooterTop.tsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
import { ListaFooter } from "./ListaFooter";
|
||||
import facebook from "../assets/svgs/facebook.svg";
|
||||
import instagram from "../assets/svgs/instagram.svg";
|
||||
import twitter from "../assets/svgs/twitter.svg";
|
||||
import youtube from "../assets/svgs/youtube.svg";
|
||||
import linkedin from "../assets/svgs/linkedin.svg";
|
||||
|
||||
const FoooterTop = () => {
|
||||
return (
|
||||
<div className={styles["footer-wrapper__top"]}>
|
||||
<ListaFooter
|
||||
title="Institucional"
|
||||
text1="Quem Somos"
|
||||
text2="Política de Privacidade"
|
||||
text3="Segurança"
|
||||
text4="Seja um Revendedor"
|
||||
/>
|
||||
<ListaFooter
|
||||
title="Dúvidas"
|
||||
text1="Entrega"
|
||||
text2="Pagamento"
|
||||
text3="Trocas e Devoluções"
|
||||
text4="Dúvidas Frequentes"
|
||||
/>
|
||||
<ListaFooter
|
||||
title="Fale Conosco"
|
||||
text1="Atendimento Ao Consumidor"
|
||||
text2="(11) 4159 9504"
|
||||
text3="Atendimento Online"
|
||||
text4="(11) 99433-8825"
|
||||
/>
|
||||
|
||||
<div className={styles["social-wrapper"]}>
|
||||
<div className={styles["sociais"]}>
|
||||
<a className={styles["sociais-icon"]} href="/">
|
||||
<img src={facebook} alt="facebook" />
|
||||
</a>
|
||||
<a className={styles["sociais-icon"]} href="/">
|
||||
<img src={instagram} alt="instagram" />
|
||||
</a>
|
||||
<a className={styles["sociais-icon"]} href="/">
|
||||
<img src={twitter} alt="twitter" />
|
||||
</a>
|
||||
<a className={styles["sociais-icon"]} href="/">
|
||||
<img src={youtube} alt="youtube" />
|
||||
</a>
|
||||
<a className={styles["sociais-icon"]} href="/">
|
||||
<img src={linkedin} alt="linkedin" />
|
||||
</a>
|
||||
</div>
|
||||
<a className={styles["sociail-link"]} href="/">
|
||||
www.loremipsum.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FoooterTop };
|
||||
18
src/components/Header.tsx
Normal file
18
src/components/Header.tsx
Normal 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"]} id="header">
|
||||
<HeaderTop />
|
||||
<HeaderBottom />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export { Header };
|
||||
21
src/components/HeaderBottom.tsx
Normal file
21
src/components/HeaderBottom.tsx
Normal 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 };
|
||||
41
src/components/HeaderTop.tsx
Normal file
41
src/components/HeaderTop.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
import menu from "../assets/svgs/menu-icon.svg";
|
||||
import logo from "../assets/images/logo-M3Academy.png";
|
||||
import cart from "../assets/svgs/cart.svg";
|
||||
import { CustomForm } from "./CustomForm";
|
||||
import { Modal } from "./Modal";
|
||||
|
||||
const HeaderTop = () => {
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
return (
|
||||
<div className={styles["header-wrapper__top"]}>
|
||||
<button
|
||||
onClick={() => setIsOpened(true)}
|
||||
className={styles["header-wrapper__top-linkMenu"]}
|
||||
>
|
||||
<img
|
||||
className={styles["header-wrapper__top-menu"]}
|
||||
src={menu}
|
||||
alt="menu"
|
||||
/>
|
||||
</button>
|
||||
<a href="/" className={styles["header-wrapper__top-linkM3"]}>
|
||||
<img
|
||||
className={styles["header-wrapper__top-logo"]}
|
||||
src={logo}
|
||||
alt="logo"
|
||||
/>
|
||||
</a>
|
||||
<CustomForm place="Buscar..." button="" />
|
||||
<div className={styles["header-wrapper__top-carrinho"]}>
|
||||
<a href="/">ENTRAR</a>
|
||||
<img src={cart} alt="" />
|
||||
</div>
|
||||
<Modal isOpened={isOpened} setIsOpened={setIsOpened} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { HeaderTop };
|
||||
42
src/components/ListaFooter.tsx
Normal file
42
src/components/ListaFooter.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React, { useState } from "react";
|
||||
import styles from "../styles/main.module.scss";
|
||||
import more from "../assets/svgs/more.svg";
|
||||
|
||||
interface IlistProps {
|
||||
title: string;
|
||||
text1: string;
|
||||
text2: string;
|
||||
text3: string;
|
||||
text4: string;
|
||||
}
|
||||
|
||||
const ListaFooter = ({ title, text1, text2, text3, text4 }: IlistProps) => {
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
return (
|
||||
<div className={styles["footer-wrapper__top-items"]}>
|
||||
<div className={styles["list-wrapper"]}>
|
||||
<h2 className={styles["list-wrapper__title"]}>{title}</h2>
|
||||
<ul
|
||||
className={`${styles["list-wrapper__list"]} ${
|
||||
styles[`${isOpened && "aberto"}`]
|
||||
}`}
|
||||
>
|
||||
<li className={styles["list-wrapper__text"]}>{text1}</li>
|
||||
<li className={styles["list-wrapper__text"]}>{text2}</li>
|
||||
<li className={styles["list-wrapper__text"]}>{text3}</li>
|
||||
<li className={styles["list-wrapper__text"]}>
|
||||
<a href="/">{text4}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
className={styles["mostra-mais"]}
|
||||
onClick={() => setIsOpened(!isOpened)}
|
||||
>
|
||||
<img src={more} alt="mais" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ListaFooter };
|
||||
24
src/components/Main.tsx
Normal file
24
src/components/Main.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
import { Caminho } from "./Caminho";
|
||||
import { Conteudo } from "./Conteudo";
|
||||
import { Newsletter } from "./Newsletter";
|
||||
import { ScrollPage } from "./ScrollPage";
|
||||
import { Titulo } from "./Titulo";
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<main>
|
||||
<div className={styles["main-wrapper"]}>
|
||||
<Caminho />
|
||||
<Titulo />
|
||||
<Conteudo />
|
||||
<Newsletter />
|
||||
<ScrollPage />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export { Main };
|
||||
69
src/components/Menu.tsx
Normal file
69
src/components/Menu.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import styles from "../styles/main.module.scss";
|
||||
|
||||
const Menu = () => {
|
||||
const [routePosition, setPosition] = useState(1);
|
||||
return (
|
||||
<div className={styles["conteudo-menu"]}>
|
||||
<ul className={styles["menu"]}>
|
||||
<Link to="/" onClick={() => setPosition(1)}>
|
||||
<li
|
||||
className={`${styles["menu__item"]} ${
|
||||
styles[`${routePosition === 1 && "menu__item-ativo"}`]
|
||||
}`}
|
||||
>
|
||||
Sobre
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/pagamento" onClick={() => setPosition(2)}>
|
||||
<li
|
||||
className={`${styles["menu__item"]} ${
|
||||
styles[`${routePosition === 2 && "menu__item-ativo"}`]
|
||||
}`}
|
||||
>
|
||||
Forma De Pagamento
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/entrega" onClick={() => setPosition(3)}>
|
||||
<li
|
||||
className={`${styles["menu__item"]} ${
|
||||
styles[`${routePosition === 3 && "menu__item-ativo"}`]
|
||||
}`}
|
||||
>
|
||||
Entrega
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/troca" onClick={() => setPosition(4)}>
|
||||
<li
|
||||
className={`${styles["menu__item"]} ${
|
||||
styles[`${routePosition === 4 && "menu__item-ativo"}`]
|
||||
}`}
|
||||
>
|
||||
Troca e Devolução
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/seguranca" onClick={() => setPosition(5)}>
|
||||
<li
|
||||
className={`${styles["menu__item"]} ${
|
||||
styles[`${routePosition === 5 && "menu__item-ativo"}`]
|
||||
}`}
|
||||
>
|
||||
Segurança e Privacidade
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/contato" onClick={() => setPosition(6)}>
|
||||
<li
|
||||
className={`${styles["menu__item"]} ${
|
||||
styles[`${routePosition === 6 && "menu__item-ativo"}`]
|
||||
}`}
|
||||
>
|
||||
Contato
|
||||
</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Menu };
|
||||
82
src/components/Modal.scss
Normal file
82
src/components/Modal.scss
Normal file
@ -0,0 +1,82 @@
|
||||
.modal_wrapper {
|
||||
top: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 3.52%;
|
||||
background: #ffffff;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 0.4s ease-in-out;
|
||||
bottom: 33.6%;
|
||||
|
||||
.modal-content {
|
||||
z-index: 8;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 3.5%;
|
||||
bottom: 33.6%;
|
||||
background: white;
|
||||
|
||||
&__wrapper {
|
||||
position: relative;
|
||||
.modal-login {
|
||||
padding: 31px 0 31px 16px;
|
||||
background-color: #000000;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-items {
|
||||
padding: 0 0 0 16px;
|
||||
list-style-type: none;
|
||||
|
||||
.modal-item {
|
||||
margin-bottom: 12px;
|
||||
a {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-decoration: none;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.opened {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
z-index: 8;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.modal_wrapper {
|
||||
right: 9.5%;
|
||||
|
||||
.modal-content {
|
||||
right: 9.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
src/components/Modal.tsx
Normal file
38
src/components/Modal.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import "./Modal.scss";
|
||||
import close from "../assets/svgs/close-icon.svg";
|
||||
|
||||
interface ModalProps {
|
||||
isOpened: boolean;
|
||||
setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const Modal = ({ isOpened, setIsOpened }: ModalProps) => {
|
||||
console.log(isOpened);
|
||||
return (
|
||||
<div className={`modal_wrapper ${isOpened && "opened"}`}>
|
||||
<div className="modal-content">
|
||||
<div className="modal-content__wrapper">
|
||||
<div className="modal-login">ENTRAR</div>
|
||||
<button className="modal-close" onClick={() => setIsOpened(false)}>
|
||||
<img src={close} alt="close-icon" />
|
||||
</button>
|
||||
</div>
|
||||
<ul className="modal-items">
|
||||
<li className="modal-item">
|
||||
<a href="/">CURSOS</a>
|
||||
</li>
|
||||
<li className="modal-item">
|
||||
<a href="/">SAIBA MAIS</a>
|
||||
</li>
|
||||
<li className="modal-item">
|
||||
<a href="/">INSTITUCIONAIS</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="modal-overlay" onClick={() => setIsOpened(false)}></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Modal };
|
||||
17
src/components/Newsletter.tsx
Normal file
17
src/components/Newsletter.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
import { CustomForm } from "./CustomForm";
|
||||
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
<div className={styles["main-wrapper__newsletter"]}>
|
||||
<h2 className={styles["main-wrapper__newsletter-title"]}>
|
||||
Assine nossa newsletter
|
||||
</h2>
|
||||
<CustomForm place="E-mail" button="Enviar" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Newsletter };
|
||||
211
src/components/Routes/Contato.tsx
Normal file
211
src/components/Routes/Contato.tsx
Normal file
@ -0,0 +1,211 @@
|
||||
import React, { useState } from "react";
|
||||
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
|
||||
import FormSchema from "../../schema/FormSchema";
|
||||
import MaskedInput from "react-text-mask";
|
||||
|
||||
import styles from "../../styles/main.module.scss";
|
||||
|
||||
interface IFormikValues {
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
nascimento: string;
|
||||
tel: string;
|
||||
instagram: string;
|
||||
check: boolean;
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
nascimento: "",
|
||||
tel: "",
|
||||
instagram: "",
|
||||
check: false,
|
||||
};
|
||||
|
||||
const phoneNumberMask = [
|
||||
"(",
|
||||
/[1-9]/,
|
||||
/\d/,
|
||||
")",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
];
|
||||
|
||||
const date = [/[1-9]/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
|
||||
|
||||
const cpf = [
|
||||
/[1-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
];
|
||||
|
||||
const Contato = () => {
|
||||
const handleFormikSubmit = (
|
||||
values: IFormikValues,
|
||||
actions: FormikHelpers<IFormikValues>
|
||||
) => {
|
||||
console.log(values);
|
||||
actions.resetForm();
|
||||
setMsg(true);
|
||||
};
|
||||
|
||||
const [msg, setMsg] = useState(false);
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={handleFormikSubmit}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
<Form>
|
||||
<h1 className={styles["principal__content-title"]}>
|
||||
Preencha o formulário
|
||||
</h1>
|
||||
<div className={styles["form-contato"]}>
|
||||
<div>
|
||||
<label htmlFor="name">Nome</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="name"
|
||||
className={styles["form-invalid-feedback"]}
|
||||
/>
|
||||
<Field id="name" name="name" placeholder="Seu nome Completo" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={styles["form-invalid-feedback"]}
|
||||
/>
|
||||
<Field
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Seu e-mail"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={styles["form-invalid-feedback"]}
|
||||
/>
|
||||
<Field
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
mask={cpf}
|
||||
id="cpf"
|
||||
placeholder="000.000.000-00"
|
||||
/>
|
||||
)}
|
||||
name="cpf"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="nascimento">Data de Nacimento:</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="nascimento"
|
||||
className={styles["form-invalid-feedback"]}
|
||||
/>
|
||||
<Field
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
mask={date}
|
||||
id="date"
|
||||
placeholder="00.00.0000"
|
||||
/>
|
||||
)}
|
||||
name="nascimento"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="tel">Telefone:</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="tel"
|
||||
className={styles["form-invalid-feedback"]}
|
||||
/>
|
||||
<Field
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
mask={phoneNumberMask}
|
||||
id="phone"
|
||||
placeholder="(00) 00000-0000"
|
||||
/>
|
||||
)}
|
||||
name="tel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="instagram"
|
||||
className={styles["form-invalid-feedback"]}
|
||||
/>
|
||||
<Field id="instagram" name="instagram" placeholder="@seuuser" />
|
||||
</div>
|
||||
|
||||
<div className={styles["declaracao"]}>
|
||||
<div className={styles["declaracao-wrapper"]}>
|
||||
<label htmlFor="check">Declaro que li e aceito</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="check"
|
||||
className={`${styles["form-invalid-feedback"]} ${
|
||||
styles[`${"asteristico"}`]
|
||||
}`}
|
||||
/>
|
||||
<Field type="checkbox" id="check" name="check" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit">CADASTRE-SE</button>
|
||||
|
||||
<span
|
||||
className={`${styles["sucess-msg"]} ${
|
||||
styles[`${msg === true && "sucess-msg-ativo"}`]
|
||||
}`}
|
||||
>
|
||||
*Formulário enviado com sucesso!
|
||||
</span>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export { Contato };
|
||||
44
src/components/Routes/Sobre.tsx
Normal file
44
src/components/Routes/Sobre.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../../styles/main.module.scss";
|
||||
|
||||
interface Iprops {
|
||||
titulo: string;
|
||||
}
|
||||
|
||||
const Sobre = ({ titulo }: Iprops) => {
|
||||
return (
|
||||
<div className={styles["principal__content"]}>
|
||||
<h1 className={styles["principal__content-title"]}>{titulo}</h1>
|
||||
<p className={styles["principal__content-text"]}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
||||
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
||||
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
||||
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
|
||||
mollit anim id est laborum.
|
||||
</p>
|
||||
<p className={styles["principal__content-text"]}>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
||||
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
|
||||
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
|
||||
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
|
||||
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
|
||||
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
|
||||
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
|
||||
voluptatem.
|
||||
</p>
|
||||
<p className={styles["principal__content-text"]}>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export { Sobre };
|
||||
27
src/components/ScrollPage.tsx
Normal file
27
src/components/ScrollPage.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { useState } from "react";
|
||||
import styles from "../styles/main.module.scss";
|
||||
import whatsapp from "../assets/svgs/whatsapp.svg";
|
||||
import seta from "../assets/svgs/up-arrow.svg";
|
||||
|
||||
const ScrollPage = () => {
|
||||
const [pageYPosition, setPageYPosition] = useState(0);
|
||||
|
||||
function getPageYAfterScroll() {
|
||||
setPageYPosition(window.scrollY);
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", getPageYAfterScroll);
|
||||
|
||||
return (
|
||||
<div className={styles["volta-pag"]}>
|
||||
<img className={styles["whatsapp-icon"]} src={whatsapp} alt="whatsapp" />
|
||||
{pageYPosition > 200 && (
|
||||
<a className={styles["volta-pag__link"]} href="#header">
|
||||
<img className={styles["go-to-top"]} src={seta} alt="seta" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ScrollPage };
|
||||
13
src/components/Titulo.tsx
Normal file
13
src/components/Titulo.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../styles/main.module.scss";
|
||||
|
||||
const Titulo = () => {
|
||||
return (
|
||||
<div className={styles["main-wrapper__titulo"]}>
|
||||
<h1 className={styles["titulo-text"]}>INSTITUCIONAL</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Titulo };
|
||||
12
src/index.tsx
Normal file
12
src/index.tsx
Normal 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")
|
||||
);
|
||||
16
src/pages/Home.tsx
Normal file
16
src/pages/Home.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Header } from "../components/Header";
|
||||
import { Main } from "../components/Main";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Main />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { Home };
|
||||
1
src/react-app-env.d.ts
vendored
Normal file
1
src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
||||
25
src/schema/FormSchema.ts
Normal file
25
src/schema/FormSchema.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import * as Yup from "yup";
|
||||
import "yup-phone";
|
||||
import { parse } from "date-fns";
|
||||
import CPF from "cpf";
|
||||
|
||||
export default Yup.object().shape({
|
||||
name: Yup.string().min(3, "Nome Inválido").required("*Campo Obrigatório"),
|
||||
email: Yup.string().email("Email Inválido").required("*Campo Obrigatório"),
|
||||
cpf: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.test("test-cpf", "CPF Inválido", (cpf) => CPF.isValid(cpf!)),
|
||||
nascimento: Yup.date()
|
||||
.transform((value, originalValue, context) => {
|
||||
if (context.isType(value)) return value;
|
||||
return parse(originalValue, "dd.MM.yyyy", new Date());
|
||||
})
|
||||
.typeError("Data Inválida")
|
||||
.max(new Date(), "Data Inválida")
|
||||
.required("*Campo Obrigatório"),
|
||||
tel: Yup.string()
|
||||
.required("*Campo Obrigatório")
|
||||
.phone("BR", true, "Telefone Inválido"),
|
||||
instagram: Yup.string().min(3, "Instagram Inválido"),
|
||||
check: Yup.bool().oneOf([true], "*"),
|
||||
});
|
||||
34
src/styles/common/global.scss
Normal file
34
src/styles/common/global.scss
Normal file
@ -0,0 +1,34 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
10
src/styles/main.module.scss
Normal file
10
src/styles/main.module.scss
Normal file
@ -0,0 +1,10 @@
|
||||
//variables
|
||||
@import "./utils/variables.scss";
|
||||
|
||||
//Resets and Global
|
||||
@import "./common/global.scss";
|
||||
|
||||
//Project Parts
|
||||
@import "./partials/Header.module.scss";
|
||||
@import "./partials/Footer.module.scss";
|
||||
@import "./partials/MainContent.module.scss";
|
||||
281
src/styles/partials/Footer.module.scss
Normal file
281
src/styles/partials/Footer.module.scss
Normal file
@ -0,0 +1,281 @@
|
||||
.footer-wrapper {
|
||||
&__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 50px 100px;
|
||||
position: relative;
|
||||
border-top: 1px solid $black;
|
||||
|
||||
&-items {
|
||||
display: flex;
|
||||
.list-wrapper {
|
||||
&__list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-width: 154px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
li:nth-child(even) {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
a {
|
||||
color: $black3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mostra-mais {
|
||||
display: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.sociais {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sociail-link {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $black3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
padding: 15px 100px;
|
||||
background: $black;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&-text {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
max-width: 228px;
|
||||
}
|
||||
|
||||
&-central {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.payments {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.divisor {
|
||||
border-right: 1px solid $white;
|
||||
width: 0px;
|
||||
height: 24px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.certificado {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&-credits {
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
.powered,
|
||||
.developed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-text {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $white;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-img {
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.footer-wrapper {
|
||||
&__top {
|
||||
flex-direction: column;
|
||||
padding: 24px 16px;
|
||||
|
||||
.list-wrapper {
|
||||
&__list {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
max-width: 155px;
|
||||
}
|
||||
.aberto {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
height: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
&-items {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
.mostra-mais {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.social-wrapper {
|
||||
.sociail-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 58px 0 16px 16px;
|
||||
position: relative;
|
||||
|
||||
&-text {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&-central {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
|
||||
.payments {
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 9.4%;
|
||||
}
|
||||
}
|
||||
|
||||
.certificado {
|
||||
img {
|
||||
width: 82%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.footer-wrapper {
|
||||
&__top {
|
||||
.list-wrapper {
|
||||
&__list {
|
||||
max-width: 309px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-wrapper {
|
||||
.sociais {
|
||||
img {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.sociail-link {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.whatsapp-icon {
|
||||
width: 66px;
|
||||
top: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
&-text {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
max-width: 490px;
|
||||
}
|
||||
|
||||
&-central {
|
||||
.payments {
|
||||
img {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.certificado {
|
||||
img {
|
||||
width: 106px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-credits {
|
||||
.powered,
|
||||
.developed {
|
||||
&-text {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
.powered {
|
||||
&-img {
|
||||
width: 84px;
|
||||
}
|
||||
}
|
||||
.developed {
|
||||
&-img {
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
189
src/styles/partials/Header.module.scss
Normal file
189
src/styles/partials/Header.module.scss
Normal file
@ -0,0 +1,189 @@
|
||||
.header-wrapper {
|
||||
background-color: $black;
|
||||
|
||||
&__top {
|
||||
padding: 22px 100px;
|
||||
border-bottom: 1px solid $gray2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&-linkMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-linkM3 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-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% - 21px);
|
||||
outline: none;
|
||||
height: 12px;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray2;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.header-wrapper__top {
|
||||
form {
|
||||
width: 91.8% !important;
|
||||
}
|
||||
|
||||
.campo-busca {
|
||||
&__input {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.header-wrapper {
|
||||
&__top {
|
||||
padding: 25px 16px 88px 16px;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
&-linkMenu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
position: absolute;
|
||||
top: 78px;
|
||||
width: 97%;
|
||||
}
|
||||
|
||||
&-carrinho {
|
||||
width: auto;
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.header-wrapper {
|
||||
&__top {
|
||||
&-linkM3 {
|
||||
width: 11.55%;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 22.4%;
|
||||
}
|
||||
|
||||
.campo-busca {
|
||||
&__input {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&-carrinho {
|
||||
width: 9.31%;
|
||||
|
||||
a {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
&-items {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
513
src/styles/partials/MainContent.module.scss
Normal file
513
src/styles/partials/MainContent.module.scss
Normal file
@ -0,0 +1,513 @@
|
||||
.main-wrapper {
|
||||
position: relative;
|
||||
|
||||
&__caminho {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 29px 0 0 100px;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration: none;
|
||||
color: $gray2;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__titulo {
|
||||
padding: 80px 0;
|
||||
.titulo-text {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__conteudo {
|
||||
padding: 0 100px 70px 100px;
|
||||
border-bottom: 1px solid $black;
|
||||
.principal {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
&-title {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
&-text {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $gray;
|
||||
margin: 0;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
.form-contato {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.declaracao {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.declaracao-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
text-decoration: underline;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $black4;
|
||||
padding-left: 20px;
|
||||
cursor: pointer;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
input {
|
||||
background: #ffffff;
|
||||
border: 1px solid #100d0e;
|
||||
border-radius: 25px;
|
||||
padding: 15px 0 15px 20px;
|
||||
outline: none;
|
||||
height: 14px;
|
||||
&::placeholder {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
color: #b9b7b7;
|
||||
}
|
||||
}
|
||||
|
||||
.form-invalid-feedback {
|
||||
color: #ff0000;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.asteristico {
|
||||
position: absolute;
|
||||
left: 6%;
|
||||
font-size: 16px;
|
||||
width: 1%;
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $black;
|
||||
border-radius: 25px;
|
||||
letter-spacing: 0.05em;
|
||||
color: $white;
|
||||
padding: 17px 0;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sucess-msg {
|
||||
display: none;
|
||||
}
|
||||
.sucess-msg-ativo {
|
||||
display: block;
|
||||
position: initial;
|
||||
transform: initial;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conteudo-menu {
|
||||
border-right: 1px solid $black;
|
||||
width: 40.3%;
|
||||
height: 285px;
|
||||
|
||||
.menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $gray;
|
||||
padding: 10px 0 10px 16px;
|
||||
}
|
||||
&__item-ativo {
|
||||
color: $white;
|
||||
padding: 10px 0 10px 16px;
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__newsletter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
width: 37%;
|
||||
margin: auto;
|
||||
|
||||
&-title {
|
||||
align-self: flex-start;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin: 0 0 8px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
|
||||
.campo-busca {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&__input {
|
||||
color: $gray3;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
border-radius: 5px;
|
||||
padding: 13px 16px;
|
||||
border: 1px solid #e5e5e5;
|
||||
width: 64.62%;
|
||||
outline: none;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
|
||||
&::placeholder {
|
||||
color: $gray2;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
padding: 14px 20px;
|
||||
background: $black;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
color: $white;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
width: 26.6%;
|
||||
height: 42px;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.volta-pag {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
z-index: 1;
|
||||
|
||||
.whatsapp-icon {
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: $gray2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.go-to-top {
|
||||
width: 12px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.main-wrapper {
|
||||
&__caminho {
|
||||
padding: 29px 0 0 16px;
|
||||
}
|
||||
|
||||
&__conteudo {
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid $black;
|
||||
.principal {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
height: auto;
|
||||
margin-bottom: 80px;
|
||||
|
||||
&__content {
|
||||
&-title {
|
||||
text-align: center;
|
||||
}
|
||||
&-text:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conteudo-menu {
|
||||
border-right: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__newsletter {
|
||||
padding: 16px;
|
||||
width: auto;
|
||||
&-title {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
|
||||
.campo-busca {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
&__input {
|
||||
width: calc(99.8% - 32px);
|
||||
margin: 0;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
&__img {
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.main-wrapper {
|
||||
&__caminho {
|
||||
gap: 12px;
|
||||
.caminho-image {
|
||||
width: 31px;
|
||||
}
|
||||
|
||||
.caminho-seta {
|
||||
width: 9px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&__titulo {
|
||||
.titulo-text {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
&__conteudo {
|
||||
.principal {
|
||||
&__content {
|
||||
&-title {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
&-text {
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.form-contato {
|
||||
.declaracao {
|
||||
input {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 28px !important;
|
||||
line-height: 33px !important;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 24px !important;
|
||||
line-height: 28px !important;
|
||||
transform: translateY(63%) !important;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 31px;
|
||||
&::placeholder {
|
||||
font-size: 28px !important;
|
||||
line-height: 33px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.asteristico {
|
||||
left: 2% !important;
|
||||
top: -13px !important;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 32px !important;
|
||||
line-height: 38px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conteudo-menu {
|
||||
width: 35%;
|
||||
height: 465px;
|
||||
.menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
&__item-ativo {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__newsletter {
|
||||
width: 39.7%;
|
||||
&-title {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
|
||||
.campo-busca {
|
||||
&__input {
|
||||
width: 68.6%;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
&__img {
|
||||
height: 59px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
width: 26.6%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.volta-pag {
|
||||
.whatsapp-icon {
|
||||
width: 66px;
|
||||
}
|
||||
&__link {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
|
||||
.go-to-top {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.principal {
|
||||
width: 100%;
|
||||
}
|
||||
15
src/styles/utils/variables.scss
Normal file
15
src/styles/utils/variables.scss
Normal file
@ -0,0 +1,15 @@
|
||||
//Colors
|
||||
|
||||
//pattern
|
||||
$black: #000000;
|
||||
$black2: #292929;
|
||||
$black3: #303030;
|
||||
$black4: #100d0e;
|
||||
$white: #ffffff;
|
||||
$gray: #7d7d7d;
|
||||
$gray2: #c4c4c4;
|
||||
$gray3: #c6c6c6;
|
||||
$green: #008000;
|
||||
|
||||
//Fonts
|
||||
$roboto: "Roboto", sans-serif;
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal 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"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user