src/components/Address/Address.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+const Address = () => {
+  return (
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor
+    </p>
+  );
+};
+
+export { Address };

src/components/Payments/Payments.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import masterImg from "./assets/image/Master.png";
+import visaImg from "./assets/image/Visa.png";
+import dinersImg from "./assets/image/Diners.png";
+import eloImg from "./assets/image/Elo.png";
+import hiperImg from "./assets/image/Hiper.png";
+import paypalImg from "./assets/image/Paypal.png";
+import boletoImg from "./assets/image/Boleto.png";
+import vtexImg from "./assets/image/vtex-pci-200.png";
+import styles from "./payments.module.scss";
+
+const Payments = () => {
+  return (
+    <ul className={styles["paymentsList"]}>
+      <li className={styles["paymentsItem"]}>
+        <img src={masterImg} alt="masterCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={visaImg} alt="visaCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={dinersImg} alt="dinersCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={eloImg} alt="eloCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={hiperImg} alt="hiperCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={paypalImg} alt="paypalCard" />
+      </li>
+      <li className={styles["paymentsItem"]}>
+        <img src={boletoImg} alt="boletoCard" />
+      </li>
+    </ul>
+  );
+};
+
+const VtexPci = () => {
+  return <img src={vtexImg} alt="vtx Pci" />;
+};
+
+export { Payments, VtexPci };

src/components/Payments/payments.module.scss

@@ -0,0 +1,4 @@
+.paymentsList {
+  display: flex;
+  flex-direction: row;
+}

src/pages/Home.tsx

@@ -1,9 +1,17 @@
 import React from "react";
 import { Header } from "../sectors/Header/Header";
+import { Address } from "../components/Address/Address";
+import { Payments, VtexPci } from "../components/Payments/Payments";
 const Home = () => {
   return (
     <div>
-      <Header />
+      {
+        //<Header />
+        //<Address />
+      }
+      <Payments></Payments>
+
+      <VtexPci></VtexPci>
     </div>
   );
 };

src/styles/common/global.scss

@@ -1,15 +1,18 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 body,
 input,
 button {
-    font-family: sans-serif;
-    font-size: 16px;
-    color: #333;
+  font-family: sans-serif;
+  font-size: 16px;
+  color: #333;
 }
 button {
-    cursor: pointer;
+  cursor: pointer;
+}
+li {
+  list-style-type: none;
 }