diff --git a/src/pages/Introduction/index.module.scss b/src/pages/Introduction/index.module.scss
deleted file mode 100644
index 03c3550..0000000
--- a/src/pages/Introduction/index.module.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use '../../settings/styles/utils/helpers/functions' as function;
diff --git a/src/pages/Introduction/index.tsx b/src/pages/Introduction/index.tsx
deleted file mode 100644
index 261215b..0000000
--- a/src/pages/Introduction/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import css from './index.module.scss'
-
-export function Introduction() {
- return (
-
- )
-}
diff --git a/src/settings/routes/index.tsx b/src/settings/routes/index.tsx
index 1008758..6bb91ff 100644
--- a/src/settings/routes/index.tsx
+++ b/src/settings/routes/index.tsx
@@ -20,7 +20,7 @@ export function Router() {
-
+
@@ -31,14 +31,16 @@ export function Router() {
path="/"
element={
<>
-
+
Institutional
-
-
-
-
-
-
+
>
}
@@ -51,7 +53,11 @@ export function Router() {
>
}
/>
-
Preencha o formulário} />
+ Preencha o formulário} />
+ Formas de pagamentos} />
+ Troca e Devolução} />
+ Privacidade} />
+ Entrega} />
diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss
index cd64bc0..90ad438 100644
--- a/src/settings/styles/global/_config.scss
+++ b/src/settings/styles/global/_config.scss
@@ -52,11 +52,33 @@ textarea {
width: 100%;
padding: 0 16px;
+ h1 {
+ font-weight: 400;
+ font-size: var(--txt-xl);
+ font-family: var(--font-family-100);
+ letter-spacing: 0.1em;
+
+ text-align: center;
+ text-transform: uppercase;
+
+ color: var(--clr-gray-900);
+ }
+
@media screen and (min-width: 1025px) {
width: function.fluid(1080px, 1280px);
padding: 0;
+ margin: 0 auto;
}
@media screen and (min-width: 2500px) {
width: function.fluid(2299.68px, 2500px);
}
}
+
+.window-initial {
+ display: grid;
+ grid-template-columns: 1fr;
+
+ @media screen and (min-width: 1025px) {
+ grid-template-columns: 1fr 1fr;
+ }
+}
diff --git a/src/template/Sidebar/index.module.scss b/src/template/Sidebar/index.module.scss
index e69de29..71ccc58 100644
--- a/src/template/Sidebar/index.module.scss
+++ b/src/template/Sidebar/index.module.scss
@@ -0,0 +1,34 @@
+.sidebar {
+ width: 100%;
+ height: auto;
+
+ .container {
+ width: 100%;
+ height: auto;
+
+ @media screen and (min-width: 1025px) {
+ border-right: 1px solid var(--clr-common-black);
+ }
+ }
+
+ .list {
+ li {
+ a {
+ display: inline-block;
+
+ width: 100%;
+ padding: 10px 20px;
+
+ font-weight: 400;
+ font-size: var(--txt-medium);
+
+ color: var(--clr-gray-600);
+
+ &.active {
+ background-color: var(--clr-common-black);
+ color: var(--clr-common-white);
+ }
+ }
+ }
+ }
+}
diff --git a/src/template/Sidebar/index.tsx b/src/template/Sidebar/index.tsx
index 6048fc8..5e8c088 100644
--- a/src/template/Sidebar/index.tsx
+++ b/src/template/Sidebar/index.tsx
@@ -1,19 +1,34 @@
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
+
+import css from './index.module.scss'
export function Sidebar() {
+ const { pathname } = useLocation()
+
+ const paths = [
+ { name: 'Sobre', path: '/' },
+ { name: 'Forma de Pagamento', path: '/payments' },
+ { name: 'Entrega', path: '/shipping' },
+ { name: 'Troca e Devolução', path: '/exchange' },
+ { name: 'Segurança e Privacidade', path: '/privacity' },
+ { name: 'Contact', path: '/contact' },
+ ]
+
return (
-