feat: adiciona info-agencia responsivo

src/components/footer/info-agencia-mobile/info-agencia-mobile.module.scss

@@ -0,0 +1,57 @@
+.accordion {
+  display: flex;
+  margin: 24px 16px;
+  gap: 12px;
+  flex-direction: column;
+  @media (min-width: 1151px) {
+    display: none;
+  }
+
+  .accordionContainer {
+    background-color: #ffffff;
+    border: none;
+    padding: 0;
+    .accordionDiv {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & img {
+        height: 8px;
+      }
+
+      & span {
+        font-family: "Roboto";
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 16px;
+        color: #303030;
+      }
+    }
+  }
+}
+.socialIconsMobile {
+  display: flex;
+  gap: 12px;
+  & img {
+    height: 35px;
+  }
+
+  & span {
+    display: flex;
+    gap: 10px;
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #303030;
+  }
+}
+.accordionLi {
+  & li {
+    list-style: none;
+    margin: 12px 0 12px 0;
+  }
+}

src/components/footer/info-agencia-mobile/info-agencia-mobile.tsx

@@ -1,5 +1,10 @@
 import style from "./info-agencia-mobile.module.scss";
-import img from "../assets/Boleto.png";
+import plus from "./assets/plus.png";
+import facebook from "../../info-agencia/assets/facebook.png";
+import instagram from "../../info-agencia/assets/instagram.png";
+import linkedin from "../../info-agencia/assets/linkedin.png";
+import twitter from "../../info-agencia/assets/twitter.png";
+import youtube from "../../info-agencia/assets/youtube.png";
 
 import {
   Accordion,
@@ -10,16 +15,16 @@ import {
 
 export const InfoAgenciaMobile = () => {
   return (
-    <Accordion>
+    <Accordion className={style.accordion}>
       <AccordionItem>
-        <AccordionHeader>
-          <div className={style.divspan}>
+        <AccordionHeader className={style.accordionContainer}>
+          <div className={style.accordionDiv}>
             <span>Institucional</span>
-            <img src={img} alt="" />
+            <img className={style.plusImg} src={plus} alt="" />
           </div>
         </AccordionHeader>
         <AccordionBody>
-          <div>
+          <div className={style.accordionLi}>
             <li>Quem somos</li>
             <li>Política de Privacidade</li>
             <li>Segurança</li>
@@ -29,14 +34,15 @@ export const InfoAgenciaMobile = () => {
       </AccordionItem>
 
       <AccordionItem>
-        <AccordionHeader>
-          <div className={style.divspan}>
+        <AccordionHeader className={style.accordionContainer}>
+          <div className={style.accordionDiv}>
             <span>Dúvidas</span>
+            <img className={style.plusImg} src={plus} alt="" />
           </div>
         </AccordionHeader>
 
         <AccordionBody>
-          <div>
+          <div className={style.accordionLi}>
             <li>Entrega</li>
             <li>Pagamento</li>
             <li>Trocas e Devoluções</li>
@@ -45,14 +51,15 @@ export const InfoAgenciaMobile = () => {
         </AccordionBody>
       </AccordionItem>
       <AccordionItem>
-        <AccordionHeader>
-          <div className={style.divspan}>
+        <AccordionHeader className={style.accordionContainer}>
+          <div className={style.accordionDiv}>
             <span>Fale conosco</span>
+            <img className={style.plusImg} src={plus} alt="" />
           </div>
         </AccordionHeader>
 
         <AccordionBody>
-          <div>
+          <div className={style.accordionLi}>
             <li>Atendimento ao Consumidor</li>
             <li>(11) 4159-9504</li>
             <li>Atendimento Online</li>
@@ -60,7 +67,29 @@ export const InfoAgenciaMobile = () => {
           </div>
         </AccordionBody>
       </AccordionItem>
-      <div></div>
+      <div className={style.socialIconsMobile}>
+        <a href="https://www.google.com.br/">
+          {" "}
+          <img src={facebook} alt=""></img>
+        </a>
+        <a href="https://www.google.com.br/">
+          {" "}
+          <img src={instagram} alt=""></img>
+        </a>
+        <a href="https://www.google.com.br/">
+          {" "}
+          <img src={twitter} alt=""></img>
+        </a>
+        <a href="https://www.google.com.br/">
+          {" "}
+          <img src={youtube} alt=""></img>
+        </a>
+        <a href="https://www.google.com.br/">
+          {" "}
+          <img src={linkedin} alt=""></img>
+        </a>
+      </div>
+      <span>www.loremipsum.com</span>
     </Accordion>
   );
 };