spb/vquant Public MIT
VibeQuant — AI-powered institutional-grade financial intelligence platform.
TypeScript 84.3%
Python 11.7%
JavaScript 1.6%
CSS 1.5%
HTML 0.7%
1/*2 * =============================================================================3 * VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 * File: client/src/pages/documentation.tsx6 *7 * Author: Simon-Pierre Boucher8 * Contact: contact@spboucher.ai9 * Website: https://www.spboucher.ai10 * Demo: https://www.vquant.ai11 * License: MIT (see LICENSE)12 *13 * Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import { Sparkles, TrendingUp, Calculator, BarChart3, DollarSign, ArrowLeft, Activity, LineChart, Zap, Target, Globe, Users, Crown, Rocket, PieChart, BrainCircuit, Code, Database, Search, FileText, Briefcase, TrendingDown, AlertCircle, Newspaper, Building2, CandlestickChart } from "lucide-react";18import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";19import { Badge } from "@/components/ui/badge";20import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";21import { useLocation } from "wouter";22import { Button } from "@/components/ui/button";23import { ThemeToggle } from "@/components/theme-toggle";24import { ThemeColorPicker } from "@/components/theme-color-picker";25import { motion } from "framer-motion";2627export default function Documentation() {28 const [, setLocation] = useLocation();2930 const aiModels = [31 { id: "claude-fable-5", name: "Fable 5", desc: "Raisonnement adaptatif pour analyses complexes - le plus intelligent", context: "1M contexte / 128K sortie", icon: Sparkles, badge: "Defaut" },32 { id: "claude-opus-4-8", name: "Opus 4.8", desc: "Le plus puissant - agentique long-horizon et code", context: "1M contexte / 128K sortie", icon: Crown, badge: "" },33 { id: "claude-opus-4-7", name: "Opus 4.7", desc: "Tres performant et equilibre", context: "1M contexte / 128K sortie", icon: Rocket, badge: "" },34 { id: "claude-opus-4-6", name: "Opus 4.6", desc: "Rapide et capable", context: "1M contexte / 128K sortie", icon: BrainCircuit, badge: "" },35 { id: "claude-sonnet-4-6", name: "Sonnet 4.6", desc: "Polyvalent - bon rapport vitesse / intelligence", context: "1M contexte / 64K sortie", icon: Zap, badge: "" },36 { id: "claude-haiku-4-5-20251001", name: "Haiku 4.5", desc: "Le plus rapide et economique (sans raisonnement etendu)", context: "200K contexte / 64K sortie", icon: Activity, badge: "" },37 ];3839 const categories = [40 {41 id: "market-data",42 icon: TrendingUp,43 title: "Données de Marché en Temps Réel",44 color: "from-blue-500 to-cyan-500",45 description: "Cotations, prix historiques, indices et données de marché",46 tools: [47 { name: "get_stock_quote", desc: "Cotation en temps réel d'une action", example: "Quel est le prix actuel d'Apple?" },48 { name: "get_historical_price", desc: "Prix historiques sur une période", example: "Historique de Tesla sur 1 an" },49 { name: "get_intraday_price", desc: "Données intraday (1min, 5min, 15min, etc.)", example: "Prix de NVDA aujourd'hui par intervalle de 5 minutes" },50 { name: "get_forex_quote", desc: "Cotations de paires forex", example: "Taux EUR/USD actuel" },51 { name: "get_commodity_quotes", desc: "Prix des commodités (or, pétrole, etc.)", example: "Prix de l'or aujourd'hui" },52 { name: "get_crypto_quote", desc: "Cotations de cryptomonnaies", example: "Prix du Bitcoin maintenant" },53 { name: "get_market_hours", desc: "Heures d'ouverture des marchés", example: "Le marché NYSE est-il ouvert?" },54 { name: "get_gainers", desc: "Top gainers du jour", example: "Quelles actions ont le plus monté aujourd'hui?" },55 { name: "get_losers", desc: "Top losers du jour", example: "Quelles actions ont le plus baissé?" },56 { name: "get_actives", desc: "Actions les plus actives", example: "Actions avec le plus de volume aujourd'hui" },57 ]58 },59 {60 id: "fundamentals",61 icon: FileText,62 title: "États Financiers & Fondamentaux",63 color: "from-purple-500 to-pink-500",64 description: "Bilans, comptes de résultats, métriques et ratios financiers",65 tools: [66 { name: "get_company_profile", desc: "Profil complet d'une entreprise", example: "Profil complet de Microsoft" },67 { name: "get_income_statement", desc: "Compte de résultat (annuel ou trimestriel)", example: "Revenus annuels d'Apple sur 5 ans" },68 { name: "get_balance_sheet", desc: "Bilan comptable", example: "Bilan de Google" },69 { name: "get_cash_flow", desc: "État des flux de trésorerie", example: "Flux de trésorerie Amazon" },70 { name: "get_key_metrics", desc: "Métriques clés (P/E, ROE, etc.)", example: "Métriques de Tesla" },71 { name: "get_financial_ratios", desc: "Ratios financiers complets", example: "Ratios de profitabilité Meta" },72 { name: "get_financial_growth", desc: "Croissance financière", example: "Croissance des revenus NVIDIA" },73 { name: "get_company_outlook", desc: "Perspectives et guidances", example: "Prévisions pour Amazon" },74 { name: "search_companies", desc: "Rechercher des entreprises", example: "Entreprises du secteur tech" },75 { name: "get_stock_peers", desc: "Entreprises comparables", example: "Concurrents d'Apple" },76 ]77 },78 {79 id: "technical",80 icon: Activity,81 title: "Indicateurs Techniques",82 color: "from-green-500 to-emerald-500",83 description: "RSI, MACD, moyennes mobiles et oscillateurs",84 tools: [85 { name: "get_rsi", desc: "Relative Strength Index", example: "RSI de Tesla sur 14 jours" },86 { name: "get_macd", desc: "MACD (Moving Average Convergence Divergence)", example: "MACD pour Bitcoin" },87 { name: "get_ema", desc: "Moyenne mobile exponentielle", example: "EMA 50 jours de NVDA" },88 { name: "get_sma", desc: "Moyenne mobile simple", example: "SMA 200 jours du S&P 500" },89 { name: "get_adx", desc: "Average Directional Index", example: "Force de tendance Apple avec ADX" },90 { name: "get_williams_r", desc: "Williams %R oscillateur", example: "Williams %R pour Amazon" },91 { name: "get_cci", desc: "Commodity Channel Index", example: "CCI de l'or" },92 { name: "get_stochastic", desc: "Oscillateur stochastique", example: "Stochastique Meta" },93 ]94 },95 {96 id: "quantitative",97 icon: Calculator,98 title: "Analyses Quantitatives Python",99 color: "from-orange-500 to-red-500",100 description: "Monte Carlo, GARCH, VaR, optimisation de portefeuille",101 tools: [102 { name: "run_monte_carlo_simulation", desc: "Simulation Monte Carlo pour projections", example: "Simulation Monte Carlo pour Tesla sur 1 an" },103 { name: "calculate_options_price", desc: "Pricing d'options Black-Scholes avec Greeks", example: "Prix d'une option call Apple strike 200" },104 { name: "estimate_garch_volatility", desc: "Modèle GARCH pour volatilité", example: "Volatilité GARCH de Bitcoin" },105 { name: "calculate_var", desc: "Value-at-Risk (VaR) historique ou paramétrique", example: "VaR à 95% pour mon portefeuille" },106 { name: "optimize_portfolio", desc: "Optimisation de portefeuille Markowitz", example: "Optimise un portefeuille AAPL MSFT GOOGL" },107 { name: "analyze_risk_metrics", desc: "Métriques de risque (Sharpe, Sortino, etc.)", example: "Analyse de risque pour Tesla" },108 { name: "create_plot", desc: "Graphiques Python personnalisés", example: "Crée un graphique de corrélation FAANG" },109 { name: "execute_custom_python", desc: "Code Python libre pour analyses", example: "Calcule la matrice de covariance du portefeuille" },110 ]111 },112 {113 id: "analyst",114 icon: Users,115 title: "Analyses d'Analystes & Consensus",116 color: "from-indigo-500 to-purple-500",117 description: "Recommandations, prix cibles, estimations et surprises",118 tools: [119 { name: "get_price_target", desc: "Prix cibles des analystes", example: "Prix cible consensuel pour Apple" },120 { name: "get_analyst_estimates", desc: "Estimations de revenus et bénéfices", example: "Estimations pour Tesla Q4" },121 { name: "get_earnings_surprises", desc: "Surprises de résultats historiques", example: "Surprises de résultats Netflix" },122 { name: "get_upgrades_downgrades", desc: "Changements de recommandations", example: "Dernières recommandations sur NVDA" },123 { name: "get_earnings_calendar", desc: "Calendrier des résultats", example: "Prochains résultats cette semaine" },124 ]125 },126 {127 id: "insider",128 icon: Briefcase,129 title: "Trading d'Initiés & Institutionnel",130 color: "from-red-500 to-rose-500",131 description: "Transactions d'initiés, Congrès, positions institutionnelles",132 tools: [133 { name: "get_insider_trading", desc: "Transactions d'initiés récentes", example: "Insider trading pour Apple" },134 { name: "get_congressional_trading", desc: "Trading du Congrès américain", example: "Derniers achats du Congrès" },135 { name: "get_senate_trading", desc: "Trading du Sénat", example: "Positions du Sénat" },136 { name: "get_institutional_holders", desc: "Détenteurs institutionnels", example: "Qui détient le plus de Tesla?" },137 ]138 },139 {140 id: "economic",141 icon: Globe,142 title: "Données Économiques & Calendriers",143 color: "from-teal-500 to-cyan-500",144 description: "Indicateurs macroéconomiques, calendrier économique",145 tools: [146 { name: "get_economic_calendar", desc: "Événements économiques à venir", example: "Prochains rapports économiques cette semaine" },147 { name: "get_economic_indicator", desc: "Indicateurs macro (GDP, CPI, etc.)", example: "Inflation CPI récente" },148 { name: "get_treasury_rates", desc: "Taux des bons du Trésor", example: "Rendement du Treasury 10 ans" },149 { name: "get_ipo_calendar", desc: "Calendrier des IPO", example: "Prochaines introductions en bourse" },150 ]151 },152 {153 id: "news",154 icon: Newspaper,155 title: "Actualités & Sentiment",156 color: "from-amber-500 to-yellow-500",157 description: "News financières, sentiment, communiqués de presse",158 tools: [159 { name: "get_financial_news", desc: "Actualités financières récentes", example: "Dernières news sur Apple" },160 { name: "get_press_releases", desc: "Communiqués de presse officiels", example: "Communiqués Tesla" },161 { name: "get_stock_news_sentiment", desc: "Sentiment des actualités", example: "Sentiment news pour NVDA" },162 { name: "get_social_sentiment", desc: "Sentiment des réseaux sociaux", example: "Sentiment Twitter pour Bitcoin" },163 ]164 },165 {166 id: "dividends",167 icon: DollarSign,168 title: "Dividendes & Actions Corporate",169 color: "from-emerald-500 to-green-500",170 description: "Historique dividendes, splits, rachats d'actions",171 tools: [172 { name: "get_dividend_history", desc: "Historique des dividendes", example: "Dividendes Microsoft sur 10 ans" },173 { name: "get_stock_split_history", desc: "Historique des splits", example: "Splits d'Apple" },174 ]175 },176 {177 id: "screening",178 icon: Search,179 title: "Screening & Recherche",180 color: "from-pink-500 to-rose-500",181 description: "Filtrage d'actions, recherche par critères",182 tools: [183 { name: "get_stock_screener", desc: "Filtrer actions par critères", example: "Actions tech avec P/E < 20 et dividende > 2%" },184 { name: "search_symbol", desc: "Rechercher par symbole", example: "Trouver le symbole de Microsoft" },185 { name: "search_by_cik", desc: "Rechercher par CIK (SEC)", example: "Entreprise avec CIK 0000789019" },186 ]187 },188 {189 id: "etf",190 icon: PieChart,191 title: "ETF & Fonds",192 color: "from-violet-500 to-purple-500",193 description: "Composition, pondérations sectorielles et géographiques",194 tools: [195 { name: "get_etf_holdings", desc: "Composition d'un ETF", example: "Holdings du SPY" },196 { name: "get_etf_sector_weightings", desc: "Répartition sectorielle", example: "Exposition sectorielle du QQQ" },197 { name: "get_etf_country_weightings", desc: "Répartition géographique", example: "Exposition pays du VTI" },198 ]199 },200 {201 id: "esg",202 icon: Building2,203 title: "ESG & Gouvernance",204 color: "from-lime-500 to-green-500",205 description: "Scores ESG, critères environnementaux et sociaux",206 tools: [207 { name: "get_esg_score", desc: "Score ESG (Environnement, Social, Gouvernance)", example: "Score ESG de Tesla" },208 ]209 },210 {211 id: "export",212 icon: FileText,213 title: "Export & Visualisation",214 color: "from-sky-500 to-blue-500",215 description: "Génération de graphiques, slides, PDF et exports",216 tools: [217 { name: "create_plot", desc: "Graphiques matplotlib/plotly personnalisés", example: "Crée un graphique de performance FAANG" },218 { name: "generate_slides", desc: "Slides Beamer LaTeX professionnelles (thème Metropolis)", example: "Génère des slides pour mon analyse" },219 { name: "export_pdf", desc: "Export en PDF de l'analyse", example: "Exporte cette analyse en PDF" },220 { name: "download_data", desc: "Téléchargement de données CSV/Excel", example: "Télécharge les données historiques en CSV" },221 ]222 },223 {224 id: "web-research",225 icon: Globe,226 title: "Recherche Web & Scraping",227 color: "from-cyan-500 to-teal-500",228 description: "Recherche web, scraping de sites, extraction de contenu",229 tools: [230 { name: "exa_search", desc: "Recherche sémantique avancée avec Exa AI", example: "Recherche sur le web : analyse de Tesla" },231 { name: "firecrawl_scrape", desc: "Scraping de pages web spécifiques", example: "Scrape la page investor relations d'Apple" },232 { name: "firecrawl_crawl", desc: "Crawl complet d'un site web", example: "Crawl le site de Bloomberg" },233 { name: "tavily_search", desc: "Recherche et agrégation avec Tavily", example: "Recherche actualités économiques récentes" },234 ]235 },236 ];237238 const pythonFeatures = [239 { name: "📊 Graphiques Personnalisés", desc: "Créez des visualisations sur mesure avec matplotlib, seaborn ou plotly" },240 { name: "📈 Analyse de Séries Temporelles", desc: "ARIMA, Prophet, décomposition saisonnière" },241 { name: "🎲 Simulations Stochastiques", desc: "Monte Carlo, bootstrap, backtesting" },242 { name: "📉 Modèles de Volatilité", desc: "GARCH, EGARCH, GJR-GARCH" },243 { name: "💰 Gestion de Risque", desc: "VaR, CVaR, Expected Shortfall" },244 { name: "🎯 Optimisation", desc: "Portefeuille Markowitz, Black-Litterman" },245 { name: "🔢 Calculs Personnalisés", desc: "N'importe quel calcul financier avec pandas, numpy, scipy" },246 ];247248 const useCases = [249 {250 title: "Analyse Complète d'une Action",251 icon: TrendingUp,252 example: 'Fais une analyse ultra complète de Tesla : états financiers, métriques, ratios, analyse technique, news récentes, insider trading, estimations d\'analystes',253 color: "text-blue-500"254 },255 {256 title: "Analyse de Portefeuille",257 icon: PieChart,258 example: 'Optimise un portefeuille avec AAPL, MSFT, GOOGL, AMZN et NVDA. Calcule les poids optimaux, le ratio Sharpe, et fais une simulation Monte Carlo sur 1 an',259 color: "text-purple-500"260 },261 {262 title: "Analyse de Risque",263 icon: AlertCircle,264 example: 'Calcule la Value-at-Risk à 95% pour un portefeuille 60% SPY / 40% TLT. Ajoute une analyse de stress test avec un scénario de crise',265 color: "text-red-500"266 },267 {268 title: "Analyse de Volatilité",269 icon: LineChart,270 example: 'Estime un modèle GARCH sur les rendements du Bitcoin. Prévois la volatilité pour les 30 prochains jours',271 color: "text-orange-500"272 },273 {274 title: "Valorisation d'Options",275 icon: Target,276 example: 'Calcule le prix d\'une option call sur Apple avec strike $200, expiration dans 30 jours. Montre tous les Greeks',277 color: "text-indigo-500"278 },279 {280 title: "Recherche Sectorielle",281 icon: Building2,282 example: 'Trouve les 10 entreprises tech avec le meilleur rendement de dividendes. Compare leurs ratios P/E et croissance',283 color: "text-emerald-500"284 },285 {286 title: "Analyse Macro",287 icon: Globe,288 example: 'Comment une surprise hawkish du FOMC affecte différents secteurs ? Analyse l\'impact historique sur tech, finance et utilities',289 color: "text-cyan-500"290 },291 {292 title: "Trading d'Initiés",293 icon: Users,294 example: 'Montre les dernières transactions d\'initiés pour NVDA. Y a-t-il des patterns ou signaux ?',295 color: "text-pink-500"296 },297 ];298299 const advancedExamples = [300 {301 title: "Analyse Multi-Actions avec Python",302 code: `Crée un graphique de corrélation entre Apple, Microsoft, Google, Amazon et Meta sur les 2 dernières années. Calcule aussi la matrice de covariance.`,303 result: "Graphique matplotlib + matrice de covariance"304 },305 {306 title: "Backtesting de Stratégie",307 code: `Backtest une stratégie simple : achète quand RSI < 30, vends quand RSI > 70 sur Tesla depuis 2020. Calcule le rendement annualisé.`,308 result: "Performance, Sharpe ratio, drawdown"309 },310 {311 title: "Analyse de Surface de Volatilité",312 code: `Génère une surface de volatilité 3D pour les options Apple avec différents strikes et maturités.`,313 result: "Graphique 3D de la volatilité implicite"314 },315 {316 title: "Décomposition de Performance",317 code: `Décompose la performance du S&P 500 en : rendement du marché, contribution sectorielle, et effet devise.`,318 result: "Attribution de performance détaillée"319 },320 ];321322 return (323 <div className="min-h-screen bg-background relative overflow-hidden" data-testid="page-documentation">324 {/* Subtle Background */}325 <div className="fixed inset-0 z-0 pointer-events-none">326 <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,hsl(var(--primary)/0.03),transparent_70%)]" />327 </div>328329 {/* Header */}330 <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur-sm">331 <div className="container flex h-14 items-center justify-between px-4 md:px-6">332 <div className="flex items-center gap-3 md:gap-4">333 <Button334 variant="ghost"335 size="sm"336 onClick={() => setLocation('/')}337 className="hover:bg-muted transition-colors gap-2"338 data-testid="button-back-to-home"339 >340 <ArrowLeft className="w-4 h-4" />341 <span className="hidden sm:inline font-medium">Retour</span>342 </Button>343 <button344 className="cursor-pointer"345 onClick={() => setLocation('/')}346 >347 <div className="flex items-center gap-2.5">348 <Sparkles className="w-5 h-5 text-primary" />349 <div className="hidden md:flex items-baseline gap-1.5">350 <span className="text-base font-bold text-foreground leading-tight">351 VQuant352 </span>353 </div>354 </div>355 </button>356 </div>357 <div className="flex items-center gap-2 md:gap-3">358 <div className="h-8 w-px bg-border/50" />359 <ThemeColorPicker />360 <ThemeToggle />361 </div>362 </div>363 </header>364365 {/* Main Content */}366 <main className="container mx-auto px-4 py-8 md:py-12 lg:py-20 max-w-7xl relative z-10">367 {/* Hero Section */}368 <motion.div369 initial={{ opacity: 0, y: 20 }}370 animate={{ opacity: 1, y: 0 }}371 transition={{ duration: 0.6 }}372 className="text-center mb-12 md:mb-20"373 >374 <div className="inline-flex items-center justify-center p-3 md:p-4 rounded-3xl bg-hot shadow-hot border border-white/10 mb-6 md:mb-8">375 <Rocket className="w-12 h-12 md:w-16 md:h-16 text-white drop-shadow-[0_0_12px_rgba(255,77,28,0.6)]" />376 </div>377 <h1 className="text-4xl md:text-5xl lg:text-7xl font-black mb-4 md:mb-6 gradient-text tracking-tight leading-tight">378 Documentation Complète379 </h1>380 <p className="text-lg md:text-xl lg:text-2xl text-muted-foreground mb-4 md:mb-6 max-w-3xl mx-auto leading-relaxed">381 Découvrez toutes les capacités de VQuant - Plus de 200 outils financiers et analyses quantitatives à votre disposition.382 </p>383 <div className="flex flex-wrap items-center justify-center gap-2 md:gap-3">384 <Badge className="px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm bg-hot text-white border-0">385 <Sparkles className="w-3 h-3 md:w-4 md:h-4 mr-2" />386 Claude Fable 5387 </Badge>388 <Badge variant="outline" className="px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm">389 200+ Outils FMP390 </Badge>391 <Badge variant="outline" className="px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm">392 Python Intégré393 </Badge>394 <Badge variant="outline" className="px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm">395 Temps Réel396 </Badge>397 </div>398 </motion.div>399400 {/* AI Models */}401 <motion.div402 initial={{ opacity: 0, y: 20 }}403 animate={{ opacity: 1, y: 0 }}404 transition={{ duration: 0.6, delay: 0.15 }}405 className="mb-12 md:mb-20"406 >407 <h2 className="text-2xl md:text-3xl lg:text-4xl font-black mb-3 md:mb-4 text-center">Modeles IA disponibles</h2>408 <p className="text-center text-muted-foreground mb-8 md:mb-12 text-base md:text-lg">409 Choisissez le modele Claude adapte a votre besoin. Selecteur dans la barre de recherche et sur la page de demarrage.410 </p>411 <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">412 {aiModels.map((m, i) => {413 const Icon = m.icon;414 return (415 <motion.div416 key={m.id}417 initial={{ opacity: 0, scale: 0.95 }}418 animate={{ opacity: 1, scale: 1 }}419 transition={{ duration: 0.4, delay: 0.2 + i * 0.05 }}420 >421 <Card className="h-full border-2 hover:border-primary/50 transition-all duration-300">422 <CardHeader className="pb-3">423 <div className="flex items-center gap-3 mb-2">424 <div className="p-2 rounded-xl bg-primary/10 border border-primary/20">425 <Icon className="w-5 h-5 text-primary" />426 </div>427 <CardTitle className="text-base md:text-lg">{m.name}</CardTitle>428 {m.badge && (429 <Badge className={`ml-auto text-[10px] border-0 ${m.badge === "Indisponible" ? "bg-amber-500/20 text-amber-600 dark:text-amber-400" : "bg-primary text-primary-foreground"}`}>{m.badge}</Badge>430 )}431 </div>432 <CardDescription className="text-xs md:text-sm">{m.desc}</CardDescription>433 </CardHeader>434 <CardContent className="flex flex-wrap gap-2">435 <Badge variant="outline" className="text-xs">{m.context}</Badge>436 <Badge variant="secondary" className="text-xs font-mono">{m.id}</Badge>437 </CardContent>438 </Card>439 </motion.div>440 );441 })}442 </div>443 </motion.div>444445 {/* Quick Start Examples */}446 <motion.div447 initial={{ opacity: 0, y: 20 }}448 animate={{ opacity: 1, y: 0 }}449 transition={{ duration: 0.6, delay: 0.2 }}450 className="mb-12 md:mb-20"451 >452 <h2 className="text-2xl md:text-3xl lg:text-4xl font-black mb-3 md:mb-4 text-center">Exemples d'Utilisation</h2>453 <p className="text-center text-muted-foreground mb-8 md:mb-12 text-base md:text-lg">454 Demandez simplement ce que vous voulez analyser - l'IA s'occupe du reste455 </p>456 <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">457 {useCases.map((useCase, index) => {458 const Icon = useCase.icon;459 return (460 <motion.div461 key={index}462 initial={{ opacity: 0, scale: 0.95 }}463 animate={{ opacity: 1, scale: 1 }}464 transition={{ duration: 0.4, delay: 0.3 + index * 0.05 }}465 >466 <Card className="h-full hover:shadow-xl transition-all duration-300 border-2 hover:border-primary/50 group cursor-pointer">467 <CardHeader className="pb-3">468 <Icon className={`w-8 h-8 md:w-10 md:h-10 ${useCase.color} mb-3`} />469 <CardTitle className="text-base md:text-lg mb-2">{useCase.title}</CardTitle>470 </CardHeader>471 <CardContent>472 <p className="text-xs md:text-sm text-muted-foreground italic leading-relaxed">473 "{useCase.example}"474 </p>475 </CardContent>476 </Card>477 </motion.div>478 );479 })}480 </div>481 </motion.div>482483 {/* All Tools by Category - With Accordions */}484 <motion.div485 initial={{ opacity: 0, y: 20 }}486 animate={{ opacity: 1, y: 0 }}487 transition={{ duration: 0.6, delay: 0.4 }}488 className="mb-12 md:mb-20"489 >490 <h2 className="text-2xl md:text-3xl lg:text-4xl font-black mb-3 md:mb-4 text-center">Tous les Outils Disponibles</h2>491 <p className="text-center text-muted-foreground mb-8 md:mb-12 text-base md:text-lg max-w-3xl mx-auto">492 Plus de 200 outils organisés par catégorie. Cliquez pour explorer chaque section.493 </p>494495 <Accordion type="multiple" className="space-y-4">496 {categories.map((category, index) => {497 const Icon = category.icon;498 return (499 <AccordionItem500 key={category.id}501 value={category.id}502 className="border-2 rounded-2xl px-4 md:px-6 bg-card/50 backdrop-blur-sm hover:border-primary/50 transition-all duration-300"503 >504 <AccordionTrigger className="hover:no-underline py-4 md:py-6">505 <div className="flex items-center gap-3 md:gap-4 text-left">506 <div className={`p-2 md:p-3 rounded-xl bg-gradient-to-br ${category.color} flex-shrink-0`}>507 <Icon className="w-5 h-5 md:w-6 md:h-6 text-white" />508 </div>509 <div className="flex-1">510 <h3 className="text-base md:text-lg lg:text-xl font-bold mb-1">{category.title}</h3>511 <p className="text-xs md:text-sm text-muted-foreground">{category.description}</p>512 </div>513 <Badge variant="secondary" className="ml-auto text-xs md:text-sm">514 {category.tools.length} outils515 </Badge>516 </div>517 </AccordionTrigger>518 <AccordionContent className="pt-2 pb-6">519 <div className="grid sm:grid-cols-2 gap-3 md:gap-4 mt-4">520 {category.tools.map((tool, toolIndex) => (521 <Card key={toolIndex} className="hover:shadow-lg transition-all duration-200 border hover:border-primary/30">522 <CardHeader className="p-3 md:p-4">523 <CardTitle className="text-sm md:text-base font-semibold text-primary mb-1">524 {tool.name}525 </CardTitle>526 <CardDescription className="text-xs md:text-sm leading-relaxed">527 {tool.desc}528 </CardDescription>529 </CardHeader>530 <CardContent className="p-3 md:p-4 pt-0">531 <div className="bg-muted/50 rounded-lg p-2 md:p-3 border border-border/50">532 <p className="text-xs md:text-sm italic text-muted-foreground">533 💬 "{tool.example}"534 </p>535 </div>536 </CardContent>537 </Card>538 ))}539 </div>540 </AccordionContent>541 </AccordionItem>542 );543 })}544 </Accordion>545 </motion.div>546547 {/* Python Custom Code Section */}548 <motion.div549 initial={{ opacity: 0, y: 20 }}550 animate={{ opacity: 1, y: 0 }}551 transition={{ duration: 0.6, delay: 0.6 }}552 className="mb-12 md:mb-20"553 >554 <Card className="border-2 border-primary/30 bg-gradient-to-br from-primary/5 via-background to-[#ff2d78]/5 shadow-2xl">555 <CardHeader className="text-center pb-6 md:pb-8">556 <div className="inline-flex items-center justify-center w-14 h-14 md:w-16 md:h-16 rounded-2xl bg-hot shadow-hot mx-auto mb-4 md:mb-6">557 <Code className="w-7 h-7 md:w-8 md:h-8 text-white" />558 </div>559 <CardTitle className="text-2xl md:text-3xl lg:text-4xl font-black mb-3 md:mb-4">560 Code Python Libre561 </CardTitle>562 <CardDescription className="text-base md:text-lg max-w-3xl mx-auto">563 Exécutez n'importe quel code Python pour des analyses personnalisées.564 Utilisez pandas, numpy, scipy, matplotlib, statsmodels et plus encore.565 </CardDescription>566 </CardHeader>567 <CardContent className="space-y-6 md:space-y-8">568 <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">569 {pythonFeatures.map((feature, i) => (570 <div key={i} className="flex items-start gap-3 p-3 md:p-4 rounded-xl bg-background/80 border-2 border-primary/10 hover:border-primary/30 transition-all duration-200">571 <div className="text-xl md:text-2xl">{feature.name.split(' ')[0]}</div>572 <div>573 <div className="font-semibold text-sm md:text-base mb-1">{feature.name.substring(3)}</div>574 <div className="text-xs md:text-sm text-muted-foreground">{feature.desc}</div>575 </div>576 </div>577 ))}578 </div>579580 <div className="bg-muted/30 rounded-xl p-4 md:p-6 border-2 border-dashed border-primary/20">581 <h4 className="font-bold text-base md:text-lg mb-4 flex items-center gap-2">582 <Code className="w-5 h-5 text-primary" />583 Exemples Avancés584 </h4>585 <div className="space-y-4">586 {advancedExamples.map((ex, i) => (587 <div key={i} className="bg-background rounded-lg p-3 md:p-4 border">588 <div className="font-semibold text-sm md:text-base mb-2 text-primary">{ex.title}</div>589 <div className="bg-muted/50 rounded p-2 md:p-3 mb-2 font-mono text-xs md:text-sm">590 {ex.code}591 </div>592 <div className="text-xs md:text-sm text-muted-foreground flex items-center gap-2">593 <Badge variant="secondary" className="text-xs">Résultat</Badge>594 {ex.result}595 </div>596 </div>597 ))}598 </div>599 </div>600 </CardContent>601 </Card>602 </motion.div>603604 {/* How It Works */}605 <motion.div606 initial={{ opacity: 0, y: 20 }}607 animate={{ opacity: 1, y: 0 }}608 transition={{ duration: 0.6, delay: 0.7 }}609 className="mb-12 md:mb-20"610 >611 <h2 className="text-2xl md:text-3xl lg:text-4xl font-black mb-3 md:mb-4 text-center">Comment ça marche ?</h2>612 <p className="text-center text-muted-foreground mb-8 md:mb-12 text-base md:text-lg">613 Un processus simple en 3 étapes614 </p>615 <div className="grid md:grid-cols-3 gap-6 md:gap-8">616 {[617 {618 step: "1",619 title: "Posez votre question",620 desc: "Décrivez simplement ce que vous voulez analyser en langage naturel",621 icon: Sparkles,622 color: "from-blue-500 to-cyan-500"623 },624 {625 step: "2",626 title: "L'IA travaille pour vous",627 desc: "Claude sélectionne et utilise automatiquement les meilleurs outils pour répondre",628 icon: BrainCircuit,629 color: "from-purple-500 to-pink-500"630 },631 {632 step: "3",633 title: "Recevez l'analyse",634 desc: "Obtenez une réponse structurée avec graphiques, données et insights",635 icon: BarChart3,636 color: "from-green-500 to-emerald-500"637 }638 ].map((step, i) => {639 const Icon = step.icon;640 return (641 <Card key={i} className="text-center border-2 hover:shadow-2xl transition-all duration-300">642 <CardHeader>643 <div className="mx-auto mb-4">644 <div className={`inline-flex items-center justify-center w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-gradient-to-br ${step.color} p-[2px]`}>645 <div className="w-full h-full bg-background rounded-[14px] flex items-center justify-center">646 <Icon className="w-7 h-7 md:w-9 md:h-9 text-primary" />647 </div>648 </div>649 </div>650 <div className={`inline-flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-gradient-to-br ${step.color} text-white font-black text-lg md:text-xl mb-3 md:mb-4 mx-auto`}>651 {step.step}652 </div>653 <CardTitle className="text-lg md:text-xl mb-2 md:mb-3">{step.title}</CardTitle>654 <CardDescription className="text-sm md:text-base leading-relaxed">655 {step.desc}656 </CardDescription>657 </CardHeader>658 </Card>659 );660 })}661 </div>662 </motion.div>663664 {/* API Coverage */}665 <motion.div666 initial={{ opacity: 0, y: 20 }}667 animate={{ opacity: 1, y: 0 }}668 transition={{ duration: 0.6, delay: 0.8 }}669 className="mb-12 md:mb-20"670 >671 <Card className="border-2 border-green-500/30 bg-gradient-to-br from-green-500/5 via-background to-emerald-500/5">672 <CardHeader className="text-center">673 <Database className="w-12 h-12 md:w-16 md:h-16 mx-auto mb-4 md:mb-6 text-green-500" />674 <CardTitle className="text-2xl md:text-3xl font-bold mb-3">Couverture API Complète</CardTitle>675 <CardDescription className="text-base md:text-lg max-w-3xl mx-auto">676 VQuant s'intègre avec les meilleures sources de données financières677 </CardDescription>678 </CardHeader>679 <CardContent>680 <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">681 {[682 { name: "Financial Modeling Prep", endpoints: "200+", icon: Database, color: "text-blue-500" },683 { name: "Exa AI Search", endpoints: "Recherche sémantique", icon: Search, color: "text-purple-500" },684 { name: "Firecrawl", endpoints: "Web scraping", icon: Globe, color: "text-green-500" },685 { name: "Tavily", endpoints: "Agrégation news", icon: Newspaper, color: "text-orange-500" },686 ].map((api, i) => {687 const Icon = api.icon;688 return (689 <div key={i} className="text-center p-4 md:p-6 rounded-xl bg-background/80 border-2 hover:border-primary/30 transition-all">690 <Icon className={`w-10 h-10 md:w-12 md:h-12 mx-auto mb-3 md:mb-4 ${api.color}`} />691 <div className="font-bold text-sm md:text-base mb-1">{api.name}</div>692 <div className="text-xs md:text-sm text-muted-foreground">{api.endpoints}</div>693 </div>694 );695 })}696 </div>697 </CardContent>698 </Card>699 </motion.div>700701 {/* CTA Section */}702 <motion.div703 initial={{ opacity: 0, y: 20 }}704 animate={{ opacity: 1, y: 0 }}705 transition={{ duration: 0.6, delay: 0.9 }}706 >707 <Card className="border-2 border-primary/50 bg-gradient-to-br from-primary/10 via-background to-[#ff2d78]/10 shadow-2xl">708 <CardContent className="p-8 md:p-12 text-center">709 <h2 className="text-2xl md:text-3xl lg:text-4xl font-black mb-3 md:mb-4 gradient-text">710 Prêt à Explorer ?711 </h2>712 <p className="text-base md:text-lg text-muted-foreground mb-6 md:mb-8 max-w-2xl mx-auto">713 Posez simplement votre question financière et laissez l'IA faire le travail.714 Analyses complètes, données en temps réel, et insights puissants en quelques secondes.715 </p>716 <Button717 size="lg"718 onClick={() => setLocation('/')}719 className="h-12 md:h-14 px-6 md:px-8 text-base md:text-lg bg-primary hover:bg-primary/90 text-primary-foreground transition-colors"720 >721 <Sparkles className="w-4 h-4 md:w-5 md:h-5 mr-2" />722 Commencer une Analyse723 </Button>724 </CardContent>725 </Card>726 </motion.div>727 </main>728 </div>729 );730}731