Design System — Maquettes HTML interactives

Next.js 15 FastAPI XGBoost + Poisson Claude Sonnet PostgreSQL 16 Caddy
FRA ARG BRA ENG ESP GER PRT NLD MAR USA MEX ITA
🏆 WC2026 · Coupe du Monde FIFA · En cours
Pages publiques
🏆 USA
Landing Page
Page d'accueil publique avec hero WC2026, drapeaux, groupes, compétitions, pricing.
WC2026 Hero Groupes Nations Pricing
🔐 FRA
Connexion / Inscription
Split-screen auth. Gauche : showcase WC2026 avec vrais matchs. Droite : formulaire Clerk.
Auth Google/Apple SSO WC2026
Application — Connecté
🏠 BRA
Dashboard
Tableau de bord principal. Sidebar competitions, bannière WC2026, matchs live avec blasons.
Live scores Blasons clubs XP widget Leaderboard
⚽ ARG
Match Detail — WC2026 QF
France vs Argentine. Drapeaux réels, compositions XI, analyse Claude IA, stats xG, H2H, marchés.
France vs Argentine Compositions IA Claude Pronostic XP
🏅
Profil XP & Gamification
Système XP, niveaux Amateur→Légende, badges, classement mensuel, duel "Bats l'IA".
XP & Niveaux Badges Bats l'IA Leaderboard
Administration
🛡️
Admin Dashboard
Vue d'ensemble, coûts IA par modèle, utilisateurs, revenus MRR, logs. Toggle dark/light intégré.
Coûts IA VIP MRR Users Logs
Design System
Design Tokens
Référence complète de tous les tokens CSS. Palettes, espacements, radius, typographie, shadows, z-index.
Couleurs Spacing Typography Dark/Light
🎨 Design System — Nouveautés
✓ Tokens CSS dark/light (design/tokens.css) ✓ Toggle 🌙/☀️ sur toutes les pages ✓ Espaces publicitaires 728×90 + 300×250 ✓ Images football (Unsplash CDN) ✓ Drapeaux + blasons réels ✓ Coûts IA Haiku/Sonnet documentés
🚀 Prochaines étapes
Après validation des mockups : scaffold FastAPI · ETL pipeline football-data.org · Frontend Next.js 15
V1
WC2026
V2
Clubs
V3
API