feat(web): scalable product grid — compact, fully-clickable shop tiles

The public cart was a single/double column of oversized cards that didn't
scale past a handful of products (and looked heavy on mobile). Redesign:
- ProductCard is now a compact, whole-card-clickable tile with a retailer
  chip on the image, 2-line clamped title, price, and a 'Shop ↗' affordance.
- Public page grid is 2-up on mobile, 3-up on desktop (was 1/2-up).
- Editor live preview mirrors the real 2-up mobile layout.

Author: mayur-tolexo

web/app/(public)/c/[slug]/page.tsx

@@ -56,10 +56,10 @@ export default async function PublicCartPage({ params }: { params: { slug: strin
         {cart.products.length === 0 ? (
           <p className="text-center text-muted py-16">This cart is still being curated. Check back soon.</p>
         ) : (
-          <div className="grid gap-6 md:grid-cols-2">
+          <div className="grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-3">
             {cart.products.map((p, i) => (
               <RevealOnScroll key={p.id} index={i}>
-                <ProductCard product={p} eagerImage={i < 2} />
+                <ProductCard product={p} eagerImage={i < 4} />
               </RevealOnScroll>
             ))}
           </div>

web/app/dashboard/carts/[id]/editor.tsx

@@ -336,14 +336,16 @@ function PreviewCartPage({ cart }: { cart: Cart }) {
           <p className="font-serif text-xl leading-tight">{cart.title}</p>
         </div>
       </div>
-      <div className="p-3 space-y-3">
+      <div className="p-3">
         {cart.products.length === 0 ? (
           <p className="text-xs text-muted text-center py-6">No products yet.</p>
         ) : (
-          cart.products.slice(0, 3).map((p) => <ProductCard key={p.id} product={p} />)
+          <div className="grid grid-cols-2 gap-2">
+            {cart.products.slice(0, 4).map((p) => <ProductCard key={p.id} product={p} />)}
+          </div>
         )}
-        {cart.products.length > 3 && (
-          <p className="text-center text-xs text-muted">+ {cart.products.length - 3} more on the live page</p>
+        {cart.products.length > 4 && (
+          <p className="text-center text-xs text-muted mt-3">+ {cart.products.length - 4} more on the live page</p>
         )}
       </div>
     </div>

web/components/product-card.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useState } from "react";
-import { ExternalLink } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
 import type { Product } from "@/lib/types";
 import { RetailerIcon, retailerLabel } from "./retailer-icon";
 
@@ -11,54 +11,51 @@ interface ProductCardProps {
   eagerImage?: boolean;
 }
 
+// Compact, fully-clickable product tile built for a grid — scales cleanly
+// from a few products to dozens. The whole card links through the redirect
+// service (/go/{slug}) so clicks are logged and affiliate-tagged.
 export function ProductCard({ product, eagerImage = false }: ProductCardProps) {
   const [imgFailed, setImgFailed] = useState(false);
   const imgSrc = imgFailed ? "/placeholder-product.svg" : product.imageUrl;
-
-  // Shop via the redirect service so the click is logged and the affiliate
-  // tag is applied. /go/{slug} is rewritten to shoplit-redirect (see
-  // next.config.mjs). Fall back to the raw URL if a slug is somehow missing.
   const shopHref = product.goSlug ? `/go/${product.goSlug}` : product.originalUrl;
 
   return (
-    <article className="group rounded-xl overflow-hidden border border-rule bg-cream transition-shadow hover:shadow-md">
-      <a
-        href={shopHref}
-        target="_blank"
-        rel="noopener noreferrer sponsored"
-        aria-label={`Shop ${product.title} on ${retailerLabel(product.retailer)}`}
-      >
-        <div className="relative aspect-square bg-paper">
-          <Image
-            src={imgSrc}
-            alt={product.title}
-            fill
-            sizes="(max-width: 768px) 100vw, 50vw"
-            priority={eagerImage}
-            loading={eagerImage ? "eager" : "lazy"}
-            className="object-cover transition-transform duration-300 group-hover:scale-[1.02]"
-            unoptimized
-            onError={() => setImgFailed(true)}
-          />
-        </div>
-      </a>
-      <div className="p-5 sm:p-6">
-        <h3 className="font-serif text-xl leading-tight mb-1">{product.title}</h3>
+    <a
+      href={shopHref}
+      target="_blank"
+      rel="noopener noreferrer sponsored"
+      aria-label={`Shop ${product.title} on ${retailerLabel(product.retailer)}`}
+      className="group flex flex-col rounded-xl overflow-hidden border border-rule bg-cream transition-all hover:shadow-md hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+    >
+      <div className="relative aspect-square bg-paper">
+        <Image
+          src={imgSrc}
+          alt={product.title}
+          fill
+          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 300px"
+          priority={eagerImage}
+          loading={eagerImage ? "eager" : "lazy"}
+          className="object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+          unoptimized
+          onError={() => setImgFailed(true)}
+        />
+        <span className="absolute top-2 left-2 inline-flex items-center gap-1 rounded-full bg-cream/90 backdrop-blur px-2 py-0.5 text-[10px] font-medium text-ink">
+          <RetailerIcon retailer={product.retailer} size={11} />
+          {retailerLabel(product.retailer)}
+        </span>
+      </div>
+      <div className="flex flex-1 flex-col p-3 sm:p-4">
+        <h3 className="font-serif text-sm sm:text-base leading-snug line-clamp-2 mb-1">{product.title}</h3>
         {product.note && (
-          <p className="italic text-sm text-muted mb-2 leading-relaxed">&ldquo;{product.note}&rdquo;</p>
+          <p className="italic text-xs text-muted line-clamp-1 mb-1.5">&ldquo;{product.note}&rdquo;</p>
         )}
-        {product.priceText && <p className="text-sm text-muted mb-4">{product.priceText}</p>}
-        <a
-          href={shopHref}
-          target="_blank"
-          rel="noopener noreferrer sponsored"
-          className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-accent text-cream font-medium py-3 px-4 transition-opacity hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-cream"
-        >
-          <RetailerIcon retailer={product.retailer} size={16} />
-          Shop on {retailerLabel(product.retailer)}
-          <ExternalLink size={14} aria-hidden />
-        </a>
+        <div className="mt-auto flex items-center justify-between pt-2">
+          <span className="text-sm font-medium text-ink">{product.priceText || " "}</span>
+          <span className="inline-flex items-center gap-0.5 text-xs font-medium text-accent transition-all group-hover:gap-1.5">
+            Shop <ArrowUpRight size={14} aria-hidden />
+          </span>
+        </div>
       </div>
-    </article>
+    </a>
   );
 }