From 967cf9d3a2f36df7b023363a6abc37b99b8a5efd Mon Sep 17 00:00:00 2001
From: Patrick <patrickconservatorio@gmail.com>
Date: Tue, 10 Jan 2023 21:43:50 -0300
Subject: [PATCH] feat: adiciona info-agencia responsivo

---
 .../info-agencia-mobile/assets/plus.png       | Bin 0 -> 178 bytes
 .../info-agencia-mobile.module.scss           |  57 ++++++++++++++++++
 .../info-agencia-mobile.tsx                   |  55 +++++++++++++----
 3 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 src/components/footer/info-agencia-mobile/assets/plus.png

diff --git a/src/components/footer/info-agencia-mobile/assets/plus.png b/src/components/footer/info-agencia-mobile/assets/plus.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8de540b4a3f19fea079256063b6a2dd626fc42e
GIT binary patch
literal 178
zcmeAS@N?(olHy`uVBq!ia0vp^96-#;!3HGxgLCyjoC1%?Vg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5-`&&2F{FZVYo8%6g8~l=w<AN47Av>LVJ@)%
z2B8TD_<5F|_OB^ATszC()hDF1DQ&lg$`^$lCz;G%TxX9y(f_y7$Z~zc%|{G>KXJ{y
T&KZ0FXe5KDtDnm{r-UW|?iDbW

literal 0
HcmV?d00001

diff --git a/src/components/footer/info-agencia-mobile/info-agencia-mobile.module.scss b/src/components/footer/info-agencia-mobile/info-agencia-mobile.module.scss
index e69de29..22f2e38 100644
--- a/src/components/footer/info-agencia-mobile/info-agencia-mobile.module.scss
+++ b/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;
+  }
+}
diff --git a/src/components/footer/info-agencia-mobile/info-agencia-mobile.tsx b/src/components/footer/info-agencia-mobile/info-agencia-mobile.tsx
index 2f72670..7b13b77 100644
--- a/src/components/footer/info-agencia-mobile/info-agencia-mobile.tsx
+++ b/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>
   );
 };