Connect the storefront to Meshkee catalog, blogs, and static image slots.

Wire homepage specials, product/blog pages, instant search, and the customer portal so the live pharmacy site can be managed from the dashboard.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/ui/ProductCard.tsx

@@ -5,19 +5,25 @@ import { faDigits, formatPrice } from "@/lib/format";
 import type { Product } from "@/lib/data";
 
 export function ProductCard({ product }: { product: Product }) {
+  const href = product.href ?? `/products/${encodeURIComponent(product.id)}`;
+
   return (
     <article className="group flex h-full flex-col rounded-2xl bg-white p-3">
-      <Link href="#" className="relative overflow-hidden rounded-xl bg-sky">
+      <Link href={href} className="relative overflow-hidden rounded-xl bg-sky">
         {product.discount ? (
           <span className="absolute top-2 right-2 z-10 rounded-md bg-sale px-1.5 py-0.5 text-[11px] font-bold text-white">
             {faDigits(product.discount)}٪
           </span>
         ) : null}
-        <Placeholder src={product.image} className="aspect-square w-full object-cover transition group-hover:scale-[1.03]" />
+        <Placeholder src={product.image} fallbackSrc="/placeholders/product.svg" className="aspect-square w-full object-cover transition group-hover:scale-[1.03]" />
       </Link>
-      <p className="font-latin mt-3 text-[11px] tracking-wide text-primary">{product.brand}</p>
+      {product.brand ? (
+        <p className="font-latin mt-3 text-[11px] tracking-wide text-primary">{product.brand}</p>
+      ) : (
+        <p className="mt-3 h-[16px]" />
+      )}
       <h3 className="mt-1 line-clamp-2 min-h-[40px] text-[13px] leading-5 text-ink">
-        <Link href="#">{product.title}</Link>
+        <Link href={href}>{product.title}</Link>
       </h3>
       <div className="mt-auto pt-3">
         {product.oldPrice ? (
@@ -27,16 +33,22 @@ export function ProductCard({ product }: { product: Product }) {
         )}
         <div className="mt-1 flex items-end justify-between gap-2">
           <p className="text-[14px] font-bold text-navy">
-            {formatPrice(product.price)}
-            <span className="mr-1 text-[11px] font-medium text-muted">تومان</span>
+            {product.price != null ? (
+              <>
+                {formatPrice(product.price)}
+                <span className="mr-1 text-[11px] font-medium text-muted">تومان</span>
+              </>
+            ) : (
+              <span className="text-[12px] font-medium text-muted">تماس بگیرید</span>
+            )}
           </p>
-          <button
-            type="button"
+          <Link
+            href={href}
             className="grid size-9 place-items-center rounded-xl bg-primary text-white transition hover:bg-primary-hover"
-            aria-label="افزودن به سبد خرید"
+            aria-label="مشاهده محصول"
           >
             <ShoppingBag className="size-4" />
-          </button>
+          </Link>
         </div>
       </div>
     </article>