feat(footer): created responsivness top footer

src/assets/svg/mais.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
+</svg>

src/components/Footer/index.tsx

@@ -14,36 +14,52 @@ import instagramSvg from "../../assets/svg/Instagramlogo.svg";
 import twitterSvg from "../../assets/svg/Twitterlogo.svg";
 import youtubeSvg from "../../assets/svg/Youtubelogo.svg";
 import linkedinSvg from "../../assets/svg/Linkedinlogo.svg";
+import mais from "../../assets/svg/mais.svg";
 
 export default function Footer() {
   return (
     <footer>
-      <div className={styles.footer_top}>
-        <div className={styles.menu_list}>
+      <div className={styles.footerTop}>
+        <div className={styles.menuList}>
           <div>
-            <h2>INSTITUCIONAL</h2>
+            <div className={styles.menuH2}>
+              <h2>INSTITUCIONAL</h2>
+              <button className={styles.buttonPlus}>
+                <img src={mais} alt="mais" />
+              </button>
+            </div>
             <a>Quem Somos</a>
             <a>Política de Privacidade</a>
             <a>Segurança</a>
             <a>Seja um Revendedor</a>
           </div>
           <div>
-            <h2>DÚVIDAS</h2>
+            <div className={styles.menuH2}>
+              <h2>DÚVIDAS</h2>
+              <button className={styles.buttonPlus}>
+                <img src={mais} alt="mais" />
+              </button>
+            </div>
             <a>Entrega</a>
             <a>Pagamento</a>
             <a>Troca e Devoluções</a>
             <a>Dúvidas Frequentes</a>
           </div>
           <div>
-            <h2>FALE CONOSCO</h2>
+            <div className={styles.menuH2}>
+              <h2>FALE CONOSCO</h2>
+              <button className={styles.buttonPlus}>
+                <img src={mais} alt="mais" />
+              </button>
+            </div>
             <a>Atendimento Ao Consumidor</a>
             <a>(11) 4159 9504</a>
             <a>Atendimento Online</a>
             <a>(11) 99433-8825</a>
           </div>
         </div>
-        <div className={styles.redes_sociais}>
-          <div className={styles.redes_sociais_svg}>
+        <div className={styles.redesSociais}>
+          <div className={styles.redesSociaisSvg}>
             <img src={facebookSvg} alt="logo do facebook" />
             <img src={instagramSvg} alt="logo do instagram" />
             <img src={twitterSvg} alt="logo do twitter" />
@@ -55,7 +71,7 @@ export default function Footer() {
           </div>
         </div>
       </div>
-      <div className={styles.footer_bottom}>
+      <div className={styles.footerBottom}>
         <p>
           Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing <br /> Elit, Sed Do
           Eiusmod Tempor
@@ -70,7 +86,7 @@ export default function Footer() {
             <img src={payPalImg} alt="Bandeira PayPal" />
             <img src={boletoImg} alt="Bandeira Boleto" />
           </div>
-          <span className={styles.traço}></span>
+          <span className={styles.linha}></span>
           <div className={styles.certificado}>
             <img src={vtexPCI} alt="Certificado Vtex" />
           </div>

src/components/Footer/styles.module.scss

@@ -1,10 +1,10 @@
-.footer_top {
+.footerTop {
   display: flex;
   justify-content: space-between;
-  padding: 50px 7.81vw;
+  margin: 50px 7.81vw;
   gap: 12.34vw;
 
-  .menu_list {
+  .menuList {
     display: flex;
     gap: 121px;
     h2 {
@@ -15,6 +15,13 @@
       display: flex;
       justify-content: flex-start;
     }
+
+    .buttonPlus {
+      display: none;
+      border: 0;
+      background: white;
+    }
+
     a {
       font-size: 12px;
       white-space: nowrap;
@@ -29,7 +36,7 @@
     }
   }
 
-  .redes_sociais {
+  .redesSociais {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -42,7 +49,7 @@
     }
   }
 
-  .redes_sociais_svg {
+  .redesSociaisSvg {
     display: flex;
     gap: 0.78vw;
 
@@ -52,7 +59,7 @@
   }
 }
 
-.footer_bottom {
+.footerBottom {
   justify-content: space-between;
   background-color: #000000;
   display: flex;
@@ -86,7 +93,7 @@
       }
     }
 
-    .traço {
+    .linha {
       border-left: solid 1px #c4c4c4;
       height: 24px;
     }
@@ -105,6 +112,7 @@
     margin-left: 8.63vw;
     gap: 1.02vw;
     display: flex;
+    margin-right: 7.81vw;
 
     p {
       white-space: nowrap;
@@ -116,8 +124,34 @@
   }
 }
 
-@media screen and (max-width: 1279px) {
-  .footer_bottom {
+@media screen and (max-width: 1024px) {
+  .footerTop {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin: 24px 16px 24px 16px;
+
+    .menuList {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      .menuH2 {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .buttonPlus {
+          display: flex;
+        }
+      }
+      a {
+        display: none;
+      }
+    }
+  }
+
+  .footerBottom {
     flex-direction: column;
     align-items: flex-start;
     padding-left: 16px;
@@ -138,7 +172,7 @@
 }
 
 @media screen and (max-width: 375px) {
-  .footer_bottom {
+  .footerBottom {
     padding: 0;
 
     .pagamentos {

src/pages/Institutional/styles.module.scss

@@ -204,6 +204,7 @@
     flex-direction: column !important;
     margin-left: 0 !important;
     margin-bottom: 82px !important;
+    width: 96.88%;
 
     .layoutText {
       max-width: 96.88% !important;