diff --git a/package.json b/package.json
index 02fcfdc..68926d1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-headless-accordion": "^1.0.2",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
diff --git a/src/assets/IconMore.svg b/src/assets/IconMore.svg
new file mode 100644
index 0000000..d64bfd8
--- /dev/null
+++ b/src/assets/IconMore.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Footer/AccordionLinks/index.tsx b/src/components/Footer/AccordionLinks/index.tsx
new file mode 100644
index 0000000..5b5dc5d
--- /dev/null
+++ b/src/components/Footer/AccordionLinks/index.tsx
@@ -0,0 +1,116 @@
+import {
+ Accordion,
+ AccordionBody,
+ AccordionHeader,
+ AccordionItem,
+} from "react-headless-accordion";
+import { Icon } from "../../Icon";
+import { NavigationLinks } from "../../NavigationLinks";
+
+import style from "./style.module.css";
+
+export function AccordionLinks() {
+ const linksInfoInstitucional = [
+ {
+ slug: "quem-somos",
+ text: "Quem Somos",
+ },
+ {
+ slug: "politica-de-privacidade",
+ text: "Política de Privacidade",
+ },
+ {
+ slug: "seguranca",
+ text: "Segurança",
+ },
+ {
+ slug: "seja-um-Revendedor",
+ text: "Seja um Revendedor",
+ },
+ ];
+ const linksInfoDoubts = [
+ {
+ slug: "entrega",
+ text: "Entrega",
+ },
+ {
+ slug: "pagamento",
+ text: "Pagamento",
+ },
+ {
+ slug: "trocas-e-devoluções",
+ text: "Trocas e Devoluções",
+ },
+ {
+ slug: "duvidas-frequentes",
+ text: "Dúvidas Frequentes",
+ },
+ ];
+ const linksInfoContactUs = [
+ {
+ slug: "contato",
+ text: "Atendimento ao Consumidor",
+ },
+ {
+ slug: "contato",
+ text: "(11) 4159 9504",
+ },
+ {
+ slug: "whatsapp",
+ text: "Atendimento Online",
+ },
+ {
+ slug: "whatsapp",
+ text: "(11) 99433-8825",
+ },
+ ];
+ return (
+
+
+
+
+ Institucional
+
+
+
+
+
+
+
+
+
+
+ Dúvidas
+
+
+
+
+
+
+
+
+
+
+ Fale Conosco
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Footer/AccordionLinks/style.module.css b/src/components/Footer/AccordionLinks/style.module.css
new file mode 100644
index 0000000..a2f9a6f
--- /dev/null
+++ b/src/components/Footer/AccordionLinks/style.module.css
@@ -0,0 +1,65 @@
+@media only screen and (max-width: 1024px) {
+ .containerAccordion {
+ width: 100%;
+ padding: 0.75rem 0;
+ }
+
+ .titleAccordionContent {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ padding: 0.75rem 1rem;
+ background-color: transparent;
+ border: none;
+ font-family: "Roboto";
+ font-weight: 500;
+ font-size: 0.875rem;
+ }
+
+ .bodyAccordionContent {
+ padding: 0 1rem;
+ }
+
+ .bodyAccordionContent ul {
+ list-style: none;
+ }
+
+ .bodyAccordionContent a {
+ text-decoration: none;
+ }
+
+ .bodyAccordionContent a:last-child {
+ text-decoration: none;
+ text-decoration: underline;
+ text-decoration-color: var(--gray-1100);
+ }
+
+ .bodyAccordionContent li {
+ font-weight: 400;
+ font-size: 1.5rem;
+ color: var(--gray-1100);
+ margin-bottom: 0.75rem;
+ }
+
+ .contentListIconsWrapper {
+ padding: 0 1rem;
+ }
+
+ .listIcons {
+ display: flex;
+ gap: 0.659rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .listIcons svg {
+ max-width: 35px;
+ }
+}
+
+@media only screen and (min-width: 1025px) {
+ .containerAccordion {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Footer/ContainerFooter/style.module.css b/src/components/Footer/ContainerFooter/style.module.css
index 16d62d1..f7a0440 100644
--- a/src/components/Footer/ContainerFooter/style.module.css
+++ b/src/components/Footer/ContainerFooter/style.module.css
@@ -1,6 +1,18 @@
+@media only screen and (max-width: 1024px) {
+ .containerFooter {
+ display: none;
+ }
+}
+
+@media only screen and (min-width: 1025px) {
+ .containerFooter {
+ display: flex;
+ }
+}
+
.containerFooter {
width: 100%;
- display: flex;
+
justify-content: center;
flex-direction: column;
align-items: center;
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 6abb28e..48b66bb 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,6 +1,7 @@
import { ContainerNewsletter } from "./ContainerNewsLetter";
import { ContainerFooter } from "./ContainerFooter";
import { ContainerFooterInfo } from "./ContainerFooterInfo";
+import { AccordionLinks } from "./AccordionLinks";
export function Footer() {
@@ -8,6 +9,7 @@ export function Footer() {
return (
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 67570b7..3154e3a 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -13,6 +13,7 @@ import iconM3 from "../../assets/icon-m3.svg";
interface IconProps {
name:
| "search"
+ | "iconMore"
| "bars"
| "exit"
| "miniCart"
@@ -43,6 +44,21 @@ export function Icon(props: IconProps) {
const { name } = props;
switch (name) {
+ case "iconMore":
+ return (
+
+ );
case "exit":
return (
);
-
+
case "bars":
return (