feat: implement Phase 2 - Core conversion engine and UI

Complete Phase 2 implementation with working unit converter:

Core Conversion Engine (lib/units.ts):
- Type-safe wrapper for convert-units library
- Support for all 23 measures with TypeScript types
- getAllMeasures() - Get all available categories
- getUnitsForMeasure() - Get units for specific measure
- getUnitInfo() - Get detailed unit information
- convertUnit() - Convert between two units
- convertToAll() - Convert to all compatible units
- getCategoryColor() - Get Tailwind color class for measure
- formatMeasureName() - Format measure names for display
- searchUnits() - Fuzzy search across all units

Utility Functions (lib/utils.ts):
- cn() - Merge Tailwind classes with clsx and tailwind-merge
- formatNumber() - Smart number formatting with scientific notation
- debounce() - Debounce helper for inputs
- parseNumberInput() - Parse user input to number
- getRelativeTime() - Format timestamps

UI Components:
- Input - Styled input with focus states
- Button - 6 variants (default, destructive, outline, secondary, ghost, link)
- Card - Card container with header, title, description, content, footer

Main Converter Component (components/converter/MainConverter.tsx):
- Real-time conversion as user types
- Category selection with 23 color-coded buttons
- Input field with unit selector
- Grid display of all conversions in selected measure
- Color-coded result cards with category colors
- Responsive layout (1/2/3 column grid)

Homepage Updates:
- Integrated MainConverter component
- Clean header with gradient text
- Uses design system colors

Dependencies Added:
- clsx - Class name utilities
- tailwind-merge - Merge Tailwind classes intelligently

Features Working:
✓ Select from 23 measurement categories
✓ Real-time conversion to all compatible units
✓ Color-coded categories
✓ Formatted number display
✓ Responsive design

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

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

app/page.tsx

@@ -1,23 +1,19 @@
+import MainConverter from '@/components/converter/MainConverter';
+
 export default function Home() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+    <div className="min-h-screen bg-background">
       <main className="container mx-auto px-4 py-8">
-        <div className="max-w-4xl mx-auto">
-          <header className="text-center mb-12">
-            <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
-              Unit Converter
-            </h1>
-            <p className="text-lg text-gray-600 dark:text-gray-300">
-              Convert between 187 units across 23 measurement categories
-            </p>
-          </header>
+        <header className="text-center mb-12">
+          <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
+            Unit Converter
+          </h1>
+          <p className="text-lg text-muted-foreground">
+            Convert between 187 units across 23 measurement categories
+          </p>
+        </header>
 
-          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-8">
-            <p className="text-center text-gray-500 dark:text-gray-400">
-              Coming soon: Real-time bidirectional conversion with innovative UX
-            </p>
-          </div>
-        </div>
+        <MainConverter />
       </main>
     </div>
   );