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

app/(app)/pastel/palettes/page.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import { Palette, Sparkles, GraduationCap } from 'lucide-react';
+
+export default function PalettesPage() {
+  const paletteTypes = [
+    {
+      title: 'Gradient Creator',
+      description: 'Create smooth color gradients with multiple stops and color spaces',
+      href: '/pastel/palettes/gradient',
+      icon: GraduationCap,
+      features: ['Multiple color stops', 'Various color spaces', 'Live preview'],
+    },
+    {
+      title: 'Distinct Colors',
+      description: 'Generate visually distinct colors using simulated annealing algorithm',
+      href: '/pastel/palettes/distinct',
+      icon: Sparkles,
+      features: ['Perceptual distance', 'Configurable count', 'Quality metrics'],
+    },
+    {
+      title: 'Harmony Palettes',
+      description: 'Create color palettes based on color theory and harmony rules',
+      href: '/pastel/palettes/harmony',
+      icon: Palette,
+      features: ['Color theory', 'Multiple schemes', 'Instant generation'],
+    },
+  ];
+
+  return (
+    <div className="min-h-screen py-12">
+      <div className="max-w-7xl mx-auto px-8 space-y-8">
+        <div>
+          <h1 className="text-4xl font-bold mb-2">Palette Generation</h1>
+          <p className="text-muted-foreground">
+            Create beautiful color palettes using various generation methods
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {paletteTypes.map((type) => {
+            const Icon = type.icon;
+            return (
+              <Link
+                key={type.href}
+                href={type.href}
+                className="p-6 border rounded-lg bg-card hover:border-primary transition-colors"
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <Icon className="h-8 w-8 text-primary" />
+                </div>
+                <h2 className="text-xl font-semibold mb-2">{type.title}</h2>
+                <p className="text-sm text-muted-foreground mb-4">{type.description}</p>
+                <ul className="space-y-1">
+                  {type.features.map((feature) => (
+                    <li key={feature} className="text-sm text-muted-foreground flex items-center">
+                      <span className="mr-2">•</span>
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}