feat: add JSON Server tool and refactor JSON editor styling to use CSS variables.

Author: minhnq

src/app/json/page.module.css

@@ -148,14 +148,14 @@
     font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
     font-size: 14px;
     line-height: 1.5;
-    background: #1a1a1a;
-    color: #00ff00;
+    background: var(--neo-white);
+    color: var(--neo-black);
     border: 4px solid var(--neo-black);
     resize: vertical;
 }
 
 .editor::placeholder {
-    color: #666;
+    color: var(--text-muted);
 }
 
 .editorError {

src/app/page.module.css

@@ -162,6 +162,10 @@
     background: var(--neo-yellow);
 }
 
+.orange .toolIcon {
+    background: var(--neo-orange);
+}
+
 .toolInfo {
     flex: 1;
 }

src/app/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { SearchIcon, KeyIcon, ImageIcon, BoltIcon, ShieldIcon, SmartphoneIcon, GithubIcon, LinkIcon } from '@/components/Icons';
+import { SearchIcon, KeyIcon, ImageIcon, BoltIcon, ShieldIcon, SmartphoneIcon, GithubIcon, LinkIcon, CodeIcon } from '@/components/Icons';
 import styles from './page.module.css';
 
 // Note: metadata must be exported from a server component
@@ -12,7 +12,7 @@ interface Tool {
     title: string;
     description: string;
     icon: React.ReactNode;
-    color: 'green' | 'cyan' | 'pink' | 'yellow';
+    color: 'green' | 'cyan' | 'pink' | 'yellow' | 'orange';
 }
 
 const tools: Tool[] = [
@@ -44,6 +44,13 @@ const tools: Tool[] = [
         icon: <LinkIcon size={32} />,
         color: 'yellow',
     },
+    {
+        href: '/json',
+        title: 'JSON Server',
+        description: 'Host, validate, and share JSON data. Create mock APIs with persistent storage.',
+        icon: <CodeIcon size={32} />,
+        color: 'orange',
+    },
 ];
 
 export default function HomePage() {