From 1481b6e466f4372ed6d7305608104de87c001d9d Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 07:19:36 +0100
Subject: [PATCH] Redesign product cards with unique, professional styling

- Split layout: image + info with left border accent
- Product names prominently displayed using serif font
- Unique left border that animates on hover
- Better visual hierarchy and spacing
- Smooth animations (scale, color transitions)
- Clear "Explore" CTA with arrow
- Distinctive design that stands out from generic e-commerce sites

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/ProductCard.tsx | 70 +++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
index a24ba42..95f6689 100644
--- a/src/components/ProductCard.tsx
+++ b/src/components/ProductCard.tsx
@@ -16,40 +16,64 @@ export default function ProductCard({
   const isNew = Date.now() - new Date(product.createdAt).getTime() < NEW_WINDOW_MS;
 
   return (
-    <Link href={`${hrefBase}/${product.slug}`} className="group block">
-      <div className="relative border border-line bg-surface p-6 shadow-sm transition-all duration-300 group-hover:-translate-y-1 group-hover:border-ink group-hover:shadow-lg">
-        {isNew && (
-          <span className="tag-label absolute left-3 top-3 rounded-full bg-splash-blue/10 px-2.5 py-1 text-splash-blue">
-            New
-          </span>
-        )}
-        {product.onSale && (
-          <span className="tag-label absolute right-3 top-3 rounded-full bg-splash-pink/10 px-2.5 py-1 text-splash-pink">
-            Sale
-          </span>
-        )}
-        <div className="mx-auto aspect-square w-full max-w-[280px] overflow-hidden">
+    <Link href={`${hrefBase}/${product.slug}`} className="group flex flex-col">
+      {/* Image Container - Top 2/3 */}
+      <div className="relative overflow-hidden bg-surface transition-all duration-500 group-hover:bg-ink/5">
+        <div className="aspect-square w-full flex items-center justify-center p-8">
           {thumbnail ? (
             <img
               src={thumbnail}
               alt={product.name}
-              className="h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
+              className="h-full w-full object-contain transition-transform duration-500 group-hover:scale-110"
             />
           ) : (
-            <div className="transition-transform duration-300 group-hover:scale-105">
+            <div className="transition-transform duration-500 group-hover:scale-110">
               <ProductMockup mockup={product.mockup} color={product.colors[0]} />
             </div>
           )}
         </div>
+
+        {/* Badges */}
+        <div className="absolute inset-0 pointer-events-none">
+          {isNew && (
+            <span className="tag-label absolute left-4 top-4 bg-splash-blue text-paper px-3 py-1.5 text-xs font-medium">
+              New
+            </span>
+          )}
+          {product.onSale && (
+            <span className="tag-label absolute right-4 top-4 bg-splash-pink text-paper px-3 py-1.5 text-xs font-medium">
+              Sale
+            </span>
+          )}
+        </div>
       </div>
-      <div className="mt-3 flex justify-end gap-2 text-right">
-        {product.onSale && product.originalPrice != null && (
-          <Price cents={product.originalPrice} className="font-mono text-sm text-muted line-through" />
-        )}
-        <Price
-          cents={product.effectivePrice}
-          className={`font-mono text-sm ${product.onSale ? 'text-splash-pink' : 'text-muted'}`}
-        />
+
+      {/* Info Container - Bottom 1/3 */}
+      <div className="flex-1 flex flex-col border-l-4 border-l-clay bg-paper p-5 transition-all duration-300 group-hover:border-l-ink">
+        <h3 className="font-display text-lg leading-tight text-ink mb-2">
+          {product.name}
+        </h3>
+
+        {/* Price */}
+        <div className="mt-auto flex items-baseline gap-2">
+          {product.onSale && product.originalPrice != null && (
+            <Price
+              cents={product.originalPrice}
+              className="font-mono text-xs text-muted line-through"
+            />
+          )}
+          <Price
+            cents={product.effectivePrice}
+            className={`font-mono font-medium ${product.onSale ? 'text-splash-pink' : 'text-ink'}`}
+          />
+        </div>
+
+        {/* CTA */}
+        <div className="mt-4 text-center">
+          <span className="tag-label text-xs text-clay group-hover:text-ink transition-colors">
+            Explore →
+          </span>
+        </div>
       </div>
     </Link>
   );