Feat(Main): Cria Cards select
This commit is contained in:
parent
ff01113966
commit
7c955cf1b5
136
react-ts/package-lock.json
generated
136
react-ts/package-lock.json
generated
@ -16,10 +16,12 @@
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"formik": "^2.2.9",
|
||||
"react-modal": "^3.16.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
"vite": "^4.0.0",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
@ -328,6 +330,18 @@
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.20.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
|
||||
"integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.13.11"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/template": {
|
||||
"version": "7.20.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
|
||||
@ -776,6 +790,12 @@
|
||||
"@jridgewell/sourcemap-codec": "1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.191",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
|
||||
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
@ -1011,6 +1031,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.284",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
|
||||
@ -1090,6 +1119,30 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/formik": {
|
||||
"version": "2.2.9",
|
||||
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
|
||||
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://opencollective.com/formik"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"deepmerge": "^2.1.1",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"react-fast-compare": "^2.0.1",
|
||||
"tiny-warning": "^1.0.2",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
@ -1161,6 +1214,15 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
|
||||
@ -1250,6 +1312,18 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
@ -1288,6 +1362,12 @@
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/nanoclone": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
|
||||
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.4",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
|
||||
@ -1383,6 +1463,12 @@
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/property-expr": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
|
||||
"integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
@ -1406,6 +1492,12 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
@ -1458,6 +1550,12 @@
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
@ -1558,6 +1656,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
@ -1579,6 +1683,18 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.9.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
|
||||
@ -1681,6 +1797,24 @@
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/yup": {
|
||||
"version": "0.32.11",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
|
||||
"integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.15.4",
|
||||
"@types/lodash": "^4.14.175",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"nanoclone": "^0.2.1",
|
||||
"property-expr": "^2.0.4",
|
||||
"toposort": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,9 +17,11 @@
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/react-modal": "^3.13.1",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"formik": "^2.2.9",
|
||||
"react-modal": "^3.16.1",
|
||||
"sass": "^1.57.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
"vite": "^4.0.0",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import Header from '../../components/Header/Header'
|
||||
import HeaderMobile from '../../components/HeaderMobile/HeaderMobile'
|
||||
import BreadCrumb from '../../components/BreadCrumb/BreadCrumb'
|
||||
import CardSelect from '../../components/CardsSelect/CardsSelect'
|
||||
import NewsLetter from '../../components/NewsLetter/NewsLetter'
|
||||
import FooterLinks from '../../components/FooterLinks/FooterLinks'
|
||||
import FooterLinksMobile from '../../components/FooterLinksMobile/FooterLinksMobile'
|
||||
@ -12,6 +13,7 @@ const Home = () => {
|
||||
<Header/>
|
||||
<HeaderMobile/>
|
||||
<BreadCrumb/>
|
||||
<CardSelect/>
|
||||
<NewsLetter/>
|
||||
<FooterLinks/>
|
||||
<FooterLinksMobile/>
|
||||
|
||||
18
react-ts/src/Schema/FormSchema.tsx
Normal file
18
react-ts/src/Schema/FormSchema.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import * as Yup from "yup";
|
||||
|
||||
|
||||
export default Yup.object().shape({
|
||||
name: Yup.string().required("*Campo Obrigatório").matches(/^[\w'\-,.][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*(){}|~<>;:[\]]{2,}$/g,
|
||||
"*Nome Inválido"),
|
||||
email: Yup.string().required("*Campo Obrigatório").email("*E-mail Inválido"),
|
||||
cpf: Yup.string().required("*Campo Obrigatório").matches(/[0-9]{3}\.?[0-9]{3}\.?[0-9]{3}-?[0-9]{2}/, "CPF inválido"),
|
||||
birthDate: Yup.string().required("*Campo Obrigatório").matches(/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/,
|
||||
"*Data inválida"),
|
||||
phoneNumber: Yup.string().required("*Campo Obrigatório").matches(/^\(?[1-9]{2}\)? ?(?:[2-8]|9[1-9])[0-9]{3}-?[0-9]{4}$/g,
|
||||
"*Número inválido"),
|
||||
instagram: Yup.string().required("*Campo Obrigatório").matches(/(?:@)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?)/g,
|
||||
"*Instagram inválido"),
|
||||
|
||||
acceptTerms: Yup.bool().oneOf([true], "*É necessário aceitar os termos"),
|
||||
|
||||
});
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1280px) {
|
||||
@media only screen and (max-width: 1279px) {
|
||||
.container-breadCrumb {
|
||||
padding: 29px 16px 0;
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import Home from '../../assets/images/home.svg';
|
||||
import ArrowRight from '../../assets/images/arrowRight.svg';
|
||||
|
||||
const BreadCrumb = () => {
|
||||
|
||||
return (
|
||||
<div className={styles['container-breadCrumb']}>
|
||||
<img className={styles['container-breadCrumb__house']} src={Home} alt="Home" />
|
||||
|
||||
28
react-ts/src/components/Cards/Entrega.module.scss
Normal file
28
react-ts/src/components/Cards/Entrega.module.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__h1 {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-black4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&__p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $color-grey4;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
react-ts/src/components/Cards/Entrega.tsx
Normal file
23
react-ts/src/components/Cards/Entrega.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import styles from './Entrega.module.scss'
|
||||
|
||||
const Entrega = () => {
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<h1 className={styles['container__h1']}>Entrega</h1>
|
||||
<div className={styles['container__p']}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
|
||||
</p>
|
||||
<p>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default Entrega;
|
||||
28
react-ts/src/components/Cards/FormaDePagamento.module.scss
Normal file
28
react-ts/src/components/Cards/FormaDePagamento.module.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__h1 {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-black4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&__p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $color-grey4;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
react-ts/src/components/Cards/FormaDePagamento.tsx
Normal file
23
react-ts/src/components/Cards/FormaDePagamento.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import styles from './FormaDePagamento.module.scss'
|
||||
|
||||
const FormaDePagamento = () => {
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<h1 className={styles['container__h1']}>Forma de Pagamento</h1>
|
||||
<div className={styles['container__p']}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
|
||||
</p>
|
||||
<p>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default FormaDePagamento;
|
||||
28
react-ts/src/components/Cards/Seguranca.module.scss
Normal file
28
react-ts/src/components/Cards/Seguranca.module.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__h1 {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-black4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&__p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $color-grey4;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
react-ts/src/components/Cards/Seguranca.tsx
Normal file
23
react-ts/src/components/Cards/Seguranca.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import styles from './Seguranca.module.scss'
|
||||
|
||||
const Seguranca = () => {
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<h1 className={styles['container__h1']}>Segurança e privacidade</h1>
|
||||
<div className={styles['container__p']}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
|
||||
</p>
|
||||
<p>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default Seguranca;
|
||||
28
react-ts/src/components/Cards/Sobre.module.scss
Normal file
28
react-ts/src/components/Cards/Sobre.module.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__h1 {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-black4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&__p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $color-grey4;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
react-ts/src/components/Cards/Sobre.tsx
Normal file
23
react-ts/src/components/Cards/Sobre.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import styles from './Sobre.module.scss'
|
||||
|
||||
const Sobre = () => {
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<h1 className={styles['container__h1']}>Sobre</h1>
|
||||
<div className={styles['container__p']}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
|
||||
</p>
|
||||
<p>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default Sobre;
|
||||
28
react-ts/src/components/Cards/Troca.module.scss
Normal file
28
react-ts/src/components/Cards/Troca.module.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__h1 {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-black4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&__p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: $color-grey4;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
react-ts/src/components/Cards/Troca.tsx
Normal file
23
react-ts/src/components/Cards/Troca.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import styles from './Troca.module.scss'
|
||||
|
||||
const Troca = () => {
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<h1 className={styles['container__h1']}>Troca e Devolução</h1>
|
||||
<div className={styles['container__p']}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
|
||||
</p>
|
||||
<p>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default Troca;
|
||||
65
react-ts/src/components/CardsSelect/CardsSelect.module.scss
Normal file
65
react-ts/src/components/CardsSelect/CardsSelect.module.scss
Normal file
@ -0,0 +1,65 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 70px;
|
||||
padding: 0 100px;
|
||||
&__h1 {
|
||||
text-align: center;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: $color-black4;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
|
||||
&__button {
|
||||
max-width: 302px;
|
||||
height: 285px;
|
||||
width: 100%;
|
||||
border-right: 1px solid $color-black1;
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
button {
|
||||
max-width: 302px;
|
||||
height: 39px;
|
||||
border: none;
|
||||
text-align: start;
|
||||
padding: 10px 16px;
|
||||
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $color-grey4;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: black;
|
||||
color: $color-white1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: 30px;
|
||||
width: 100%;
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
.active {
|
||||
background-color: $color-black1;
|
||||
color: $color-white1;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
react-ts/src/components/CardsSelect/CardsSelect.tsx
Normal file
45
react-ts/src/components/CardsSelect/CardsSelect.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import styles from './CardsSelect.module.scss';
|
||||
import { useState } from 'react';
|
||||
|
||||
import Sobre from '../Cards/Sobre';
|
||||
import FormaDePagamento from '../Cards/FormaDePagamento';
|
||||
import Entrega from '../Cards/Entrega';
|
||||
import Troca from '../Cards/Troca';
|
||||
import Seguranca from '../Cards/Seguranca';
|
||||
import ContactForm from '../ContactForm/ContactForm';
|
||||
|
||||
const CardSelect = () => {
|
||||
|
||||
const [render, setRender] = useState ("Sobre");
|
||||
|
||||
return (
|
||||
<div className={styles['container']}>
|
||||
<h1 className={styles['container__h1']}>institucional</h1>
|
||||
<div className={styles['container__wrapper']}>
|
||||
<div className={styles['container__wrapper__button']} >
|
||||
<div className={styles['container__wrapper__button__wrapper']}>
|
||||
<button onClick={()=> setRender("Sobre")}>Sobre</button>
|
||||
<button onClick={()=> setRender("Forma de Pagamento")}>Forma de Pagamento</button>
|
||||
<button onClick={()=> setRender("Entrega")} >Entrega</button>
|
||||
<button onClick={()=> setRender("Troca e Devolução")}>Troca e Devolução</button>
|
||||
<button onClick={()=> setRender("Segurança e Privacidade")}>Segurança e Privacidade</button>
|
||||
<button onClick={()=> setRender("Contato")}>Contato</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles['container__wrapper__cards']}>
|
||||
{render === "Sobre" && <Sobre/>}
|
||||
{render === "Forma de Pagamento" && <FormaDePagamento/>}
|
||||
{render === "Entrega" && <Entrega/>}
|
||||
{render === "Troca e Devolução" && <Troca/>}
|
||||
{render === "Segurança e Privacidade" && <Seguranca/>}
|
||||
{render === "Contato" && <ContactForm/>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)}
|
||||
|
||||
export default CardSelect;
|
||||
|
||||
223
react-ts/src/components/ContactForm/ContactForm.module.scss
Normal file
223
react-ts/src/components/ContactForm/ContactForm.module.scss
Normal file
@ -0,0 +1,223 @@
|
||||
@import '../../styles/utils/Variables.scss';
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 748px;
|
||||
width: 100%;
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 12px;
|
||||
max-width: 748px;
|
||||
width: 100%;
|
||||
&__title {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-black1;
|
||||
}
|
||||
&__input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
max-width: 748px;
|
||||
width: 100%;
|
||||
label {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black3;
|
||||
margin: 0 15px 12px;
|
||||
}
|
||||
input {
|
||||
max-width: 748px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
padding: 15px 20px;
|
||||
border: 1px solid $color-black3;
|
||||
border-radius: 25px;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
&::placeholder {
|
||||
color: $color-grey2;
|
||||
}
|
||||
}
|
||||
&__feedback {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin-right: 20px;
|
||||
text-align: end;
|
||||
color: $color-red1;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__checkbox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 748px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
input {
|
||||
width: 18.64px;
|
||||
height: 18px;
|
||||
margin-left: 4.28px;
|
||||
border: 1px solid $color-black1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
u {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black1;
|
||||
}
|
||||
&__alert {
|
||||
color: $color-red1;
|
||||
}
|
||||
&__errorCheck {
|
||||
color: $color-red1;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
max-width: 748px;
|
||||
width: 100%;
|
||||
button {
|
||||
max-width: 748px;
|
||||
width: 100%;
|
||||
height: 52.44px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background-color: $color-black1;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: $color-white1;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 200ms;
|
||||
&:hover {
|
||||
background-color: $color-black3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.invalid {
|
||||
border-color: $color-red1;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.container {
|
||||
max-width: 992px;
|
||||
&__form {
|
||||
&__title {
|
||||
text-align: center;
|
||||
}
|
||||
&__input {
|
||||
max-width: 992px;
|
||||
input {
|
||||
max-width: 992px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__checkbox {
|
||||
max-width: 992px;
|
||||
&__errorCheck {
|
||||
right: 235px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
max-width: 992px;
|
||||
button {
|
||||
max-width: 992px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 2500px) {
|
||||
.container {
|
||||
max-width: 1680px;
|
||||
width: 100%;
|
||||
&__form {
|
||||
&__title {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
&__input {
|
||||
max-width: 1680px;
|
||||
width: 100%;
|
||||
label {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
input {
|
||||
max-width: 1680px;
|
||||
width: 100%;
|
||||
height: 63px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
&__feedback {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__checkbox {
|
||||
max-width: 1680px;
|
||||
width: 100%;
|
||||
input {
|
||||
width: 36.4px;
|
||||
height: 35.15px;
|
||||
margin-left: 4.28px;
|
||||
}
|
||||
u {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
&__errorCheck {
|
||||
font-size: 24px;
|
||||
right: 325px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
max-width: 1680px;
|
||||
width: 100%;
|
||||
button {
|
||||
max-width: 1680px;
|
||||
width: 100%;
|
||||
height: 71px;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
138
react-ts/src/components/ContactForm/ContactForm.tsx
Normal file
138
react-ts/src/components/ContactForm/ContactForm.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
|
||||
import styles from './ContactForm.module.scss';
|
||||
import FormSchema from '../../Schema/FormSchema';
|
||||
|
||||
interface IFormikValues {
|
||||
name: string;
|
||||
email: string;
|
||||
cpf: string;
|
||||
birthDate: string;
|
||||
phoneNumber: string;
|
||||
instagram: string;
|
||||
acceptTerms: boolean;
|
||||
};
|
||||
|
||||
const initialValues = {
|
||||
name: "",
|
||||
email: "",
|
||||
cpf: "",
|
||||
birthDate: "",
|
||||
phoneNumber: "",
|
||||
instagram: "",
|
||||
acceptTerms: false,
|
||||
};
|
||||
|
||||
const ContactForm = () => {
|
||||
|
||||
const handleSubmitForm = (values: IFormikValues) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<div className={styles['container']}>
|
||||
|
||||
<Formik onSubmit={handleSubmitForm}
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
{({errors, touched}) => (
|
||||
|
||||
<Form className={styles['container__form']}>
|
||||
|
||||
<h1 className={styles['container__form__title']}>Preencha o formulário</h1>
|
||||
|
||||
<div className={styles['container__form__input']} >
|
||||
<label htmlFor="name">Nome</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="name"
|
||||
className={styles['container__form__input__feedback']}/>
|
||||
<Field id="name" name="name" placeholder="Seu nome completo" className={errors.name && touched.name && styles['invalid']} />
|
||||
</div>
|
||||
|
||||
<div className={styles['container__form__input']} >
|
||||
<label htmlFor="email">E-mail</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="email"
|
||||
className={styles['container__form__input__feedback']} />
|
||||
<Field id="email" name="email" placeholder="Seu e-mail" className={errors.email && touched.email && styles['invalid']} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles['container__form__input']} >
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="cpf"
|
||||
className={styles['container__form__input__feedback']} />
|
||||
<Field id="cpf" name="cpf" placeholder="000.000.000-00" className={errors.cpf && touched.cpf && styles['invalid']} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles['container__form__input']} >
|
||||
<label htmlFor="birthDate">Data de Nascimento:</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="birthDate"
|
||||
className={styles['container__form__input__feedback']} />
|
||||
<Field id="birthDate" name="birthDate" placeholder="00.00.0000" className={errors.birthDate && touched.birthDate && styles['invalid']} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles['container__form__input']} >
|
||||
<label htmlFor="phoneNumber">Telefone:</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="phoneNumber"
|
||||
className={styles['container__form__input__feedback']} />
|
||||
<Field id="phoneNumber" name="phoneNumber" placeholder="(00) 00000-0000" className={errors.phoneNumber && touched.phoneNumber && styles['invalid']} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles['container__form__input']} >
|
||||
<label htmlFor="instagram">Instagram</label>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="instagram"
|
||||
className={styles['container__form__input__feedback']} />
|
||||
<Field id="instagram" name="instagram" placeholder="@seuuser" className={errors.instagram && touched.instagram && styles['invalid']} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={styles['container__checkbox']}>
|
||||
<label htmlFor="acceptTerms">
|
||||
<span className={styles["container__checkbox__alert"]}>*</span>
|
||||
<u>Declaro que li e aceito</u>
|
||||
</label>
|
||||
<Field
|
||||
id="acceptTerms"
|
||||
name="acceptTerms"
|
||||
type="checkbox"
|
||||
className={
|
||||
errors.acceptTerms && touched.acceptTerms && styles['invalid']
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
name="acceptTerms"
|
||||
className={styles['container__checkbox__errorCheck']}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles['container__button']} >
|
||||
<button type="submit">cadastre-se</button>
|
||||
</div>
|
||||
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default ContactForm;
|
||||
@ -3,8 +3,8 @@ import { useState } from "react";
|
||||
import styles from './FooterLinksAccordion.module.scss';
|
||||
|
||||
interface Title {
|
||||
title: any,
|
||||
content: any,
|
||||
title: string,
|
||||
content: string,
|
||||
}
|
||||
|
||||
const FooterLinksAccordion = ({ title, content }: Title) => {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.container {
|
||||
padding: 24px 16px;
|
||||
display: flex;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
row-gap: 12px;
|
||||
border-top: 1px solid $color-black1;
|
||||
@ -28,7 +28,16 @@
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: $color-black2;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@ -62,6 +62,7 @@ const FooterLinksMobile = () => {
|
||||
{text.map(({title, subTitle}) => (
|
||||
<FooterLinksAccordion title={title} content={subTitle}/>
|
||||
))}
|
||||
<SocialMedia/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.container-components {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 168.5%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -13,8 +13,7 @@
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
position: absolute;
|
||||
max-width: 988px;
|
||||
width: 100%;
|
||||
width: 96.48%;
|
||||
height: 585px;
|
||||
&__logon {
|
||||
width: 100%;
|
||||
@ -49,4 +48,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1025px) {
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.containerNewsLetter {
|
||||
align-items: unset;
|
||||
flex-direction: unset;
|
||||
|
||||
@ -19,8 +19,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1025px ) {
|
||||
.container {
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2500px) {
|
||||
@media only screen and (min-width: 2500px) {
|
||||
.container {
|
||||
&__picture {
|
||||
img {
|
||||
|
||||
@ -13,6 +13,8 @@ $color-grey5: #E5E5E5;
|
||||
|
||||
$color-black1: #000000;
|
||||
$color-black2: #303030;
|
||||
$color-black3: #100D0E;
|
||||
$color-black4: #292929;
|
||||
|
||||
//fonts
|
||||
$font-family: 'Roboto', sans-serif;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user