src/components/Footer/index.tsx

@@ -1,10 +1,14 @@
 import React from "react";
+import { FooterBottom } from "../FooterBottom";
+import { FooterTop } from "../FooterTop";
 import { NewsLetter } from "../NewsLetter";
 
 const Footer = () => {
   return (
     <footer>
       <NewsLetter />
+      <FooterTop />
+      <FooterBottom />
     </footer>
   );
 };

src/components/FooterBottom/index.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import styles from "./styles.module.scss";
+import master from "../../assets/images/Master.png";
+import visa from "../../assets/images/Visa.png";
+import amExp from "../../assets/images/AmExp.png";
+import elo from "../../assets/images/Elo.png";
+import hiper from "../../assets/images/Hiper.png";
+import payPal from "../../assets/images/PayPal.png";
+import boleto from "../../assets/images/Boleto.png";
+import vtexPci from "../../assets/images/vtex-pci-200.png";
+import vtex from "../../assets/images/Vtex.png";
+import m3 from "../../assets/images/M3.png";
+
+const FooterBottom = () => {
+  return (
+    <div className={styles["footerBottom"]}>
+      <div className={styles["footerBottom__content"]}>
+        <div className={styles["footerBottom__corporateName"]}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor
+          </p>
+        </div>
+        <div className={styles["footerBottom__paymentMethods"]}>
+          <div className={styles["footerBottom__paymentIcons"]}>
+            <ul>
+              <li>
+                <img src={master} alt="" />
+              </li>
+              <li>
+                <img src={visa} alt="" />
+              </li>
+              <li>
+                <img src={amExp} alt="" />
+              </li>
+              <li>
+                <img src={elo} alt="" />
+              </li>
+              <li>
+                <img src={hiper} alt="" />
+              </li>
+              <li>
+                <img src={payPal} alt="" />
+              </li>
+              <li>
+                <img src={boleto} alt="" />
+              </li>
+            </ul>
+          </div>
+          <div className={styles["footerBottom__vtexPci"]}>
+            <img src={vtexPci} alt="Selo Vtex" />
+          </div>
+        </div>
+        <div className={styles["footerBottom__authors"]}>
+          <div className={styles["footerBottom__vtex"]}>
+            <span className={styles["poweredBy"]}>Powered by</span>
+            <span>
+              <img src={vtex} alt="Vtex" />
+            </span>
+          </div>
+          <div className={styles["footerBottom__m3"]}>
+            <span className={styles["developedBy"]}>Developed by</span>
+            <span>
+              <img src={m3} alt="M3" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { FooterBottom };

src/components/FooterBottom/styles.module.scss

@@ -0,0 +1,124 @@
+.footerBottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 64px;
+  background: var(--black-500);
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 84.375%;
+    height: 34px;
+  }
+
+  &__corporateName {
+    width: 21.707%;
+    height: 24px;
+
+    p {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      text-transform: capitalize;
+      color: var(--white-500);
+    }
+  }
+
+  &__paymentMethods {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 36.921%;
+    height: 100%;
+  }
+
+  &__paymentIcons {
+    border-right: 1px solid var(--gray-100);
+    width: 82.762%;
+    height: 20px;
+
+    ul {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &:last-child {
+        margin-right: 12px;
+      }
+
+      img {
+        width: 100%;
+        height: 20px;
+      }
+    }
+  }
+
+  &__vtexPci {
+    width: 13.696%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__authors {
+    display: flex;
+    justify-content: space-between;
+    width: 20.965%;
+    height: 16px;
+  }
+
+  &__vtex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 49.03%;
+    height: 100%;
+
+    .poweredBy {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      text-transform: capitalize;
+      color: var(--white-500);
+    }
+
+    img {
+      width: 100%;
+      height: 16px;
+    }
+  }
+
+  &__m3 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 45.491%;
+    height: 100%;
+
+    .developedBy {
+      font-weight: 400;
+      font-size: 10px;
+      line-height: 12px;
+      text-transform: capitalize;
+      color: var(--white-500);
+    }
+
+    img {
+      width: 100%;
+      height: 16px;
+    }
+  }
+
+  @media (min-width: 1025px) and (max-width: 1128px) {
+    .poweredBy,
+    .developedBy {
+      font-size: 8px;
+    }
+  }
+}

src/components/FooterTop/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./styles.module.scss";
+
+const FooterTop = () => {
+  return <div className={styles["footerTop"]}></div>;
+};
+
+export { FooterTop };

src/components/FooterTop/styles.module.scss

@@ -0,0 +1,6 @@
+.footerTop {
+  border-width: 0px 0px 1px 1px;
+  border-style: solid;
+  border-color: var(--black-500);
+  height: 239px;
+}