Appointments, account stuff, adopt a pet changes

web/components/ProductProfile.js

@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+export default function ProductProfile({ prodName, categoryName, prodDesc, prodPrice, imageUrl }) {
+  return (
+    <div className="pet-detail-card">
+      <div className="pet-detail-image-wrapper">
+        <img src={imageUrl || "/images/product-placeholder.png"} alt={prodName} className="pet-detail-image" />
+      </div>
+
+      <div className="pet-detail-info">
+        <div className="pet-detail-header">
+          <h1 className="pet-detail-name">{prodName}</h1>
+        </div>
+
+        <div className="pet-detail-fields">
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Category</span>
+            <span className="pet-detail-value">{categoryName ?? "—"}</span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Price</span>
+            <span className="pet-detail-value pet-detail-price">
+              {prodPrice != null ? `$${parseFloat(prodPrice).toFixed(2)}` : "—"}
+            </span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Description</span>
+            <span className="pet-detail-value">{prodDesc ?? "—"}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}