Restore improved layout and coin icons from development branch

- Restore clean homepage with only StatusOverview component
- Restore improved StatusOverview with CoinGecko coin icons
- Restore unified layout with gradient cards instead of fragmented sections
This commit is contained in:
mindesbunister
2025-07-17 11:55:09 +02:00
parent b0e9cfe113
commit fba41aaf78
2 changed files with 157 additions and 240 deletions

View File

@@ -4,109 +4,9 @@ import StatusOverview from '../components/StatusOverview.js'
export default function HomePage() {
return (
<div className="space-y-8">
<div>
{/* 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 TradingView 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 trades and view history</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>
{/* Featured: Chart Trading Demo */}
<div className="card card-gradient">
<div className="flex items-center justify-between mb-6">
<div>
<h2 className="text-xl font-semibold text-white mb-2">🚀 Professional Chart Trading</h2>
<p className="text-gray-400">Advanced trading interface with leverage, charting, and position management</p>
</div>
<div className="text-right">
<span className="inline-block px-3 py-1 bg-yellow-600/20 text-yellow-400 rounded-full text-sm font-medium">NEW</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center">
<span className="text-green-400 text-sm">📈</span>
</div>
<div>
<div className="text-white font-medium">Real-time Charts</div>
<div className="text-gray-400 text-sm">Professional candlestick visualization</div>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-yellow-500/20 rounded-full flex items-center justify-center">
<span className="text-yellow-400 text-sm"></span>
</div>
<div>
<div className="text-white font-medium">Leverage Trading</div>
<div className="text-gray-400 text-sm">1x to 100x leverage options</div>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-blue-500/20 rounded-full flex items-center justify-center">
<span className="text-blue-400 text-sm">🎯</span>
</div>
<div>
<div className="text-white font-medium">Position Management</div>
<div className="text-gray-400 text-sm">Stop loss & take profit</div>
</div>
</div>
</div>
<a
href="/chart-trading-demo"
className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all transform hover:scale-105 font-medium"
>
<span className="mr-2">🚀</span>
Launch Chart Trading Terminal
</a>
</div>
</div>
)
}