From 5345cfc0491783e8d7829d214243d5902617a17a Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Sun, 15 Jan 2023 08:42:45 -0300 Subject: [PATCH] feat(newsletter): newsletter criada e estilizada, schema aquivo do yup para a pagina de contatos --- package-lock.json | 84 +++++++++++++++++++++++++++++++- package.json | 3 +- src/components/footer/Footer.tsx | 55 +++++++++++---------- src/schema/schema.tsx | 10 ++++ src/styles/Footer.module.scss | 55 ++++++++++++++++++++- 5 files changed, 179 insertions(+), 28 deletions(-) create mode 100644 src/schema/schema.tsx diff --git a/package-lock.json b/package-lock.json index 314edae..b618842 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" + } } } } diff --git a/package.json b/package.json index e2973d0..ff0dc5a 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 22dd2eb..d4ebfc1 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -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 ( diff --git a/src/schema/schema.tsx b/src/schema/schema.tsx new file mode 100644 index 0000000..9851191 --- /dev/null +++ b/src/schema/schema.tsx @@ -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"), +}); diff --git a/src/styles/Footer.module.scss b/src/styles/Footer.module.scss index b022694..78ff075 100644 --- a/src/styles/Footer.module.scss +++ b/src/styles/Footer.module.scss @@ -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%; }