src/components/Newsletter/Newsletter.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./newsletter.module.scss";
+const Newsletter = () => {
+  return (
+    <label className={styles["newsForm"]}>
+      ASSINE NOSSA NEWSLETTER
+      <div className={styles["newsForm-wrapper"]}>
+        <input
+          className={styles["newsForm-input"]}
+          type="text"
+          placeholder="E-mail"
+        />
+        <button className={styles["newsForm-btn"]}>ENVIAR</button>
+      </div>
+    </label>
+  );
+};
+
+export { Newsletter };

src/components/Newsletter/newsletter.module.scss

@@ -0,0 +1,53 @@
+.newsForm {
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  font-size: 18px;
+  font-variant: small-caps;
+  @media screen and (min-width: 2500px) {
+    font-size: 36px;
+  }
+  .newsForm-wrapper {
+    display: flex;
+    flex-direction: row;
+    margin-top: 8px;
+  }
+}
+.newsForm-input {
+  margin-right: 8px;
+  padding: 13px 16px;
+  background: #ffffff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  width: 474px;
+  height: 42px;
+
+  &::placeholder {
+    font-weight: 400;
+    font-size: 14px;
+    color: #c4c4c4;
+    @media screen and (min-width: 2500px) {
+      font-size: 28px;
+    }
+  }
+  @media screen and (min-width: 2500px) {
+    width: 636px;
+    height: 59px;
+  }
+}
+.newsForm-btn {
+  width: 126px;
+  height: 42px;
+  background: #000000;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  padding: 14px 20px;
+  color: white;
+  font-weight: 700;
+  font-size: 12px;
+  @media screen and (min-width: 2500px) {
+    width: 246px;
+    height: 59px;
+    font-size: 24px;
+  }
+}

src/pages/Home.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Socials } from "../components/Socials/Socials";
+import { Newsletter } from "../components/Newsletter/Newsletter";
 
 const Home = () => {
   return (
     <div>
-      <Socials></Socials>
+      <Newsletter></Newsletter>
     </div>
   );
 };