feat: upgrade EmptyState component with illustration and learn more support

Add illustration and learnMoreLink props to EmptyState (backward compatible).
Create EmptyStateIllustrations.tsx with 7 brand-themed SVG illustrations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/common/EmptyState.tsx

@@ -1,23 +1,51 @@
 import type { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
 import { cn } from '@/lib/utils'
 
 interface EmptyStateProps {
   icon?: ReactNode
+  illustration?: ReactNode
   title: string
   description?: string
   action?: ReactNode
+  learnMoreLink?: string
+  learnMoreText?: string
   className?: string
 }
 
-export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+export function EmptyState({
+  icon,
+  illustration,
+  title,
+  description,
+  action,
+  learnMoreLink,
+  learnMoreText = 'Learn more',
+  className,
+}: EmptyStateProps) {
   return (
     <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
-      {icon && <div className="mb-4 text-muted-foreground">{icon}</div>}
+      {illustration && (
+        <div className="mb-6 opacity-60">
+          {illustration}
+        </div>
+      )}
+      {!illustration && icon && (
+        <div className="mb-4 text-muted-foreground">{icon}</div>
+      )}
       <h3 className="text-lg font-semibold text-foreground">{title}</h3>
       {description && (
-        <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
+        <p className="mt-2 max-w-sm text-sm text-muted-foreground">{description}</p>
       )}
       {action && <div className="mt-4">{action}</div>}
+      {learnMoreLink && (
+        <Link
+          to={learnMoreLink}
+          className="mt-3 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {learnMoreText} &rarr;
+        </Link>
+      )}
     </div>
   )
 }