feat: implement core figlet converter with live preview

Implemented Phases 2-4 of the implementation plan:

**Phase 2: Font Management System**
- Created font loading service with caching
- Added API route to list all 373 figlet fonts
- Implemented font metadata types

**Phase 3: Core Figlet Engine**
- Built figlet.js wrapper service for ASCII art generation
- Added async/sync rendering methods
- Implemented debounced text updates (300ms)
- Created utility functions (cn, debounce)

**Phase 4: Main UI Components**
- Built reusable UI primitives (Button, Input, Card)
- Created TextInput component with character counter (100 char limit)
- Implemented FontPreview with loading states
- Added FontSelector with real-time search
- Built main FigletConverter orchestrating all components

**Features Implemented:**
- Live preview with 300ms debounce
- 373 fonts from xero/figlet-fonts collection
- Fuzzy font search
- Copy to clipboard
- Download as .txt file
- Responsive 3-column layout (mobile-friendly)
- Character counter
- Loading states
- Empty states

**Tech Stack:**
- Next.js 16 App Router with Turbopack
- React 19 with client components
- TypeScript with strict types
- Tailwind CSS 4 for styling
- figlet.js for rendering
- Font caching for performance

The application is fully functional and ready for testing!

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

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

app/api/fonts/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+export const dynamic = 'force-static';
+
+export async function GET() {
+  try {
+    const fontsDir = path.join(process.cwd(), 'public/fonts/figlet-fonts');
+    const files = fs.readdirSync(fontsDir);
+
+    const fonts = files
+      .filter(file => file.endsWith('.flf'))
+      .map(file => {
+        const name = file.replace('.flf', '');
+        return {
+          name,
+          fileName: file,
+          path: `/fonts/figlet-fonts/${file}`,
+        };
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    return NextResponse.json(fonts);
+  } catch (error) {
+    console.error('Error reading fonts directory:', error);
+    return NextResponse.json({ error: 'Failed to load fonts' }, { status: 500 });
+  }
+}

app/page.tsx

@@ -1,27 +1,41 @@
+import { FigletConverter } from '@/components/converter/FigletConverter';
+
 export default function Home() {
   return (
-    <main className="min-h-screen p-8">
+    <main className="min-h-screen p-4 sm:p-8">
       <div className="max-w-7xl mx-auto">
         <header className="mb-8">
-          <h1 className="text-4xl font-bold mb-2">Figlet UI</h1>
-          <p className="text-muted-foreground">
-            ASCII Art Text Generator with 700+ Fonts
+          <h1 className="text-3xl sm:text-4xl font-bold mb-2">Figlet UI</h1>
+          <p className="text-sm sm:text-base text-muted-foreground">
+            ASCII Art Text Generator with 373 Fonts
           </p>
         </header>
 
-        <div className="bg-card border rounded-lg p-6">
-          <pre className="font-mono text-sm">
-{`  _____ _       _      _     _   _ ___
- |  ___(_) __ _| | ___| |_  | | | |_ _|
- | |_  | |/ _\` | |/ _ \\ __| | | | || |
- |  _| | | (_| | |  __/ |_  | |_| || |
- |_|   |_|\\__, |_|\\___|\\__|  \\___/|___|
-          |___/                         `}
-          </pre>
-          <p className="mt-4 text-muted-foreground">
-            Coming soon: A modern interface for generating beautiful ASCII art text.
+        <FigletConverter />
+
+        <footer className="mt-12 pt-8 border-t text-center text-sm text-muted-foreground">
+          <p>
+            Powered by{' '}
+            <a
+              href="https://github.com/patorjk/figlet.js"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-foreground"
+            >
+              figlet.js
+            </a>
+            {' '}&middot;{' '}
+            Fonts from{' '}
+            <a
+              href="https://github.com/xero/figlet-fonts"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-foreground"
+            >
+              xero/figlet-fonts
+            </a>
           </p>
-        </div>
+        </footer>
       </div>
     </main>
   );