From 414d79fbf8c4eabb755c06ca5c0c2c4699a7cb89 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Fri, 30 Dec 2022 11:37:18 -0300 Subject: [PATCH] feat(home): adicionando footer newsletter desktop home --- package.json | 4 +- src/_variaveis.scss | 1 + src/components/Footer/Footer.tsx | 7 +- .../FooterNewsletter.module.scss | 112 ++++++++++++++++++ .../FooterNewsletter/FooterNewsletter.tsx | 44 +++++++ src/components/MenuMobile/MenuMobile.scss | 8 +- src/components/MenuMobile/MenuMobile.tsx | 4 +- src/schema/FormSchema.ts | 8 ++ yarn.lock | 70 ++++++++++- 9 files changed, 250 insertions(+), 8 deletions(-) create mode 100644 src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss create mode 100644 src/components/Footer/FooterNewsletter/FooterNewsletter.tsx create mode 100644 src/schema/FormSchema.ts diff --git a/package.json b/package.json index a3128a8..5bf80da 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,15 @@ "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@types/styled-components": "^5.1.26", + "formik": "^2.2.9", "node-sass": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "styled-components": "^5.3.6", "typescript": "^4.4.2", - "web-vitals": "^2.1.0" + "web-vitals": "^2.1.0", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/src/_variaveis.scss b/src/_variaveis.scss index 755953d..e8c6909 100644 --- a/src/_variaveis.scss +++ b/src/_variaveis.scss @@ -12,6 +12,7 @@ $color-primary-700: #F2F2F2; $color-primary-400: #C4C4C4; $color-primary-500: #C6C6C6; +$color-primary-600: #E5E5E5; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 8440d66..61f48f5 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,10 +1,13 @@ -import { FooterBottom } from './FooterBottom/FooterBottom'; -import styles from './Footer.module.scss'; +import { FooterNewsletter } from './FooterNewsletter/FooterNewsletter'; import { FooterTop } from './FooterTop/FooterTop'; +import { FooterBottom } from './FooterBottom/FooterBottom'; + +import styles from './Footer.module.scss'; const Footer = () => { return ( diff --git a/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss b/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss new file mode 100644 index 0000000..0825dc0 --- /dev/null +++ b/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss @@ -0,0 +1,112 @@ +@import "../../../variaveis"; + +.footer-newsletter { + width: 100%; + background: $color-white; + border-top: 1px solid $color-black; + border-bottom: 1px solid $color-black; + display: flex; + align-items: center; + justify-content: center; + padding: 16px 0; + + &__formik { + display: flex; + align-items: center; + justify-content: center; + } + + &__form { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 8px; + width: 37%; + + &__title { + font-family: $font-family; + font-style: normal; + font-weight: 500; + font-size: 18px; + line-height: 21px; + letter-spacing: 0.05em; + font-variant: small-caps; + color: $color-black-500; + } + + &__input-btn { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + position: relative; + } + + &__input { + width: 71.72%; + height: 16px; + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 13px 16px; + gap: 10px; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-primary-400; + background: #FFFFFF; + border: 1px solid $color-primary-600; + border-radius: 4px; + + + + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-primary-400; + } + } + + & span{ + position: absolute; + bottom: -18px; + left: 0; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; + text-align: right; + + color: #FF0000; + } + + &__btn { + width: 28%; + height: 42px; + // padding: 14px 20px; + border: none; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 14px; + letter-spacing: 0.05em; + display: flex; + align-items: center; + justify-content: center; + background-color: $color-black; + color: $color-white; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 4px; + margin-left: 8px; + cursor: pointer; + } + } +} diff --git a/src/components/Footer/FooterNewsletter/FooterNewsletter.tsx b/src/components/Footer/FooterNewsletter/FooterNewsletter.tsx new file mode 100644 index 0000000..48a2581 --- /dev/null +++ b/src/components/Footer/FooterNewsletter/FooterNewsletter.tsx @@ -0,0 +1,44 @@ +import { Formik, Form, Field, ErrorMessage } from 'formik'; + +import FormSchema from '../../../schema/FormSchema'; + +import styles from './FooterNewsletter.module.scss'; + +interface IFormikValue { + email: string; +} + +const initialValues = { + email: '', +} + +const FooterNewsletter = () => { + const handleFormikNewsletter = (values: IFormikValue) => { + console.log(values.email); + + } + + return ( +
+ +
+ +
+ + + +
+
+ +
+ ) +} + +export { FooterNewsletter } diff --git a/src/components/MenuMobile/MenuMobile.scss b/src/components/MenuMobile/MenuMobile.scss index 7210a59..d7ba7fd 100644 --- a/src/components/MenuMobile/MenuMobile.scss +++ b/src/components/MenuMobile/MenuMobile.scss @@ -22,9 +22,15 @@ } &__wrapper { - width: 90%; + width: 96.484375%; background-color: $color-white; height: 585px; + position: absolute; + z-index: 10; + + @media #{$mq-mobile} { + width: 90%; + } } &__top { diff --git a/src/components/MenuMobile/MenuMobile.tsx b/src/components/MenuMobile/MenuMobile.tsx index d34d8c8..8d1a89a 100644 --- a/src/components/MenuMobile/MenuMobile.tsx +++ b/src/components/MenuMobile/MenuMobile.tsx @@ -9,8 +9,8 @@ interface MenuMobileProps { const MenuMobile = ({menuIsVisible, setMenuIsVisible }: MenuMobileProps) => { return ( -
-
+
setMenuIsVisible(false)}> +
setMenuIsVisible(true)}>
ENTRAR diff --git a/src/schema/FormSchema.ts b/src/schema/FormSchema.ts new file mode 100644 index 0000000..bd7e5ff --- /dev/null +++ b/src/schema/FormSchema.ts @@ -0,0 +1,8 @@ +import * as Yup from 'yup'; + +export default Yup.object().shape({ + name: Yup.string().required("*Campo Obrigatório").min(3, "*No mínimo 3 digitos"), + email: Yup.string().required("*Campo Obrigatório").email("*Email inválido"), + subject: Yup.string().required("*Campo Obrigatório"), + message: Yup.string().required("*Campo Obrigatório"), +}) diff --git a/yarn.lock b/yarn.lock index 7498998..c17a002 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1036,7 +1036,7 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.11" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd" integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ== @@ -2058,6 +2058,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/lodash@^4.14.175": + version "4.14.191" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa" + integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ== + "@types/mime@*": version "3.0.1" resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10" @@ -3826,6 +3831,11 @@ deep-is@^0.1.3, deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" @@ -4783,6 +4793,19 @@ form-data@^3.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +formik@^2.2.9: + version "2.2.9" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0" + integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA== + 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" + forwarded@0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811" @@ -6480,6 +6503,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -6877,6 +6905,11 @@ nan@^2.17.0: resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb" integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ== +nanoclone@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4" + integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA== + nanoid@^3.3.4: version "3.3.4" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" @@ -8008,6 +8041,11 @@ prop-types@^15.8.1: object-assign "^4.1.1" react-is "^16.13.1" +property-expr@^2.0.4: + version "2.0.5" + resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4" + integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA== + proxy-addr@~2.0.7: version "2.0.7" resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025" @@ -8142,6 +8180,11 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -9297,6 +9340,11 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tmpl@1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc" @@ -9319,6 +9367,11 @@ toidentifier@1.0.1: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== +toposort@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" + integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg== + tough-cookie@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874" @@ -9368,7 +9421,7 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.8.1: +tslib@^1.10.0, tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -10169,3 +10222,16 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +yup@^0.32.11: + version "0.32.11" + resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5" + integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg== + 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"