Merge pull request 'refactor/components-2.0' (#17) from refactor/components-2.0 into develop

Reviewed-on: #17

package.json

@@ -11,11 +11,13 @@
 		"@types/react-router-dom": "^5.3.3",
 		"@types/react-text-mask": "^5.4.11",
 		"formik": "^2.2.9",
+		"proxyquire": "^2.1.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.6.1",
 		"react-scripts": "5.0.1",
 		"react-text-mask": "^5.5.0",
+		"rewire": "^6.0.0",
 		"sass": "^1.57.1",
 		"web-vitals": "^2.1.4",
 		"yup": "^0.32.11"

src/App.tsx

@@ -1,5 +1,5 @@
 import { BrowserRouter } from 'react-router-dom'
-import { Router } from './routes'
+import { Router } from './routes/$Routes'
 
 import './styles/index.scss'
 

src/components/Molecules/Accordion/$Accordion.tsx

@@ -2,14 +2,14 @@ import { useContext } from 'react'
 import { ContentProps, HeaderProps, MainProps } from './@types/index'
 import { AccordionContextItems } from './context/Items'
 
-import './index.scss'
+import styles from './$Accordion.module.scss'
 
 const Main = ({ customKey, children, className, ...props }: MainProps) => {
 	const { current } = useContext(AccordionContextItems)
 
 	const isOpen = () => {
 		if (current === customKey) {
-			return 'active'
+			return styles.active
 		} else {
 			return ''
 		}
@@ -17,7 +17,7 @@ const Main = ({ customKey, children, className, ...props }: MainProps) => {
 
 	return (
 		<div
-			className={`${className} accordion ${isOpen()}`}
+			className={`${className} ${styles['accordion']} ${isOpen()}`}
 			data-jsx="target"
 			{...props}
 		>
@@ -38,14 +38,14 @@ const Header = ({ customKey, children, className, ...props }: HeaderProps) => {
 			{...props}
 		>
 			{children}
-			<i className="accordion-icon" role={'presentation'}></i>
+			<i className={styles['accordion-icon']} role={'presentation'}></i>
 		</header>
 	)
 }
 
 const Content = ({ children, className, ...props }: ContentProps) => {
 	return (
-		<div className={`accordion-content ${className}`} {...props}>
+		<div className={`${styles['accordion-content']} ${className}`} {...props}>
 			{children}
 		</div>
 	)

src/components/Molecules/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion } from './$Accordion'

src/components/Molecules/Breadcrumb/$Breadcrumb.tsx

@@ -1,10 +1,12 @@
-import arrowRightIcon from '../../../assets/icons/arrow-right.svg'
-import initialHomeIcon from '../../../assets/icons/home.svg'
-
-import css from './index.module.scss'
-
 import { HTMLAttributes } from 'react'
 
+import { ItemList } from '../ItemList'
+
+import arrowRightIcon from './assets/arrow-right.svg'
+import initialHomeIcon from './assets/home.svg'
+
+import styles from './$Breadcrumb.module.scss'
+
 interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
 	list: Array<{ name: string; href: string }>
 }
@@ -12,17 +14,15 @@ interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
 export function Breadcrumb({ list, ...props }: BreadcrumbProps) {
 	return (
 		<div {...props}>
-			<ul className={css.list}>
-				<li className={css.initial}>
-					<a href="/">
-						<img src={initialHomeIcon} alt="" />
-					</a>
-				</li>
+			<ul className={styles.list}>
+				<ItemList className={styles.initial} href="/">
+					<img src={initialHomeIcon} alt="" />
+				</ItemList>
 
 				{list.map(({ name, href }) => {
 					return (
-						<li key={name + '-breadcrumb-item'} className={css.item}>
-							<div className={css.divider}>
+						<li key={name + '-breadcrumb-item'} className={styles.item}>
+							<div className={styles.divider}>
 								<img src={arrowRightIcon} alt="ícone de divisão" />
 							</div>
 							<a href={href}>{name}</a>

src/components/Molecules/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export { Breadcrumb } from './$Breadcrumb'

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

@@ -0,0 +1,30 @@
+.about {
+	margin-bottom: 81px;
+	&__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/$About.tsx

@@ -1,12 +1,12 @@
-import css from './index.module.scss'
+import styles from './$About.module.scss'
 
 export function About() {
 	return (
-		<section className={css.about}>
-			<div className={css.container}>
+		<section className={styles['about']}>
+			<div className={styles['about__container']}>
 				<h2 className="title">Sobre</h2>
 
-				<div className={css.descriptions}>
+				<div className={styles['about__descriptions']}>
 					<p>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

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

@@ -1,31 +0,0 @@
-.about {
-	margin-bottom: 81px;
-}
-
-.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.ts

@@ -0,0 +1 @@
+export { About } from './$About'

src/pages/Institutional/Contact/$Contact.tsx

@@ -1,13 +1,12 @@
 import { Field, Form, Formik } from 'formik'
 import { useEffect, useMemo, useState } from 'react'
-/* import { Input } from './fragments/Input' */
 
 import validadeShema from './schema/FormSchema'
 
-import styles from './index.module.scss'
-
 import { FormGroup } from './containers/_FormGroup'
 
+import styles from './$Contact.module.scss'
+
 export function Contact() {
 	const [isSubmiting, setIsSubmiting] = useState(false)
 
@@ -37,8 +36,8 @@ export function Contact() {
 				<h2 className="title">Preencha o formulário</h2>
 
 				<Formik
-					onSubmit={(values, e) => {
-						e.resetForm({
+					onSubmit={(values, { resetForm }) => {
+						resetForm({
 							isSubmitting: true,
 						})
 

src/pages/Institutional/Contact/index.ts

@@ -0,0 +1 @@
+export { Contact } from './$Contact'

src/pages/Institutional/Exchange/$Exchange.module.scss

@@ -0,0 +1,30 @@
+.exchange {
+	margin-bottom: 81px;
+	&__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/Exchange/$Exchange.tsx

@@ -0,0 +1,41 @@
+import styles from './$Exchange.module.scss'
+
+export function Exchange() {
+	return (
+		<section className={styles['exchange']}>
+			<div className={styles['exchange__container']}>
+				<h2 className="title">Troca e Devolução</h2>
+
+				<div className={styles['exchange__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/pages/Institutional/Exchange/index.ts

@@ -0,0 +1 @@
+export { Exchange } from './$Exchange'

src/pages/Institutional/Payments/$Payments.module.scss

@@ -0,0 +1,30 @@
+.payements {
+	margin-bottom: 81px;
+	&__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/Payments/$Payments.tsx

@@ -0,0 +1,41 @@
+import styles from './$Payments.module.scss'
+
+export function Payments() {
+	return (
+		<section className={styles['payements']}>
+			<div className={styles['payements__container']}>
+				<h2 className="title">Formas de Pagamento</h2>
+
+				<div className={styles['payements__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/pages/Institutional/Payments/index.ts

@@ -0,0 +1 @@
+export { Payments } from './$Payments'

src/pages/Institutional/Privacity/$Privacity.module.scss

@@ -0,0 +1,30 @@
+.privacity {
+	margin-bottom: 81px;
+	&__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/Privacity/$Privacity.tsx

@@ -0,0 +1,41 @@
+import styles from './$Privacity.module.scss'
+
+export function Privacity() {
+	return (
+		<section className={styles['privacity']}>
+			<div className={styles['privacity__container']}>
+				<h2 className="title">Segurança e Privacidade</h2>
+
+				<div className={styles['privacity__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/pages/Institutional/Privacity/index.ts

@@ -0,0 +1 @@
+export { Privacity } from './$Privacity'

src/pages/Institutional/Shipping/$Shipping.module.scss

@@ -0,0 +1,30 @@
+.shipping {
+	margin-bottom: 81px;
+	&__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/Shipping/$Shipping.tsx

@@ -0,0 +1,41 @@
+import styles from './$Shipping.module.scss'
+
+export function Shipping() {
+	return (
+		<section className={styles['shipping']}>
+			<div className={styles['shipping__container']}>
+				<h2 className="title">Entrega</h2>
+
+				<div className={styles['shipping__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/pages/Institutional/Shipping/index.ts

@@ -0,0 +1 @@
+export { Shipping } from './$Shipping'

src/pages/Institutional/index.tsx

@@ -0,0 +1,19 @@
+import { About } from './About'
+import { Contact } from './Contact'
+import { Exchange } from './Exchange'
+import { Payments } from './Payments'
+import { Privacity } from './Privacity'
+import { Shipping } from './Shipping'
+
+function Institutional() {
+	return {
+		About,
+		Contact,
+		Exchange,
+		Privacity,
+		Payments,
+		Shipping,
+	}
+}
+
+export default Institutional()

src/routes/$Routes.module.scss

@@ -32,7 +32,7 @@ main :global {
 	}
 
 	@media screen and (min-width: 2500px) {
-		width: function.fluid(2299.68px, 2500px);
+		width: function.fluid(2300px, 2500px);
 	}
 }
 
@@ -95,3 +95,68 @@ main :global {
 		}
 	}
 }
+
+.window-content :global {
+	width: 100%;
+	padding: 0 16px;
+
+	.title {
+		margin-bottom: 12px;
+
+		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;
+		margin: 0 auto;
+	}
+	@media screen and (min-width: 2500px) {
+		width: function.fluid(2300px, 2500px);
+	}
+}
+
+.main-title {
+	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) {
+		margin-bottom: 82px;
+	}
+}
+
+.window-initial {
+	min-height: 60vh;
+
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 30px;
+
+	@media screen and (min-width: 1025px) {
+		grid-template-columns:
+			function.fluid(302px, 1080px)
+			function.fluid(748px, 1080px);
+	}
+
+	@media screen and (min-width: 2500px) {
+		grid-template-columns:
+			function.fluid(590px, 2300px)
+			function.fluid(1680px, 2300px);
+	}
+}

src/routes/$Routes.tsx

@@ -0,0 +1,47 @@
+import { Outlet, Route, Routes } from 'react-router-dom'
+
+import { Header } from '../template/Header/$Header'
+
+import { Sidebar } from '../template/Sidebar/$Sidebar'
+import { Footer } from '../template/Footer/$Footer'
+import { Breadcrumb } from './containers/_BreadCrumb'
+import { ScrollFixed } from './containers/_ScrollFixed'
+
+import Institutional from '../pages/Institutional'
+
+import styles from './$Routes.module.scss'
+
+export function Router() {
+	return (
+		<Routes>
+			<Route
+				path="/"
+				element={
+					<>
+						<Header />
+						<Breadcrumb />
+
+						<main className={styles['window-content']}>
+							<h1 className={styles['main-title']}>Institutional</h1>
+							<div className={styles['window-initial']}>
+								<Sidebar />
+								<div className={styles['main-container']}>
+									<Outlet />
+								</div>
+							</div>
+						</main>
+						<Footer />
+						<ScrollFixed />
+					</>
+				}
+			>
+				<Route index element={<Institutional.About />} />
+				<Route path="/contact" element={<Institutional.Contact />} />
+				<Route path="/payments" element={<Institutional.Payments />} />
+				<Route path="/exchange" element={<Institutional.Exchange />} />
+				<Route path="/privacity" element={<Institutional.Privacity />} />
+				<Route path="/shipping" element={<Institutional.Shipping />} />
+			</Route>
+		</Routes>
+	)
+}

src/routes/containers/_BreadCrumb.tsx

@@ -1,13 +1,14 @@
 import { useMemo } from 'react'
-import { Breadcrumb } from '../../components/Molecules/Breadcrumb'
-import styles from '../index.module.scss'
+import { Breadcrumb as BreadcrumbMolecules } from '../../components/Molecules/Breadcrumb'
 
-export function RouterBreadcrumb() {
+import styles from '../$Routes.module.scss'
+
+export function Breadcrumb() {
 	let list = useMemo(() => [{ name: 'Introduction', href: '/' }], [])
 
 	return (
 		<nav className={styles['breadcrumb-container']}>
-			<Breadcrumb className={styles['breadcrumb']} list={list} />
+			<BreadcrumbMolecules className={styles['breadcrumb']} list={list} />
 		</nav>
 	)
 }

src/routes/containers/_ScrollFixed.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
 import { ItemList } from '../../components/Molecules/ItemList'
 
-import whatsappImg from '../../assets/brands/svgs/whatsapp.svg'
-import scrollTopImg from '../../assets/icons/scroll-top.svg'
+import whatsappImg from '../assets/icons/whatsapp.svg'
+import scrollTopImg from '../assets/icons/scroll-top.svg'
 
-import styles from '../index.module.scss'
+import styles from '../$Routes.module.scss'
 
 export function ScrollFixed() {
 	const [isScrollTop, setIsScrollTop] = useState<boolean>(false)
@@ -20,7 +20,7 @@ export function ScrollFixed() {
 	}, [])
 
 	return (
-		<ul>
+		<div>
 			<ul className={styles['scroll__fixed']}>
 				<ItemList
 					className={styles['scroll__fixed-whatsapp']}
@@ -34,6 +34,6 @@ export function ScrollFixed() {
 					</ItemList>
 				)}
 			</ul>
-		</ul>
+		</div>
 	)
 }

src/routes/index.ts

@@ -0,0 +1 @@
+export { Router } from './$Routes'

src/routes/index.tsx

@@ -1,67 +0,0 @@
-import { Outlet, Route, Routes } from 'react-router-dom'
-
-import { Header } from '../template/Header'
-
-import { Sidebar } from '../template/Sidebar'
-import { About } from '../pages/Institutional/About'
-import { Contact } from '../pages/Institutional/Contact'
-import { Footer } from '../template/Footer'
-import { RouterBreadcrumb } from './containers/_BreadCrumb'
-import { ScrollFixed } from './containers/_ScrollFixed'
-
-export function Router() {
-	return (
-		<Routes>
-			<Route
-				path="/"
-				element={
-					<>
-						<Header />
-						<div className="window-routes">
-							<RouterBreadcrumb />
-							<Outlet />
-						</div>
-						<Footer />
-						<ScrollFixed />
-					</>
-				}
-			>
-				<Route
-					path="/"
-					element={
-						<>
-							<main className="window-content">
-								<h1 className="main-title">Institutional</h1>
-								<div className="window-initial">
-									<Sidebar />
-									<div className="main-container">
-										<Outlet />
-									</div>
-								</div>
-							</main>
-						</>
-					}
-				>
-					<Route index element={<About />} />
-					<Route path="/contact" element={<Contact />} />
-					<Route
-						path="/payments"
-						element={<h2 className="title">Formas de pagamentos</h2>}
-					/>
-					<Route
-						path="/exchange"
-						element={<h2 className="title">Troca e Devolução</h2>}
-					/>
-					<Route
-						path="/privacity"
-						element={<h2 className="title">Privacidade</h2>}
-					/>
-					<Route
-						path="/shipping"
-						element={<h2 className="title">Entrega</h2>}
-					/>
-				</Route>
-			</Route>
-		</Routes>
-	)
-}

src/styles/global/_config.scss

@@ -44,6 +44,10 @@ body {
 		--txt-xl: 48px;
 	}
 }
+html,
+body {
+	min-height: 100%;
+}
 
 a,
 input,
@@ -51,68 +55,3 @@ button,
 textarea {
 	font-family: var(--font-family-100);
 }
-
-.window-content {
-	width: 100%;
-	padding: 0 16px;
-
-	.main-title {
-		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) {
-			margin-bottom: 82px;
-		}
-	}
-
-	.title {
-		margin-bottom: 12px;
-
-		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;
-		margin: 0 auto;
-	}
-	@media screen and (min-width: 2500px) {
-		width: function.fluid(2299.68px, 2500px);
-	}
-}
-
-.window-initial {
-	min-height: 60vh;
-
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: 30px;
-
-	@media screen and (min-width: 1025px) {
-		grid-template-columns:
-			function.fluid(302px, 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/Footer/$Footer.module.scss

@@ -10,6 +10,14 @@
 			padding: 0;
 		}
 	}
+
+	@media screen and (min-width: 1025px) {
+		@media screen and (min-height: 1281px) {
+			position: fixed;
+			width: 100%;
+			bottom: 0;
+		}
+	}
 }
 
 .footer__content {
@@ -214,7 +222,7 @@
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(2299.68px, 2500px);
+		width: function.fluid(2300px, 2500px);
 	}
 }
 
@@ -241,7 +249,7 @@
 		}
 
 		@media only screen and (min-width: 2500px) {
-			width: function.fluid(467px, 2299.68px);
+			width: function.fluid(467px, 2300px);
 		}
 	}
 
@@ -307,12 +315,12 @@
 		}
 
 		@media only screen and (min-width: 2500px) {
-			width: function.fluid(2299.68px, 2500px);
+			width: function.fluid(2300px, 2500px);
 		}
 	}
 }
 
-.lists {
+.footer__lists.lists {
 	width: 100%;
 
 	display: flex;
@@ -371,7 +379,7 @@
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(1531px, 2299.68px);
+		width: function.fluid(1531px, 2300px);
 
 		& > li {
 			width: function.fluid(315px, 1531px);
@@ -471,7 +479,7 @@
 	}
 
 	@media screen and (min-width: 2500px) {
-		width: function.fluid(692px, 2299.68px);
+		width: function.fluid(692px, 2300px);
 
 		&__item {
 			width: function.fluid(70px, 692px);
@@ -486,18 +494,23 @@
 }
 
 .footer__network {
+	width: 100%;
 	& > a {
-		display: none;
+		display: block;
 
-		@media only screen and (min-width: 1025px) {
-			display: block;
-			font-size: var(--txt-normal);
+		margin-top: 12px;
 
-			color: var(--clr-gray-800);
+		font-size: var(--txt-normal);
+		line-height: 16.41px;
 
-			&:hover {
-				color: var(--clr-primary-blue-500);
-			}
+		color: var(--clr-gray-800);
+
+		&:hover {
+			color: var(--clr-primary-blue-500);
+		}
+
+		@media only screen and (min-width: 2500px) {
+			line-height: 32.81px;
 		}
 	}
 
@@ -506,15 +519,24 @@
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(390px, 2299.68px);
+		width: function.fluid(390px, 2300px);
 	}
 }
 
 .socials {
+	width: 100%;
 	display: inline-flex;
 	align-items: center;
 	gap: 10px;
 
+	@media screen and (min-width: 1025px) {
+		li {
+			width: function.fluid(35px, 215px);
+			min-height: 35px;
+			flex-grow: 1.2;
+		}
+	}
+
 	a {
 		display: flex;
 		align-items: center;
@@ -523,10 +545,31 @@
 		img {
 			width: 100%;
 			height: 100%;
+		}
+	}
+}
 
-			@media only screen and (min-width: 2500px) {
-				width: 75px;
-				height: 75px;
+.footer__credits {
+	li:nth-child(1) {
+		img {
+			width: 44.92px;
+			min-height: 16px;
+
+			@media screen and (min-width: 2500px) {
+				width: 84.22px;
+				height: 30px;
+			}
+		}
+	}
+
+	li:nth-child(2) {
+		img {
+			width: 28.66px;
+			height: 15.65px;
+
+			@media screen and (min-width: 2500px) {
+				width: 54.95px;
+				height: 30px;
 			}
 		}
 	}

src/template/Footer/$Footer.tsx

@@ -1,13 +1,11 @@
 import { useState } from 'react'
 
-import vtexIcon from '../../assets/brands/svgs/Vtex.svg'
-import m3Icon from '../../assets/brands/svgs/M3.svg'
+import vtexIcon from './assets/imgs/svgs/Vtex.svg'
+import m3Icon from './assets/imgs/svgs/M3.svg'
 
-import { List } from './containers/_List'
-import { PaymentsList } from './containers/_Payment'
+import Containers from './containers'
 
-import css from './index.module.scss'
-import { Newsletter } from './containers/_Newsletter'
+import styles from './$Footer.module.scss'
 
 export function Footer() {
 	const [accordionCurrentIsOpen, setAccordionCurrentIsOpen] = useState<
@@ -25,21 +23,21 @@ export function Footer() {
 	}
 
 	return (
-		<footer className={css['footer']}>
-			<Newsletter />
-			<div className={css['footer__content']}>
-				<div className={css['footer__container--top']}>
-					<List
+		<footer className={styles['footer']}>
+			<Containers.Newsletter />
+			<div className={styles['footer__content']}>
+				<div className={styles['footer__container--top']}>
+					<Containers.List
 						accordionCurrentIsOpen={accordionCurrentIsOpen}
 						handleSetCurrentAccordion={handleSetCurrentAccordion}
 					/>
 				</div>
 
-				<div className={css['footer__container--bottom']}>
-					<div className={css['footer__actions--bottom']}>
-						<p className={css['footer__phrase']}></p>
-						<PaymentsList />
-						<ul className={css['footer__credits']}>
+				<div className={styles['footer__container--bottom']}>
+					<div className={styles['footer__actions--bottom']}>
+						<p className={styles['footer__phrase']}></p>
+						<Containers.PaymentsList />
+						<ul className={styles['footer__credits']}>
 							<li>
 								<p>Powered by</p>
 								<img src={vtexIcon} alt="" />

src/template/Footer/containers/_List.tsx

@@ -2,14 +2,15 @@ import { ListProps } from '../@types'
 
 import { AccordionProviderItems } from '../../../components/Molecules/Accordion/context/Items'
 
+import { Item } from '../../../components/Atoms/Item'
+import { CustomLink } from '../../../components/Atoms/CustomLink'
+
 import { ContactList } from './__Contact'
 import { InstitutionalList } from './__Institutional'
 import { QuestionsList } from './__Question'
 import { Socials } from './__Socials'
 
-import css from '../index.module.scss'
-import { Item } from '../../../components/Atoms/Item'
-import { CustomLink } from '../../../components/Atoms/CustomLink'
+import styles from '../$Footer.module.scss'
 
 export function List({
 	accordionCurrentIsOpen,
@@ -23,7 +24,7 @@ export function List({
 					handleSetCurrent: handleSetCurrentAccordion,
 				}}
 			>
-				<ul className={`${css['footer__lists']} ${css['lists']}`}>
+				<ul className={`${styles['footer__lists']} ${styles['lists']}`}>
 					<Item>
 						<InstitutionalList customKey={'institutional'} />
 					</Item>
@@ -35,7 +36,7 @@ export function List({
 						<ContactList customKey={'contact'} />
 					</Item>
 				</ul>
-				<div className={css['footer__network']}>
+				<div className={styles['footer__network']}>
 					<Socials />
 					<CustomLink href="/">www.loremipsum.com</CustomLink>
 				</div>

src/template/Footer/containers/_Newsletter.tsx

@@ -2,7 +2,7 @@ import { Field, Form, Formik } from 'formik'
 import { useEffect, useState } from 'react'
 import * as Yup from 'yup'
 
-import styles from '../index.module.scss'
+import styles from '../$Footer.module.scss'
 
 const schema = Yup.object({
 	email: Yup.string().required('Campo Obrigratorio').email('Email ínvalido'),

src/template/Footer/containers/_Payment.tsx

@@ -1,32 +1,59 @@
-import BoletoImg from '../../../assets/brands/Boleto.png'
-import DinersBrandImg from '../../../assets/brands/Diners.png'
-import EloBrandImg from '../../../assets/brands/Elo.png'
-import HiperBrandImg from '../../../assets/brands/Hiper.png'
-import PaypalBrandImg from '../../../assets/brands/Paypal.png'
-import MasterCardBrandImg from '../../../assets/brands/Master.png'
-import VisaBrandImg from '../../../assets/brands/Visa.png'
-import VtexPCIImg from '../../../assets/brands/vtex-pci-200.png'
-
-import styles from '../index.module.scss'
 import { Item } from '../../../components/Atoms/Item'
 
+import BoletoImg from '../assets/imgs/Boleto.png'
+import DinersBrandImg from '../assets/imgs/Diners.png'
+import EloBrandImg from '../assets/imgs/Elo.png'
+import HiperBrandImg from '../assets/imgs/Hiper.png'
+import PaypalBrandImg from '../assets/imgs/Paypal.png'
+import MasterCardBrandImg from '../assets/imgs/Master.png'
+import VisaBrandImg from '../assets/imgs/Visa.png'
+import VtexPCIImg from '../assets/imgs/vtex-pci-200.png'
+
+import styles from '../$Footer.module.scss'
+
 const assetsImg = [
-	MasterCardBrandImg,
-	VisaBrandImg,
-	DinersBrandImg,
-	EloBrandImg,
-	HiperBrandImg,
-	PaypalBrandImg,
-	BoletoImg,
+	{
+		src: MasterCardBrandImg,
+		alt: 'Pagamento com o mastercard',
+	},
+	{
+		src: VisaBrandImg,
+		alt: 'Pagamento com Visa',
+	},
+	{
+		src: DinersBrandImg,
+		alt: 'Pagamento com Diners',
+	},
+	{
+		src: EloBrandImg,
+		alt: 'Pagamento com a Elo',
+	},
+
+	{
+		src: HiperBrandImg,
+		alt: 'Pagamento com o Hiper',
+	},
+
+	{
+		src: PaypalBrandImg,
+		alt: 'Pagamento com o PayPal',
+	},
+	{
+		src: BoletoImg,
+		alt: 'Pagamento em Boleto',
+	},
 ]
 
 export function PaymentsList() {
 	return (
 		<ul className={`${styles['footer__payments']} ${styles['payments']}`}>
-			{assetsImg.map((image, index) => {
+			{assetsImg.map(({ src, alt }, index) => {
 				return (
-					<Item className={`${styles['payments__item']}`} key={index}>
-						<img className="payments__image" src={image} alt="" />
+					<Item
+						className={`${styles['payments__item']}`}
+						key={alt.replace(' ', '-').toLowerCase()}
+					>
+						<img className="payments__image" src={src} alt={alt} />
 					</Item>
 				)
 			})}

src/template/Footer/containers/__Contact.tsx

@@ -1,9 +1,9 @@
 import { ContactListProps } from '../@types'
 
 import { Item } from '../../../components/Atoms/Item'
-import { Accordion } from '../../../components/Molecules/Accordion'
+import { Accordion } from '../../../components/Molecules/Accordion/$Accordion'
 
-import styles from '../index.module.scss'
+import styles from '../$Footer.module.scss'
 
 export function ContactList({ customKey }: ContactListProps) {
 	return (

src/template/Footer/containers/__Institutional.tsx

@@ -1,21 +1,22 @@
 import { InstitutionalListProps } from '../@types'
 
-import { Accordion } from '../../../components/Molecules/Accordion'
+import { Accordion } from '../../../components/Molecules/Accordion/$Accordion'
 
-import css from '../index.module.scss'
 import { ItemList } from '../../../components/Molecules/ItemList'
 
+import styles from '../$Footer.module.scss'
+
 export function InstitutionalList({ customKey }: InstitutionalListProps) {
 	return (
-		<Accordion className={css.accordion} customKey={customKey}>
+		<Accordion className={styles.accordion} customKey={customKey}>
 			<Accordion.Header
 				customKey={customKey}
-				className={`${css['lists__header']}`}
+				className={`${styles['lists__header']}`}
 			>
 				<h4>Institucional</h4>
 			</Accordion.Header>
-			<Accordion.Content className={`${css['lists__content']}`}>
-				<ul className={css['lists__content-list']}>
+			<Accordion.Content className={`${styles['lists__content']}`}>
+				<ul className={styles['lists__content-list']}>
 					<ItemList $container={{ className: '' }} href="/">
 						Quem somos nós
 					</ItemList>

src/template/Footer/containers/__Question.tsx

@@ -1,21 +1,21 @@
 import { QuestionsListProps } from '../@types'
 
-import { Accordion } from '../../../components/Molecules/Accordion'
+import { Accordion } from '../../../components/Molecules/Accordion/$Accordion'
 import { ItemList } from '../../../components/Molecules/ItemList'
 
-import css from '../index.module.scss'
+import styles from '../$Footer.module.scss'
 
 export function QuestionsList({ customKey }: QuestionsListProps) {
 	return (
-		<Accordion className={css.accordion} customKey={customKey}>
+		<Accordion className={styles.accordion} customKey={customKey}>
 			<Accordion.Header
 				customKey={customKey}
-				className={`${css['lists__header']}`}
+				className={`${styles['lists__header']}`}
 			>
 				<h4>Dúvidas</h4>
 			</Accordion.Header>
-			<Accordion.Content className={`${css['lists__content']}`}>
-				<ul className={`${css['lists__content-list']}`}>
+			<Accordion.Content className={`${styles['lists__content']}`}>
+				<ul className={`${styles['lists__content-list']}`}>
 					<ItemList $container={{ className: '' }} href="/">
 						Entrega
 					</ItemList>

src/template/Footer/containers/__Socials.tsx

@@ -1,30 +1,30 @@
 import { ItemList } from '../../../components/Molecules/ItemList'
 
-import facebookIcon from '../../../assets/icons/facebook.svg'
-import instagramIcon from '../../../assets/icons/instagram.svg'
-import linkedinIcon from '../../../assets/icons/linkedin.svg'
-import twitterIcon from '../../../assets/icons/twitter.svg'
-import youtubeIcon from '../../../assets/icons/youtube.svg'
+import facebookIcon from '../assets/icons/facebook.svg'
+import instagramIcon from '../assets/icons/instagram.svg'
+import linkedinIcon from '../assets/icons/linkedin.svg'
+import twitterIcon from '../assets/icons/twitter.svg'
+import youtubeIcon from '../assets/icons/youtube.svg'
 
-import css from '../index.module.scss'
+import styles from '../$Footer.module.scss'
 
 export function Socials() {
 	return (
-		<ul className={css.socials}>
+		<ul className={styles.socials}>
 			<ItemList href="https://facebook.com">
-				<img src={facebookIcon} alt="" />
+				<img src={facebookIcon} alt="Facebook logo" />
 			</ItemList>
 			<ItemList href="https://instagram.com">
-				<img src={instagramIcon} alt="" />
+				<img src={instagramIcon} alt="Instagram logo" />
 			</ItemList>
 			<ItemList href="https://twitter.com">
-				<img src={twitterIcon} alt="" />
+				<img src={twitterIcon} alt="Twitter logo" />
 			</ItemList>
 			<ItemList href="https://youtube.com">
-				<img src={youtubeIcon} alt="" />
+				<img src={youtubeIcon} alt="Youtube logo" />
 			</ItemList>
 			<ItemList href="https://linkedin.com">
-				<img src={linkedinIcon} alt="" />
+				<img src={linkedinIcon} alt="Linkedin logo" />
 			</ItemList>
 		</ul>
 	)

src/template/Footer/containers/index.tsx

@@ -0,0 +1,13 @@
+import { List } from './_List'
+import { Newsletter } from './_Newsletter'
+import { PaymentsList } from './_Payment'
+
+function Containers() {
+	return {
+		Newsletter,
+		PaymentsList,
+		List,
+	}
+}
+
+export default Containers()

src/template/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from './$Footer'

src/template/Header/$Header.module.scss

@@ -4,7 +4,7 @@ $containers: (
 	'xs': 339px,
 	'sm': 988px,
 	'md': 1080px,
-	'xl': 2299.68px,
+	'xl': 2300px,
 );
 
 .l-header {

src/template/Header/$Header.tsx

@@ -1,15 +1,13 @@
 import { useMemo, useState } from 'react'
 
-import { Top } from './containers/_Top'
-import { Bottom } from './containers/_Bottom'
-import { Search } from './containers/_Search'
+import styles from './$Header.module.scss'
 
-import styles from './index.module.scss'
+import Container from './containers'
 
 export const Header = () => {
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
 
-	const topProps = {
+	const containerTopProps = {
 		handleClickOpen: useMemo(
 			() =>
 				function () {
@@ -19,7 +17,7 @@ export const Header = () => {
 		),
 	}
 
-	const bottomProps = {
+	const containerBottomProps = {
 		isMenuOpen,
 		handleClickClose: useMemo(
 			() =>
@@ -33,15 +31,15 @@ export const Header = () => {
 	return (
 		<header className={styles['l-header']}>
 			<nav>
-				<Top {...topProps} />
+				<Container.Top {...containerTopProps} />
 
 				<div className={`${styles['search__bottom']}`}>
-					<Search
+					<Container.Search
 						className={`${styles['search']} ${styles['search__bottom--content']}`}
 					/>
 				</div>
 
-				<Bottom {...bottomProps} />
+				<Container.Bottom {...containerBottomProps} />
 			</nav>
 		</header>
 	)

src/template/Header/containers/_Bottom.tsx

@@ -3,9 +3,9 @@ import { IBottomProps } from './@types'
 import { ItemList } from '../../../components/Molecules/ItemList'
 import { Actions } from './__Actions'
 
-import closeIcon from '../../../assets/icons/x.svg'
+import closeIcon from '../assets/icons/x.svg'
 
-import styles from '../index.module.scss'
+import styles from '../$Header.module.scss'
 
 export function Bottom({ isMenuOpen, handleClickClose }: IBottomProps) {
 	function closeMenu(e: any) {

src/template/Header/containers/_Search.tsx

@@ -4,7 +4,7 @@ import { ISearchProps } from './@types'
 
 import { ButtonIcon } from '../../../components/Molecules/ButtonIcon'
 
-import searchIcon from '../../../assets/icons/search.svg'
+import searchIcon from '../assets/icons/search.svg'
 
 export function Search({ ...props }: ISearchProps) {
 	const [searchData, setSearchData] = useState('')

src/template/Header/containers/_Top.tsx

@@ -4,12 +4,12 @@ import { ButtonIcon } from '../../../components/Molecules/ButtonIcon'
 import { Actions } from './__Actions'
 import { Search } from './_Search'
 
-import cartIcon from '../../../assets/icons/minicart.svg'
-import openIcon from '../../../assets/icons/hamburger.svg'
-import logoImg from '../../../assets/m3-logo-small.png'
-import logoMediumImg from '../../../assets/m3-logo-medium.png'
+import cartIcon from '../assets/icons/minicart.svg'
+import openIcon from '../assets/icons/hamburger.svg'
+import logoImg from '../assets/m3-logo-small.png'
+import logoMediumImg from '../assets/m3-logo-medium.png'
 
-import styles from '../index.module.scss'
+import styles from '../$Header.module.scss'
 
 export function Top({ handleClickOpen }: ITopProps) {
 	return (

src/template/Header/containers/index.tsx

@@ -0,0 +1,15 @@
+import { Actions } from './__Actions'
+import { Bottom } from './_Bottom'
+import { Search } from './_Search'
+import { Top } from './_Top'
+
+function Containers() {
+	return {
+		Actions,
+		Bottom,
+		Search,
+		Top,
+	}
+}
+
+export default Containers()

src/template/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './$Header'

src/template/Sidebar/$Sidebar.tsx

@@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom'
 
 import { ItemList } from '../../components/Molecules/ItemList'
 
-import styles from './index.module.scss'
+import styles from './$Sidebar.module.scss'
 
 export function Sidebar() {
 	const { pathname } = useLocation()

src/template/Sidebar/index.ts

@@ -0,0 +1 @@
+export { Sidebar } from './$Sidebar'