Merge pull request 'feat(Newsletter): Cria o HTML e estiliza o Newsletter' (#4) from feature/newsletter into development

Reviewed-on: #4

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;

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

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;

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;

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