From 365364fd1690b78785b565f1d758c965d6af54ce Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Sun, 1 Jan 2023 09:07:31 -0300
Subject: [PATCH] feat(footer): tornando footer bottom responsivo

---
 src/components/Footer/Footer.module.scss | 137 ++++++++++++++++++++++-
 src/components/Footer/FooterBottom.tsx   |  20 ++--
 2 files changed, 143 insertions(+), 14 deletions(-)

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index c08acb7..91fe1ee 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -20,6 +20,21 @@ footer {
     justify-content: space-between;
     align-items: center;
     position: relative;
+    @media (min-width: 2500px) {
+        width: 92.002%;
+        height: 96px;
+    }
+    @media (max-width: 1025px) {
+        width: 96.875%;
+        height: 116px;
+        flex-direction: column;
+        align-items: flex-start;
+        margin: 15px auto;
+        row-gap: 15px;
+    }
+    @media (max-width: 376px) {
+        width: 91.484%;
+    }
     & ul {
         margin-top: 0;
         margin-bottom: 0;
@@ -37,6 +52,14 @@ footer {
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
+        @media (min-width: 2500px) {
+            font-size: 20px;
+            line-height: 23px;
+            max-width: 467px;
+        }
+        @media (max-width: 1025px) {
+            order: 2;
+        }
     }
     & .Metodos__de__Pagamento {
         display: flex;
@@ -45,16 +68,96 @@ footer {
         max-width: 398.61px;
         padding-left: 0;
         column-gap: 12px;
+        @media (min-width: 2500px) {
+            max-width: 692px;
+        }
+        @media (max-width: 1025px) {
+            order: 1;
+        }
+        @media (max-width: 376px) {
+            column-gap: 11.33px;
+        }
         & .Line {
-            width: 0px;
+            width: 1px;
             height: 24px;
-            border: 1px solid $primary-600;
-            transform: rotate(359deg);
+            background: $primary-600;
             flex: none;
             flex-grow: 0;
+            @media (max-width: 1025px) {
+                width: 1px;
+                height: 20.36px;
+            }
         }
         & li {
-            width: auto;
+            & img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        & .MasterCard,
+        .Boleto {
+            width: 10.457%;
+            height: 20.2px;
+            @media (min-width: 2500px) {
+                width: 12.92%;
+                height: 39.27px;
+            }
+            @media (max-width: 1025px) {
+                width: 9.26%;
+                height: 16.97px;
+            }
+        }
+        & .Visa,
+        .Diners,
+        .HiperCard {
+            width: 10.55%;
+            height: 20.13px;
+            @media (min-width: 2500px) {
+                width: 12.92%;
+                height: 40.25px;
+            }
+            @media (max-width: 1025px) {
+                width: 8.79%;
+                height: 16.97px;
+            }
+        }
+
+        & .Elo {
+            width: 11.284%;
+            height: 20.26px;
+            @media (min-width: 2500px) {
+                width: 12.92%;
+                height: 38.33px;
+            }
+            @media (max-width: 1025px) {
+                width: 8.866%;
+                height: 16.97px;
+            }
+        }
+
+        & .Pagseguro {
+            width: 10.485%;
+            height: 19.07px;
+            @media (min-width: 2500px) {
+                width: 12.92%;
+                height: 39.27px;
+            }
+            @media (max-width: 1025px) {
+                width: 8.58%;
+                height: 16.97px;
+            }
+        }
+        & .VtexPci {
+            width: 17.173%;
+            height: 34px;
+            @media (min-width: 2500px) {
+                width: 15.347%;
+                height: 66px;
+            }
+            @media (max-width: 1025px) {
+                width: 12.735%;
+                height: 28px;
+            }
         }
     }
     & .Autores {
@@ -62,6 +165,10 @@ footer {
         display: flex;
         align-items: center;
         column-gap: 13px;
+        @media (max-width: 1025px) {
+            order: 3;
+            column-gap: 12.73px;
+        }
         & li {
             column-gap: 13px;
             display: flex;
@@ -73,6 +180,28 @@ footer {
             line-height: 12px;
             text-transform: capitalize;
             color: $white;
+            @media (min-width: 2500px) {
+                font-size: 20px;
+                line-height: 23px;
+            }
+            @media (max-width: 1025px) {
+                column-gap: 12.97px;
+            }
+            & .Vtex {
+                width: 44.92px;
+                height: 16px;
+                @media (min-width: 2500px) {
+                    width: 84.22px;
+                    height: 30px;
+                }
+            }
+            & .M3 {
+                width: 28.66px;
+                height: auto;
+                @media (min-width: 2500px) {
+                    width: 54.95px;
+                }
+            }
         }
     }
 }
diff --git a/src/components/Footer/FooterBottom.tsx b/src/components/Footer/FooterBottom.tsx
index 1d9ce9f..2318401 100644
--- a/src/components/Footer/FooterBottom.tsx
+++ b/src/components/Footer/FooterBottom.tsx
@@ -18,19 +18,19 @@ const FooterBottom = () => {
         tempor
       </span>
       <ul className={styles["Metodos__de__Pagamento"]}>
-        <li><img src={MasterCard} alt="ícone do cartão master card"/></li>
-        <li><img src={Visa} alt="ícone do cartão visa"/></li>
-        <li><img src={Diners} alt="ícone do cartão diners"/></li>
-        <li><img src={Elo} alt="ícone do cartão elo"/></li>
-        <li><img src={HiperCard} alt="ícone do cartão hipercard"/></li>
-        <li><img src={Pagseguro} alt="ícone do meio de pagamento pagseguro"/></li>
-        <li><img src={Boleto} alt="ícone do meio de pagamento boleto"/></li>
+        <li className={styles["MasterCard"]}><img src={MasterCard} alt="ícone do cartão master card"/></li>
+        <li className={styles["Visa"]}><img src={Visa} alt="ícone do cartão visa"/></li>
+        <li className={styles["Diners"]}><img src={Diners} alt="ícone do cartão diners"/></li>
+        <li className={styles["Elo"]}><img src={Elo} alt="ícone do cartão elo"/></li>
+        <li className={styles["HiperCard"]}><img src={HiperCard} alt="ícone do cartão hipercard"/></li>
+        <li className={styles["Pagseguro"]}><img src={Pagseguro} alt="ícone do meio de pagamento pagseguro"/></li>
+        <li className={styles["Boleto"]}><img src={Boleto} alt="ícone do meio de pagamento boleto"/></li>
         <span className={styles["Line"]}></span>
-        <li><img src={VtexPci} alt="ícone do vtex pci"/></li>
+        <li className={styles["VtexPci"]}><img src={VtexPci} alt="ícone do vtex pci"/></li>
       </ul>
       <ul className={styles["Autores"]}>
-        <li>Powered by <img src={M3} alt="ícone do M3"/></li>
-        <li>Developed by <img src={Vtex} alt="ícone da Vtex"/></li>
+        <li>Developed by <img src={Vtex} className={styles["Vtex"]} alt="ícone da Vtex"/></li>
+        <li>Powered by <img src={M3} className={styles["M3"]} alt="ícone do M3"/></li>
       </ul>
     </>
   );