feat: parte footer final finalizada e responsiva

adilson-fernando/src/components/Footer/Footer.tsx

@@ -3,12 +3,56 @@ import React from "react";
 import "../../styles/Global.scss";
 import "../../styles/Variaveis.scss";
 
-import "../../styles/Footer.module.scss";
+import mastercard from "../../assets/icons/mastercard.jpg"
+import visa from "../../assets/icons/visa.jpg"
+import american from "../../assets/icons/american.jpg"
+import elo from "../../assets/icons/elo.jpg"
+import hipercard from "../../assets/icons/hipercard.png"
+import paypal from "../../assets/icons/paypal.jpg"
+import boleto from "../../assets/icons/boleto.jpg"
+import barravertical from "../../assets/icons/barravertical.jpg"
+import vtexcertificado from "../../assets/icons/vtexcertificado.jpg"
+import logoVtex from "../../assets/logos/logoVtex.png"
+import logoM3 from "../../assets/logos/logoM3.jpg"
+
+import styles from  "../../styles/Footer.module.scss";
+import MenuFooter from "./MenuFooter";
 
 const Footer = () => {
   return (
-    <footer>
-      
+    <footer className={styles["footer"]}>
+      <MenuFooter/>
+      <div className={styles["conteiner-info"]}>
+        
+        <div className={styles["info-text-desktop"]}>
+          <h2 className={styles["text-h2"]}>Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
+          <h2 className={styles["text-h2"]}>Elit, sed do eiusmod tempor</h2>
+        </div>
+
+        <div className={styles["info-icons"]}>
+          <img className={styles["img-icons"]} src={mastercard} alt="mastercard" />
+          <img className={styles["img-icons"]} src={visa} alt="visa" />
+          <img className={styles["img-icons"]} src={american} alt="american" />
+          <img className={styles["img-icons"]} src={elo} alt="elo" />
+          <img className={styles["img-icons"]} src={hipercard} alt="hipercard" />
+          <img className={styles["img-icons"]} src={paypal} alt="paypal" />
+          <img className={styles["img-icons"]} src={boleto} alt="boleto" />
+          <img className={styles["img-icons-barra"]} src={barravertical} alt="barravetical" />
+          <img className={styles["img-icons-vtex"]} src={vtexcertificado} alt="vtex certivicado" />
+        </div>
+
+        <div className={styles["info-text-mobile"]}>
+          <h2 className={styles["text-h2-mobile"]}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</h2>
+        </div>
+
+        <div className={styles["info-devs"]}>
+          <p className={styles["info-devs-p"]}>Powered by</p>
+          <img className={styles["info-devs-imgvtex"]} src={logoVtex} alt="logoVtex" />
+          <p className={styles["info-devs-p"]}>Developed by</p>
+          <img className={styles["info-devs-imgm3"]} src={logoM3} alt="logoM3" />
+        </div>
+
+      </div>
     </footer>
   );
 

adilson-fernando/src/components/Footer/MenuFooter.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import "../../styles/Global.scss";
+import "../../styles/Variaveis.scss";
+
+
+import styles from  "../../styles/MenuFooter.module.scss";
+
+const MenuFooter = () => {
+    return (
+      <div>
+        
+      </div>
+    );
+  
+  };
+  
+  export default MenuFooter;
+  

adilson-fernando/src/styles/Footer.module.scss

@@ -0,0 +1,149 @@
+.footer{
+
+    .conteiner-info{
+        display: flex;
+        background: black;
+        @media (max-width: 1024px) {
+            flex-direction: column;
+        }
+        .info-text-desktop{
+            margin-top: 20px;
+            margin-left: 7.813%;
+            padding-bottom: 20px;
+            @media (min-width: 2500px){
+              margin-left: 4%;
+              margin-top: 25px;
+            }
+            @media (max-width: 1024px) {
+                display: none;
+            }
+            .text-h2{
+                font-family: 'Roboto',sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 10px;
+                line-height: 12px;
+                text-transform: capitalize;
+                color: #FFFFFF;
+                @media (min-width: 2500px){
+                    font-size: 20px;
+                    line-height: 23px;
+                }
+            }
+        }
+        .info-icons{
+            width:39.765625%;
+            display: flex;
+            align-items: center;
+            margin-top: 15px;
+            padding-bottom: 15px;
+            padding-left:8.625781% ;
+            @media (min-width: 2500px) {
+                padding-left: 14.7368%;
+                width: 42.4168%;
+            }
+            @media (max-width: 1024px) {
+                width: 91.7333%;
+                padding-left:16px ;
+            }
+           .img-icons{
+            width: 36px;
+            height: 20.2px;
+            margin-right: 12px;
+            @media (min-width: 2500px){
+                width: 70px;
+                height: 39.27px;
+            }
+            @media (max-width: 1024px) {
+                width: 30px;
+                height:16.97px ;
+                margin-right: 11.33px;
+            }
+           }
+           .img-icons-barra{
+                width: 1px;
+                height:24px ;
+                margin-right: 13px;
+            @media (max-width: 1024px) {
+                height:21px ;
+                margin-right: 11.33px;
+            }
+           }
+           .img-icons-vtex{
+                width: 54.61px;
+                height: 34px;
+            @media (min-width: 2500px){
+                width: 106px ;
+                height: 66px;
+            }
+            @media (max-width: 1024px) {
+                width: 45px;
+                height: 28px;
+            }
+           }
+        }
+        .info-text-mobile{
+            display: none;
+            @media (max-width: 1024px) {
+                display: block;
+                margin-left: 16px;
+                margin-bottom: 15px;
+            }
+            .text-h2-mobile{
+                font-family: 'Roboto',sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 10px;
+                line-height: 12px;
+                text-transform: capitalize;
+                color: #FFFFFF;
+            }
+        }
+        .info-devs{
+            display: flex;
+            align-items: center;
+            padding-left:8.625781% ;
+            width: 26.328125%;
+            @media (min-width: 2500px) {
+                width:30.9036%;
+                padding-left: 14.7368%;
+            }
+            @media (max-width: 1024px) {
+                width: auto;
+                padding-left: 16px;
+                padding-bottom: 15px;
+            }
+            .info-devs-p{
+                font-family: 'Roboto',sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 10px;
+                line-height: 12px;
+                text-transform: capitalize;
+                color: #FFFFFF;
+                margin-right: 12px;
+                @media (min-width: 2500px) {
+                    font-size: 20px;
+                    line-height: 23px;
+                }
+            }
+            .info-devs-imgvtex{
+                width: 44.92px;
+                height: 16px;
+                margin-right: 12px;
+                @media (min-width: 2500px) {
+                    width: 84.22px;
+                    height: 30px;
+                } 
+            }
+            .info-devs-imgm3{
+                width: 28.66px ;
+                height: 15.65px;
+                @media (min-width: 2500px) {
+                    width: 54.95px;
+                    height: 30px;
+                } 
+            }
+        }
+    }
+}