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

app/analysis/page.tsx

@@ -0,0 +1,16 @@
+import AIAnalysisPanel from '../../components/AIAnalysisPanel'
+
+export default function AnalysisPage() {
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-white">AI Analysis</h1>
+          <p className="text-gray-400 mt-2">Get market insights and AI-powered analysis</p>
+        </div>
+      </div>
+      
+      <AIAnalysisPanel />
+    </div>
+  )
+}

app/automation/page.tsx

@@ -0,0 +1,25 @@
+import AutoTradingPanel from '../../components/AutoTradingPanel'
+import SessionStatus from '../../components/SessionStatus'
+
+export default function AutomationPage() {
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-white">Automation</h1>
+          <p className="text-gray-400 mt-2">Configure automated trading settings and monitor session status</p>
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+        <div className="space-y-6">
+          <AutoTradingPanel />
+        </div>
+        
+        <div className="space-y-6">
+          <SessionStatus />
+        </div>
+      </div>
+    </div>
+  )
+}

app/layout.tsx

@@ -1,5 +1,6 @@
 import './globals.css'
 import type { Metadata } from 'next'
+import Navigation from '../components/Navigation'
 
 export const metadata: Metadata = {
   title: 'Trading Bot Dashboard',
@@ -44,6 +45,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             </div>
           </header>
 
+          {/* Navigation */}
+          <Navigation />
+
           {/* Main Content */}
           <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
             {children}

app/page.tsx

@@ -1,4 +1,4 @@
-import Dashboard from '../components/Dashboard'
+import StatusOverview from '../components/StatusOverview'
 
 export default function HomePage() {
   return (
@@ -13,8 +13,55 @@ export default function HomePage() {
         </p>
       </div>
       
-      {/* Main Dashboard */}
-      <Dashboard />
+      {/* Status Overview */}
+      <StatusOverview />
+      
+      {/* Quick Actions */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="card card-gradient text-center">
+          <div className="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-blue-400 text-2xl">📊</span>
+          </div>
+          <h3 className="text-lg font-semibold text-white mb-2">AI Analysis</h3>
+          <p className="text-gray-400 text-sm mb-4">Get market insights and analysis</p>
+          <a href="/analysis" className="inline-flex items-center px-4 py-2 bg-blue-600/20 text-blue-400 rounded-lg hover:bg-blue-600/30 transition-colors text-sm">
+            View Analysis
+          </a>
+        </div>
+
+        <div className="card card-gradient text-center">
+          <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-green-400 text-2xl">💰</span>
+          </div>
+          <h3 className="text-lg font-semibold text-white mb-2">Manual Trading</h3>
+          <p className="text-gray-400 text-sm mb-4">Execute manual trades</p>
+          <a href="/trading" className="inline-flex items-center px-4 py-2 bg-green-600/20 text-green-400 rounded-lg hover:bg-green-600/30 transition-colors text-sm">
+            Trade Now
+          </a>
+        </div>
+
+        <div className="card card-gradient text-center">
+          <div className="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-purple-400 text-2xl">🤖</span>
+          </div>
+          <h3 className="text-lg font-semibold text-white mb-2">Auto Trading</h3>
+          <p className="text-gray-400 text-sm mb-4">Configure automation</p>
+          <a href="/automation" className="inline-flex items-center px-4 py-2 bg-purple-600/20 text-purple-400 rounded-lg hover:bg-purple-600/30 transition-colors text-sm">
+            Setup Bot
+          </a>
+        </div>
+
+        <div className="card card-gradient text-center">
+          <div className="w-16 h-16 bg-orange-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-orange-400 text-2xl">⚙️</span>
+          </div>
+          <h3 className="text-lg font-semibold text-white mb-2">Settings</h3>
+          <p className="text-gray-400 text-sm mb-4">Developer configuration</p>
+          <a href="/settings" className="inline-flex items-center px-4 py-2 bg-orange-600/20 text-orange-400 rounded-lg hover:bg-orange-600/30 transition-colors text-sm">
+            Configure
+          </a>
+        </div>
+      </div>
     </div>
   )
 }

app/settings/page.tsx

@@ -0,0 +1,25 @@
+import DeveloperSettings from '../../components/DeveloperSettings'
+import DriftAccountStatus from '../../components/DriftAccountStatus'
+
+export default function SettingsPage() {
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-white">Settings</h1>
+          <p className="text-gray-400 mt-2">Developer configuration and account status</p>
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+        <div className="space-y-6">
+          <DriftAccountStatus />
+        </div>
+        
+        <div className="space-y-6">
+          <DeveloperSettings />
+        </div>
+      </div>
+    </div>
+  )
+}

app/trading/page.tsx

@@ -0,0 +1,25 @@
+import AdvancedTradingPanel from '../../components/AdvancedTradingPanel'
+import TradingHistory from '../../components/TradingHistory'
+
+export default function TradingPage() {
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-white">Manual Trading</h1>
+          <p className="text-gray-400 mt-2">Execute trades and view trading history</p>
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+        <div className="space-y-6">
+          <AdvancedTradingPanel />
+        </div>
+        
+        <div className="space-y-6">
+          <TradingHistory />
+        </div>
+      </div>
+    </div>
+  )
+}