From 6bff61136306bead7491205e0403825858a84803 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Thu, 19 Jan 2023 17:17:44 -0300 Subject: [PATCH 1/5] fix(institucional): fix img --- src/assets/svg/menu.svg | 5 +++++ src/components/Header/index.tsx | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 src/assets/svg/menu.svg diff --git a/src/assets/svg/menu.svg b/src/assets/svg/menu.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/svg/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 41e8a33..7d4e31a 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -2,12 +2,16 @@ import styles from "./styles.module.scss"; import Logo from "../../assets/img/logoM3.png"; import Lupa from "../../assets/svg/lupa.svg"; import Cart from "../../assets/svg/cart.svg"; +import Menu from "../../assets/svg/menu.svg"; export default function Header() { return ( <>
+ logo m3
From d78ac2ce695814d34fab31ab65b2a4247b58deef Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Thu, 19 Jan 2023 18:48:49 -0300 Subject: [PATCH 2/5] feat(institucional): feat responsivness 4k --- src/pages/Institutional/styles.module.scss | 127 ++++++++++++++++++++- 1 file changed, 125 insertions(+), 2 deletions(-) diff --git a/src/pages/Institutional/styles.module.scss b/src/pages/Institutional/styles.module.scss index 21e5ad3..2e91332 100644 --- a/src/pages/Institutional/styles.module.scss +++ b/src/pages/Institutional/styles.module.scss @@ -1,7 +1,7 @@ .homeDiv { display: flex; margin-top: 29px; - margin-left: 7.81%; + margin-left: 100px; gap: 10px; align-items: center; margin-bottom: 81px; @@ -33,7 +33,7 @@ .layoutPage { display: flex; - margin-left: 7.81%; + margin-left: 100px; margin-top: 80px; margin-bottom: 70px; @@ -132,6 +132,8 @@ height: 46px; &::placeholder { + display: flex; + align-items: center; padding: 15px 0 15px 20px; font-family: "Roboto"; font-weight: 400; @@ -186,3 +188,124 @@ } } } + +@media screen and (max-width: 1024px) { + .layoutPage { + display: flex !important; + flex-direction: column !important; + margin-left: 0 !important; + margin-bottom: 82px !important; + + .layoutText { + max-width: 96.88% !important; + margin: 30px 16px !important; + + .layoutH2 { + display: flex; + justify-content: center !important; + margin-top: 0px !important; + } + } + } + + .buttonDiv { + width: 96.88% !important; + border-right: 0 !important; + margin: 0 16px !important; + } + + .formDiv { + width: 96.98% !important; + margin: 0 16px !important; + + .formH2 { + display: flex; + justify-content: center !important; + margin-top: 30px !important; + } + } +} + +@media screen and (min-width: 2500px) { + .home { + width: 32px !important; + } + + .arrow { + width: 10px !important; + } + + .textHome { + font-size: 24px !important; + } + + .h1Institucional { + font-size: 48px !important; + } + + .buttonLayout { + font-size: 32px !important; + height: 58px !important; + } + + .layoutPage { + margin-bottom: 84px !important; + + .layoutText { + max-width: 67.2vw !important; + + .layoutH2 { + font-size: 48px !important; + } + + .layoutP { + font-size: 26px !important; + } + } + + .formDiv { + width: 67.2vw !important; + + .formH2 { + font-size: 48px !important; + } + + .formLabel { + font-size: 28px !important; + } + + .formLabelInstagram { + font-size: 28px !important; + } + + .formSpan { + font-size: 24px !important; + } + + .formField { + height: 63px !important; + + &::placeholder { + font-size: 28px !important; + } + } + + .formConfirm { + font-size: 28px !important; + + .confirmField { + min-width: 1.44vw !important; + } + } + + .buttonConfirm { + font-size: 32px !important; + height: 71px !important; + } + + .spanConfirm { + font-size: 24px !important; + } + } + } +} From 38f3e8fccfb56c0d50c471e7559f317effd5b03a Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 20 Jan 2023 20:01:52 -0300 Subject: [PATCH 3/5] feat(intitucional): created form logic --- package.json | 4 +- src/pages/Institutional/index.tsx | 89 +++++--- src/pages/Institutional/styles.module.scss | 15 +- yarn.lock | 254 ++++++++++++++++++++- 4 files changed, 327 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index a897a76..9893dbf 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "cpf-cnpj-validator": "^1.0.3", "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -18,7 +19,8 @@ "sass": "^1.57.1", "typescript": "^4.4.2", "web-vitals": "^2.1.0", - "yup": "^0.32.11" + "yup": "^0.32.11", + "yup-phone": "^1.3.2" }, "scripts": { "start": "react-scripts start", diff --git a/src/pages/Institutional/index.tsx b/src/pages/Institutional/index.tsx index f73e476..95709e3 100644 --- a/src/pages/Institutional/index.tsx +++ b/src/pages/Institutional/index.tsx @@ -3,9 +3,33 @@ import Home from "../../assets/svg/Home.svg"; import Arrow from "../../assets/svg/Arrow.svg"; import { useState } from "react"; import { Formik, Form, Field } from "formik"; +import * as yup from "yup"; +import "yup-phone"; +import { cpf } from "cpf-cnpj-validator"; export default function Institutional() { const [currTab, setCurrTab] = useState(0); + const [hasSubmited, setSubmited] = useState(false); + const validationSchema = yup.object().shape({ + name: yup + .string() + .min(3, "*Nome muito curto") + .required("*Campo Obrigatório"), + email: yup.string().email("*Email inválido").required("*Campo Obrigatório"), + CPF: yup + .string() + .required("*Campo Obrigatório") + .test("Válida CPF", "*CPF inválido", (CPF = "") => + cpf.isValid(CPF, true) + ), + birthDate: yup.string().required("*Campo Obrigatório"), + phone: yup + .string() + .required("*Campo Obrigatório") + .phone("BR", false, "*Telefone inválido"), + instagram: yup.string(), + check: yup.boolean().oneOf([true]).required(), + }); return ( <>
@@ -114,7 +138,10 @@ export default function Institutional() {

Preencha o formulário

{}} + validationSchema={validationSchema} + onSubmit={() => { + setSubmited(true); + }} initialValues={{ name: "", email: "", @@ -125,16 +152,16 @@ export default function Institutional() { check: false, }} > - {(props) => ( + {({ errors, touched }) => (
-
+
- - *Campo Obrigatório - + {errors.name && touched.name && ( + {errors.name} + )}
-
+
- - *Campo Obrigatório - + {errors.email && touched.email && ( + + {errors.email} + + )}
-
+
- - *Campo Obrigatório - + {errors.CPF && touched.CPF && ( + {errors.CPF} + )}
-
-