feat: add Units converter toolkit

Added Units as the 5th tool in the kit:

🔄 Units Converter Features:
- 187 units across 23 measurement categories
- Real-time bidirectional conversion
- Smart fuzzy search for quick unit selection
- Conversion history with localStorage
- Categories: length, mass, temperature, time, angle, area, volume, etc.

🎨 Visual:
- Cyan-purple gradient
- Bidirectional arrows icon (conversion symbol)
- Badges: Real-time, Free

📊 Updates:
- Stats section: 4 → 5 Tools
- Footer: Added Units link with cyan hover
- README: Added tool description
- Grid layout: Now displays 5 tools responsively

🔗 URL: https://units.kit.pivoine.art

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

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

README.md

@@ -135,6 +135,7 @@ Tailwind CSS 4 uses a new CSS-first configuration approach:
 - **Paint** - Browser-based image editor
 - **Pastel** - Modern color manipulation toolkit with palette generation and accessibility testing
 - **Stirling** - Powerful PDF toolkit with 50+ operations (merge, split, convert, OCR, sign)
+- **Units** - Smart unit converter with 187 units across 23 categories (length, mass, temperature, etc.)
 
 ## CI/CD Pipeline
 

components/Footer.tsx

@@ -24,7 +24,7 @@ export default function Footer() {
               Your Creative Toolkit
             </p>
             <div className="mt-4 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20">
-              <span className="text-xs font-medium text-purple-400">4 Tools</span>
+              <span className="text-xs font-medium text-purple-400">5 Tools</span>
               <span className="text-gray-600">•</span>
               <span className="text-xs text-gray-500">Open Source</span>
             </div>
@@ -64,6 +64,7 @@ export default function Footer() {
               <a href="https://paint.kit.pivoine.art" className="text-gray-400 hover:text-orange-400 transition-colors text-sm">Paint</a>
               <a href="https://pastel.kit.pivoine.art" className="text-gray-400 hover:text-purple-400 transition-colors text-sm">Pastel</a>
               <a href="https://stirling.kit.pivoine.art" className="text-gray-400 hover:text-blue-400 transition-colors text-sm">Stirling</a>
+              <a href="https://units.kit.pivoine.art" className="text-gray-400 hover:text-cyan-400 transition-colors text-sm">Units</a>
             </div>
           </div>
         </motion.div>

components/Stats.tsx

@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 
 const stats = [
   {
-    number: '4',
+    number: '5',
     label: 'Tools',
     icon: (
       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

components/ToolsGrid.tsx

@@ -56,6 +56,18 @@ const tools = [
       </svg>
     ),
   },
+  {
+    title: 'Units',
+    description: 'Smart unit converter with 187 units across 23 categories. Real-time bidirectional conversion with fuzzy search and conversion history.',
+    url: 'https://units.kit.pivoine.art',
+    gradient: 'gradient-cyan-purple',
+    badges: ['Real-time', 'Free'],
+    icon: (
+      <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+      </svg>
+    ),
+  },
 ];
 
 export default function ToolsGrid() {