From a38604a04be4a198e203d632e76e3ea4e670a837 Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Wed, 11 Jan 2023 20:37:13 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20inicializa=C3=A7=C3=A3o=20do=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 desafio-react-e-typescript/src/App.scss       |  2 +
 desafio-react-e-typescript/src/App.tsx        |  2 +
 .../components/Footer/FooterMain.modules.scss | 84 +++++++++++++++++++
 .../src/components/Footer/FooterMain.tsx      | 13 +++
 .../src/components/Footer/Newsletter.tsx      | 16 ++++
 .../src/components/Variables.scss             |  2 +
 6 files changed, 119 insertions(+)
 create mode 100644 desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss
 create mode 100644 desafio-react-e-typescript/src/components/Footer/FooterMain.tsx
 create mode 100644 desafio-react-e-typescript/src/components/Footer/Newsletter.tsx

diff --git a/desafio-react-e-typescript/src/App.scss b/desafio-react-e-typescript/src/App.scss
index 1db0b5d..d2a4237 100644
--- a/desafio-react-e-typescript/src/App.scss
+++ b/desafio-react-e-typescript/src/App.scss
@@ -17,6 +17,8 @@ body {
 .MainConteiner {
   display: flex;
   max-width: 100%;
+  padding-bottom: 66px;
+  border-bottom: 1px solid $color-black;
 
   .Main_textArea {
     width: 100%;
diff --git a/desafio-react-e-typescript/src/App.tsx b/desafio-react-e-typescript/src/App.tsx
index 05a8dc7..bc92ec1 100644
--- a/desafio-react-e-typescript/src/App.tsx
+++ b/desafio-react-e-typescript/src/App.tsx
@@ -7,6 +7,7 @@ import "./App.scss";
 import { HeaderDesktop } from "./components/Header/HeaderDesktop";
 import { HeaderMobile } from "./components/Header/HeaderMobile";
 import { TopContainer } from "./components/Container-menu/TopContainer";
+import { MainFooter } from "./components/Footer/FooterMain";
 
 export function ScreenSize() {
   const [windowDimenion, detectHW] = useState({
@@ -44,6 +45,7 @@ export const App = () => {
             <Navegation />
             <Router />
           </div>
+          <MainFooter />
         </section>
       </>
     )
diff --git a/desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss b/desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss
new file mode 100644
index 0000000..99e1425
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss
@@ -0,0 +1,84 @@
+@import "../Variables.scss";
+
+.Footer_container {
+  display: flex;
+  flex-direction: column;
+
+  .Newsletter_Container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-bottom: 1px solid $color-black;
+    padding: 16px 0;
+    width: 100%;
+
+    .Newsletter_wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      align-items: center;
+
+      .News_title {
+        font-family: $fontFamily;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 21px;
+        color: $color-gray-700;
+        margin: 0 0 8px 0;
+
+        @media (min-width: 1025px) {
+          margin: 0 22.5% 8px 0;
+        }
+      }
+
+      .Submite_wrapper {
+        display: flex;
+
+        @media (max-width: 1024px) {
+          flex-direction: column;
+        }
+
+        @media (min-width: 1025px) {
+          width: 100%;
+          justify-content: center;
+        }
+
+        .Input_News {
+          width: 24.376%;
+          padding: 16px 13px;
+          border: 1px solid $color-white-500;
+          border-radius: 4px;
+          font-family: $fontFamily;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 16px;
+          color: $color-black;
+
+          @media (min-width: 1025px) {
+            margin-right: 8px;
+          }
+
+          &::placeholder {
+            color: $color-gray;
+          }
+        }
+        .Button_News {
+          width: 9.844%;
+          padding: 14px 20px;
+          background: $color-black;
+          box-shadow: 0px 4px 4px rgba($color-black, 0.25);
+          border-radius: 4px;
+          border: none;
+          font-family: $fontFamily;
+          font-style: normal;
+          font-weight: 700;
+          font-size: 12px;
+          line-height: 14px;
+          color: $color-white;
+        }
+      }
+    }
+  }
+}
diff --git a/desafio-react-e-typescript/src/components/Footer/FooterMain.tsx b/desafio-react-e-typescript/src/components/Footer/FooterMain.tsx
new file mode 100644
index 0000000..2aa98dd
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Footer/FooterMain.tsx
@@ -0,0 +1,13 @@
+import { Newsletter } from "./Newsletter";
+
+import "./FooterMain.modules.scss";
+
+export const MainFooter = () => {
+  return (
+    <>
+      <section className="Footer_container">
+        <Newsletter />
+      </section>
+    </>
+  );
+};
diff --git a/desafio-react-e-typescript/src/components/Footer/Newsletter.tsx b/desafio-react-e-typescript/src/components/Footer/Newsletter.tsx
new file mode 100644
index 0000000..a635f75
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Footer/Newsletter.tsx
@@ -0,0 +1,16 @@
+export const Newsletter = () => {
+  return (
+    <>
+      <section className="Newsletter_Container">
+        <div className="Newsletter_wrapper">
+          <h4 className="News_title"> Assine nossa Newsletter </h4>
+
+          <div className="Submite_wrapper">
+            <input className="Input_News" type="text" placeholder="E-mail" />
+            <button className="Button_News"> ENVIAR </button>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
diff --git a/desafio-react-e-typescript/src/components/Variables.scss b/desafio-react-e-typescript/src/components/Variables.scss
index 048db6d..09c16b5 100644
--- a/desafio-react-e-typescript/src/components/Variables.scss
+++ b/desafio-react-e-typescript/src/components/Variables.scss
@@ -5,10 +5,12 @@ $color-black-800: #100d0e;
 
 $color-white: #fff;
 $color-white-100: #f0f0f0;
+$color-white-500: #e5e5e5;
 
 $color-gray: #c4c4c4;
 $color-gray-300: #b9b7b7;
 $color-gray-500: #7d7d7d;
+$color-gray-700: #303030;
 $color-gray-800: #292929;
 
 $color-red: #ff0000;