src/routes/index.tsx

@@ -5,6 +5,7 @@ import { About } from '../pages/Institutional/About'
 import { Contact } from '../pages/Institutional/Contact'
 import { Footer } from '../template/Footer'
 import { Header } from '../template/Header'
+import { Newsletter } from '../template/Newsletter'
 import { Sidebar } from '../template/Sidebar'
 
 import css from './index.module.scss'
@@ -25,6 +26,7 @@ export function Router() {
 						<div className="window-routes">
 							<Outlet />
 						</div>
+						<Newsletter />
 						<Footer />
 					</>
 				}

src/template/Footer/index.tsx

@@ -25,7 +25,6 @@ export function Footer() {
 
 	return (
 		<footer className={css.footer}>
-			<div></div>
 			<div className={css['container-top']}>
 				<List
 					accordionCurrentIsOpen={accordionCurrentIsOpen}

src/template/Newsletter/index.module.scss

@@ -0,0 +1,72 @@
+@use '../../styles/utils/helpers/functions' as function;
+
+.newsletter {
+	width: 100%;
+	border-top: 1px solid var(--clr-common-black);
+
+	.container {
+		width: 100%;
+		padding: 16px;
+
+		h3 {
+			text-transform: uppercase;
+			margin-bottom: 16px;
+		}
+
+		fieldset :global {
+			border: none;
+
+			.form-group {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				flex-direction: column;
+				gap: 8px;
+
+				.form-input {
+					width: 100%;
+					margin-bottom: 16px;
+				}
+
+				input {
+					display: block;
+					width: 100%;
+					height: 50px;
+					padding: 0 16px;
+					border: 1px solid var(--clr-gray-400);
+				}
+			}
+		}
+
+		button[type='submit'] {
+			width: 100%;
+			height: 50px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: var(--clr-common-black);
+			color: var(--clr-common-white);
+			text-transform: uppercase;
+		}
+	}
+
+	@media screen and (min-width: 1025px) {
+		.container {
+			width: function.fluid(474px, 1280px);
+			padding: 16px 0;
+			margin: 0 auto;
+
+			fieldset :global {
+				.form-group {
+					flex-direction: row;
+				}
+
+				.form-group {
+					.form-input {
+						margin-bottom: 0;
+					}
+				}
+			}
+		}
+	}
+}

src/template/Newsletter/index.tsx

@@ -0,0 +1,36 @@
+import { Field, Form, Formik } from 'formik'
+import * as Yup from 'yup'
+
+import css from './index.module.scss'
+
+const schema = Yup.object({
+	email: Yup.string().required('Campo Obrigratorio').email('Email ínvalido'),
+})
+
+export function Newsletter() {
+	return (
+		<section className={css.newsletter}>
+			<div className={css.container}>
+				<div className={css.content}>
+					<h3>Assine nossa newsletter</h3>
+					<Formik
+						initialValues={{ email: '' }}
+						onSubmit={(e) => console.log(e)}
+						validationSchema={schema}
+					>
+						<Form className={css.form}>
+							<fieldset className="form-container">
+								<div className="form-group">
+									<div className="form-input">
+										<Field name="email" type="text" placeholder="E-mail" />
+									</div>
+									<button type="submit">Enviar</button>
+								</div>
+							</fieldset>
+						</Form>
+					</Formik>
+				</div>
+			</div>
+		</section>
+	)
+}