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 = () => {
+
>
)
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 (
+ <>
+
+ >
+ );
+};
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 (
+ <>
+
+
+
Assine nossa Newsletter
+
+
+
+
+
+
+
+ >
+ );
+};
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;