feat: Restructure UI with navigation and separate pages

- Add Navigation component with clean tab-based navigation
- Create StatusOverview component for main dashboard indicators
- Split functionality into separate pages:
  * Overview page with status and quick actions
  * Analysis page for AI analysis
  * Trading page for manual trading and history
  * Automation page for auto-trading settings
  * Settings page for developer configuration
- Add React dependencies to package.json
- Maintain clean separation of concerns

components/Navigation.tsx

@@ -0,0 +1,72 @@
+"use client"
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const navItems = [
+  {
+    name: 'Overview',
+    href: '/',
+    icon: '🏠',
+    description: 'Dashboard overview'
+  },
+  {
+    name: 'Analysis',
+    href: '/analysis',
+    icon: '📊',
+    description: 'AI analysis & insights'
+  },
+  {
+    name: 'Trading',
+    href: '/trading',
+    icon: '💰',
+    description: 'Execute trades'
+  },
+  {
+    name: 'Automation',
+    href: '/automation',
+    icon: '🤖',
+    description: 'Auto-trading settings'
+  },
+  {
+    name: 'Settings',
+    href: '/settings',
+    icon: '⚙️',
+    description: 'Developer settings'
+  }
+]
+
+export default function Navigation() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="bg-gray-900/50 backdrop-blur-sm border-b border-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-14">
+          <div className="flex items-center space-x-8">
+            {navItems.map((item) => {
+              const isActive = pathname === item.href
+              
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className={`flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
+                    isActive 
+                      ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30' 
+                      : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50'
+                  }`}
+                >
+                  <span className={`text-lg ${isActive ? 'text-blue-400' : 'text-gray-500 group-hover:text-gray-300'}`}>
+                    {item.icon}
+                  </span>
+                  <span>{item.name}</span>
+                </Link>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}