From 66d913c10510ee9840ec50374b2289065a046c4d Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Fri, 30 Dec 2022 19:41:50 -0300
Subject: [PATCH] feat(about): created initial styles in aboute route for
 large,medium,small devices

---
 .../Institutional/About/index.module.scss     | 27 ++++++++++++
 src/pages/Institutional/About/index.tsx       | 41 +++++++++++++++++++
 src/settings/routes/index.module.scss         |  8 ----
 src/settings/routes/index.tsx                 | 20 ++++-----
 src/settings/styles/global/_config.scss       | 10 ++++-
 src/template/Sidebar/index.module.scss        |  8 ++--
 6 files changed, 88 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/Institutional/About/index.module.scss
 create mode 100644 src/pages/Institutional/About/index.tsx

diff --git a/src/pages/Institutional/About/index.module.scss b/src/pages/Institutional/About/index.module.scss
new file mode 100644
index 0000000..90b399c
--- /dev/null
+++ b/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;
+		}
+	}
+}
diff --git a/src/pages/Institutional/About/index.tsx b/src/pages/Institutional/About/index.tsx
new file mode 100644
index 0000000..610c1bf
--- /dev/null
+++ b/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>
+	)
+}
diff --git a/src/settings/routes/index.module.scss b/src/settings/routes/index.module.scss
index 6b47138..5ceb793 100644
--- a/src/settings/routes/index.module.scss
+++ b/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);
-		}
 	}
 }
 
diff --git a/src/settings/routes/index.tsx b/src/settings/routes/index.tsx
index 6bb91ff..5981a21 100644
--- a/src/settings/routes/index.tsx
+++ b/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>} />
diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss
index 99c7ea0..b4cacd7 100644
--- a/src/settings/styles/global/_config.scss
+++ b/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,13 @@ textarea {
 		color: var(--clr-gray-900);
 	}
 
+	.title {
+		font-weight: 700;
+		font-size: var(--txt-xl);
+
+		color: var(--clr-gray-900);
+	}
+
 	@media screen and (min-width: 1025px) {
 		width: function.fluid(1080px, 1280px);
 		padding: 0;
@@ -77,6 +84,7 @@ textarea {
 .window-initial {
 	display: grid;
 	grid-template-columns: 1fr;
+	gap: 30px;
 
 	@media screen and (min-width: 1025px) {
 		grid-template-columns:
diff --git a/src/template/Sidebar/index.module.scss b/src/template/Sidebar/index.module.scss
index 71ccc58..320bd8a 100644
--- a/src/template/Sidebar/index.module.scss
+++ b/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 {