feat: adiciona formulário 375px e 1024px

src/components/Main/About/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  height: 285px;
+  min-height: 285px;
 
   &__text {
     width: 69.26%;
@@ -26,4 +26,19 @@
       color: var(--gray-300);
     }
   }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
 }

src/components/Main/Contact/styles.module.scss

@@ -103,4 +103,15 @@
       }
     }
   }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
 }

src/components/Main/Delivery/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  height: 285px;
+  min-height: 285px;
 
   &__text {
     width: 69.26%;
@@ -26,4 +26,19 @@
       color: var(--gray-300);
     }
   }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
 }

src/components/Main/ExchangeAndReturn/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  height: 285px;
+  min-height: 285px;
 
   &__text {
     width: 69.26%;
@@ -26,4 +26,19 @@
       color: var(--gray-300);
     }
   }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
 }

src/components/Main/MainMenu/styles.module.scss

@@ -29,4 +29,11 @@
     background: var(--black-500);
     color: var(--white-500);
   }
+
+  @media (max-width: 1024px) {
+    border-width: none;
+    border-style: none;
+    width: 100%;
+    margin-bottom: 30px;
+  }
 }

src/components/Main/Payment/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  height: 285px;
+  min-height: 285px;
 
   &__text {
     width: 69.26%;
@@ -26,4 +26,19 @@
       color: var(--gray-300);
     }
   }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
 }

src/components/Main/SecurityAndPrivacy/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  height: 285px;
+  min-height: 285px;
 
   &__text {
     width: 69.26%;
@@ -15,6 +15,10 @@
       line-height: 28px;
       color: var(--black-400);
       margin: 12px 0;
+
+      @media (max-width: 299px) {
+        font-size: 22px;
+      }
     }
 
     p {
@@ -26,4 +30,19 @@
       color: var(--gray-300);
     }
   }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+
+    &__text {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        text-align: justify;
+      }
+    }
+  }
 }

src/components/Main/styles.module.scss

@@ -70,4 +70,23 @@
       color: var(--black-400);
     }
   }
+
+  @media (max-width: 1024px) {
+    padding: 0 16px;
+    margin-bottom: 81px;
+
+    &__container {
+      width: 100%;
+    }
+
+    &__title {
+      height: 148px;
+      position: relative;
+
+      h1 {
+        position: absolute;
+        bottom: 30%;
+      }
+    }
+  }
 }

src/components/NewsLetter/index.tsx

@@ -1,22 +1,38 @@
 import React from "react";
 import styles from "./styles.module.scss";
+import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
+
+interface FormikValues {
+  email: string;
+}
+
+const initialValues = {
+  email: "",
+};
 
 const NewsLetter = () => {
+  const handleFormikSubmit = (values: FormikValues) => {
+    console.log(values);
+  };
+
   return (
     <section className={styles["newsLetter"]}>
       <div className={styles["newsLetter__title"]}>
         <h1>Assine nossa Newsletter</h1>
       </div>
-      <form className={styles["newsLetter__container"]}>
-        <input
-          className={styles["newsLetter__input"]}
-          type="text"
-          placeholder="E-mail"
-        />
-        <button className={styles["newsLetter__button"]} type="submit">
-          Enviar
-        </button>
-      </form>
+      <Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
+        <Form className={styles["newsLetter__container"]}>
+          <Field
+            id="email"
+            name="email"
+            className={styles["newsLetter__input"]}
+            placeholder="E-mail"
+          />
+          <button className={styles["newsLetter__button"]} type="submit">
+            Enviar
+          </button>
+        </Form>
+      </Formik>
     </section>
   );
 };