feat: implement Figlet, Pastel, and Unit tools with a unified layout

- Add Figlet text converter with font selection and history
- Add Pastel color palette generator and manipulation suite
- Add comprehensive Units converter with category-based logic
- Introduce AppShell with Sidebar and Header for navigation
- Modernize theme system with CSS variables and new animations
- Update project configuration and dependencies

components/ui/KeyboardShortcutsHelp.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from './Card';
+import { Button } from './Button';
+import { X, Keyboard } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+
+export interface Shortcut {
+  key: string;
+  description: string;
+  modifier?: 'ctrl' | 'shift';
+}
+
+const shortcuts: Shortcut[] = [
+  { key: '/', description: 'Focus font search' },
+  { key: 'Esc', description: 'Clear search / Close dialog' },
+  { key: 'D', description: 'Toggle dark/light mode', modifier: 'ctrl' },
+  { key: '?', description: 'Show this help dialog', modifier: 'shift' },
+];
+
+export function KeyboardShortcutsHelp() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === '?' && e.shiftKey) {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setIsOpen(true)}
+        title="Keyboard shortcuts (Shift + ?)"
+        className="fixed bottom-4 right-4"
+      >
+        <Keyboard className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <Card className="max-w-md w-full">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold flex items-center gap-2">
+              <Keyboard className="h-5 w-5" />
+              Keyboard Shortcuts
+            </h2>
+            <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="space-y-3">
+            <div>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Navigation</h3>
+              {shortcuts.map((shortcut, i) => (
+                <div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
+                  <span className="text-sm text-muted-foreground">{shortcut.description}</span>
+                  <div className="flex gap-1">
+                    {shortcut.modifier && (
+                      <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
+                        {shortcut.modifier === 'ctrl' ? '⌘/Ctrl' : 'Shift'}
+                      </kbd>
+                    )}
+                    <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
+                      {shortcut.key}
+                    </kbd>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div>
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Tips</h3>
+              <ul className="text-xs text-muted-foreground space-y-1">
+                <li>• Click the Shuffle button for random fonts</li>
+                <li>• Use the heart icon to favorite fonts</li>
+                <li>• Filter by All, Favorites, or Recent</li>
+                <li>• Text alignment and size controls in Preview</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}