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,106 @@
+@use '../../styles/utils/helpers/functions' as function;
+
+.newsletter {
+	width: 100%;
+	border-top: 1px solid var(--clr-common-black);
+}
+
+.container {
+	width: 100%;
+	padding: 16px;
+}
+
+.newsletter h3 {
+	margin-bottom: 16px;
+	font-size: var(--txt-normal);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+
+	@media screen and (min-width: 1025px) {
+		font-size: var(--txt-large);
+	}
+}
+
+.container {
+	fieldset :global {
+		border: none;
+
+		.form-group {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			gap: 8px;
+		}
+	}
+
+	@media screen and (min-width: 1025px) {
+		width: function.fluid(474px, 1280px);
+		padding: 16px 0;
+		margin: 0 auto;
+	}
+}
+
+.container :global {
+	.form-input {
+		width: 100%;
+		margin-bottom: 16px;
+	}
+
+	input {
+		display: block;
+		width: 100%;
+		height: 50px;
+		padding: 0 16px;
+		border: 1px solid var(--clr-gray-400);
+
+		&::placeholder {
+			color: var(--clr-gray-400);
+			font-size: var(--txt-normal);
+		}
+
+		@media screen and (min-width:1280px) {
+			
+		}
+	}
+}
+
+.form {
+	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;
+
+		font-size: var(--txt-normal);
+		font-weight: 700;
+		letter-spacing: 0.05em;
+
+		@media screen and (min-width: 1025px) {
+			font-size: var(--txt-xs);
+			height: 59px;
+		}
+	}
+}
+
+.newsletter {
+	@media screen and (min-width: 1025px) {
+		.container {
+			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>
+	)
+}