src/components/Cart/Cart.tsx

@@ -0,0 +1,16 @@
+import styles from "./cart.module.scss";
+import cartImg from "./assets/image/cart.png";
+
+const Cart = () => {
+  return (
+    <a className={styles["cartLink"]} href="/">
+      <img
+        className={styles["cartImg"]}
+        src={cartImg}
+        alt="Carrinho de compras"
+      />
+    </a>
+  );
+};
+
+export { Cart };

src/components/Cart/cart.module.scss

@@ -0,0 +1,17 @@
+.cartLink {
+  display: flex;
+  width: 28px;
+  height: 28px;
+  @media screen and (min-width: 2500px) {
+    width: 54.68px;
+    height: 38.91px;
+  }
+}
+.cartImg {
+  width: 28px;
+  height: 28px;
+  @media screen and (min-width: 2500px) {
+    width: 54.68px;
+    height: 38.91px;
+  }
+}

src/components/Enter/Enter.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./enter.module.scss";
+
+const Enter = () => {
+  return (
+    <a className={styles["enterLink"]} href="/">
+      ENTRAR
+    </a>
+  );
+};
+
+export { Enter };

src/components/Enter/enter.module.scss

@@ -0,0 +1,14 @@
+.enterLink {
+  display: flex;
+  width: 53px;
+  height: 16px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  text-decoration: none;
+  @media screen and (min-width: 2500px) {
+    width: 105px;
+    height: 33px;
+    font-size: 28px;
+  }
+}

src/pages/Home.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { SearchBox } from "../components/SearchBox/SearchBox";
+import { Cart } from "../components/Cart/Cart";
 
 const Home = () => {
-  const style = { background: "white" };
+  const style = { background: "black" };
   return (
     <div style={style}>
-      <SearchBox></SearchBox>
+      <Cart></Cart>
     </div>
   );
 };