feat: complete core 5 elements and risk layer architecture
This commit is contained in:
Antigravity Agent
125
app/page.tsx
Normal file
125
app/page.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import SandboxDemo from '@/components/modules/sandbox/SandboxDemo';
|
||||
import ScannerDemo from '@/components/modules/scanner/ScannerDemo';
|
||||
import InsiderDemo from '@/components/modules/insider/InsiderDemo';
|
||||
import CryptoDemo from '@/components/modules/crypto/CryptoDemo';
|
||||
import EventsDemo from '@/components/modules/events/EventsDemo';
|
||||
import { BarChart3, TrendingUp, ShieldAlert, Radio, Landmark, RefreshCw } from 'lucide-react';
|
||||
|
||||
export default function Home() {
|
||||
const [activeTab, setActiveTab] = useState<'sandbox' | 'scanner' | 'insider' | 'crypto' | 'events'>('sandbox');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#070b13] text-slate-100 flex flex-col font-sans selection:bg-teal-500/30 selection:text-teal-200">
|
||||
{/* Background Decorative Blur Gradients */}
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-900/20 rounded-full blur-[140px] pointer-events-none -z-10" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-teal-900/20 rounded-full blur-[140px] pointer-events-none -z-10" />
|
||||
|
||||
{/* Main Header / Navigation */}
|
||||
<header className="border-b border-slate-900 bg-slate-950/80 backdrop-blur-md sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-teal-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-teal-500/20">
|
||||
<TrendingUp className="w-6 h-6 text-slate-950 stroke-[2.5]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold bg-gradient-to-r from-teal-400 via-sky-300 to-indigo-400 bg-clip-text text-transparent">
|
||||
QuantSandbox Ökonometrie
|
||||
</h1>
|
||||
<p className="text-[10px] text-slate-400 uppercase tracking-widest font-mono">KI-gestützte Investment-Sandbox</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center gap-6 text-xs text-slate-400">
|
||||
<div className="flex items-center gap-2 border-r border-slate-800 pr-4">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span>Verbindung aktiv</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 font-mono">
|
||||
<span className="text-slate-500">Workspace:</span>
|
||||
<span className="text-slate-300 font-bold bg-slate-900 px-2 py-0.5 rounded border border-slate-800">investment-sandbox</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Banner Section */}
|
||||
<section className="bg-slate-950/40 border-b border-slate-900 py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
|
||||
<div className="space-y-2 max-w-2xl">
|
||||
<span className="px-2.5 py-1 rounded-full text-[10px] font-bold bg-teal-500/10 text-teal-400 border border-teal-500/20 uppercase tracking-widest">
|
||||
Scaffolding Version 1.0.0
|
||||
</span>
|
||||
<h2 className="text-3xl font-extrabold text-white tracking-tight sm:text-4xl">
|
||||
Statistische Investment-Analyse & Sandbox
|
||||
</h2>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Diese modulare Architektur bündelt fortgeschrittene ökonometrische Modelle – von EWMA und GJR-GARCH Volatilitätsprognosen über Bayesianisches On-Chain-Lernen bis hin zu Überlebens- und LMM-Regressionsmodellen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 bg-slate-950/90 p-1.5 rounded-2xl border border-slate-800/80 w-full lg:w-auto">
|
||||
<button
|
||||
onClick={() => setActiveTab('sandbox')}
|
||||
className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'sandbox' ? 'bg-gradient-to-r from-teal-500 to-emerald-500 text-slate-950 font-bold shadow-lg shadow-teal-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
|
||||
>
|
||||
<TrendingUp className="w-4 h-4" /> Sandbox
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('scanner')}
|
||||
className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'scanner' ? 'bg-gradient-to-r from-amber-500 to-orange-500 text-slate-950 font-bold shadow-lg shadow-amber-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
|
||||
>
|
||||
<ShieldAlert className="w-4 h-4" /> Scanner
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('insider')}
|
||||
className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'insider' ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white font-bold shadow-lg shadow-purple-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
|
||||
>
|
||||
<Radio className="w-4 h-4" /> Insider
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('crypto')}
|
||||
className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'crypto' ? 'bg-gradient-to-r from-cyan-500 to-sky-500 text-slate-950 font-bold shadow-lg shadow-cyan-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
|
||||
>
|
||||
<BarChart3 className="w-4 h-4" /> Krypto Bayes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('events')}
|
||||
className={`flex-1 lg:flex-none px-4 py-2.5 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all ${activeTab === 'events' ? 'bg-gradient-to-r from-rose-500 to-pink-500 text-slate-950 font-bold shadow-lg shadow-rose-500/25' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-900/50'}`}
|
||||
>
|
||||
<Landmark className="w-4 h-4" /> Ökonometrie
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 w-full">
|
||||
{/* Active Module Rendering */}
|
||||
<div className="transition-all duration-300 transform opacity-100 translate-y-0">
|
||||
{activeTab === 'sandbox' && <SandboxDemo />}
|
||||
{activeTab === 'scanner' && <ScannerDemo />}
|
||||
{activeTab === 'insider' && <InsiderDemo />}
|
||||
{activeTab === 'crypto' && <CryptoDemo />}
|
||||
{activeTab === 'events' && <EventsDemo />}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-slate-900 bg-slate-950/60 py-6 text-center text-xs text-slate-500 mt-auto">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<p>© 2026 QuantSandbox Inc. Alle Rechte vorbehalten.</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex items-center gap-1"><RefreshCw className="w-3.5 h-3.5 text-teal-400 animate-spin-slow" /> Zustand State Engine</span>
|
||||
<span>|</span>
|
||||
<span>Next.js App Router (TypeScript + Tailwind v4)</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user