From 243f989923862f0e73b7b02c989d47690ffcfc41 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Wed, 11 Jan 2023 18:30:52 -0300
Subject: [PATCH] feat(newsletter): Criando o componente da newsletter

---
 src/components/Newsletter/Newsletter.tsx      | 19 +++++++
 .../Newsletter/newsletter.module.scss         | 53 +++++++++++++++++++
 src/pages/Home.tsx                            |  4 +-
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Newsletter/Newsletter.tsx
 create mode 100644 src/components/Newsletter/newsletter.module.scss

diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
new file mode 100644
index 0000000..329b15e
--- /dev/null
+++ b/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 };
diff --git a/src/components/Newsletter/newsletter.module.scss b/src/components/Newsletter/newsletter.module.scss
new file mode 100644
index 0000000..2134542
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 0bf510b..57229cf 100644
--- a/src/pages/Home.tsx
+++ b/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>
   );
 };