111

assets/css/App.css

+.App {
+    width: 100%;
+    height: auto;
+    min-height: 100vh;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  }
+  
+  body {
+    padding: 0;
+    margin: 0;
+  }
+  
\ No newline at end of file

src/index.js

+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/products.js

+import product1 from "./assets/products/1.png";
+import product2 from "./assets/products/2.png";
+import product3 from "./assets/products/3.png";
+import product4 from "./assets/products/4.png";
+import product5 from "./assets/products/5.png";
+import product6 from "./assets/products/6.webp";
+import product7 from "./assets/products/7.webp";
+import product8 from "./assets/products/8.webp";
+
+export const PRODUCTS = [
+  {
+    id: 1,
+    productName: "IPhone",
+    price: 999.0,
+    productImage: product1,
+  },
+  {
+    id: 2,
+    productName: "Macbook Pro 2022 (M1)",
+    price: 1999.0,
+    productImage: product2,
+  },
+  {
+    id: 3,
+    productName: "Cannon M50 Camera",
+    price: 699.0,
+    productImage: product3,
+  },
+  {
+    id: 4,
+    productName: "WLS Van Gogh Denim Jacket",
+    price: 228.0,
+    productImage: product4,
+  },
+  {
+    id: 5,
+    productName: "LED Light Strips",
+    price: 19.99,
+    productImage: product5,
+  },
+  {
+    id: 6,
+    productName: "SPECTRUM LS TEE",
+    price: 68.0,
+    productImage: product6,
+  },
+  {
+    id: 7,
+    productName: "AUTO SERVICE SHIRT by GOLF WANG",
+    price: 120.0,
+    productImage: product7,
+  },
+  {
+    id: 8,
+    productName: "DON'T TRIP UNSTRUCTURED HAT",
+    price: 40.0,
+    productImage: product8,
+  },
+];

src/shop.js

+import React from "react";
+import { PRODUCTS } from "../../products";
+import { Product } from "./product";
+import "./shop.css";
+
+export const Shop = () => {
+  return (
+    <div className="shop">
+      <div className="shopTitle">
+        <h1>PedroTech Shop</h1>
+      </div>
+
+      <div className="products">
+        {PRODUCTS.map((product) => (
+          <Product data={product} />
+        ))}
+      </div>
+    </div>
+  );
+};