desafio-react-typescript/src/components/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import FooterBottom from "./components/FooterBottom/FooterBottom";
 import FooterTop from "./components/FooterTop.tsx/FooterTop";
 
 import Newsletter from "./components/Newsletter/Newsletter";
@@ -8,6 +9,7 @@ const Footer = () => {
     <footer>
       <Newsletter />
       <FooterTop />
+      <FooterBottom />
     </footer>
   );
 };

desafio-react-typescript/src/components/Footer/components/FooterBottom/FooterBottom.module.scss

@@ -0,0 +1,173 @@
+@import "../../../../styles/all.scss";
+
+.footerBottom {
+  padding: 20px 100px;
+  background-color: $black;
+
+  @include display(flex, row, center, space-between);
+
+  @include mq($lg, max) {
+    padding: 15px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+
+  @include mq($xl, min) {
+    padding: 24.5px 100px;
+  }
+
+  &__razao-social-wrapper {
+    width: 21.6666666667%;
+
+    @include mq($lg, max) {
+      order: 2;
+      min-width: 234px;
+    }
+
+    @include mq($xl, min) {
+      width: 20.3043478%;
+    }
+  }
+
+  &__pagamento-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 36.90833333%;
+
+    @include mq($lg, max) {
+      order: 1;
+      width: 100%;
+    }
+
+    @include mq($xl, min) {
+      width: 30.0869565%;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &__autores-wrapper {
+    min-width: 226.58px;
+    width: 20.97962%;
+    @include display(flex, row, center, flex-end);
+
+    gap: 13px;
+
+    @include mq($lg, max) {
+      order: 3;
+
+      justify-content: start;
+      width: 22.8407258%;
+      min-width: 224.28px;
+    }
+
+    @include mq($xl, min) {
+      gap: 12px;
+      width: 17.5726086%;
+    }
+  }
+
+  &__razao-social,
+  &__span {
+    @include fontStyle(400, 10px, 12px, $white);
+
+    @include mq($xl, min) {
+      @include fontStyleResponsive(20px, 23px);
+    }
+  }
+
+  &__pagamento-divider {
+    width: 1px;
+    height: 24px;
+    border-right: 1px solid $primary-600;
+
+    @include mq($sm, max) {
+      height: 20px;
+    }
+  }
+
+  &__pagamento-masterCard,
+  &__pagamento-boleto {
+    width: 9.0314%;
+
+    @include mq($lg, max) {
+      width: 3.63%;
+    }
+  }
+
+  &__pagamento-visa,
+  &__pagamento-amex,
+  &__pagamento-hiperCard {
+    width: 8.784%;
+
+    @include mq($lg, max) {
+      width: 3.529%;
+    }
+  }
+
+  &__pagamento-elo {
+    width: 9.283%;
+
+    @include mq($lg, max) {
+      width: 3.73%;
+    }
+  }
+
+  &__pagamento-payPal {
+    width: 8.562%;
+
+    @include mq($lg, max) {
+      width: 3.428%;
+    }
+  }
+
+  &__pagamento-vtexPCI {
+    width: 13.7%;
+
+    @include mq($lg, max) {
+      width: 5.505%;
+    }
+    @include mq($sm, max) {
+      width: 13.71%;
+    }
+
+    @include mq($xl, min) {
+      width: 15.35%;
+    }
+  }
+
+  &__pagamento-masterCard,
+  &__pagamento-visa,
+  &__pagamento-amex,
+  &__pagamento-elo,
+  &__pagamento-hiperCard,
+  &__pagamento-payPal,
+  &__pagamento-boleto {
+    @include mq($sm, max) {
+      width: 11.41%;
+    }
+    @include mq($xl, min) {
+      width: 10.116%;
+    }
+  }
+
+  &__vtex {
+    width: 19.83%;
+
+    @include mq($xl, min) {
+      width: 20.84%;
+    }
+  }
+
+  &__m3 {
+    width: 12.6489%;
+
+    @include mq($xl, min) {
+      width: 13.6%;
+    }
+  }
+}

desafio-react-typescript/src/components/Footer/components/FooterBottom/FooterBottom.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+import masterCard from "../../../../assets/imgs/masterCardM3Academy.png";
+import visa from "../../../../assets/imgs/visaM3Academy.png";
+import amex from "../../../../assets/imgs/amexM3Academy.png";
+import elo from "../../../../assets/imgs/eloM3Academy.png";
+import hiperCard from "../../../../assets/imgs/hiperCardM3Academy.png";
+import payPal from "../../../../assets/imgs/payPalM3Academy.png";
+import boleto from "../../../../assets/imgs/boletoM3Academy.png";
+import vtexPCI from "../../../../assets/imgs/vtexPCIM3Academy.png";
+
+import logoVTEX from "../../../../assets/imgs/logoVTEXM3Academy.png";
+import logoM3 from "../../../../assets/imgs/logoM3M3Academy.png";
+
+import styles from "./FooterBottom.module.scss";
+
+const FooterBottom = () => {
+  return (
+    <div className={styles["footerBottom"]}>
+      <div className={styles["footerBottom__razao-social-wrapper"]}>
+        <p className={styles["footerBottom__razao-social"]}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor
+        </p>
+      </div>
+      <ul className={styles["footerBottom__pagamento-wrapper"]}>
+        <li className={styles["footerBottom__pagamento-masterCard"]}>
+          <img src={masterCard} alt="" />
+        </li>
+        <li className={styles["footerBottom__pagamento-visa"]}>
+          <img src={visa} alt="" />
+        </li>
+        <li className={styles["footerBottom__pagamento-amex"]}>
+          <img src={amex} alt="" />
+        </li>
+        <li className={styles["footerBottom__pagamento-elo"]}>
+          <img src={elo} alt="" />
+        </li>
+        <li className={styles["footerBottom__pagamento-hiperCard"]}>
+          <img src={hiperCard} alt="" />
+        </li>
+        <li className={styles["footerBottom__pagamento-payPal"]}>
+          <img src={payPal} alt="" />
+        </li>
+        <li className={styles["footerBottom__pagamento-boleto"]}>
+          <img src={boleto} alt="" />
+        </li>
+        <li className={styles["footerBottom__pagamento-divider"]}></li>
+        <li className={styles["footerBottom__pagamento-vtexPCI"]}>
+          <img src={vtexPCI} alt="" />
+        </li>
+      </ul>
+      <div className={styles["footerBottom__autores-wrapper"]}>
+        <span className={styles["footerBottom__span"]}>Powered By</span>
+        <img className={styles["footerBottom__vtex"]} src={logoVTEX} alt="" />
+        <span className={styles["footerBottom__span"]}>Developed By</span>
+        <img className={styles["footerBottom__m3"]} src={logoM3} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default FooterBottom;