feat: Cria newsletter mobile e desktop

src/components/Main/Main.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import styles from "../../styles/main.module.scss";
+import Newsletter from "./Newsletter";
 
 const Main = () => {
-    return <main className={styles["main"]}></main>;
+    return (
+        <main>
+            <Newsletter />
+        </main>
+    );
 };
 
 export default Main;

src/components/Main/Newsletter.tsx

@@ -0,0 +1,24 @@
+import styles from "../../styles/main.module.scss";
+import SearchBar from "../SearchBar";
+
+const initialValue = {
+    search: "",
+};
+
+const Newsletter = () => {
+    return (
+        <section className={styles["newsletter"]}>
+            <div className={styles["newsletter__wrapper"]}>
+                <h2 className={styles["newsletter__title"]}>ASSINE NOSSA NEWSLETTER</h2>
+                <SearchBar
+                    placeholder="E-mail"
+                    parentClassName="newsletter-form"
+                    initialValues={initialValue}
+                    buttonText="ENVIAR"
+                />
+            </div>
+        </section>
+    );
+};
+
+export default Newsletter;

src/styles/main.module.scss

@@ -3,7 +3,4 @@
 @import "utils/reset.scss";
 @import "partials/header.scss";
 @import "partials/footer.scss";
-
-main {
-    height: 50vh;
-}
+@import "partials/newsletter.scss";

src/styles/partials/newsletter.scss

@@ -0,0 +1,100 @@
+.newsletter {
+    padding: 16px 0;
+    border-width: 1px 0px;
+    border-style: solid;
+    border-color: #000;
+
+    @include mq(lg, max) {
+        padding: 16px;
+    }
+
+    &__wrapper {
+        width: 37%;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+
+        @include mq(lg, max) {
+            width: 100%;
+        }
+    }
+
+    &__title {
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 21px;
+        letter-spacing: 0.05em;
+        color: #303030;
+        margin-bottom: 8px;
+
+        @include mq(lg, max) {
+            font-size: 14px;
+            line-height: 16px;
+        }
+
+        @include mq(xl, min) {
+            font-size: 36px;
+            line-height: 42px;
+        }
+    }
+
+    .newsletter-form {
+        display: flex;
+
+        @include mq(lg, max) {
+            flex-direction: column;
+        }
+
+        &__search-box {
+            background: #ffffff;
+            border: 1px solid #e5e5e5;
+            border-radius: 4px;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            padding: 13px 16px;
+            flex: 1;
+            margin-right: 8px;
+
+            @include mq(lg, max) {
+                margin: 0 0 16px;
+                padding: 17px 16px;
+            }
+
+            @include mq(xl, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+
+            &::placeholder {
+                color: #c4c4c4;
+            }
+        }
+
+        &__search-button {
+            background: #000;
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            border-radius: 4px;
+            border: none;
+            font-weight: 700;
+            font-size: 12px;
+            line-height: 14px;
+            letter-spacing: 0.05em;
+            color: #fff;
+            padding: 14px 20px;
+            width: 27%;
+
+            @include mq(lg, max) {
+                font-size: 14px;
+                line-height: 16px;
+                width: 100%;
+                padding: 17px 0;
+            }
+
+            @include mq(xl, min) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+        }
+    }
+}