fix(workspace): imports

Reviewed-on: #18

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/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/README.md

@@ -0,0 +1,147 @@
+# Componente Accordion
+
+Esse componente foi criado sem nenhuma biblioteca externa, aqui deixo as maneiras de utilizar esse componente
+
+## Primeiros Passos
+
+Caso queira usar o componente, é recomendado, que estude sobre, `useContext`, `createContext`, e `useState`;
+Caso queira usar e não tem os conhecimentos, veja os exemplo a seguir.
+
+```jsx
+import { createContext, useState } from 'react'
+
+interface fooProps {
+  current: string | number // O current(Atual) pode ser uma string ou number
+  handleSetCurrent: (customkey) => void // O handleSetCurrent é uma função que vc pode criar para fazer as alterações que desejar no funcionamento
+  // O paremetro passado chamado de customKey servi para identificar e 'setar' o Accordion Atual
+}
+
+const foo = createContext({
+	current: '', // Aqui demostra o componente que está aberto atualmente
+} as fooProps) // Aqui estamos o nosso contexto do nosso Accordion
+
+// Provedor do Contexto
+interface AccordionProviderItemsProps {
+	children: ReactNode | ReactNode[]
+	value: fooProps
+}
+
+export const AccordionProviderItems = ({
+	children,
+	value,
+}: AccordionProviderItemsProps) => {
+	return (
+		<>
+			<AccordionContextItems.Provider value={value}>
+				{children}
+			</AccordionContextItems.Provider>
+		</>
+	)
+}
+
+
+// Estado que deve ser criado
+const [accordionCurrentIsOpen, setAccordionCurrentIsOpen] = useState<string | number | ''>('')
+
+// Demostração da função handleSetCurrent
+function handleSetCurrent(customkey: string | number | '') {
+  if (customkey === accordionCurrentIsOpen) {/*A verificação do customKey com o state*/
+    // Essa veficação fica engarregada de verificar se o usario clicou no mesmo Accordion
+
+    // SE Clicou no mesmo Accordion 'setar' a customKey para 'vazio'
+    // SENÃO 'setar' customKey
+
+    // A customKey é um identificador para cada Accordion da página caso queira, já que vc pode criar em qualquer lugar dá página
+
+    // Ok, se isso é um identificador se eu colocar outro igual ?
+    // Simplemente ele íra abrir e fechar os identificadores iguais e fechar o mesmo quando clicado por um deles
+
+    setAccordionCurrentIsOpen('')
+  } else {
+    setAccordionCurrentIsOpen(customkey)
+  }
+}
+
+
+
+// Como usar ?
+import { Accordion } from "foo"
+
+function Exemple() {
+  const [accordionCurrentIsOpen, setAccordionCurrentIsOpen] = useState<string | number | ''>('')
+
+
+  function handleSetCurrent(customkey: string | number | '') {
+    if (customkey === accordionCurrentIsOpen) {
+      setAccordionCurrentIsOpen('')
+    } else {
+      setAccordionCurrentIsOpen(customkey)
+    }
+  }
+
+  return (
+    <div>
+      <AccordionProviderItems
+        value={{
+					current: accordionCurrentIsOpen,
+					handleSetCurrent: handleSetCurrentAccordion,
+				}}
+        >
+        <div>
+          <Accordion customKey={"Identificador"}>
+            <Accordion.Header customKey={"Identificador"}>
+              {/*Elemento escolhido para abrir*/}
+            </Accordion.Header>
+            <Accordion.Content>
+              {/*Qualquer Elemento que vai renderizar*/}
+            </Accordion.Content>
+          </Accordion>
+        </div>
+        <div>
+          <Accordion customKey={"Identificador"}>
+            <Accordion.Header customKey={"Identificador"}>
+              {/*Elemento escolhido para abrir*/}
+            </Accordion.Header>
+            <Accordion.Content>
+              {/*Qualquer Elemento que vai renderizar*/}
+            </Accordion.Content>
+          </Accordion>
+        </div>
+        <div>
+          <Accordion customKey={"Identificador"}>
+            <Accordion.Header customKey={"Identificador"}>
+              {/*Elemento escolhido para abrir*/}
+            </Accordion.Header>
+            <Accordion.Content>
+              {/*Qualquer Elemento que vai renderizar*/}
+            </Accordion.Content>
+          </Accordion>
+        </div>
+      </AccordionProviderItems>
+    </div>
+  )
+}
+```
+
+```css
+/*Como Estilizar*/
+.accordion {
+	/*...*/
+}
+
+.accordion.active {
+	/*...*/
+}
+
+.accordion-content {
+	/*...*/
+}
+
+.accordion-icon {
+	/*...*/
+}
+
+/*Alguns Components estão disponiveis para colocar classes HTML criadas por você*/
+```
+
+Aviso Componente Criado em um desafio, pode ocorrer problemas com algumas coisas, então devido a colocação em que estão, esse componente não será atualizado

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/components/Organisms/Footer/$Footer.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/utils/helpers/functions' as function;
+@use '../../../styles/utils/helpers/functions' as function;
 
 .footer {
 	&__container--top,
@@ -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 {
@@ -114,6 +122,23 @@
 			height: 59px;
 		}
 	}
+
+	.form__success {
+		display: none;
+		transition: 200ms;
+		color: var(--clr-common-green);
+		font-size: var(--txt-xs);
+		line-height: 14.06px;
+		margin-top: 12px;
+
+		@media screen and (min-width: 2500px) {
+			line-height: 28.13px;
+		}
+	}
+
+	.form__success.form__success-active {
+		display: block;
+	}
 }
 
 .newsletter__form {
@@ -132,6 +157,13 @@
 		font-weight: 700;
 		letter-spacing: 0.05em;
 
+		transition: 200ms ease-in-out;
+
+		&:hover {
+			color: var(--clr-common-black);
+			background-color: var(--clr-primary-blue-500);
+		}
+
 		@media screen and (min-width: 1025px) {
 			width: function.fluid(126px, 474px);
 			font-size: var(--txt-xs);
@@ -190,7 +222,7 @@
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(2299.68px, 2500px);
+		width: function.fluid(2300px, 2500px);
 	}
 }
 
@@ -217,7 +249,7 @@
 		}
 
 		@media only screen and (min-width: 2500px) {
-			width: function.fluid(467px, 2299.68px);
+			width: function.fluid(467px, 2300px);
 		}
 	}
 
@@ -283,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;
@@ -347,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);
@@ -447,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);
@@ -462,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;
 		}
 	}
 
@@ -482,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;
@@ -499,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/components/Organisms/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/components/Organisms/Footer/@types/index.d.ts

@@ -1,4 +1,4 @@
-import { AccordionProps } from '../../../components/Molecules/Accordion/@types'
+import { AccordionProps } from '../../../Molecules/Accordion/@types'
 
 export interface InstitutionalListProps
 	extends Omit<AccordionProps, 'setCurrentAccordion'> {}

src/components/Organisms/Footer/containers/_List.tsx

@@ -1,15 +1,16 @@
 import { ListProps } from '../@types'
 
-import { AccordionProviderItems } from '../../../components/Molecules/Accordion/context/Items'
+import { AccordionProviderItems } from '../../../Molecules/Accordion/context/Items'
+
+import { Item } from '../../../Atoms/Item'
+import { CustomLink } from '../../../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/components/Organisms/Footer/containers/_Newsletter.tsx

@@ -1,13 +1,24 @@
 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'),
 })
 
 export function Newsletter() {
+	const [isSubmiting, setIsSubmiting] = useState(false)
+
+	useEffect(() => {
+		if (isSubmiting) {
+			setTimeout(() => {
+				setIsSubmiting(false)
+			}, 2000)
+		}
+	}, [isSubmiting])
+
 	return (
 		<section className={styles['newsletter']}>
 			<div className={styles['newsletter__container']}>
@@ -15,7 +26,13 @@ export function Newsletter() {
 					<h3>Assine nossa newsletter</h3>
 					<Formik
 						initialValues={{ email: '' }}
-						onSubmit={(e) => console.log(e)}
+						onSubmit={(values, e) => {
+							e.resetForm({
+								isSubmitting: true,
+							})
+
+							setIsSubmiting(true)
+						}}
 						validationSchema={schema}
 					>
 						<Form className={styles['newsletter__form']}>
@@ -26,6 +43,13 @@ export function Newsletter() {
 									</div>
 									<button type="submit">Enviar</button>
 								</div>
+								<p
+									className={`form__success ${
+										isSubmiting ? 'form__success-active' : ''
+									}`}
+								>
+									*Formulário enviado com sucesso!
+								</p>
 							</fieldset>
 						</Form>
 					</Formik>

src/components/Organisms/Footer/containers/_Payment.tsx

@@ -0,0 +1,66 @@
+import { Item } from '../../../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 = [
+	{
+		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(({ src, alt }, index) => {
+				return (
+					<Item
+						className={`${styles['payments__item']}`}
+						key={alt.replace(' ', '-').toLowerCase()}
+					>
+						<img className="payments__image" src={src} alt={alt} />
+					</Item>
+				)
+			})}
+			<div className={`${styles['payments__divider']}`} role={'presentation'} />
+			<Item className={`${styles['payments__item']}`}>
+				<img src={VtexPCIImg} alt="" />
+			</Item>
+		</ul>
+	)
+}

src/components/Organisms/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 { Item } from '../../../Atoms/Item'
+import { Accordion } from '../../../Molecules/Accordion/$Accordion'
 
-import styles from '../index.module.scss'
+import styles from '../$Footer.module.scss'
 
 export function ContactList({ customKey }: ContactListProps) {
 	return (

src/components/Organisms/Footer/containers/__Institutional.tsx

@@ -1,21 +1,22 @@
 import { InstitutionalListProps } from '../@types'
 
-import { Accordion } from '../../../components/Molecules/Accordion'
+import { Accordion } from '../../../Molecules/Accordion/$Accordion'
 
-import css from '../index.module.scss'
-import { ItemList } from '../../../components/Molecules/ItemList'
+import { ItemList } from '../../../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/components/Organisms/Footer/containers/__Question.tsx

@@ -1,21 +1,21 @@
 import { QuestionsListProps } from '../@types'
 
-import { Accordion } from '../../../components/Molecules/Accordion'
-import { ItemList } from '../../../components/Molecules/ItemList'
+import { Accordion } from '../../../Molecules/Accordion/$Accordion'
+import { ItemList } from '../../../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/components/Organisms/Footer/containers/__Socials.tsx

@@ -0,0 +1,31 @@
+import { ItemList } from '../../../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 styles from '../$Footer.module.scss'
+
+export function Socials() {
+	return (
+		<ul className={styles.socials}>
+			<ItemList href="https://facebook.com">
+				<img src={facebookIcon} alt="Facebook logo" />
+			</ItemList>
+			<ItemList href="https://instagram.com">
+				<img src={instagramIcon} alt="Instagram logo" />
+			</ItemList>
+			<ItemList href="https://twitter.com">
+				<img src={twitterIcon} alt="Twitter logo" />
+			</ItemList>
+			<ItemList href="https://youtube.com">
+				<img src={youtubeIcon} alt="Youtube logo" />
+			</ItemList>
+			<ItemList href="https://linkedin.com">
+				<img src={linkedinIcon} alt="Linkedin logo" />
+			</ItemList>
+		</ul>
+	)
+}

src/components/Organisms/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/components/Organisms/Footer/index.ts

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

src/components/Organisms/Header/$Header.module.scss

@@ -1,10 +1,10 @@
-@use '../../styles/utils/helpers/functions' as function;
+@use '../../../styles/utils/helpers/functions' as function;
 
 $containers: (
 	'xs': 339px,
 	'sm': 988px,
 	'md': 1080px,
-	'xl': 2299.68px,
+	'xl': 2300px,
 );
 
 .l-header {

src/components/Organisms/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/components/Organisms/Header/containers/_Bottom.tsx

@@ -1,11 +1,11 @@
 import { IBottomProps } from './@types'
 
-import { ItemList } from '../../../components/Molecules/ItemList'
+import { ItemList } from '../../../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/components/Organisms/Header/containers/_Search.tsx

@@ -2,9 +2,9 @@ import { useState } from 'react'
 
 import { ISearchProps } from './@types'
 
-import { ButtonIcon } from '../../../components/Molecules/ButtonIcon'
+import { ButtonIcon } from '../../../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/components/Organisms/Header/containers/_Top.tsx

@@ -1,15 +1,15 @@
 import { ITopProps } from './@types'
 
-import { ButtonIcon } from '../../../components/Molecules/ButtonIcon'
+import { ButtonIcon } from '../../../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/components/Organisms/Header/containers/__Actions.tsx

@@ -1,6 +1,6 @@
 import { ActionsProps } from './@types'
-import { CustomLink } from '../../../components/Atoms/CustomLink'
-import { ButtonIcon } from '../../../components/Molecules/ButtonIcon'
+import { CustomLink } from '../../../Atoms/CustomLink'
+import { ButtonIcon } from '../../../Molecules/ButtonIcon'
 
 export function Actions({
 	handleClick,

src/components/Organisms/Header/containers/index.tsx

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

src/components/Organisms/Header/index.ts

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

src/components/Organisms/Sidebar/$Sidebar.tsx

@@ -1,8 +1,8 @@
 import { useLocation } from 'react-router-dom'
 
-import { ItemList } from '../../components/Molecules/ItemList'
+import { ItemList } from '../../Molecules/ItemList'
 
-import styles from './index.module.scss'
+import styles from './$Sidebar.module.scss'
 
 export function Sidebar() {
 	const { pathname } = useLocation()
@@ -17,7 +17,7 @@ export function Sidebar() {
 	]
 
 	return (
-		<aside className={styles['sidebar']}>
+		<nav className={styles['sidebar']}>
 			<div className={styles['sidebar__container']}>
 				<ul className={styles['sidebar__list']}>
 					{paths.map(({ path, name }) => {
@@ -33,6 +33,6 @@ export function Sidebar() {
 					})}
 				</ul>
 			</div>
-		</aside>
+		</nav>
 	)
 }

src/components/Organisms/Sidebar/index.ts

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

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.module.scss

@@ -91,25 +91,65 @@
 		text-align: center;
 
 		label {
-			text-decoration: underline;
+			display: flex;
+			cursor: pointer;
+			font-size: 22px;
 			margin: 0;
 			padding: 0;
+			font-size: var(--txt-normal);
+			line-height: 16.41px;
 
-			span {
+			.form-icon-required {
 				display: inline-block;
 
 				text-decoration: none;
 				color: var(--clr-common-red);
 			}
+
+			a {
+				text-decoration: underline;
+				color: var(--clr-common-black);
+			}
+
+			@media screen and (min-width: 2500px) {
+				line-height: 32.81px;
+			}
 		}
 
-		input[type='checkbox'] {
-			width: 18.64px;
-			height: 18px;
+		label {
+			input {
+				width: 0;
+				height: 0;
 
-			&:checked {
-				border-radius: 3px;
-				border: 1px solid var(--clr-common-black);
+				& ~ .custom-checkbox {
+					width: 18.64px;
+					height: 18px;
+					margin-left: 4.28px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border: 1px solid var(--clr-common-black);
+					border-radius: 3px;
+
+					@media screen and (min-width: 2500px) {
+						width: 36.4px;
+						height: 35.15px;
+					}
+				}
+
+				&:checked {
+					& ~ .custom-checkbox:after {
+						content: '';
+						width: 12.64px;
+						height: 12px;
+						border-radius: 3px;
+						background-color: var(--clr-primary-blue-500);
+						@media screen and (min-width: 2500px) {
+							width: 26.4px;
+							height: 26.15px;
+						}
+					}
+				}
 			}
 		}
 	}
@@ -151,7 +191,8 @@
 		color: var(--clr-common-green);
 		font-size: var(--txt-xs);
 		line-height: 14.06px;
-		margin-top: 12px;
+		margin-top: 0px;
+		height: 0;
 
 		@media screen and (min-width: 2500px) {
 			line-height: 28.13px;
@@ -160,5 +201,7 @@
 
 	.form__success.form__success-active {
 		opacity: 1;
+		margin-top: 12px;
+		height: auto;
 	}
 }

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,
 						})
 
@@ -152,10 +151,13 @@ export function Contact() {
 
 									<div className="form-check">
 										<label htmlFor="terms">
-											<span>*</span>
-											Declaro que li e aceito
+											<span>
+												<span className="form-icon-required">*</span>{' '}
+												<a href="/">Declaro que li e aceito</a>
+											</span>
+											<Field id="terms" name="terms" type="checkbox" required />
+											<span className="custom-checkbox"></span>
 										</label>
-										<Field id="terms" name="terms" type="checkbox" required />
 									</div>
 
 									<button className={styles['submit']} type="submit">

src/pages/Institutional/Contact/index.ts

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

src/pages/Institutional/Contact/schema/FormSchema.tsx

@@ -11,7 +11,11 @@ const dateRegexPattern =
 	/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/
 
 export default Yup.object().shape({
-	fullname: Yup.string().trim().min(7).max(60).required(messages.required),
+	fullname: Yup.string()
+		.trim()
+		.min(7, 'Nome completo muito curto')
+		.max(60, 'Nome completo muito grande')
+		.required(messages.required),
 	email: Yup.string()
 		.matches(emailRegexPattern, { message: 'Email ínvalido' })
 		.required(messages.required)

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,46 @@
+import { Outlet, Route, Routes } from 'react-router-dom'
+
+import { Header } from '../components/Organisms/Header/$Header'
+import { Sidebar } from '../components/Organisms/Sidebar'
+import { Footer } from '../components/Organisms/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 (
-		<div className={styles['breadcrumb-container']}>
-			<Breadcrumb className={styles['breadcrumb']} list={list} />
-		</div>
+		<nav className={styles['breadcrumb-container']}>
+			<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,18 +20,20 @@ export function ScrollFixed() {
 	}, [])
 
 	return (
-		<ul className={styles['scroll__fixed']}>
-			<ItemList
-				className={styles['scroll__fixed-whatsapp']}
-				href="https://wa.me/254777123456"
-			>
-				<img src={whatsappImg} alt="" />
-			</ItemList>
-			{isScrollTop && (
-				<ItemList className={styles['scroll__fixed-top']} href={'#root'}>
-					<img src={scrollTopImg} alt="" />
+		<div>
+			<ul className={styles['scroll__fixed']}>
+				<ItemList
+					className={styles['scroll__fixed-whatsapp']}
+					href="https://wa.me/254777123456"
+				>
+					<img src={whatsappImg} alt="" />
 				</ItemList>
-			)}
-		</ul>
+				{isScrollTop && (
+					<ItemList className={styles['scroll__fixed-top']} href={'#root'}>
+						<img src={scrollTopImg} alt="" />
+					</ItemList>
+				)}
+			</ul>
+		</div>
 	)
 }

src/routes/index.ts

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

src/routes/index.tsx

@@ -1,69 +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 />
-						<RouterBreadcrumb />
-						<div className="window-routes">
-							<Outlet />
-						</div>
-						<Footer />
-						<ScrollFixed />
-					</>
-				}
-			>
-				<Route
-					path="/"
-					element={
-						<>
-							<main className="window-content">
-								<h1 className="main-title">Institutional</h1>
-								<div className="window-initial">
-									<Sidebar />
-									<div>
-										<div className="main-container">
-											<Outlet />
-										</div>
-									</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(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/Footer/containers/_Payment.tsx

@@ -1,39 +0,0 @@
-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'
-
-const assetsImg = [
-	MasterCardBrandImg,
-	VisaBrandImg,
-	DinersBrandImg,
-	EloBrandImg,
-	HiperBrandImg,
-	PaypalBrandImg,
-	BoletoImg,
-]
-
-export function PaymentsList() {
-	return (
-		<ul className={`${styles['footer__payments']} ${styles['payments']}`}>
-			{assetsImg.map((image, index) => {
-				return (
-					<Item className={`${styles['payments__item']}`} key={index}>
-						<img className="payments__image" src={image} alt="" />
-					</Item>
-				)
-			})}
-			<div className={`${styles['payments__divider']}`} role={'presentation'} />
-			<Item className={`${styles['payments__item']}`}>
-				<img src={VtexPCIImg} alt="" />
-			</Item>
-		</ul>
-	)
-}

src/template/Footer/containers/__Socials.tsx

@@ -1,31 +0,0 @@
-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 css from '../index.module.scss'
-
-export function Socials() {
-	return (
-		<ul className={css.socials}>
-			<ItemList href="/">
-				<img src={facebookIcon} alt="" />
-			</ItemList>
-			<ItemList href="/">
-				<img src={instagramIcon} alt="" />
-			</ItemList>
-			<ItemList href="/">
-				<img src={twitterIcon} alt="" />
-			</ItemList>
-			<ItemList href="/">
-				<img src={youtubeIcon} alt="" />
-			</ItemList>
-			<ItemList href="/">
-				<img src={linkedinIcon} alt="" />
-			</ItemList>
-		</ul>
-	)
-}