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",

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",

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;
+      }
+    }
+  }
+}

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 (
+    <Accordion className={styleAccordionFooterTop["accordionFooterTop"]}>
+      <AccordionItem>
+        <AccordionHeader
+          className={styleAccordionFooterTop["accordionFooterTop-title"]}
+        >
+          <h3>Institucional</h3>
+        </AccordionHeader>
+
+        <AccordionBody>
+          <a href="#quem-somos">Quem Somos</a>
+          <a href="#politica-de-privacidade">Politica de Privacidade</a>
+          <a href="#seguranca">Segurança</a>
+          <a href="#seja-revendedor">Seja um Revendedor</a>
+        </AccordionBody>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionHeader>
+          <h3>Dúvidas</h3>
+        </AccordionHeader>
+
+        <AccordionBody>
+          <a href="#entrega">Entrega</a>
+          <a href="#pagamento">Pagamento</a>
+          <a href="#seguranca">Troca e Devoluções</a>
+          <a href="#duvidas-frequentes">Dúvidas Frequentes</a>
+        </AccordionBody>
+      </AccordionItem>
+
+      <AccordionItem>
+        <AccordionHeader>
+          <h3>Fale Conosco</h3>
+        </AccordionHeader>
+
+        <AccordionBody>
+          <p>Atendimento Ao Consumidor</p>
+          <p>(11) 4159-9504</p>
+          <p>Atendimento Online</p>
+          <p>(11) 99433-8825</p>
+        </AccordionBody>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export { AccordionFooterTop };

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;
     }
   }
 

src/components/footer/FooterTop.tsx

@@ -18,7 +18,7 @@ const FooterTop = () => {
         <h3>Institucional</h3>
         <ul>
           <li>
-            <a href="#quem-somos">Quem somos</a>
+            <a href="#quem-somos">Quem Somos</a>
           </li>
           <li>
             <a href="#politica-de-privacidade">Politica de Privacidade</a>

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 (
     <footer>
       <Newsletter />
-      <FooterTop />
+      <AccordionFooterTop />
+      <FooterTop/>
       <FooterBottom/>
     </footer>
   );

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";