src/pages/Institutional/About/index.module.scss

@@ -0,0 +1,27 @@
+.descriptions {
+	display: flex;
+	align-items: flex-start;
+	flex-direction: column;
+	gap: 20px;
+
+	p {
+		font-weight: 400;
+		font-size: var(--txt-xs);
+		line-height: 18.2px;
+
+		text-align: justify;
+
+		color: var(--clr-gray-700);
+
+		@media screen and (min-width: 1025px) {
+			font-size: var(--txt-small);
+			line-height: 15.23px;
+
+			text-align: initial;
+		}
+
+		@media screen and (min-width: 2500px) {
+			line-height: 30.47px;
+		}
+	}
+}

src/pages/Institutional/About/index.tsx

@@ -0,0 +1,41 @@
+import css from './index.module.scss'
+
+export function About() {
+	return (
+		<section className={css.about}>
+			<div className={css.container}>
+				<h2 className="title">Sobre</h2>
+
+				<div className={css.descriptions}>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+						ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+						aliquip ex ea commodo consequat. Duis aute irure dolor in
+						reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+						pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+						culpa qui officia deserunt mollit anim id est laborum.
+					</p>
+					<p>
+						Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+						accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+						quae ab illo inventore veritatis et quasi architecto beatae vitae
+						dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+						aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+						eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+						qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+						sed quia non numquam eius modi tempora incidunt ut labore et dolore
+						magnam aliquam quaerat voluptatem.
+					</p>
+					<p>
+						Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
+						suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+						autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
+						nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+						voluptas nulla pariatur?
+					</p>
+				</div>
+			</div>
+		</section>
+	)
+}

src/settings/routes/index.module.scss

@@ -3,14 +3,6 @@
 main :global {
 	.main-container {
 		width: 100%;
-
-		@media screen and (min-width: 1025px) {
-			width: function.fluid(748px, 1080px);
-		}
-
-		@media screen and (min-width: 2500px) {
-			width: function.fluid(1680px, 2299.68px);
-		}
 	}
 }
 

src/settings/routes/index.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { Outlet, Route, Routes } from 'react-router-dom'
 import { Breadcrumb } from '../../components/Breadcrumb'
+import { About } from '../../pages/Institutional/About'
 import { Footer } from '../../template/Footer'
 import { Header } from '../../template/Header'
 import { Sidebar } from '../../template/Sidebar'
@@ -31,28 +32,21 @@ export function Router() {
 					path="/"
 					element={
 						<>
-							<div className="window-content">
-								<h1>Institutional</h1>
+							<main className="window-content">
+								<h1 className="main-title">Institutional</h1>
 								<div className="window-initial">
 									<Sidebar />
-									<main>
+									<div>
 										<div className="main-container">
 											<Outlet />
 										</div>
-									</main>
+									</div>
 								</div>
-							</div>
+							</main>
 						</>
 					}
 				>
-					<Route
-						index
-						element={
-							<>
-								<h2>Sobre</h2>
-							</>
-						}
-					/>
+					<Route index element={<About />} />
 					<Route path="/contact" element={<h2>Preencha o formulário</h2>} />
 					<Route path="/payments" element={<h2>Formas de pagamentos</h2>} />
 					<Route path="/exchange" element={<h2>Troca e Devolução</h2>} />

src/settings/styles/global/_config.scss

@@ -52,7 +52,7 @@ textarea {
 	width: 100%;
 	padding: 0 16px;
 
-	h1 {
+	.main-title {
 		font-weight: 400;
 		font-size: var(--txt-xl);
 		font-family: var(--font-family-100);
@@ -64,6 +64,19 @@ textarea {
 		color: var(--clr-gray-900);
 	}
 
+	.title {
+		font-weight: 700;
+		font-size: var(--txt-xl);
+
+		text-align: center;
+
+		color: var(--clr-gray-900);
+
+		@media screen and (min-width: 1025px) {
+			text-align: initial;
+		}
+	}
+
 	@media screen and (min-width: 1025px) {
 		width: function.fluid(1080px, 1280px);
 		padding: 0;
@@ -77,8 +90,17 @@ textarea {
 .window-initial {
 	display: grid;
 	grid-template-columns: 1fr;
+	gap: 30px;
 
 	@media screen and (min-width: 1025px) {
-		grid-template-columns: 1fr 1fr;
+		grid-template-columns:
+			function.fluid(332px, 1080px)
+			function.fluid(748px, 1080px);
+	}
+
+	@media screen and (min-width: 2500px) {
+		grid-template-columns:
+			function.fluid(590px, 2299.68px)
+			function.fluid(1680px, 2299.68px);
 	}
 }

src/template/Sidebar/index.module.scss

@@ -2,13 +2,13 @@
 	width: 100%;
 	height: auto;
 
+	@media screen and (min-width: 1025px) {
+		border-right: 1px solid var(--clr-common-black);
+	}
+
 	.container {
 		width: 100%;
 		height: auto;
-
-		@media screen and (min-width: 1025px) {
-			border-right: 1px solid var(--clr-common-black);
-		}
 	}
 
 	.list {

src/template/Sidebar/index.tsx

@@ -18,7 +18,7 @@ export function Sidebar() {
 		<aside className={css.sidebar}>
 			<div className={css.container}>
 				<ul className={css.list}>
-					{paths.map(({ path, name }, index) => {
+					{paths.map(({ path, name }) => {
 						return (
 							<li key={name + '-sidebar'}>
 								<Link className={pathname === path ? css.active : ''} to={path}>