{/* Sale badge with animation */}
    {product.onSale && (
      <motion.div
        initial={{ scale: 0, rotate: -180 }}
        animate={{ scale: 1, rotate: 0 }}
        className="absolute top-4 right-4 rounded-full bg-red-500 px-3 py-1 text-sm font-bold text-white shadow-lg"
      >
        SALE
      </motion.div>
    )}
  </div>

  <div className="p-6 space-y-3">
    <h3 className="text-xl font-semibold text-gray-900 line-clamp-2 transition-colors group-hover:text-blue-600">
      {product.name}
    </h3>
    
    <div className="flex items-baseline gap-2">
      <motion.span
        className="text-2xl font-bold text-blue-600"
        key={product.price} // Re-animate on price change
        initial={{ scale: 1.2, color: '#ef4444' }}
        animate={{ scale: 1, color: '#2563eb' }}
      >
        ${product.price}
      </motion.span>
      {product.compareAtPrice && (
        <span className="text-sm text-gray-500 line-through">
          ${product.compareAtPrice}
        </span>
      )}
    </div>

    {/* Button with success state */}
    <button
      onClick={handleAddToCart}
      className={`
        w-full rounded-lg px-6 py-3 font-medium text-white transition-all
        ${isAdded 
          ? 'bg-green-500 scale-105' 
          : 'bg-blue-600 hover:bg-blue-700 active:scale-95'
        }
      `}
    >
      {isAdded ? (
        <span className="flex items-center justify-center gap-2">
          <CheckIcon className="h-5 w-5" />
          Added!
        </span>
      ) : (
        'Add to Cart'
      )}
    </button>
  </div>
</motion.div>

); }

**Expected Outcome:**
- Visual appeal increased 5x
- Engagement metrics improve 20-40% (typical)
- User delight through micro-interactions
- Maintains accessibility (ARIA labels, keyboard navigation)

---
---

## Patterns & Templates

### Pattern 1: Glassmorphism Card

**When to use:** Modern, premium aesthetic (works well with colorful backgrounds)

```tsx
function GlassCard({ children, className = '' }: GlassCardProps) {
  return (
    <div className={`
      relative overflow-hidden rounded-2xl
      backdrop-blur-xl backdrop-saturate-150
      bg-white/10 border border-white/20
      shadow-xl shadow-black/5
      ${className}
    `}>
      {/* Optional gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-50" />
      
      <div className="relative z-10 p-6">
        {children}
      </div>
    </div>
  );
}

---

---

Pattern 3: Skeleton Loading with Shimmer

When to use: Loading states for cards, lists (better UX than spinners)

function SkeletonCard() {
  return (
    <div className="relative overflow-hidden rounded-xl bg-gray-200 p-6">
      {/* Shimmer effect */}
      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/50 to-transparent" />
      
      {/* Skeleton content */}
      <div className="space-y-4">
        <div className="h-4 w-3/4 rounded bg-gray-300" />
        <div className="h-4 w-1/2 rounded bg-gray-300" />
        <div className="h-32 w-full rounded bg-gray-300" />
      </div>
    </div>
  );
}

// Tailwind config (add to tailwind.config.js)
{
  theme: {
    extend: {
      animation: {
        shimmer: 'shimmer 2s infinite',
      },
      keyframes: {
        shimmer: {
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
}

---

---

❌ Anti-Pattern 2: Ignoring Color Contrast

What it looks like:

/* ❌ Gray text on light gray background = unreadable */
.subtle-text {
  color: #999999;
  background: #f0f0f0;
  /* Contrast ratio: 2.1:1 (FAILS WCAG AA 4.5:1 requirement) */
}

Why it fails:

• Fails WCAG AA accessibility (4.5:1 contrast for text)
• Users with visual impairments cannot read content
• Poor UX in bright sunlight (mobile devices)

Correct approach:

/* ✅ Sufficient contrast */
.readable-text {
  color: #333333;
  background: #ffffff;
  /* Contrast ratio: 12.6:1 (PASSES WCAG AAA) */
}

/* Or use design system tokens */
.text {
  color: var(--color-text-primary);    /* Guaranteed 4.5:1 */
  background: var(--color-bg-surface); /* Against text color */
}

---

---

Quality Checklist

Visual Polish

• Color palette uses max 3 primary colors + neutrals
• Typography hierarchy clear (3-5 font sizes)
• Spacing follows consistent scale (4px, 8px, 16px, 24px, 32px...)
• Hover states on all interactive elements
• Loading states for async actions
• Empty states with helpful messaging

Accessibility

• Color contrast ≥4.5:1 for text (WCAG AA)
• Focus indicators visible on all interactive elements
• Animations respect prefers-reduced-motion
• Alt text on all images
• Keyboard navigation works (Tab, Enter, Esc)

Responsive Design

• Mobile-first approach (320px base)
• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
• Touch targets ≥44x44px (mobile)
• No horizontal scroll on mobile
• Images responsive (max-width: 100%, height: auto)

Performance

• Animations use transform and opacity (GPU-accelerated)
• Images optimized (WebP, lazy loading)
• CSS bundle <50KB (after minification)
• No layout shift (CLS <0.1)
• Fonts preloaded (<link rel="preload">)