From 2d8f673087b4542862c1889d8237a313af2545d4 Mon Sep 17 00:00:00 2001
From: Saulo Klein Nery <saulokn@outlook.com>
Date: Thu, 29 Dec 2022 16:42:12 -0300
Subject: [PATCH] feat: Cria newsletter mobile e desktop

---
 src/components/Main/Main.tsx        |   7 +-
 src/components/Main/Newsletter.tsx  |  24 +++++++
 src/styles/main.module.scss         |   5 +-
 src/styles/partials/newsletter.scss | 100 ++++++++++++++++++++++++++++
 4 files changed, 131 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Main/Newsletter.tsx
 create mode 100644 src/styles/partials/newsletter.scss

diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 3630a86..ff137d0 100644
--- a/src/components/Main/Main.tsx
+++ b/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;
diff --git a/src/components/Main/Newsletter.tsx b/src/components/Main/Newsletter.tsx
new file mode 100644
index 0000000..4fe96d8
--- /dev/null
+++ b/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;
diff --git a/src/styles/main.module.scss b/src/styles/main.module.scss
index 471d162..982373a 100644
--- a/src/styles/main.module.scss
+++ b/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";
diff --git a/src/styles/partials/newsletter.scss b/src/styles/partials/newsletter.scss
new file mode 100644
index 0000000..4064248
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}