feat: add templates, history, comparison mode, animations, and empty states

- Add text templates with 16 pre-made options across 4 categories (greeting, tech, fun, seasonal)
- Add copy history panel tracking last 10 copied items with restore functionality
- Add font comparison mode to view multiple fonts side-by-side (up to 6 fonts)
- Add smooth animations: slide-down, slide-up, scale-in, fade-in, pulse, and shimmer
- Add loading skeletons for better perceived performance
- Add EmptyState component with contextual messages and icons
- Add hover effects and transitions throughout the UI
- Improve visual feedback with animated badges and shadows

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/converter/FontPreview.tsx

@@ -4,7 +4,9 @@ import * as React from 'react';
 import { toPng } from 'html-to-image';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
-import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Copy, Download, Share2, Image as ImageIcon, AlignLeft, AlignCenter, AlignRight, Type } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import { useToast } from '@/components/ui/Toast';
 
@@ -171,12 +173,17 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
           )}
         >
           {isLoading ? (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="text-sm text-muted-foreground">Generating...</div>
+            <div className="space-y-3">
+              <Skeleton className="h-6 w-3/4" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-5/6" />
+              <Skeleton className="h-6 w-2/3" />
+              <Skeleton className="h-6 w-full" />
+              <Skeleton className="h-6 w-4/5" />
             </div>
           ) : text ? (
             <pre className={cn(
-              'font-mono whitespace-pre overflow-x-auto',
+              'font-mono whitespace-pre overflow-x-auto animate-in',
               fontSize === 'xs' && 'text-[10px]',
               fontSize === 'sm' && 'text-xs sm:text-sm',
               fontSize === 'base' && 'text-sm sm:text-base'
@@ -184,9 +191,12 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
               {text}
             </pre>
           ) : (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="text-sm text-muted-foreground">Your ASCII art will appear here</div>
-            </div>
+            <EmptyState
+              icon={Type}
+              title="Start typing to see your ASCII art"
+              description="Enter text in the input field above to generate ASCII art with the selected font"
+              className="py-8"
+            />
           )}
         </div>
       </div>