fix(main): corrige espaçamento inferior das seções e reorganiza pastas

src/components/CustomInput/CustomInput.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { useField } from "formik";
-import InputMask from "react-input-mask";
-
-interface InputProps {
-  mask?: string;
-  id: string;
-  name: string;
-  placeholder: string;
-}
-
-const CustomInput = (props: InputProps) => {
-  const { mask } = props;
-  const [field] = useField(props);
-
-  return (
-    <>
-      <InputMask mask={mask!} {...field} />
-    </>
-  );
-};
-
-export { CustomInput };

src/components/MainLayout/About/About.module.scss

@@ -1,20 +1,24 @@
 .section-container {
   margin-left: 30px;
-  padding: 10px 0;
+  padding: 10px 0 26.56px;
+
+  @media screen and (width >= 2500px) {
+    padding-bottom: 40px;
+  }
 
   @media screen and (width <= 1024px) {
-    padding: 0;
+    padding: 0 0 26px;
     margin: 0;
   }
 
   .section-title {
+    margin: 0 0 12px;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 700;
     font-size: 24px;
     line-height: 28px;
-    color: #292929; // #000000 ??
-    margin: 0 0 12px;
+    color: #292929;
 
     @media screen and (width >= 2500px) {
       font-size: 48px;
@@ -30,16 +34,17 @@
     height: 223px;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    gap: 21.5px;
+    overflow: auto;
 
     @media screen and (width >= 2500px) {
       height: 376px;
+      gap: 23px;
     }
 
     @media screen and (width <= 1024px) {
       height: 142px;
       gap: 20px;
-      overflow: scroll;
     }
 
     @media screen and (width <= 480px) {
@@ -47,14 +52,14 @@
     }
 
     .section-content {
+      margin: 0;
+      padding-right: 2px;
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 13px;
       line-height: 15px;
       color: #7d7d7d;
-      margin: 0;
-      padding-right: 2px;
 
       @media screen and (width >= 2500px) {
         font-size: 26px;
@@ -62,10 +67,10 @@
       }
 
       @media screen and (width <= 1024px) {
+        padding-right: 1px;
         font-size: 12px;
         line-height: 18px;
         text-align: justify;
-        padding-right: 1px;
       }
     }
   }

src/components/MainLayout/About/About.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import styles from "./About.module.scss";
+
+const About = () => {
+  return (
+    <section className={styles["section-container"]}>
+      <h2 className={styles["section-title"]}>Sobre</h2>
+      <div className={styles["section-description"]}>
+        <p className={styles["section-content"]}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <p className={styles["section-content"]}>
+          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+          aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+          qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
+          dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
+          quia non numquam eius modi tempora incidunt ut labore et dolore magnam
+          aliquam quaerat voluptatem.
+        </p>
+        <p className={styles["section-content"]}>
+          Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          voluptas nulla pariatur?
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export { About };

src/components/MainLayout/Contact/Contact.module.scss

@@ -1,20 +1,20 @@
 .section-container {
   margin-left: 30px;
-  padding: 10px 0;
+  padding: 10px 0 0;
 
   @media screen and (width <= 1024px) {
-    padding: 0;
     margin: 0;
+    padding: 0;
   }
 
   .section-title {
+    margin: 0 0 12px;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 700;
     font-size: 24px;
     line-height: 28px;
-    color: #000000; // #292929 ??
-    margin: 0 0 12px;
+    color: #000000;
 
     @media screen and (width >= 2500px) {
       font-size: 48px;

src/components/MainLayout/Contact/Contact.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { ContactForm } from "../ContactForm/ContactForm";
-// import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
-// import FormSchema from "../../schema/FormSchema";
+
+import { ContactForm } from "./ContactForm/ContactForm";
 
 import styles from "./Contact.module.scss";
 
@@ -9,7 +8,6 @@ const Contact = () => {
   return (
     <section className={styles["section-container"]}>
       <h2 className={styles["section-title"]}>Preencha o formulário </h2>
-      {/* <div className={styles["section-description"]}></div> */}
       <ContactForm />
     </section>
   );

src/components/MainLayout/Contact/ContactForm/ContactForm.module.scss

@@ -2,14 +2,7 @@
   width: 100%;
   padding-bottom: 26.56px;
   position: relative;
-  // max-width: 720px;
-  // min-height: 100vh;
-  // margin: 0 auto;
-  // padding: 0 12px;
 
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
   @media screen and (width >= 2500px) {
     padding-bottom: 40px;
   }
@@ -19,19 +12,19 @@
   }
 
   .form-col {
+    margin-bottom: 12px;
     position: relative;
     display: flex;
     flex-direction: column;
-    margin-bottom: 12px;
 
     label {
+      padding: 0 15px 12px;
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
       color: #100d0e;
-      padding: 0 15px 12px;
 
       @media screen and (width >= 2500px) {
         font-size: 28px;
@@ -40,17 +33,18 @@
     }
 
     input {
-      background: #ffffff;
+      padding: 15px 20px;
       border: 1px solid #100d0e;
       border-radius: 25px;
-      padding: 15px 20px;
+      outline: 0;
+      background: #ffffff;
+
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
-      color: #000000; //#b9b7b7? #100d0e?
-      outline: 0;
+      color: #000000;
 
       @media screen and (width >= 2500px) {
         font-size: 28px;
@@ -64,39 +58,41 @@
   }
 
   .invalid-form-feedback {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
     line-height: 14px;
     color: #ff0000;
-    position: absolute;
-    top: 15px;
-    right: 20px;
 
     @media screen and (width >= 2500px) {
+      top: 17px;
       font-size: 24px;
       line-height: 28px;
-      top: 17px;
     }
   }
 
   .terms-col {
     margin: 1.58px 0 12.6px;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
     line-height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    text-align: center;
 
     @media screen and (width >= 2500px) {
+      margin: 0 0 12.85px;
       font-size: 28px;
       line-height: 33px;
-      margin: 0 0 12.85px;
     }
 
     span {
@@ -108,24 +104,11 @@
       text-decoration: underline;
     }
 
-    // .custom-checkbox {
-    //   border: 1px solid #000000;
-    //   border-radius: 3px;
-    //   width: 34.4px;
-    //   height: 33.15px;
-    //   margin: 0 0 0 4.28px;
-
-    //   // display: inline-block;
-    //   // position: absolute;
-    //   // bottom: 2.2px;
-    // }
-
     input {
-      // talvez tenha que substituir o checkbox original - não tá pegando as bordas direito e o alinhamento está errado, tem que ser no underline. considerar as bordas na medida do input original ou do custom?
+      margin: 0 0 0 4.28px;
       width: 18.64px;
       height: 18px;
-      margin: 0 0 0 4.28px;
-      // opacity: 0;
+      border-radius: 3px;
 
       @media screen and (width >= 2500px) {
         width: 36.4px;
@@ -135,44 +118,47 @@
   }
 
   .submit-button {
-    background: #000000;
+    width: 100%;
+    padding: 17px 0;
+    border: 0;
     border-radius: 25px;
+    outline: 0;
+    background: #000000;
+
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 19px;
-    width: 100%;
-    padding: 17px 0;
     letter-spacing: 0.05em;
     color: #ffffff;
     text-transform: uppercase;
-    border: 0;
-    outline: 0;
+
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 
+    &:hover {
+      filter: brightness(0.5);
+    }
+
     @media screen and (width >= 2500px) {
       font-size: 32px;
       line-height: 38px;
     }
-
-    &:hover {
-      background: #292929;
-    }
   }
 
   .success-wrapper {
     .success-message {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
       font-family: "Roboto";
       font-style: normal;
       font-weight: 400;
       font-size: 12px;
       line-height: 14px;
       color: #008000;
-      position: absolute;
-      bottom: 0;
-      left: 0;
 
       @media screen and (width >= 2500px) {
         font-size: 24px;

src/components/MainLayout/Contact/ContactForm/ContactForm.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
-import FormSchema from "../../schema/FormSchema";
 
+import FormSchema from "../../../../schema/FormSchema";
 import { CustomInput } from "../CustomInput/CustomInput";
 
 import styles from "./ContactForm.module.scss";
 
-interface FormValues {
+export interface FormValues {
   name: string;
   email: string;
   cpf: string;
@@ -36,8 +36,10 @@ const ContactForm = () => {
     console.log(values);
     clientsList.push(values);
     console.log(clientsList);
-    resetForm();
-    setTimeout(() => setSubmitting(false), 3000);
+    setTimeout(() => {
+      setSubmitting(false);
+      resetForm();
+    }, 2000);
   };
 
   return (
@@ -47,9 +49,7 @@ const ContactForm = () => {
         initialValues={initialValues}
         validationSchema={FormSchema}
       >
-        {({
-          isSubmitting,
-        }) => (
+        {({ isSubmitting }) => (
           <Form>
             <div className={styles["form-col"]}>
               <label htmlFor="name">Nome</label>
@@ -66,11 +66,7 @@ const ContactForm = () => {
             </div>
             <div className={styles["form-col"]}>
               <label htmlFor="email">E-mail</label>
-              <CustomInput
-                id="email"
-                name="email"
-                placeholder="Seu e-mail"
-              />
+              <CustomInput id="email" name="email" placeholder="Seu e-mail" />
               <ErrorMessage
                 component="span"
                 name="email"
@@ -136,15 +132,7 @@ const ContactForm = () => {
             <div className={styles["terms-col"]}>
               <span>* </span>
               <label htmlFor="acceptedTerms">Declaro que li e aceito</label>
-              {/* <div className={styles["custom-checkbox"]}></div> */}
-              <Field
-                type="checkbox"
-                id="acceptedTerms"
-                name="acceptedTerms"
-                // className={
-                //   errors.acceptedTerms && touched.acceptedTerms && styles["invalid"]
-                // }
-              />
+              <Field type="checkbox" id="acceptedTerms" name="acceptedTerms" />
             </div>
 
             <button className={styles["submit-button"]} type="submit">

src/components/MainLayout/Contact/CustomInput/CustomInput.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { FieldHookConfig, useField } from "formik";
+import InputMask from "react-input-mask";
+
+interface InputProps {
+  mask?: string;
+  id: string;
+  name: string;
+  placeholder: string;
+}
+
+const CustomInput = (props: InputProps & (string | FieldHookConfig<any>)) => {
+  const { mask, id, placeholder } = props;
+  const [field, meta] = useField(props);
+
+  return (
+    <>
+      <InputMask mask={mask!} id={id} placeholder={placeholder} {...field} />
+    </>
+  );
+};
+
+export { CustomInput };

src/components/MainLayout/MainLayout.module.scss

@@ -1,27 +1,27 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
 
 .main-container {
-  margin: 30px 100px 70px;
+  margin: 30px 100px 43.44px;
 
   @media screen and (width >= 2500px) {
-    margin-bottom: 84px;
+    margin-bottom: 44px;
   }
 
   @media screen and (width <= 1024px) {
-    margin: 30px 16px 80px;
+    margin: 30px 16px 55px;
   }
 
   .main-title {
+    margin: 0 0 80px;
     font-family: "Roboto";
     font-style: normal;
     font-weight: 400;
     font-size: 24px;
     line-height: 28px;
     letter-spacing: 0.1em;
+    color: #292929;
     text-transform: uppercase;
     text-align: center;
-    margin: 0 0 80px;
-    color: #292929;
 
     @media screen and (width >= 2500px) {
       font-size: 48px;

src/components/MainLayout/MainLayout.tsx

@@ -1,8 +1,9 @@
 import React, { useContext } from "react";
 import { Outlet } from "react-router-dom";
+
 import { LocationProvider } from "../../contexts/LocationContext";
 import { ModalContext } from "../../contexts/ModalContext";
-import { MainMenu } from "../MainMenu/MainMenu";
+import { MainMenu } from "./MainMenu/MainMenu";
 import { Footer } from "../Footer/Footer";
 import { Header } from "../Header/Header";
 import { Modal } from "../Modal/Modal";