feat: adiciona a newsletter, sua estilização e responsividade

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 };

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;
+        }
+      }
+    }
+  }
+}

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 };

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>
   );
 };