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/accessibility/page.tsx

@@ -0,0 +1,96 @@
+import Link from 'next/link';
+import { Contrast, Eye, Palette } from 'lucide-react';
+
+export default function AccessibilityPage() {
+  const tools = [
+    {
+      title: 'Contrast Checker',
+      description: 'Test color combinations for WCAG 2.1 AA and AAA compliance',
+      href: '/pastel/accessibility/contrast',
+      icon: Contrast,
+      features: ['WCAG 2.1 standards', 'AA/AAA ratings', 'Live preview'],
+    },
+    {
+      title: 'Color Blindness Simulator',
+      description: 'Simulate how colors appear with different types of color blindness',
+      href: '/pastel/accessibility/colorblind',
+      icon: Eye,
+      features: ['Protanopia', 'Deuteranopia', 'Tritanopia'],
+    },
+    {
+      title: 'Text Color Optimizer',
+      description: 'Find the best text color for any background automatically',
+      href: '/pastel/accessibility/textcolor',
+      icon: Palette,
+      features: ['Automatic optimization', 'WCAG guaranteed', 'Light/dark options'],
+    },
+  ];
+
+  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">Accessibility Tools</h1>
+          <p className="text-muted-foreground">
+            Ensure your colors are accessible to everyone
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {tools.map((tool) => {
+            const Icon = tool.icon;
+            return (
+              <Link
+                key={tool.href}
+                href={tool.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">{tool.title}</h2>
+                <p className="text-sm text-muted-foreground mb-4">{tool.description}</p>
+                <ul className="space-y-1">
+                  {tool.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>
+
+        {/* Educational Content */}
+        <div className="p-6 border rounded-lg bg-card mt-8">
+          <h2 className="text-xl font-semibold mb-4">About WCAG 2.1</h2>
+          <div className="space-y-4 text-sm text-muted-foreground">
+            <p>
+              The Web Content Accessibility Guidelines (WCAG) 2.1 provide standards for making web
+              content more accessible to people with disabilities
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <h3 className="font-semibold text-foreground mb-2">Level AA (Minimum)</h3>
+                <ul className="space-y-1">
+                  <li>• Normal text: 4.5:1 contrast ratio</li>
+                  <li>• Large text: 3:1 contrast ratio</li>
+                  <li>• UI components: 3:1 contrast ratio</li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground mb-2">Level AAA (Enhanced)</h3>
+                <ul className="space-y-1">
+                  <li>• Normal text: 7:1 contrast ratio</li>
+                  <li>• Large text: 4.5:1 contrast ratio</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}