diff --git a/src/components/main-content.module.scss b/src/components/main-content.module.scss
index cde7154..4abca05 100644
--- a/src/components/main-content.module.scss
+++ b/src/components/main-content.module.scss
@@ -2,9 +2,8 @@
.main-content-container {
width: 100%;
- // height: 588px;
background: variables.$color-white;
- // padding-top: 40px;
+ padding: 40px 0;
.main-content-wrapper {
width: 80.46875%;
@@ -18,13 +17,16 @@
.main-content-list {
width: 29.32038%;
+ height: 285px;
+ border-right: 1px solid variables.$color-black;
@media screen and (max-width: 1024px) {
width: 100%;
+ border: 0;
}
.main-content-item {
- padding: 10px 0 16px 16px;
+ padding: 5px 0 5px 16px;
@media screen and (max-width: 1024px) {
padding: 10px 16px;
@@ -49,14 +51,13 @@
.main-content-text {
width: 72.62135%;
- border-left: 1px solid variables.$color-black;
@media screen and (max-width: 1024px) {
width: 100%;
border: 0;
}
- div {
+ .main-content-text-wrapper {
margin-left: 30px;
@media screen and (max-width: 1024px) {
diff --git a/src/components/main/components/Contato.tsx b/src/components/main/components/Contato.tsx
index 2620b10..abcbd06 100644
--- a/src/components/main/components/Contato.tsx
+++ b/src/components/main/components/Contato.tsx
@@ -1,5 +1,6 @@
import React from "react";
import { MainMenu } from "./MainMenu";
+import { MainForm } from "./MainForm";
import style from "../../main-content.module.scss";
@@ -9,7 +10,8 @@ const Contato = () => {
-
Contato
+ Preencha o formulário
+
diff --git a/src/components/main/components/MainForm.tsx b/src/components/main/components/MainForm.tsx
new file mode 100644
index 0000000..544b024
--- /dev/null
+++ b/src/components/main/components/MainForm.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+import { Field, Form, Formik, ErrorMessage } from "formik";
+
+import style from "../../main/components/main-form.module.scss";
+import FormMainSchema from "../../../schema/FormMainSchema";
+
+interface IFormMain {
+ name: string;
+ email: string;
+ cpf: string;
+ datee: string;
+ tel: string;
+ inst: string;
+ check: boolean;
+}
+
+const initialValues = {
+ name: "",
+ email: "",
+ cpf: "",
+ datee: "",
+ tel: "",
+ inst: "",
+ check: false,
+};
+
+const MainForm = () => {
+ return (
+
+ {
+ console.log(values);
+ resetForm();
+ }}
+ initialValues={initialValues}
+ validationSchema={FormMainSchema}
+ >
+ {({ errors, touched, isSubmitting }) => (
+
+ )}
+
+
+ );
+};
+
+export { MainForm };
diff --git a/src/components/main/components/main-form.module.scss b/src/components/main/components/main-form.module.scss
new file mode 100644
index 0000000..f75c72c
--- /dev/null
+++ b/src/components/main/components/main-form.module.scss
@@ -0,0 +1,78 @@
+@use "../../../variables.module.scss";
+
+.main-form-container {
+ width: 100%;
+ height: 650px;
+
+ .main-form {
+ width: 100%;
+ height: 600px;
+ display: flex;
+ flex-direction: column;
+
+ .main-form-item-wrapper {
+ display: flex;
+ flex-direction: column;
+
+ label {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: variables.$color-black4;
+
+ margin-left: 15px;
+ margin-bottom: 12px;
+ }
+
+ input {
+ padding: 15px 20px;
+ border: 1px solid variables.$color-black4;
+ border-radius: 25px;
+
+ margin-bottom: 12px;
+ }
+ }
+
+ .main-form-checkbox {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 12px;
+
+ input {
+ margin-left: 4.28px;
+ }
+
+ .main-form-dot,
+ .main-form-span {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ }
+
+ .main-form-dot {
+ color: variables.$color-red;
+ }
+
+ .main-form-span {
+ color: variables.$color-black4;
+ text-decoration: underline;
+ }
+ }
+
+ .main-form-button {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ letter-spacing: 0.05em;
+ color: variables.$color-white;
+
+ outline: 0;
+ border: 0;
+ padding: 17px 0;
+
+ background: variables.$color-black;
+ border-radius: 25px;
+ }
+ }
+}
diff --git a/src/schema/FormMainSchema.ts b/src/schema/FormMainSchema.ts
new file mode 100644
index 0000000..c2853a1
--- /dev/null
+++ b/src/schema/FormMainSchema.ts
@@ -0,0 +1,37 @@
+import * as Yup from "yup";
+
+const getFormatedDate = (currentDate: string) => {
+ return currentDate.split("/").reverse().join("-");
+};
+
+const getFormatedCPF = (currentCPF: string) => {
+ return currentCPF.split(".").reverse().join("-");
+};
+
+const getFormatedTel = (currentTel: string) => {
+ return currentTel.split("()").reverse().join("-");
+};
+
+const getFormatedInst = (currentInst: string) => {
+ return currentInst.split("@").join("@");
+};
+
+export default Yup.object().shape({
+ name: Yup.string()
+ .min(2, "Nome deve conter pelo menos 2 letras!")
+ .required("*Campo Obrigatório"),
+ email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
+ cpf: Yup.string()
+ .min(11, getFormatedCPF("111.111.111-11"))
+ .required("*Campo Obrigatório"),
+ datee: Yup.date()
+ .min(getFormatedDate("01/01/1900"))
+ .required("*Campo Obrigatório"),
+ tel: Yup.string()
+ .min(11, getFormatedTel("(22)99999-9999"))
+ .required("*Campo Obrigatório"),
+ inst: Yup.string().min(3, getFormatedInst("@seuuser")).notRequired(),
+ check: Yup.boolean()
+ .oneOf([true], "Você deve aceitar os termos!")
+ .required("*Campo Obrigatório"),
+});
diff --git a/src/variables.module.scss b/src/variables.module.scss
index 5e72221..b5018c4 100644
--- a/src/variables.module.scss
+++ b/src/variables.module.scss
@@ -9,6 +9,7 @@ $font-primary: "Roboto", sans-serif;
$color-black: #000000;
$color-black2: #292929;
$color-black3: #303030;
+$color-black4: #100d0e;
$color-white: #ffffff;