From d563bc2481ecd28e2f37cc3c9d813da5962aa381 Mon Sep 17 00:00:00 2001
From: unknown <gabrielgms0@hotmail.com>
Date: Fri, 20 Jan 2023 18:02:00 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adiciona=20a=20newsletter,=20sua=20esti?=
 =?UTF-8?q?liza=C3=A7=C3=A3o=20e=20responsividade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Footer/Footer.tsx          |  13 ++
 .../Newsletter/Newsletter.module.scss         | 118 ++++++++++++++++++
 .../src/components/Newsletter/Newsletter.tsx  |  23 ++++
 desafio-react-e-typescript/src/pages/Home.tsx |   2 +
 4 files changed, 156 insertions(+)
 create mode 100644 desafio-react-e-typescript/src/components/Footer/Footer.tsx
 create mode 100644 desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss
 create mode 100644 desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx

diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..d4c732e
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Newsletter } from "../Newsletter/Newsletter";
+
+const Footer = () => {
+  return (
+    <div>
+      <Newsletter />
+    </div>
+  );
+};
+
+export { Footer };
diff --git a/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss
new file mode 100644
index 0000000..c6df49a
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss
@@ -0,0 +1,118 @@
+.newsletter-container {
+  width: 100%;
+  height: 104px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-top: 1px solid black;
+  padding: 16px 0px;
+
+  @media screen and (min-width: 2500px) {
+    height: 141px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    padding: 16px 16px;
+    height: 182px;
+  }
+
+  .newsletter-wrapper {
+    width: 100%;
+    max-width: 475px;
+
+    @media screen and (min-width: 2500px) {
+      max-width: 922px;
+    }
+
+    @media screen and (max-width: 1024px) {
+      max-width: unset;
+    }
+
+    h3 {
+      font-family: "Roboto", sans-serif;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      font-variant: small-caps;
+      color: #303030;
+      margin: unset;
+      margin-bottom: 8px;
+      text-transform: lowercase;
+
+      @media screen and (min-width: 2500px) {
+        font-size: 36px;
+        line-height: 42px;
+      }
+
+      @media screen and (max-width: 1024px) {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+    .newsletter-container-input {
+      @media screen and (min-width: 2500px) {
+        display: flex;
+      }
+      input {
+        width: 100%;
+        max-width: 340px;
+        height: 42px;
+        margin-right: 8px;
+        padding: 13px 16px;
+        border: 1px solid #e5e5e5;
+        border-radius: 4px;
+        font-family: "Roboto", sans-serif;
+        font-size: 14px;
+        line-height: 16px;
+
+        @media screen and (min-width: 2500px) {
+          max-width: 668px;
+          height: 59px;
+          font-size: 28px;
+          line-height: 33px;
+        }
+
+        @media screen and (max-width: 1024px) {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          height: 50px;
+          max-width: unset;
+        }
+      }
+
+      button {
+        width: 100%;
+        max-width: 126px;
+        height: 42px;
+        background: #000000;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border: none;
+        border-radius: 4px;
+        font-family: "Roboto", sans-serif;
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 14px;
+        text-align: center;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: #ffffff;
+        cursor: pointer;
+
+        @media screen and (min-width: 2500px) {
+          max-width: 246px;
+          height: 59px;
+          font-size: 24px;
+          line-height: 28px;
+        }
+
+        @media screen and (max-width: 1024px) {
+          height: 50px;
+          max-width: unset;
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
diff --git a/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx
new file mode 100644
index 0000000..50249b3
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+import styles from "./Newsletter.module.scss";
+
+const Newsletter = () => {
+  return (
+    <div className={styles["newsletter-container"]}>
+      <div className={styles["newsletter-wrapper"]}>
+        <h3 className={styles["newsletter-title"]}>Assine Nossa Newsletter</h3>
+        <div className={styles["newsletter-container-input"]}>
+          <input
+            type="text"
+            placeholder="E-mail"
+            className={styles["newsletter-input"]}
+          />
+          <button className={styles["newsletter-button"]}>Enviar</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { Newsletter };
diff --git a/desafio-react-e-typescript/src/pages/Home.tsx b/desafio-react-e-typescript/src/pages/Home.tsx
index 82e25dd..70bc1c5 100644
--- a/desafio-react-e-typescript/src/pages/Home.tsx
+++ b/desafio-react-e-typescript/src/pages/Home.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 
 import { Header } from "../components/Header/Header";
+import { Footer } from "../components/Footer/Footer";
 
 const Home = () => {
   return (
     <div>
       <Header />
+      <Footer />
     </div>
   );
 };