8a3141e793
- Add EPYC Cluster card to landing page (first position, purple/pink gradient)
- Add back button to cluster page (animated left arrow, links to dashboard)
- Update landing page grid layout (lg:grid-cols-3 xl:grid-cols-4 for 7 cards)
- Complete bidirectional navigation: dashboard ↔ cluster monitoring
Navigation features:
- Cluster card: 🖥️ icon, "Monitor distributed parameter exploration" description
- Back button: Animated hover effect (arrow slides left, color transitions)
- Responsive grid: 2 cols (mobile), 3 cols (tablet), 4 cols (desktop)
- Consistent styling with existing navigation cards
331 lines
17 KiB
TypeScript
331 lines
17 KiB
TypeScript
/**
|
||
* Trading Bot v4 - Landing Page
|
||
*
|
||
* Main dashboard with navigation to settings and analytics
|
||
*/
|
||
|
||
'use client'
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
|
||
{/* Header */}
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
|
||
<span className="text-2xl">🚀</span>
|
||
</div>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-white">Trading Bot v4</h1>
|
||
<p className="text-sm text-gray-400">Autonomous Solana Trading</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||
<span className="text-sm text-gray-400">Online</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Content */}
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
{/* Hero Section */}
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl font-bold text-white mb-4">
|
||
Welcome to Your Trading Dashboard
|
||
</h2>
|
||
<p className="text-xl text-gray-400 max-w-2xl mx-auto">
|
||
Monitor performance, adjust settings, and track your autonomous trading bot
|
||
</p>
|
||
</div>
|
||
|
||
{/* Recent Achievements Banner */}
|
||
<div className="mb-12 max-w-6xl mx-auto">
|
||
<div className="bg-gradient-to-r from-green-900/30 to-blue-900/30 backdrop-blur-sm rounded-2xl p-6 border border-green-500/20">
|
||
<div className="flex items-center justify-center mb-4">
|
||
<div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-3">
|
||
<span className="text-lg">✓</span>
|
||
</div>
|
||
<h3 className="text-xl font-bold text-white">Latest System Enhancements</h3>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-6 text-center">
|
||
<div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700/50">
|
||
<div className="text-3xl mb-2">🏗️</div>
|
||
<div className="text-sm font-semibold text-green-400 mb-1">HA Infrastructure</div>
|
||
<div className="text-xs text-gray-400">Nov 25, 2025</div>
|
||
<div className="text-xs text-gray-300 mt-2">Zero-downtime automatic failover with Hostinger secondary server validated</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700/50">
|
||
<div className="text-3xl mb-2">📊</div>
|
||
<div className="text-sm font-semibold text-blue-400 mb-1">Multi-Timeframe Analysis</div>
|
||
<div className="text-xs text-gray-400">Nov 26, 2025</div>
|
||
<div className="text-xs text-gray-300 mt-2">Quality scoring for all timeframes enables cross-interval win rate comparison</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700/50">
|
||
<div className="text-3xl mb-2">🎯</div>
|
||
<div className="text-sm font-semibold text-purple-400 mb-1">v9 Money Line</div>
|
||
<div className="text-xs text-gray-400">Nov 22, 2025</div>
|
||
<div className="text-xs text-gray-300 mt-2">Perfect quality separation: All winners ≥95, all losers ≤90</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 text-center">
|
||
<a href="/roadmap" className="text-sm text-green-400 hover:text-green-300 transition-colors">
|
||
View Complete Roadmap →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation Cards */}
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
|
||
{/* EPYC Cluster Card */}
|
||
<a
|
||
href="/cluster"
|
||
className="group relative bg-gradient-to-br from-purple-900/50 to-pink-900/50 backdrop-blur-sm rounded-2xl p-8 border border-purple-500/20 hover:border-purple-500/40 transition-all duration-300 hover:scale-105"
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
||
<div className="relative">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<span className="text-4xl">🖥️</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-white mb-3">EPYC Cluster</h3>
|
||
|
||
<p className="text-gray-300 mb-6">
|
||
Monitor distributed parameter exploration across 2x AMD EPYC servers with AI recommendations
|
||
</p>
|
||
|
||
<div className="flex items-center text-purple-400 group-hover:text-purple-300">
|
||
<span className="font-medium">View Status</span>
|
||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Analytics Card */}
|
||
<a
|
||
href="/analytics"
|
||
className="group relative bg-gradient-to-br from-blue-900/50 to-purple-900/50 backdrop-blur-sm rounded-2xl p-8 border border-blue-500/20 hover:border-blue-500/40 transition-all duration-300 hover:scale-105"
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
||
<div className="relative">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<span className="text-4xl">📊</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-white mb-3">Analytics</h3>
|
||
|
||
<p className="text-gray-300 mb-6">
|
||
View trading performance, win rates, P&L statistics, and position analytics
|
||
</p>
|
||
|
||
<div className="flex items-center text-blue-400 group-hover:text-blue-300">
|
||
<span className="font-medium">View Dashboard</span>
|
||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Withdrawals Card */}
|
||
<a
|
||
href="/withdrawals"
|
||
className="group relative bg-gradient-to-br from-emerald-900/50 to-teal-900/50 backdrop-blur-sm rounded-2xl p-8 border border-emerald-500/20 hover:border-emerald-500/40 transition-all duration-300 hover:scale-105"
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-teal-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
||
<div className="relative">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<span className="text-4xl">💸</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-white mb-3">Withdrawals</h3>
|
||
|
||
<p className="text-gray-300 mb-6">
|
||
Configure automatic profit withdrawals to your wallet
|
||
</p>
|
||
|
||
<div className="flex items-center text-emerald-400 group-hover:text-emerald-300">
|
||
<span className="font-medium">Manage Withdrawals</span>
|
||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Settings Card */}
|
||
<a
|
||
href="/settings"
|
||
className="group relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50 hover:border-gray-600 transition-all duration-300 hover:scale-105"
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-gray-500/10 to-gray-700/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
||
<div className="relative">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-gray-600 to-gray-800 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<span className="text-4xl">⚙️</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-white mb-3">Settings</h3>
|
||
|
||
<p className="text-gray-300 mb-6">
|
||
Configure trading parameters, risk management, and bot behavior
|
||
</p>
|
||
|
||
<div className="flex items-center text-gray-400 group-hover:text-gray-300">
|
||
<span className="font-medium">Adjust Settings</span>
|
||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Analytics Card */}
|
||
<a
|
||
href="/analytics/optimization"
|
||
className="group relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50 hover:border-gray-600 transition-all duration-300 hover:scale-105"
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-700/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
||
<div className="relative">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-blue-600 to-purple-800 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<span className="text-4xl">🔬</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-white mb-3">Analytics</h3>
|
||
|
||
<p className="text-gray-300 mb-6">
|
||
Data-driven optimization analysis with automated SQL insights
|
||
</p>
|
||
|
||
<div className="flex items-center text-gray-400 group-hover:text-gray-300">
|
||
<span className="font-medium">View Analytics</span>
|
||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Projection Card */}
|
||
<a
|
||
href="/projection"
|
||
className="group relative bg-gradient-to-br from-yellow-900/50 to-orange-900/50 backdrop-blur-sm rounded-2xl p-8 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-300 hover:scale-105"
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
||
<div className="relative">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<span className="text-4xl">🚀</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-white mb-3">Projection</h3>
|
||
|
||
<p className="text-gray-300 mb-6">
|
||
Track $901 → $100K journey (12 weeks to Feb 2026)
|
||
</p>
|
||
|
||
<div className="flex items-center text-yellow-400 group-hover:text-yellow-300">
|
||
<span className="font-medium">View Progress</span>
|
||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Roadmap Card */}
|
||
<a
|
||
href="/roadmap"
|
||
className="group relative bg-gradient-to-br from-indigo-900/50 to-violet-900/50 backdrop-blur-sm rounded-2xl p-8 border border-indigo-500/20 hover:border-indigo-500/40 transition-all duration-300 hover:scale-105"
|
||
>
|
||
<div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-violet-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||
|
||
<div className="relative">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
||
<span className="text-4xl">🗺️</span>
|
||
</div>
|
||
|
||
<h3 className="text-2xl font-bold text-white mb-3">Roadmap</h3>
|
||
|
||
<p className="text-gray-300 mb-6">
|
||
Track development progress and upcoming features
|
||
</p>
|
||
|
||
<div className="flex items-center text-indigo-400 group-hover:text-indigo-300">
|
||
<span className="font-medium">View Roadmap</span>
|
||
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
{/* Quick Stats */}
|
||
<div className="mt-16 max-w-4xl mx-auto">
|
||
<h3 className="text-xl font-semibold text-white mb-6 text-center">Quick Access</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<a
|
||
href="/api/trading/positions"
|
||
target="_blank"
|
||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||
>
|
||
<div className="text-2xl mb-2">📍</div>
|
||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Positions API</div>
|
||
</a>
|
||
|
||
<a
|
||
href="/api/analytics/stats"
|
||
target="_blank"
|
||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||
>
|
||
<div className="text-2xl mb-2">📈</div>
|
||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Stats API</div>
|
||
</a>
|
||
|
||
<a
|
||
href="/api/analytics/positions"
|
||
target="_blank"
|
||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||
>
|
||
<div className="text-2xl mb-2">🎯</div>
|
||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Net Positions</div>
|
||
</a>
|
||
|
||
<a
|
||
href="https://app.drift.trade"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-4 border border-gray-700/50 hover:border-gray-600 transition-all text-center group"
|
||
>
|
||
<div className="text-2xl mb-2">🌊</div>
|
||
<div className="text-sm text-gray-400 group-hover:text-gray-300">Open Drift</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer Info */}
|
||
<div className="mt-16 text-center">
|
||
<p className="text-gray-500 text-sm">
|
||
Trading Bot v4 • Drift Protocol • Pyth Network • Solana
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|