From 65af7d1ab83a66d1e902fa2a3a168b869d6552b1 Mon Sep 17 00:00:00 2001
From: Nicolly Vieira <nicollyvscosta@gmail.com>
Date: Wed, 4 Jan 2023 13:34:04 -0300
Subject: [PATCH] feat(Newsletter): Cria o HTML e estiliza o Newsletter

---
 .../src/components/Footer/Footer.tsx          | 12 +++
 .../Newsletter/Newsletter.module.scss         | 88 +++++++++++++++++++
 .../components/Newsletter/Newsletter.tsx      | 26 ++++++
 .../Main/components/Informacoes.module.scss   |  6 ++
 .../src/pages/Institucional.tsx               |  2 +
 5 files changed, 134 insertions(+)
 create mode 100644 desafio-react-typescript/src/components/Footer/Footer.tsx
 create mode 100644 desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.module.scss
 create mode 100644 desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx

diff --git a/desafio-react-typescript/src/components/Footer/Footer.tsx b/desafio-react-typescript/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..d6001fe
--- /dev/null
+++ b/desafio-react-typescript/src/components/Footer/Footer.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import Newsletter from "./components/Newsletter/Newsletter";
+
+const Footer = () => {
+  return (
+    <footer>
+      <Newsletter />
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.module.scss b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.module.scss
new file mode 100644
index 0000000..a4649bf
--- /dev/null
+++ b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.module.scss
@@ -0,0 +1,88 @@
+@import "../../../../styles/all.scss";
+
+.newsletter {
+  border-width: 1px 0px;
+  border-style: solid;
+  border-color: #000000;
+
+  &__wrapper {
+    width: 37.03125%;
+    margin: 16px auto;
+
+    @include mq($lg, max) {
+      width: 100%;
+      padding: 0 16px;
+    }
+
+    @include mq($xl, min) {
+      width: 36.88%;
+    }
+  }
+
+  &__title {
+    @include fontStyle(500, 18px, 21px, $primary-200);
+    text-transform: uppercase;
+    margin-bottom: 8px;
+
+    @include mq($lg, max) {
+      @include fontStyleResponsive(14px, 16px);
+    }
+
+    @include mq($xl, min) {
+      @include fontStyleResponsive(36px, 42px);
+    }
+  }
+
+  &__input {
+    width: 71.7299578%;
+    height: 42px;
+    padding: 13px 16px;
+    margin-right: 8px;
+    @include borderStyle(1px, $primary-300, 4px);
+    @include fontStyle(400, 14px, 16px, $black);
+    
+    &::placeholder {
+        color:$primary-600;
+    }
+
+    @include mq($lg, max) {
+      width: 100%;
+      height: 50px;
+      margin: 0 0 8px;
+    }
+
+    @include mq($xl, min) {
+      width: 72.4511930585%;
+      height: 59px;
+
+      @include fontStyleResponsive(28px, 33px);
+    }
+  }
+
+  &__button {
+    width: 26.5822784%;
+    height: 42px;
+    background-color: $black;
+
+    padding: 14px 20px;
+
+    @include fontStyle(700, 12px, 14px, $white);
+    text-transform: uppercase;
+    border-radius: 4px;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+    @include mq($lg, max) {
+      width: 100%;
+      height: 50px;
+
+      @include fontStyleResponsive(14px, 16px);
+    }
+
+    @include mq($xl, min) {
+      height: 59px;
+      width: 26.6811279%;
+
+      @include fontStyleResponsive(24px, 28px);
+    }
+  }
+}
diff --git a/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx
new file mode 100644
index 0000000..bb4715c
--- /dev/null
+++ b/desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+
+import styles from "./Newsletter.module.scss";
+
+export const Newsletter = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div className={styles["newsletter"]}>
+      <div className={styles["newsletter__wrapper"]}>
+        <h3 className={styles["newsletter__title"]}>Assine Nossa Newsletter</h3>
+        <div className={styles["newsletter__input-container"]}>
+          <input
+            value={value}
+            className={styles["newsletter__input"]}
+            type="email"
+            placeholder="E-mail"
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <button className={styles["newsletter__button"]} onClick={() => setValue("")}>Enviar</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Newsletter;
diff --git a/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss b/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss
index fc73c68..41779de 100644
--- a/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss
+++ b/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss
@@ -3,9 +3,15 @@
 .container {
   display: flex;
   gap: 30px;
+  margin-bottom: 70px;
 
   @include mq($lg, max) {
     display: block;
+    margin-bottom: 81.56px;
+  }
+
+  @include mq($xl, min) {
+    margin-bottom: 84px;
   }
   .content-list {
     border-right: 1px solid $black;
diff --git a/desafio-react-typescript/src/pages/Institucional.tsx b/desafio-react-typescript/src/pages/Institucional.tsx
index 72b5aff..11ac23b 100644
--- a/desafio-react-typescript/src/pages/Institucional.tsx
+++ b/desafio-react-typescript/src/pages/Institucional.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Footer from "../components/Footer/Footer";
 import Header from "../components/Header/Header";
 import Main from "../components/Main/Main";
 
@@ -7,6 +8,7 @@ const Institucional = () => {
         <>
             <Header />
             <Main />
+            <Footer />
         </>
     )
 }