feature(footer): Cria o footer mobile com accordion

package-lock.json

@@ -17,6 +17,7 @@
         "@types/react-dom": "^18.0.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-headless-accordion": "^1.0.2",
         "react-scripts": "5.0.1",
         "sass": "^1.57.1",
         "typescript": "^4.9.4",
@@ -14001,6 +14002,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "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",
@@ -26713,6 +26722,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "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

@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-headless-accordion": "^1.0.2",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",

src/components/footer/Footer.module.scss

@@ -1,16 +1,12 @@
-footer {
-  margin-top: 600px;
-}
-
 .newsletter__container {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 104px;
+  padding: 16px;
+  // height: 104px;
 
   .newsletter__container__span {
     color: #303030;
-    margin-left: 8px;
     font-weight: 500;
     font-size: 18px;
     line-height: 21px;
@@ -18,17 +14,28 @@ footer {
     font-variant: small-caps;
   }
 
+  .newsletter__form__wrapper {
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+    }
+  }
+
   .newsletter__input {
     width: 340px;
     height: 42px;
     padding: 15px;
-    margin: 8px;
+    margin: 8px 8px 0 0;
     border: 1px solid #e5e5e5;
     border-radius: 4px;
 
     &::placeholder {
       color: #c4c4c4;
     }
+
+    @media screen and (max-width: 1024px) {
+      margin: 8px 0;
+      width: 100%;
+    }
   }
 
   .newsletter__submitButton {
@@ -45,19 +52,31 @@ footer {
     border: 1px solid black;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
+
+    @media screen and (max-width: 1024px) {
+      width: 100%;
+      border-radius: 0;
+    }
   }
 }
 
 .container__about {
   display: flex;
-  height: 240px;
   justify-content: space-around;
   align-items: center;
+
+  @media screen and (min-width: 1025px) {
+    height: 240px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 26px 16px;
+  }
 }
 
-.wrapper__institucional,
-.wrapper__duvidas,
-.wrapper__contato {
+.wrapper__about {
   display: flex;
   flex-direction: column;
 
@@ -66,13 +85,13 @@ footer {
     font-weight: 500;
     font-size: 14px;
     line-height: 16px;
-    /* identical to box height */
+    padding-bottom: 10px;
 
     text-transform: uppercase;
   }
 
   & a {
-    margin-top: 12px;
+    margin-bottom: 12px;
     font-weight: 400;
     font-size: 12px;
     line-height: 14px;
@@ -82,6 +101,10 @@ footer {
       text-decoration: underline;
     }
   }
+
+  @media screen and (max-width: 1024px) {
+    display: none;
+  }
 }
 
 ul {
@@ -93,32 +116,110 @@ ul {
   }
 }
 
+.accordion__container {
+  width: 100%;
+  @media screen and (min-width: 1025px) {
+    display: none;
+  }
+
+  .accordion__button {
+    margin: 5px 0;
+    padding: 10px;
+    width: 100%;
+    border: none;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+
+    &:hover {
+      background-color: rgb(241, 241, 241);
+    }
+  }
+
+  .accordion__body {
+    padding: 10px;
+
+    a {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      text-transform: capitalize;
+
+      color: #303030;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+
+  span {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+
+    text-transform: uppercase;
+
+    color: #303030;
+  }
+}
+
+.wrapper__socialmedia {
+  margin-bottom: 90px;
+  @media screen and (max-width: 1024px) {
+    margin-top: 25px;
+  }
+}
+
+.socialmedia__link {
+  @media screen and (max-width: 1024px) {
+    display: none;
+  }
+}
+
 .footer__stamps__wrapper {
-  height: 64px;
   background-color: black;
   color: white;
 
+  position: relative;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  padding: 16px;
+
+  @media screen and (min-width: 1025px) {
+    justify-content: center;
+    align-items: center;
+  }
+
+  @media screen and (max-width: 1024px) {
+    padding: 16px;
+    flex-direction: column;
+  }
 }
 
 .stamps__address {
-  position: absolute;
   width: 234px;
   font-style: normal;
   font-weight: 400;
   font-size: 10px;
   line-height: 12px;
-  left: 100px;
   text-transform: capitalize;
+
+  @media screen and (min-width: 1025px) {
+    position: absolute;
+    left: 100px;
+  }
+
+  @media screen and (max-width: 1024px) {
+    margin: 15px 0;
+    order: 2;
+  }
 }
 
 .stamps__creditCards {
-  align-items: center;
   display: flex;
-  justify-content: center;
   list-style: none;
+
   & span {
     background-color: white;
     display: inline-block;
@@ -134,15 +235,24 @@ ul {
   .stamps__vtexPci {
     height: 46px;
   }
+
+  @media screen and (min-width: 1025px) {
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media screen and (max-width: 1024px) {
+    order: 1;
+    align-items: center;
+    flex-wrap: wrap;
+  }
 }
 
 .stamps__developedBy {
-  position: absolute;
   align-items: center;
   display: flex;
   list-style-type: none;
   margin: 0;
-  right: 100px;
 
   & span {
     font-weight: 400;
@@ -155,4 +265,13 @@ ul {
   & img {
     height: 16px;
   }
+
+  @media screen and (min-width: 1025px) {
+    right: 100px;
+    position: absolute;
+  }
+
+  @media screen and (max-width: 1024px) {
+    order: 3;
+  }
 }

src/components/footer/FooterTop.tsx

@@ -5,31 +5,110 @@ import instagram from "../../assets/imgs/instagram-icon.png";
 import twitter from "../../assets/imgs/twitter-icon.png";
 import youtube from "../../assets/imgs/youtube-icon.png";
 import linkedin from "../../assets/imgs/linkedin-icon.png";
+import {
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+  AccordionItem,
+} from "react-headless-accordion";
 
 const FooterTop = () => {
   return (
     <div className={style.container__about}>
-      <div className={style.wrapper__institucional}>
+      <div className={style.wrapper__about}>
         <span>Institucional</span>
         <a href="/">Quem somos</a>
         <a href="/">Política de Privacidade</a>
         <a href="/">Segurança</a>
         <a href="/">Seja um Revendedor</a>
       </div>
-      <div className={style.wrapper__duvidas}>
+      <div className={style.wrapper__about}>
         <span>DÚVIDAS</span>
         <a href="/">Entrega</a>
         <a href="/">Pagamento</a>
         <a href="/">Troca e devolução</a>
         <a href="/">Dúvidas frequentes</a>
       </div>
-      <div className={style.wrapper__contato}>
+      <div className={style.wrapper__about}>
         <span>Fale conosco</span>
         <p>Atendimento ao consumidor</p>
         <a href="/">(11) 4159-9504</a>
         <p>Atendimento online</p>
         <a href="/">(11) 99433-8825</a>
       </div>
+
+      <Accordion className={style.accordion__container}>
+        <AccordionItem>
+          <AccordionHeader className={style.accordion__button}>
+            <span>Institucional</span>
+            <span>+</span>
+          </AccordionHeader>
+
+          <AccordionBody>
+            <div className={style.accordion__body}>
+              <a href="/">Quem Somos</a>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">Política de Privacidade</a>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">Segurança</a>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">Seja um Revendedor</a>
+            </div>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>
+
+      <Accordion className={style.accordion__container}>
+        <AccordionItem>
+          <AccordionHeader className={style.accordion__button}>
+            <span>DÚVIDAS</span>
+            <span>+</span>
+          </AccordionHeader>
+
+          <AccordionBody>
+            <div className={style.accordion__body}>
+              <a href="/">Entrega</a>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">Pagamento</a>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">Trocas e Devoluções</a>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">Dúvidas Frequentes</a>
+            </div>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>
+
+      <Accordion className={style.accordion__container}>
+        <AccordionItem>
+          <AccordionHeader className={style.accordion__button}>
+            <span>Fale Conosco</span>
+            <span>+</span>
+          </AccordionHeader>
+
+          <AccordionBody>
+            <div className={style.accordion__body}>
+              <span>Atendimento ao Consumidor</span>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">(11) 4159 9504</a>
+            </div>
+            <div className={style.accordion__body}>
+              <span>Atendimento Online</span>
+            </div>
+            <div className={style.accordion__body}>
+              <a href="/">(11) 99433-8825</a>
+            </div>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>
+
       <div className={style.wrapper__socialmedia}>
         <ul>
           <li>
@@ -58,7 +137,9 @@ const FooterTop = () => {
             </a>
           </li>
         </ul>
-        <a href="/">www.loremipsum.com</a>
+        <a className={style.socialmedia__link} href="/">
+          www.loremipsum.com
+        </a>
       </div>
     </div>
   );

src/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./global.scss";
-import { Home } from "./pages/Home";
+import { FaleConosco } from "./pages/FaleConosco";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
-root.render(<Home />);
+root.render(<FaleConosco />);

src/pages/FaleConosco.tsx

@@ -3,7 +3,7 @@ import { Header } from "../components/header/Header";
 import { Main } from "../components/main/Main";
 import { Footer } from "../components/footer/Footer";
 
-const Home = () => {
+const FaleConosco = () => {
   return (
     <>
       <Header />
@@ -13,4 +13,4 @@ const Home = () => {
   );
 };
 
-export { Home };
+export { FaleConosco };