package.json

@@ -11,13 +11,11 @@
 		"@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/README.md

@@ -1,147 +0,0 @@
-# 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

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

src/components/Molecules/Accordion/index.tsx

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

src/components/Molecules/Breadcrumb/index.ts

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

src/components/Molecules/Breadcrumb/index.tsx

@@ -1,12 +1,10 @@
+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 }>
 }
@@ -14,15 +12,17 @@ interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
 export function Breadcrumb({ list, ...props }: BreadcrumbProps) {
 	return (
 		<div {...props}>
-			<ul className={styles.list}>
-				<ItemList className={styles.initial} href="/">
-					<img src={initialHomeIcon} alt="" />
-				</ItemList>
+			<ul className={css.list}>
+				<li className={css.initial}>
+					<a href="/">
+						<img src={initialHomeIcon} alt="" />
+					</a>
+				</li>
 
 				{list.map(({ name, href }) => {
 					return (
-						<li key={name + '-breadcrumb-item'} className={styles.item}>
-							<div className={styles.divider}>
+						<li key={name + '-breadcrumb-item'} className={css.item}>
+							<div className={css.divider}>
 								<img src={arrowRightIcon} alt="ícone de divisão" />
 							</div>
 							<a href={href}>{name}</a>

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

@@ -1,66 +0,0 @@
-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/__Socials.tsx

@@ -1,31 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

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

src/components/Organisms/Sidebar/index.ts

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

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

@@ -1,30 +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.module.scss

@@ -0,0 +1,31 @@
+.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

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

src/pages/Institutional/About/index.tsx

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

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

@@ -91,65 +91,25 @@
 		text-align: center;
 
 		label {
-			display: flex;
-			cursor: pointer;
-			font-size: 22px;
+			text-decoration: underline;
 			margin: 0;
 			padding: 0;
-			font-size: var(--txt-normal);
-			line-height: 16.41px;
 
-			.form-icon-required {
+			span {
 				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;
-			}
 		}
 
-		label {
-			input {
-				width: 0;
-				height: 0;
+		input[type='checkbox'] {
+			width: 18.64px;
+			height: 18px;
 
-				& ~ .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;
-						}
-					}
-				}
+			&:checked {
+				border-radius: 3px;
+				border: 1px solid var(--clr-common-black);
 			}
 		}
 	}
@@ -191,8 +151,7 @@
 		color: var(--clr-common-green);
 		font-size: var(--txt-xs);
 		line-height: 14.06px;
-		margin-top: 0px;
-		height: 0;
+		margin-top: 12px;
 
 		@media screen and (min-width: 2500px) {
 			line-height: 28.13px;
@@ -201,7 +160,5 @@
 
 	.form__success.form__success-active {
 		opacity: 1;
-		margin-top: 12px;
-		height: auto;
 	}
 }

src/pages/Institutional/Contact/index.ts

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

src/pages/Institutional/Contact/index.tsx

@@ -1,11 +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 { FormGroup } from './containers/_FormGroup'
+import styles from './index.module.scss'
 
-import styles from './$Contact.module.scss'
+import { FormGroup } from './containers/_FormGroup'
 
 export function Contact() {
 	const [isSubmiting, setIsSubmiting] = useState(false)
@@ -36,8 +37,8 @@ export function Contact() {
 				<h2 className="title">Preencha o formulário</h2>
 
 				<Formik
-					onSubmit={(values, { resetForm }) => {
-						resetForm({
+					onSubmit={(values, e) => {
+						e.resetForm({
 							isSubmitting: true,
 						})
 
@@ -151,13 +152,10 @@ export function Contact() {
 
 									<div className="form-check">
 										<label htmlFor="terms">
-											<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>
+											<span>*</span>
+											Declaro que li e aceito
 										</label>
+										<Field id="terms" name="terms" type="checkbox" required />
 									</div>
 
 									<button className={styles['submit']} type="submit">

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

@@ -11,11 +11,7 @@ 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, 'Nome completo muito curto')
-		.max(60, 'Nome completo muito grande')
-		.required(messages.required),
+	fullname: Yup.string().trim().min(7).max(60).required(messages.required),
 	email: Yup.string()
 		.matches(emailRegexPattern, { message: 'Email ínvalido' })
 		.required(messages.required)

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

@@ -1,30 +0,0 @@
-.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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,30 +0,0 @@
-.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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,30 +0,0 @@
-.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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,30 +0,0 @@
-.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

@@ -1,41 +0,0 @@
-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

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

src/pages/Institutional/index.tsx

@@ -1,19 +0,0 @@
-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.tsx

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

src/routes/containers/_ScrollFixed.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
 import { ItemList } from '../../components/Molecules/ItemList'
 
-import whatsappImg from '../assets/icons/whatsapp.svg'
-import scrollTopImg from '../assets/icons/scroll-top.svg'
+import whatsappImg from '../../assets/brands/svgs/whatsapp.svg'
+import scrollTopImg from '../../assets/icons/scroll-top.svg'
 
-import styles from '../$Routes.module.scss'
+import styles from '../index.module.scss'
 
 export function ScrollFixed() {
 	const [isScrollTop, setIsScrollTop] = useState<boolean>(false)
@@ -20,20 +20,18 @@ export function ScrollFixed() {
 	}, [])
 
 	return (
-		<div>
-			<ul className={styles['scroll__fixed']}>
-				<ItemList
-					className={styles['scroll__fixed-whatsapp']}
-					href="https://wa.me/254777123456"
-				>
-					<img src={whatsappImg} alt="" />
+		<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="" />
 				</ItemList>
-				{isScrollTop && (
-					<ItemList className={styles['scroll__fixed-top']} href={'#root'}>
-						<img src={scrollTopImg} alt="" />
-					</ItemList>
-				)}
-			</ul>
-		</div>
+			)}
+		</ul>
 	)
 }

src/routes/index.module.scss

@@ -32,7 +32,7 @@ main :global {
 	}
 
 	@media screen and (min-width: 2500px) {
-		width: function.fluid(2300px, 2500px);
+		width: function.fluid(2299.68px, 2500px);
 	}
 }
 
@@ -95,68 +95,3 @@ 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/index.ts

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

src/routes/index.tsx

@@ -0,0 +1,69 @@
+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,10 +44,6 @@ body {
 		--txt-xl: 48px;
 	}
 }
-html,
-body {
-	min-height: 100%;
-}
 
 a,
 input,
@@ -55,3 +51,68 @@ 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/@types/index.d.ts

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

src/template/Footer/containers/_List.tsx

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

src/template/Footer/containers/_Newsletter.tsx

@@ -1,24 +1,13 @@
 import { Field, Form, Formik } from 'formik'
-import { useEffect, useState } from 'react'
 import * as Yup from 'yup'
 
-import styles from '../$Footer.module.scss'
+import styles from '../index.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']}>
@@ -26,13 +15,7 @@ export function Newsletter() {
 					<h3>Assine nossa newsletter</h3>
 					<Formik
 						initialValues={{ email: '' }}
-						onSubmit={(values, e) => {
-							e.resetForm({
-								isSubmitting: true,
-							})
-
-							setIsSubmiting(true)
-						}}
+						onSubmit={(e) => console.log(e)}
 						validationSchema={schema}
 					>
 						<Form className={styles['newsletter__form']}>
@@ -43,13 +26,6 @@ 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/template/Footer/containers/_Payment.tsx

@@ -0,0 +1,39 @@
+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/__Contact.tsx

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

src/template/Footer/containers/__Institutional.tsx

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

src/template/Footer/containers/__Socials.tsx

@@ -0,0 +1,31 @@
+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>
+	)
+}

src/template/Footer/index.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/utils/helpers/functions' as function;
+@use '../../styles/utils/helpers/functions' as function;
 
 .footer {
 	&__container--top,
@@ -10,14 +10,6 @@
 			padding: 0;
 		}
 	}
-
-	@media screen and (min-width: 1025px) {
-		@media screen and (min-height: 1281px) {
-			position: fixed;
-			width: 100%;
-			bottom: 0;
-		}
-	}
 }
 
 .footer__content {
@@ -122,23 +114,6 @@
 			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 {
@@ -157,13 +132,6 @@
 		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);
@@ -222,7 +190,7 @@
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(2300px, 2500px);
+		width: function.fluid(2299.68px, 2500px);
 	}
 }
 
@@ -249,7 +217,7 @@
 		}
 
 		@media only screen and (min-width: 2500px) {
-			width: function.fluid(467px, 2300px);
+			width: function.fluid(467px, 2299.68px);
 		}
 	}
 
@@ -315,12 +283,12 @@
 		}
 
 		@media only screen and (min-width: 2500px) {
-			width: function.fluid(2300px, 2500px);
+			width: function.fluid(2299.68px, 2500px);
 		}
 	}
 }
 
-.footer__lists.lists {
+.lists {
 	width: 100%;
 
 	display: flex;
@@ -379,7 +347,7 @@
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(1531px, 2300px);
+		width: function.fluid(1531px, 2299.68px);
 
 		& > li {
 			width: function.fluid(315px, 1531px);
@@ -479,7 +447,7 @@
 	}
 
 	@media screen and (min-width: 2500px) {
-		width: function.fluid(692px, 2300px);
+		width: function.fluid(692px, 2299.68px);
 
 		&__item {
 			width: function.fluid(70px, 692px);
@@ -494,23 +462,18 @@
 }
 
 .footer__network {
-	width: 100%;
 	& > a {
-		display: block;
+		display: none;
 
-		margin-top: 12px;
+		@media only screen and (min-width: 1025px) {
+			display: block;
+			font-size: var(--txt-normal);
 
-		font-size: var(--txt-normal);
-		line-height: 16.41px;
+			color: var(--clr-gray-800);
 
-		color: var(--clr-gray-800);
-
-		&:hover {
-			color: var(--clr-primary-blue-500);
-		}
-
-		@media only screen and (min-width: 2500px) {
-			line-height: 32.81px;
+			&:hover {
+				color: var(--clr-primary-blue-500);
+			}
 		}
 	}
 
@@ -519,24 +482,15 @@
 	}
 
 	@media only screen and (min-width: 2500px) {
-		width: function.fluid(390px, 2300px);
+		width: function.fluid(390px, 2299.68px);
 	}
 }
 
 .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;
@@ -545,31 +499,10 @@
 		img {
 			width: 100%;
 			height: 100%;
-		}
-	}
-}
 
-.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;
+			@media only screen and (min-width: 2500px) {
+				width: 75px;
+				height: 75px;
 			}
 		}
 	}

src/template/Footer/index.tsx

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

src/template/Header/containers/_Bottom.tsx

@@ -1,11 +1,11 @@
 import { IBottomProps } from './@types'
 
-import { ItemList } from '../../../Molecules/ItemList'
+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 '../$Header.module.scss'
+import styles from '../index.module.scss'
 
 export function Bottom({ isMenuOpen, handleClickClose }: IBottomProps) {
 	function closeMenu(e: any) {

src/template/Header/containers/_Search.tsx

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

@@ -1,15 +1,15 @@
 import { ITopProps } from './@types'
 
-import { ButtonIcon } from '../../../Molecules/ButtonIcon'
+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 '../$Header.module.scss'
+import styles from '../index.module.scss'
 
 export function Top({ handleClickOpen }: ITopProps) {
 	return (

src/template/Header/containers/__Actions.tsx

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

src/template/Header/index.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': 2300px,
+	'xl': 2299.68px,
 );
 
 .l-header {

src/template/Header/index.tsx

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

src/template/Sidebar/index.tsx

@@ -1,8 +1,8 @@
 import { useLocation } from 'react-router-dom'
 
-import { ItemList } from '../../Molecules/ItemList'
+import { ItemList } from '../../components/Molecules/ItemList'
 
-import styles from './$Sidebar.module.scss'
+import styles from './index.module.scss'
 
 export function Sidebar() {
 	const { pathname } = useLocation()
@@ -17,7 +17,7 @@ export function Sidebar() {
 	]
 
 	return (
-		<nav className={styles['sidebar']}>
+		<aside 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>
-		</nav>
+		</aside>
 	)
 }