From 55538c734849b4f55c1ee219a8705a8eca06d7ee Mon Sep 17 00:00:00 2001
From: Patrick <patrickconservatorio@gmail.com>
Date: Thu, 5 Jan 2023 22:40:08 -0300
Subject: [PATCH] feat: adiciona footer responsivo

---
 src/components/footer/footer.jsx         |  48 ++++----
 src/components/footer/footer.module.scss | 136 +++++++++++++++++------
 2 files changed, 127 insertions(+), 57 deletions(-)

diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx
index 016ef88..ae80d99 100644
--- a/src/components/footer/footer.jsx
+++ b/src/components/footer/footer.jsx
@@ -15,29 +15,31 @@ import line from "./assets/Line.png";
 export function Footer() {
   return (
     <div className={style.footer}>
-      <div className={style.footerContainer}>
-        <div className={style.footerSpanContainer}>
-          <span>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor
-          </span>
-        </div>
-        <div className={style.footerCardIconsContainer}>
-          <img src={master} alt="" />
-          <img src={visa} alt="" />
-          <img src={diners} alt="" />
-          <img src={elo} alt="" />
-          <img src={hiper} alt="" />
-          <img src={pagseguro} alt="" />
-          <img src={boleto} alt="" />
-          <img src={line} alt="" />
-          <img src={vtexPci} alt="" />
-        </div>
-        <div className={style.PdDbContainer}>
-          <span>Powered By</span>
-          <img src={vtex} alt="" />
-          <span>Developed By</span>
-          <img src={m3} alt="" />
+      <div className={style.footerMainContainer}>
+        <div className={style.footerContainer}>
+          <div className={style.footerSpanContainer}>
+            <span>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor
+            </span>
+          </div>
+          <div className={style.footerCardIconsContainer}>
+            <img src={master} alt="" />
+            <img src={visa} alt="" />
+            <img src={diners} alt="" />
+            <img src={elo} alt="" />
+            <img src={hiper} alt="" />
+            <img src={pagseguro} alt="" />
+            <img src={boleto} alt="" />
+            <img src={line} alt="" />
+            <img src={vtexPci} className={style.Pci} alt="" />
+          </div>
+          <div className={style.PdDbContainer}>
+            <span>Powered By</span>
+            <img src={vtex} alt="" />
+            <span>Developed By</span>
+            <img src={m3} alt="" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/footer/footer.module.scss b/src/components/footer/footer.module.scss
index fdcf30b..ebcad54 100644
--- a/src/components/footer/footer.module.scss
+++ b/src/components/footer/footer.module.scss
@@ -5,42 +5,110 @@
   width: 100%;
   height: 64px;
   background: #000000;
-}
 
-.footerContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 1077px;
-  height: 24px;
-}
+  @media (max-width: 375px) {
+    height: 128px;
+  }
 
-.footerSpanContainer {
-  display: flex;
-  width: 234px;
-  height: 24px;
-  align-items: center;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 10px;
-  color: #ffffff;
-}
+  @media (min-width: 376px) and (max-width: 1150px) {
+    height: 134px;
+  }
 
-.footerCardIconsContainer {
-  display: flex;
-  gap: 12px;
-  justify-content: center;
-  align-items: center;
-}
+  @media (min-width: 2500px) {
+    height: 96px;
+  }
+  .footerMainContainer {
+    width: 100%;
+    max-width: 100%;
 
-.PdDbContainer {
-  display: flex;
-  gap: 13px;
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 10px;
-  color: #ffffff;
-  align-items: center;
+    .footerContainer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 100px 0 100px;
+
+      @media (min-width: 280px) and (max-width: 1150px) {
+        flex-direction: column;
+        margin: 0;
+        align-items: flex-start;
+        margin-left: 16px;
+        margin-right: 16px;
+        gap: 12px;
+      }
+
+      .footerSpanContainer {
+        display: flex;
+        width: 234px;
+        height: 24px;
+        align-items: center;
+        font-family: "Roboto";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        color: #ffffff;
+
+        @media (min-width: 280px) and (max-width: 1150px) {
+          order: 1;
+        }
+
+        @media (min-width: 2500px) {
+          font-size: 20px;
+          width: 467px;
+          height: 47px;
+        }
+      }
+
+      .footerCardIconsContainer {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+        align-items: center;
+
+        .Pci {
+          @media (min-width: 280px) and (max-width: 1150px) {
+            height: 28px;
+          }
+
+          @media (min-width: 2500px) {
+            height: 66px;
+          }
+        }
+        & img {
+          @media (min-width: 280px) and (max-width: 1150px) {
+            height: 17px;
+          }
+
+          @media (min-width: 2500px) {
+            height: 40px;
+          }
+        }
+      }
+      .PdDbContainer {
+        display: flex;
+        gap: 13px;
+        font-family: "Roboto";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        color: #ffffff;
+        align-items: center;
+
+        @media (min-width: 280px) and (max-width: 1150px) {
+          order: 2;
+        }
+
+        & span {
+          @media (min-width: 2500px) {
+            font-size: 20px;
+          }
+        }
+
+        & img {
+          @media (min-width: 2500px) {
+            height: 30px;
+          }
+        }
+      }
+    }
+  }
 }