react/Authors.tsx

@@ -0,0 +1,3 @@
+import Authors from "./components/Authors/Authors";
+
+export default Authors;

react/components/Authors/Authors.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styles from "./styles.css";
+
+const Authors = () => {
+  return (
+    <div>
+      <ul className={styles.AutoresGroup}>
+        <li className={styles.AutoresList}>
+          Powered by
+          <img
+            src="https://agenciamagma.vteximg.com.br/arquivos/logovtex-m3academy-anacarolinaduartecavalcante.svg"
+            alt="ícone logo vtex"
+          />
+        </li>
+        <li className={styles.AutoresList}>
+          Developed by
+          <img
+            src="https://agenciamagma.vteximg.com.br/arquivos/logom3-m3academy-anacarolinaduartecavalcante.svg"
+            alt="ícone logo m3"
+          />
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Authors;

react/components/Authors/styles.css

@@ -0,0 +1,20 @@
+/* Footer Credits */
+
+.AutoresGroup {
+  display: flex;
+  align-items: center;
+  column-gap: 15.73px;
+  margin: 0;
+  padding: 0;
+
+}
+
+.AutoresList {
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  color: #ffffff;
+  column-gap: 8.72px;
+}