diff --git a/desafio-react-e-typescript/src/components/Footer/Footer.tsx b/desafio-react-e-typescript/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..d4c732e
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Footer/Footer.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Newsletter } from "../Newsletter/Newsletter";
+
+const Footer = () => {
+ return (
+
+
+
+ );
+};
+
+export { Footer };
diff --git a/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss
new file mode 100644
index 0000000..c6df49a
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.module.scss
@@ -0,0 +1,118 @@
+.newsletter-container {
+ width: 100%;
+ height: 104px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-top: 1px solid black;
+ padding: 16px 0px;
+
+ @media screen and (min-width: 2500px) {
+ height: 141px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ padding: 16px 16px;
+ height: 182px;
+ }
+
+ .newsletter-wrapper {
+ width: 100%;
+ max-width: 475px;
+
+ @media screen and (min-width: 2500px) {
+ max-width: 922px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ max-width: unset;
+ }
+
+ h3 {
+ font-family: "Roboto", sans-serif;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 21px;
+ letter-spacing: 0.05em;
+ font-variant: small-caps;
+ color: #303030;
+ margin: unset;
+ margin-bottom: 8px;
+ text-transform: lowercase;
+
+ @media screen and (min-width: 2500px) {
+ font-size: 36px;
+ line-height: 42px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ font-size: 14px;
+ line-height: 16px;
+ }
+ }
+ .newsletter-container-input {
+ @media screen and (min-width: 2500px) {
+ display: flex;
+ }
+ input {
+ width: 100%;
+ max-width: 340px;
+ height: 42px;
+ margin-right: 8px;
+ padding: 13px 16px;
+ border: 1px solid #e5e5e5;
+ border-radius: 4px;
+ font-family: "Roboto", sans-serif;
+ font-size: 14px;
+ line-height: 16px;
+
+ @media screen and (min-width: 2500px) {
+ max-width: 668px;
+ height: 59px;
+ font-size: 28px;
+ line-height: 33px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ height: 50px;
+ max-width: unset;
+ }
+ }
+
+ button {
+ width: 100%;
+ max-width: 126px;
+ height: 42px;
+ background: #000000;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ border: none;
+ border-radius: 4px;
+ font-family: "Roboto", sans-serif;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 14px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: #ffffff;
+ cursor: pointer;
+
+ @media screen and (min-width: 2500px) {
+ max-width: 246px;
+ height: 59px;
+ font-size: 24px;
+ line-height: 28px;
+ }
+
+ @media screen and (max-width: 1024px) {
+ height: 50px;
+ max-width: unset;
+ margin-top: 16px;
+ }
+ }
+ }
+ }
+}
diff --git a/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx
new file mode 100644
index 0000000..50249b3
--- /dev/null
+++ b/desafio-react-e-typescript/src/components/Newsletter/Newsletter.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+import styles from "./Newsletter.module.scss";
+
+const Newsletter = () => {
+ return (
+
+
+
Assine Nossa Newsletter
+
+
+
+
+
+
+ );
+};
+
+export { Newsletter };
diff --git a/desafio-react-e-typescript/src/pages/Home.tsx b/desafio-react-e-typescript/src/pages/Home.tsx
index 82e25dd..70bc1c5 100644
--- a/desafio-react-e-typescript/src/pages/Home.tsx
+++ b/desafio-react-e-typescript/src/pages/Home.tsx
@@ -1,11 +1,13 @@
import React from "react";
import { Header } from "../components/Header/Header";
+import { Footer } from "../components/Footer/Footer";
const Home = () => {
return (
+
);
};