forked from M3-Academy/desafio-react-e-typescript
feat(newsletter): newsletter criada e estilizada, schema aquivo do yup para a pagina de contatos
This commit is contained in:
parent
2871886df0
commit
5345cfc049
84
package-lock.json
generated
84
package-lock.json
generated
@ -25,7 +25,8 @@
|
||||
"formik": "^2.2.9",
|
||||
"node-sass": "^8.0.0",
|
||||
"sass": "^1.57.1",
|
||||
"scss": "^0.2.4"
|
||||
"scss": "^0.2.4",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@ -3852,6 +3853,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.191",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
|
||||
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
@ -12576,6 +12583,12 @@
|
||||
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
|
||||
"devOptional": 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",
|
||||
@ -14869,6 +14882,12 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/property-expr": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
|
||||
"integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
@ -17150,6 +17169,12 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tough-cookie": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
|
||||
@ -18508,6 +18533,24 @@
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/yup": {
|
||||
"version": "0.32.11",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
|
||||
"integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
@ -21128,6 +21171,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
|
||||
},
|
||||
"@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
|
||||
},
|
||||
"@types/mime": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
|
||||
@ -27561,6 +27610,12 @@
|
||||
"integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
|
||||
"devOptional": true
|
||||
},
|
||||
"nanoclone": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
|
||||
"integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==",
|
||||
"dev": true
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.3.4",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
|
||||
@ -29051,6 +29106,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"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
|
||||
},
|
||||
"proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
@ -30762,6 +30823,12 @@
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
|
||||
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
|
||||
},
|
||||
"toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
|
||||
"dev": true
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
|
||||
@ -31804,6 +31871,21 @@
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
|
||||
},
|
||||
"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,
|
||||
"requires": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
"formik": "^2.2.9",
|
||||
"node-sass": "^8.0.0",
|
||||
"sass": "^1.57.1",
|
||||
"scss": "^0.2.4"
|
||||
"scss": "^0.2.4",
|
||||
"yup": "^0.32.11"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { Formik, Form, Field } from 'formik';
|
||||
import styles from '../../styles/Footer.module.scss'
|
||||
import facebook from '../../assets/img/facebook.png'
|
||||
import instagram from '../../assets/img/instagram.png'
|
||||
@ -18,17 +17,23 @@ import vtex from '../../assets/img/vtex.png'
|
||||
import m3 from '../../assets/img/m3.png'
|
||||
|
||||
|
||||
|
||||
|
||||
const Footer = () => {
|
||||
return(
|
||||
return (
|
||||
<footer>
|
||||
<div className={styles['footer__newsletter']}>
|
||||
<form>
|
||||
<label>
|
||||
Assine nossa Newsletter
|
||||
</label>
|
||||
<input type='email' placeholder='E-mail'/>
|
||||
<button>Enviar</button>
|
||||
</form>
|
||||
<form className={styles['footer__newsletter-form']}>
|
||||
<label htmlFor='email'>
|
||||
Assine nossa Newsletter
|
||||
</label>
|
||||
<div className={styles['footer__newsletter-input']}>
|
||||
<input id='email' type='email' placeholder='E-mail' />
|
||||
<button type="submit" >Enviar</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<section className={styles['footer__top']}>
|
||||
<div className={styles['footer__infos']}>
|
||||
@ -57,35 +62,35 @@ const Footer = () => {
|
||||
</div>
|
||||
<div className={styles['footer__redes']}>
|
||||
<div className={styles['footer__container-rede']}>
|
||||
<img src={facebook} alt='facebook'/>
|
||||
<img src={instagram} alt='instagram'/>
|
||||
<img src={twitter} alt='twitter'/>
|
||||
<img src={youtube} alt='youtube'/>
|
||||
<img src={linkedin} alt='linkedin'/>
|
||||
<img src={facebook} alt='facebook' />
|
||||
<img src={instagram} alt='instagram' />
|
||||
<img src={twitter} alt='twitter' />
|
||||
<img src={youtube} alt='youtube' />
|
||||
<img src={linkedin} alt='linkedin' />
|
||||
</div>
|
||||
<p>www.loremipsum.com</p>
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles['footer__bottom']}>
|
||||
<p className={styles['footer__text-bottom']}>Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit, sed do eiusmod tempor
|
||||
elit, sed do eiusmod tempor
|
||||
</p>
|
||||
<div className={styles['footer__container-bandeiras']}>
|
||||
<img src={mastercard} alt='bandeira mastercard'/>
|
||||
<img src={visa} alt='bandeira visa'/>
|
||||
<img src={diners} alt='bandeira american express'/>
|
||||
<img src={elo} alt='bandeira elo'/>
|
||||
<img src={hiper} alt='bandeira hipercard'/>
|
||||
<img src={paypal} alt='paypal'/>
|
||||
<img src={boleto} alt='boleto'/>
|
||||
<img src={mastercard} alt='bandeira mastercard' />
|
||||
<img src={visa} alt='bandeira visa' />
|
||||
<img src={diners} alt='bandeira american express' />
|
||||
<img src={elo} alt='bandeira elo' />
|
||||
<img src={hiper} alt='bandeira hipercard' />
|
||||
<img src={paypal} alt='paypal' />
|
||||
<img src={boleto} alt='boleto' />
|
||||
<div className={styles['footer__line']}></div>
|
||||
<img src={vtexpci} alt='vtex-cerficado'/>
|
||||
<img src={vtexpci} alt='vtex-cerficado' />
|
||||
</div>
|
||||
<div className={styles['footer__certificate']}>
|
||||
<p className={styles['footer__text-certificate']}>Powered by</p>
|
||||
<img src={vtex} alt='vtex-logo'/>
|
||||
<img src={vtex} alt='vtex-logo' />
|
||||
<p>Developed by</p>
|
||||
<img src={m3} alt='m3-logo'/>
|
||||
<img src={m3} alt='m3-logo' />
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
10
src/schema/schema.tsx
Normal file
10
src/schema/schema.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import * as Yup from "yup";
|
||||
|
||||
export default Yup.object().shape({
|
||||
name: Yup.string().required("Campo obrigatório"),
|
||||
email: Yup.string().required("Campo obrigatório").email("Email inválido"),
|
||||
cpf: Yup.string().required("Campo obrigatório"),
|
||||
data: Yup.string().required("Campo obrigatório"),
|
||||
tel: Yup.string().required("Campo obrigatório"),
|
||||
insta: Yup.string().required("Campo obrigatório"),
|
||||
});
|
||||
@ -3,6 +3,8 @@
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
.footer__newsletter{
|
||||
display: flex;
|
||||
@ -11,6 +13,57 @@ footer {
|
||||
border-width: 1px 0px;
|
||||
border-style: solid;
|
||||
border-color: $black;
|
||||
|
||||
.footer__newsletter-form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 37.03%;
|
||||
padding: 16px 0px;
|
||||
|
||||
label{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.footer__newsletter-input{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
input{
|
||||
width: 71.73%;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4px;
|
||||
padding: 13px 16px;
|
||||
}
|
||||
|
||||
button{
|
||||
color: #FFFFFF;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
background: #000000;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.footer__top{
|
||||
@ -39,7 +92,7 @@ footer {
|
||||
.footer__container-rede{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 16.28%;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user