feat: Cria validação para formulário de Newsletter

src/components/contato/style.module.scss

@@ -30,6 +30,7 @@
   
       @media (max-width: 1024px) {
         text-align: center;
+        margin: 30px 0 12px 0;
       }
     }
   

src/components/header/index.tsx

@@ -61,14 +61,16 @@ const Header = ({handleOpenModal}:MenuProps) => {
         </nav>
 
         <div className={styles["header-bottom__search-box"]}>
-          <input
-            className="search-box-text"
-            type="text"
-            placeholder="Buscar..."
-          />
+          <div className={styles["search-box-wrapper"]}>
+            <input
+              className="search-box-text"
+              type="text"
+              placeholder="Buscar..."
+            />
           <button className={styles["search-button"]}>
             <img src={Search} alt="" />
           </button>
+          </div>
         </div>
       </div>
     </div>

src/components/header/style.module.scss

@@ -238,6 +238,10 @@
       width: 93.36%;
       // margin: 0 auto;
 
+      .search-box-wrapper {
+        width: 100%;
+      }
+
       input {
         width: 100%;
         background-color: var(--white);

src/components/newsletter/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Formik, Form, Field, ErrorMessage } from "formik";
-import NewsFormSchema from "../../../schema/NewsFormSchema";
+import NewsFormSchema from "../../schema/NewsFormSchema";
 
 import styles from "./style.module.scss";
 
@@ -14,31 +14,30 @@ const initialValues = {
 };
 
 const Newsletter = () => {
-  
   const handleFormikSubmit = (values: IFormikValues, { resetForm }: any) => {
     resetForm();
     console.log(values);
   };
-  
+
   return (
     <section className={styles["newsletter"]}>
       <div className={styles["newsletter__wrapper"]}>
         <h2 className={styles["newsletter__title"]}>Assine nossa newsletter</h2>
         <Formik
-        onSubmit={handleFormikSubmit}
-        initialValues={initialValues}
-        validationSchema={NewsFormSchema}
-      >
-        <Form>
-          <Field type="text" id="Email" name="Email" placeholder="E-mail" />
-          <ErrorMessage
-            component="span"
-            name="Email"
-            className="invalid-feedback"
-          />
-          <button type="submit">Enviar</button>
-        </Form>
-      </Formik>
+          onSubmit={handleFormikSubmit}
+          initialValues={initialValues}
+          validationSchema={NewsFormSchema}
+        >
+          <Form>
+            <Field type="text" id="Email" name="Email" placeholder="E-mail" />
+            <ErrorMessage
+              component="span"
+              name="Email"
+              className="invalid-feedback"
+            />
+            <button type="submit">Enviar</button>
+          </Form>
+        </Formik>
       </div>
     </section>
   );

src/components/newsletter/style.module.scss

@@ -6,8 +6,12 @@
   background: var(--white);
   margin-top: 70px;
 
+  @media (max-width: 1024px) {
+    margin-top: 81.56px;
+  }
+
   &__wrapper {
-    width: 37.032%;
+    width: 474px;
     margin: 16px auto;
 
     @media (min-width: 2500px) {
@@ -21,6 +25,7 @@
 
     @media (max-width: 599px) {
       width: 91.6%;
+      margin: 16px auto;
     }
   }
 
@@ -47,6 +52,10 @@
 
   form {
     position: relative;
+    
+    @media (max-width: 599px) {      
+      width: 100%;
+    }
   }
 
   input {

src/pages/Institucional.tsx

@@ -5,7 +5,7 @@ import { Breadcrumb } from "../components/breadcrumbs-title";
 import { SideBar } from "../components/sidebar";
 import { Footer } from "../components/footer";
 import { BrowserRouter } from "react-router-dom";
-import { Newsletter } from "../components/footer/newsletter";
+import { Newsletter } from "../components/newsletter";
 
 const Institucional = () => {
   const [openModal, setOpenModal] = useState(false);
@@ -23,7 +23,7 @@ const Institucional = () => {
         <Newsletter />
       </main>
       <Footer />
-    </ BrowserRouter>
+    </BrowserRouter>
   );
 };