Appointments, account stuff, adopt a pet changes

web/components/ProductCard.js

@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export default function ProductCard({ prodId, prodName, categoryName, prodPrice, imageUrl }) {
+  return (
+    <Link href={`/products/${prodId}`} className="pet-card">
+      <div className="pet-card-image-wrapper">
+        <img src={imageUrl || "/images/product-placeholder.png"} alt={prodName} className="pet-card-image" />
+      </div>
+      <div className="pet-card-body">
+        <h3 className="pet-card-name">{prodName}</h3>
+        <p className="pet-card-species">{categoryName}</p>
+        {prodPrice != null && (
+          <span className="product-card-price">${parseFloat(prodPrice).toFixed(2)}</span>
+        )}
+      </div>
+    </Link>
+  );
+}