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 (