src/App.tsx

@@ -1,19 +1,12 @@
-import { Footer } from './template/Footer'
-import { Header } from './template/Header'
-import { Introduction } from './pages/Introduction'
+import { BrowserRouter } from 'react-router-dom'
+import { Router } from './settings/routes'
 
 import './settings/styles/index.scss'
 
 export function App() {
 	return (
-		<>
-			<Header />
-
-			<main>
-				<Introduction />
-			</main>
-
-			<Footer />
-		</>
+		<BrowserRouter>
+			<Router />
+		</BrowserRouter>
 	)
 }

src/pages/Introduction/index.module.scss

@@ -1,33 +1 @@
 @use '../../settings/styles/utils/helpers/functions' as function;
-
-.introduction {
-	margin-top: 29px;
-
-	@media screen and (min-width: 2500px) {
-		margin-top: 31px;
-	}
-}
-
-.container {
-	width: 100%;
-	padding: 0 16px;
-
-	@media screen and (min-width: 1025px) {
-		width: function.fluid(1080px, 1280px);
-		margin: 0 auto;
-		padding: 0;
-	}
-
-	@media screen and (min-width: 2500px) {
-		width: function.fluid(2299.68px, 2500px);
-	}
-}
-
-.breadcrumb {
-	a {
-		font-size: var(--txt-xs);
-		line-height: 14.06px;
-
-		text-transform: uppercase;
-	}
-}

src/pages/Introduction/index.tsx

@@ -1,16 +1,9 @@
-import { useMemo } from 'react'
-import { Breadcrumb } from '../../components/Breadcrumb'
-
 import css from './index.module.scss'
 
 export function Introduction() {
-	let listBreadcrumb = useMemo(() => [{ name: 'Introduction', href: '/' }], [])
-
 	return (
 		<section className={css.introduction}>
-			<div className={css.container}>
-				<Breadcrumb className={css.breadcrumb} list={listBreadcrumb} />
-			</div>
+			<div className={css.container}></div>
 		</section>
 	)
 }

src/settings/routes/index.module.scss

@@ -0,0 +1,40 @@
+@use '../../settings/styles/utils/helpers/functions' as function;
+
+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);
+		}
+	}
+}
+
+.breadcrumb :global {
+	a {
+		font-size: var(--txt-xs);
+		line-height: 14.06px;
+
+		text-transform: uppercase;
+	}
+}
+
+.breadcrumb-container {
+	width: 100%;
+	padding: 0 16px;
+	margin-top: 29px;
+
+	@media screen and (min-width: 1025px) {
+		width: function.fluid(1080px, 1280px);
+		margin: 29px auto 0;
+		padding: 0;
+	}
+
+	@media screen and (min-width: 2500px) {
+		width: function.fluid(2299.68px, 2500px);
+	}
+}

src/settings/routes/index.tsx

@@ -0,0 +1,59 @@
+import { useMemo } from 'react'
+import { Outlet, Route, Routes } from 'react-router-dom'
+import { Breadcrumb } from '../../components/Breadcrumb'
+import { Footer } from '../../template/Footer'
+import { Header } from '../../template/Header'
+import { Sidebar } from '../../template/Sidebar'
+
+import css from './index.module.scss'
+
+export function Router() {
+	let listBreadcrumb = useMemo(() => [{ name: 'Introduction', href: '/' }], [])
+
+	return (
+		<Routes>
+			<Route
+				path="/"
+				element={
+					<>
+						<Header />
+						<div className={css['breadcrumb-container']}>
+							<Breadcrumb className={css.breadcrumb} list={listBreadcrumb} />
+						</div>
+						<div className="window-content">
+							<Outlet />
+						</div>
+						<Footer />
+					</>
+				}
+			>
+				<Route
+					path="/"
+					element={
+						<>
+							<div>
+								<h1>Institutional</h1>
+								<Sidebar />
+								<main>
+									<div className="main-container">
+										<Outlet />
+									</div>
+								</main>
+							</div>
+						</>
+					}
+				>
+					<Route
+						index
+						element={
+							<>
+								<h2>Sobre</h2>
+							</>
+						}
+					/>
+					<Route path="/signup" element={<h2>Preencha o formulário</h2>} />
+				</Route>
+			</Route>
+		</Routes>
+	)
+}

src/settings/styles/global/_config.scss

@@ -1,4 +1,5 @@
 @use '../utils/resources/colors' as var;
+@use '../utils/helpers/functions' as function;
 @use '../utils/resources/fonts' as fonts;
 
 :root {
@@ -46,3 +47,16 @@ button,
 textarea {
 	font-family: var(--font-family-100);
 }
+
+.window-content {
+	width: 100%;
+	padding: 0 16px;
+
+	@media screen and (min-width: 1025px) {
+		width: function.fluid(1080px, 1280px);
+		padding: 0;
+	}
+	@media screen and (min-width: 2500px) {
+		width: function.fluid(2299.68px, 2500px);
+	}
+}

src/template/Sidebar/index.tsx

@@ -0,0 +1,19 @@
+import { Link } from 'react-router-dom'
+
+export function Sidebar() {
+	return (
+		<aside>
+			<li>
+				<Link to={'/'}>Initial</Link>
+			</li>
+
+			<li>
+				<Link to={'/about'}>About</Link>
+			</li>
+
+			<li>
+				<Link to={'/signup'}>Sign up</Link>
+			</li>
+		</aside>
+	)
+}