first commit

src/app/components/productCard.tsx

@@ -0,0 +1,26 @@
+type Product = {
+    id: string;
+    name: string;
+    image_url: string;
+    brand: { name: string };
+    description?: string;
+    price?: number;
+    vendor?: string;
+  };
+  
+  export function ProductCard({ product }: { product: Product }) {
+    return (
+      <div className="border rounded-xl p-4 shadow hover:shadow-md transition">
+        <img
+          src={product.image_url}
+          alt={product.name}
+          className="w-full h-40 object-contain mb-4"
+        />
+        <h3 className="text-lg font-semibold">{product.name}</h3>
+        <p className="text-sm text-gray-500">{product.brand?.name}</p>
+        {product.price && (
+          <p className="text-md font-bold mt-2">${product.price.toFixed(2)}</p>
+        )}
+      </div>
+    );
+  }