diff --git a/package-lock.json b/package-lock.json
index 0a8fe64..2ea3a69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,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.2",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
@@ -14055,6 +14056,14 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
+ "node_modules/react-headless-accordion": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
+ "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
+ "peerDependencies": {
+ "react": "^18.2.0"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26866,6 +26875,12 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
+ "react-headless-accordion": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz",
+ "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==",
+ "requires": {}
+ },
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index ae3d239..8920ee1 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.2",
"react-scripts": "5.0.1",
"sass": "^1.57.1",
diff --git a/src/components/footer/AccordionFooterTop.module.scss b/src/components/footer/AccordionFooterTop.module.scss
new file mode 100644
index 0000000..856895c
--- /dev/null
+++ b/src/components/footer/AccordionFooterTop.module.scss
@@ -0,0 +1,76 @@
+@import "../../styles/utils/variables.scss";
+
+.accordionFooterTop {
+ padding: 24px 16px 0px 16px;
+ display: none;
+ justify-content: space-between;
+
+ @media (max-width: 1024px) {
+ display: flex;
+ flex-direction: column;
+ }
+
+ button {
+ border: none;
+ outline: none;
+ background-color: transparent;
+ text-align: left;
+
+ h3 {
+ margin-bottom: 12px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 16px;
+ text-transform: capitalize;
+ position: relative;
+ font-family: Roboto;
+ text-transform: uppercase;
+
+ &::after {
+ content: "+";
+ position: absolute;
+ right: 0;
+ }
+ }
+ }
+
+ div {
+ display: flex;
+ flex-direction: column;
+
+ a {
+ margin-bottom: 12px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 14px;
+ text-decoration: none;
+ color: $primary-100;
+
+ &:last-child {
+ text-decoration: underline;
+ }
+ }
+
+ p {
+ font-size: 12px;
+ line-height: 14px;
+
+ &:nth-child(2),
+ &:nth-child(4) {
+ font-weight: 400;
+ line-height: 14px;
+ max-width: 20ch;
+ margin: 12px 0;
+ }
+
+ &:nth-child(1),
+ &:nth-child(3) {
+ font-weight: 500;
+ }
+
+ &:last-child {
+ text-decoration: underline;
+ }
+ }
+ }
+}
diff --git a/src/components/footer/AccordionFooterTop.tsx b/src/components/footer/AccordionFooterTop.tsx
new file mode 100644
index 0000000..1e331c9
--- /dev/null
+++ b/src/components/footer/AccordionFooterTop.tsx
@@ -0,0 +1,60 @@
+// Bibliotecas
+import React from "react";
+import {
+ Accordion,
+ AccordionBody,
+ AccordionHeader,
+ AccordionItem,
+} from "react-headless-accordion";
+
+// Estilos
+import styleAccordionFooterTop from "./AccordionFooterTop.module.scss";
+
+const AccordionFooterTop = () => {
+ return (
+
+
+
+ Institucional
+
+
+
+ Quem Somos
+ Politica de Privacidade
+ Segurança
+ Seja um Revendedor
+
+
+
+
+
+ Dúvidas
+
+
+
+ Entrega
+ Pagamento
+ Troca e Devoluções
+ Dúvidas Frequentes
+
+
+
+
+
+ Fale Conosco
+
+
+
+ Atendimento Ao Consumidor
+ (11) 4159-9504
+ Atendimento Online
+ (11) 99433-8825
+
+
+
+ );
+};
+
+export { AccordionFooterTop };
diff --git a/src/components/footer/FooterTop.module.scss b/src/components/footer/FooterTop.module.scss
index 276373a..7e7143f 100644
--- a/src/components/footer/FooterTop.module.scss
+++ b/src/components/footer/FooterTop.module.scss
@@ -7,7 +7,7 @@
@media (max-width: 1024px) {
display: block;
- padding: 24px 16px;
+ padding: 0 16px 24px 16px;
}
h3 {
@@ -23,13 +23,7 @@
}
@media (max-width: 1024px) {
- text-transform: capitalize;
- position: relative;
- &::after {
- content: "+";
- position: absolute;
- right: 0;
- }
+ display: none;
}
}
diff --git a/src/components/footer/FooterTop.tsx b/src/components/footer/FooterTop.tsx
index b7a6a62..5bc4325 100644
--- a/src/components/footer/FooterTop.tsx
+++ b/src/components/footer/FooterTop.tsx
@@ -18,7 +18,7 @@ const FooterTop = () => {
Institucional
-
- Quem somos
+ Quem Somos
-
Politica de Privacidade
diff --git a/src/components/teste/Form.module.scss b/src/components/header/Form.module.scss
similarity index 100%
rename from src/components/teste/Form.module.scss
rename to src/components/header/Form.module.scss
diff --git a/src/components/teste/Form.tsx b/src/components/header/Form.tsx
similarity index 100%
rename from src/components/teste/Form.tsx
rename to src/components/header/Form.tsx
diff --git a/src/components/teste/HeaderWrapper.module.scss b/src/components/header/HeaderWrapper.module.scss
similarity index 100%
rename from src/components/teste/HeaderWrapper.module.scss
rename to src/components/header/HeaderWrapper.module.scss
diff --git a/src/components/teste/Logo.module.scss b/src/components/header/Logo.module.scss
similarity index 100%
rename from src/components/teste/Logo.module.scss
rename to src/components/header/Logo.module.scss
diff --git a/src/components/teste/Logo.tsx b/src/components/header/Logo.tsx
similarity index 100%
rename from src/components/teste/Logo.tsx
rename to src/components/header/Logo.tsx
diff --git a/src/components/teste/Menu.module.scss b/src/components/header/Menu.module.scss
similarity index 100%
rename from src/components/teste/Menu.module.scss
rename to src/components/header/Menu.module.scss
diff --git a/src/components/teste/Menu.tsx b/src/components/header/Menu.tsx
similarity index 100%
rename from src/components/teste/Menu.tsx
rename to src/components/header/Menu.tsx
diff --git a/src/components/teste/MenuContext.tsx b/src/components/header/MenuContext.tsx
similarity index 100%
rename from src/components/teste/MenuContext.tsx
rename to src/components/header/MenuContext.tsx
diff --git a/src/components/teste/MenuOpened.tsx b/src/components/header/MenuOpened.tsx
similarity index 100%
rename from src/components/teste/MenuOpened.tsx
rename to src/components/header/MenuOpened.tsx
diff --git a/src/components/teste/Nav.module.scss b/src/components/header/Nav.module.scss
similarity index 100%
rename from src/components/teste/Nav.module.scss
rename to src/components/header/Nav.module.scss
diff --git a/src/components/teste/Nav.tsx b/src/components/header/Nav.tsx
similarity index 100%
rename from src/components/teste/Nav.tsx
rename to src/components/header/Nav.tsx
diff --git a/src/components/teste/User.module.scss b/src/components/header/User.module.scss
similarity index 100%
rename from src/components/teste/User.module.scss
rename to src/components/header/User.module.scss
diff --git a/src/components/teste/User.tsx b/src/components/header/User.tsx
similarity index 100%
rename from src/components/teste/User.tsx
rename to src/components/header/User.tsx
diff --git a/src/pages/Footer.tsx b/src/pages/Footer.tsx
index 704abe7..4a44ad9 100644
--- a/src/pages/Footer.tsx
+++ b/src/pages/Footer.tsx
@@ -5,12 +5,14 @@ import React from "react";
import { Newsletter } from "../components/footer/Newsletter";
import { FooterTop } from "../components/footer/FooterTop";
import { FooterBottom } from "../components/footer/FooterBottom";
+import { AccordionFooterTop } from "../components/footer/AccordionFooterTop";
const Footer = () => {
return (
);
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
index 2347149..5b2498f 100644
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@@ -3,14 +3,14 @@ import React from "react";
// Componentes
// import { Menu } from "../components/header/Menu";
-import { Logo } from "../components/teste/Logo";
-import { Form } from "../components/teste/Form";
-import { User } from "../components/teste/User";
-import { Nav } from "../components/teste/Nav";
+import { Logo } from "../components/header/Logo";
+import { Form } from "../components/header/Form";
+import { User } from "../components/header/User";
+import { Nav } from "../components/header/Nav";
-import { Menu } from "../components/teste/Menu";
+import { Menu } from "../components/header/Menu";
-import { MenuProvider } from "../components/teste/MenuContext";
+import { MenuProvider } from "../components/header/MenuContext";
// Estilos
import styleHeaderWrapper from "../components/header/HeaderWrapper.module.scss";