ff42115035
Changes: - Homepage: Added roadmap card with indigo/violet gradient - Changed grid from 3 to 4 columns (responsive: 2 on mobile, 4 on desktop) - Roadmap page: Added back button to header for easy navigation - Visual consistency: Matches existing card design patterns Navigation Flow: - Homepage → Roadmap card → /roadmap page - Roadmap page → Back button → Homepage Files Modified: - app/page.tsx (navigation grid + roadmap card) - app/roadmap/page.tsx (back button in header)
236 lines
12 KiB
TypeScript
236 lines
12 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>
|
||
|
||
{/* Navigation Cards */}
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
|
||
{/* 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>
|
||
|
||
{/* 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>
|
||
)
|
||
}
|