Merge pull request 'feat: cria newsLetter desktop e mobile' (#6) from feature/cria-newsLatter-2500px-1280px-1024px-375px into development

Reviewed-on: #6

src/components/Footer/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { NewsLetter } from "../NewsLetter";
+
+const Footer = () => {
+  return (
+    <footer>
+      <NewsLetter />
+    </footer>
+  );
+};
+
+export { Footer };

src/components/Header/styles.module.scss

@@ -51,9 +51,14 @@
         border: none;
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
+        padding: 8px 0 8px 16px;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--gray-200);
 
         &::placeholder {
-          padding: 8px 0 8px 16px;
           font-style: normal;
           font-weight: 400;
           font-size: 14px;

src/components/InstitutionalMain/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./styles.module.scss";
+
+const InstitutionalMain = () => {
+  return <div className={styles["main"]}></div>;
+};
+
+export { InstitutionalMain };

src/components/InstitutionalMain/styles.module.scss

@@ -0,0 +1,3 @@
+.main {
+  height: 588px;
+}

src/components/NewsLetter/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./styles.module.scss";
+
+const NewsLetter = () => {
+  return (
+    <section className={styles["newsLetter"]}>
+      <div className={styles["newsLetter__title"]}>
+        <h1>Assine nossa Newsletter</h1>
+      </div>
+      <form className={styles["newsLetter__container"]}>
+        <input
+          className={styles["newsLetter__input"]}
+          type="text"
+          placeholder="E-mail"
+        />
+        <button className={styles["newsLetter__button"]} type="submit">
+          Enviar
+        </button>
+      </form>
+    </section>
+  );
+};
+
+export { NewsLetter };

src/components/NewsLetter/styles.module.scss

@@ -0,0 +1,134 @@
+.newsLetter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-width: 1px 0px;
+  border-style: solid;
+  border-color: var(--black-500);
+  width: 100%;
+  padding: 16px 0;
+
+  &__title {
+    width: 37.09%;
+    margin-bottom: 8px;
+
+    h1 {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      font-variant: small-caps;
+      color: var(--black-400);
+      text-transform: uppercase;
+    }
+  }
+
+  &__container {
+    display: flex;
+    justify-content: space-between;
+    height: 42px;
+    width: 37.09%;
+  }
+
+  &__input {
+    height: 100%;
+    width: 71.73%;
+    border: 1px solid var(--white-400);
+    border-radius: 4px;
+    padding: 13px 16px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: var(--gray-100);
+
+    &::placeholder {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 16px;
+      color: var(--gray-100);
+    }
+  }
+
+  &__button {
+    height: 100%;
+    width: 26.583%;
+    background: var(--black-500);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    border: none;
+    color: var(--white-500);
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 1024px) {
+    height: 181px;
+    padding: 16px;
+
+    &__title {
+      width: 100%;
+
+      h1 {
+        font-size: 14px;
+        line-height: 16px;
+      }
+    }
+
+    &__container {
+      height: 116px;
+      width: 100%;
+      flex-direction: column;
+    }
+
+    &__input {
+      width: 100%;
+      height: 50px;
+      border-radius: 0;
+      margin-bottom: 16px;
+    }
+
+    &__button {
+      width: 100%;
+      height: 50px;
+      border-radius: 0;
+    }
+  }
+
+  @media (min-width: 2500px) {
+    &__title {
+      h1 {
+        font-size: 36px;
+        line-height: 42px;
+      }
+    }
+
+    &__container {
+      width: 36.88%;
+      height: 59px;
+    }
+
+    &__input {
+      width: 72.452%;
+      font-size: 28px;
+      line-height: 33px;
+
+      &::placeholder {
+        font-size: 28px;
+        line-height: 33px;
+      }
+    }
+
+    &__button {
+      width: 26.682%;
+      font-size: 24px;
+      line-height: 28px;
+    }
+  }
+}

src/pages/Institutional/index.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from "react";
+import { Footer } from "../../components/Footer";
 import { Header } from "../../components/Header";
+import { InstitutionalMain } from "../../components/InstitutionalMain";
 import { MenuMobileModal } from "../../components/MunuMobileModal";
 
 const Institutional = () => {
@@ -24,6 +26,8 @@ const Institutional = () => {
         onRequestClose={() => setMenuMobileModal(false)}
       />
       <Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
+      <InstitutionalMain />
+      <Footer />
     </>
   );
 };

src/styles/global.scss

@@ -6,8 +6,10 @@
 }
 
 :root {
+  --white-400: #e5e5e5;
   --white-500: #ffffff;
 
+  --black-400: #303030;
   --black-500: #000000;
 
   --gray-100: #c4c4c4;