Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SendAI - Autonomous Trading Agents on Solana</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #09090b; | |
| --bg-elevated: #0f0f12; | |
| --bg-card: #141419; | |
| --fg: #fafafa; | |
| --fg-muted: #71717a; | |
| --accent: #14f195; | |
| --accent-secondary: #9945ff; | |
| --border: #27272a; | |
| --border-hover: #3f3f46; | |
| --success: #14f195; | |
| --danger: #ff4757; | |
| --warning: #fbbf24; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { scroll-behavior: auto; } | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg); | |
| color: var(--fg); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .font-mono { font-family: 'JetBrains Mono', monospace; } | |
| /* Animated Background */ | |
| .bg-mesh { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background: | |
| radial-gradient(ellipse 80% 50% at 50% -20%, rgba(20, 241, 149, 0.12), transparent), | |
| radial-gradient(ellipse 60% 40% at 100% 50%, rgba(153, 69, 255, 0.08), transparent), | |
| radial-gradient(ellipse 50% 30% at 0% 80%, rgba(20, 241, 149, 0.06), transparent); | |
| } | |
| .grid-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background-image: | |
| linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); | |
| background-size: 64px 64px; | |
| mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 40%, transparent 80%); | |
| } | |
| /* Navigation */ | |
| .nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(24px); | |
| background: rgba(9, 9, 11, 0.85); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-blur { | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(180deg, rgba(9,9,11,0.95) 0%, rgba(9,9,11,0.8) 100%); | |
| z-index: -1; | |
| } | |
| /* Buttons */ | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); | |
| color: var(--bg); | |
| padding: 14px 32px; | |
| border-radius: 12px; | |
| font-weight: 700; | |
| font-size: 0.9375rem; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); | |
| opacity: 0; | |
| transition: opacity 0.25s; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 32px rgba(20, 241, 149, 0.35), 0 0 0 1px rgba(20, 241, 149, 0.2); | |
| } | |
| .btn-primary:hover::before { opacity: 1; } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--fg); | |
| padding: 14px 32px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| border: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--accent); | |
| background: rgba(20, 241, 149, 0.05); | |
| } | |
| .btn-ghost { | |
| background: rgba(255,255,255,0.03); | |
| color: var(--fg); | |
| padding: 10px 20px; | |
| border-radius: 10px; | |
| font-weight: 500; | |
| border: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| font-size: 0.875rem; | |
| } | |
| .btn-ghost:hover { | |
| background: rgba(255,255,255,0.06); | |
| border-color: var(--border-hover); | |
| } | |
| /* Hero */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding-top: 100px; | |
| position: relative; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 14px 6px 6px; | |
| background: rgba(20, 241, 149, 0.08); | |
| border: 1px solid rgba(20, 241, 149, 0.2); | |
| border-radius: 100px; | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| color: var(--accent); | |
| margin-bottom: 24px; | |
| } | |
| .hero-badge-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| animation: pulse-dot 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse-dot { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.2); } | |
| } | |
| .hero-title { | |
| font-size: clamp(3rem, 10vw, 5.5rem); | |
| font-weight: 900; | |
| line-height: 1.05; | |
| letter-spacing: -0.03em; | |
| margin-bottom: 24px; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 50%, var(--accent) 100%); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradient-shift 4s ease infinite; | |
| } | |
| @keyframes gradient-shift { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| /* Stats Cards */ | |
| .stat-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(20, 241, 149, 0.5), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .stat-card:hover { | |
| border-color: var(--border-hover); | |
| transform: translateY(-4px); | |
| } | |
| .stat-card:hover::before { opacity: 1; } | |
| .stat-value { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .stat-change { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| } | |
| .stat-change.positive { | |
| background: rgba(20, 241, 149, 0.12); | |
| color: var(--success); | |
| } | |
| .stat-change.negative { | |
| background: rgba(255, 71, 87, 0.12); | |
| color: var(--danger); | |
| } | |
| /* Agent Cards */ | |
| .agent-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 28px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .agent-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, rgba(20, 241, 149, 0.05) 0%, transparent 60%); | |
| opacity: 0; | |
| transition: opacity 0.35s; | |
| } | |
| .agent-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); | |
| opacity: 0; | |
| transition: opacity 0.35s; | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-8px); | |
| border-color: rgba(20, 241, 149, 0.3); | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(20, 241, 149, 0.1); | |
| } | |
| .agent-card:hover::before, | |
| .agent-card:hover::after { opacity: 1; } | |
| .agent-avatar { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .agent-avatar::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: inherit; | |
| filter: blur(12px); | |
| opacity: 0.5; | |
| transform: scale(1.5); | |
| } | |
| .agent-avatar svg { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .agent-status { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| border-radius: 100px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.02em; | |
| } | |
| .agent-status.active { | |
| background: rgba(20, 241, 149, 0.12); | |
| color: var(--success); | |
| } | |
| .agent-status.paused { | |
| background: rgba(251, 191, 36, 0.12); | |
| color: var(--warning); | |
| } | |
| /* Chart */ | |
| .chart-container { | |
| height: 300px; | |
| position: relative; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: linear-gradient(180deg, rgba(20, 241, 149, 0.03) 0%, transparent 100%); | |
| } | |
| .chart-line { | |
| fill: none; | |
| stroke: url(#lineGradient); | |
| stroke-width: 2.5; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .chart-area { | |
| fill: url(#areaGradient); | |
| } | |
| /* Live Feed */ | |
| .live-feed { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| } | |
| .feed-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border); | |
| transition: background 0.2s; | |
| } | |
| .feed-item:last-child { border-bottom: none; } | |
| .feed-item:hover { background: rgba(255,255,255,0.02); } | |
| .feed-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| /* Ticker */ | |
| .ticker-wrapper { | |
| overflow: hidden; | |
| background: var(--bg-elevated); | |
| border-top: 1px solid var(--border); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .ticker { | |
| display: flex; | |
| gap: 48px; | |
| padding: 16px 0; | |
| animation: ticker-scroll 40s linear infinite; | |
| } | |
| @keyframes ticker-scroll { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .ticker-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| white-space: nowrap; | |
| } | |
| /* Reveal Animation */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .reveal-delay-1 { transition-delay: 0.1s; } | |
| .reveal-delay-2 { transition-delay: 0.2s; } | |
| .reveal-delay-3 { transition-delay: 0.3s; } | |
| .reveal-delay-4 { transition-delay: 0.4s; } | |
| /* Tabs */ | |
| .tab-container { | |
| display: inline-flex; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 4px; | |
| } | |
| .tab-btn { | |
| padding: 10px 20px; | |
| background: transparent; | |
| border: none; | |
| color: var(--fg-muted); | |
| font-weight: 500; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| border-radius: 8px; | |
| transition: all 0.2s; | |
| } | |
| .tab-btn.active { | |
| background: rgba(20, 241, 149, 0.1); | |
| color: var(--accent); | |
| } | |
| .tab-btn:hover:not(.active) { | |
| color: var(--fg); | |
| } | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; animation: fadeIn 0.3s ease; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(9, 9, 11, 0.98); | |
| z-index: 200; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 32px; | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .mobile-menu.open { transform: translateX(0); } | |
| /* Focus States */ | |
| button:focus-visible, a:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); } | |
| /* Pulse Ring */ | |
| .pulse-ring { | |
| position: relative; | |
| } | |
| .pulse-ring::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: inherit; | |
| border: 2px solid var(--accent); | |
| animation: pulse-ring 2s ease-out infinite; | |
| } | |
| @keyframes pulse-ring { | |
| 0% { transform: scale(1); opacity: 0.5; } | |
| 100% { transform: scale(1.3); opacity: 0; } | |
| } | |
| /* Number Counter Animation */ | |
| .counter { | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background --> | |
| <div class="bg-mesh"></div> | |
| <div class="grid-overlay"></div> | |
| <!-- Navigation --> | |
| <nav class="nav" id="navbar"> | |
| <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"> | |
| <a href="#" class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--accent-secondary)] flex items-center justify-center"> | |
| <i data-lucide="send" class="w-5 h-5 text-[var(--bg)]"></i> | |
| </div> | |
| <span class="text-xl font-bold tracking-tight">SendAI</span> | |
| </a> | |
| <div class="hidden lg:flex items-center gap-10"> | |
| <a href="#agents" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Agents</a> | |
| <a href="#performance" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Performance</a> | |
| <a href="#features" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Features</a> | |
| <a href="#docs" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Docs</a> | |
| </div> | |
| <div class="hidden lg:flex items-center gap-4"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-[var(--fg-muted)] hover:text-[var(--accent)] transition-colors">Built with anycoder</a> | |
| <button class="btn-ghost">Connect Wallet</button> | |
| <button class="btn-primary">Launch App</button> | |
| </div> | |
| <button class="lg:hidden p-2" id="menuToggle" aria-label="Toggle menu"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-menu" id="mobileMenu"> | |
| <button class="absolute top-6 right-6 p-2" id="menuClose" aria-label="Close menu"> | |
| <i data-lucide="x" class="w-6 h-6"></i> | |
| </button> | |
| <a href="#agents" class="text-2xl font-semibold">Agents</a> | |
| <a href="#performance" class="text-2xl font-semibold">Performance</a> | |
| <a href="#features" class="text-2xl font-semibold">Features</a> | |
| <a href="#docs" class="text-2xl font-semibold">Docs</a> | |
| <div class="flex gap-4 mt-8"> | |
| <button class="btn-secondary">Connect Wallet</button> | |
| <button class="btn-primary">Launch App</button> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="max-w-7xl mx-auto px-6 w-full"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div class="reveal"> | |
| <div class="hero-badge"> | |
| <span class="hero-badge-dot"></span> | |
| <span>Live on Solana Mainnet</span> | |
| </div> | |
| <h1 class="hero-title"> | |
| Trade Smarter with <span class="gradient-text">AI Agents</span> | |
| </h1> | |
| <p class="text-lg text-[var(--fg-muted)] mb-10 max-w-lg leading-relaxed"> | |
| Deploy autonomous trading agents that analyze markets, execute strategies, and optimize your portfolio 24/7. Built on Solana for lightning-fast execution. | |
| </p> | |
| <div class="flex flex-wrap gap-4 mb-12"> | |
| <button class="btn-primary flex items-center gap-2"> | |
| <span>Start Trading</span> | |
| <i data-lucide="arrow-right" class="w-4 h-4"></i> | |
| </button> | |
| <button class="btn-secondary flex items-center gap-2"> | |
| <i data-lucide="play-circle" class="w-4 h-4"></i> | |
| <span>Watch Demo</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center gap-10"> | |
| <div> | |
| <div class="text-2xl font-bold font-mono">$847M+</div> | |
| <div class="text-sm text-[var(--fg-muted)]">Volume Traded</div> | |
| </div> | |
| <div class="w-px h-10 bg-[var(--border)]"></div> | |
| <div> | |
| <div class="text-2xl font-bold font-mono">12,400+</div> | |
| <div class="text-sm text-[var(--fg-muted)]">Active Agents</div> | |
| </div> | |
| <div class="w-px h-10 bg-[var(--border)]"></div> | |
| <div> | |
| <div class="text-2xl font-bold font-mono">99.9%</div> | |
| <div class="text-sm text-[var(--fg-muted)]">Uptime</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Panel --> | |
| <div class="reveal reveal-delay-2"> | |
| <div class="stat-card"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-semibold">Portfolio Overview</h3> | |
| <div class="flex items-center gap-2 text-xs text-[var(--accent)]"> | |
| <span class="w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse"></span> | |
| Live | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <div class="text-sm text-[var(--fg-muted)] mb-1">Total Value</div> | |
| <div class="stat-value" id="totalValue">$124,847</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-[var(--fg-muted)] mb-1">24h Change</div> | |
| <div class="flex items-center gap-2"> | |
| <span class="stat-change positive"> | |
| <i data-lucide="trending-up" class="w-3 h-3"></i> | |
| +12.4% | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chart --> | |
| <div class="chart-container mb-6" id="heroChart"> | |
| <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none"> | |
| <defs> | |
| <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" style="stop-color:#14f195" /> | |
| <stop offset="100%" style="stop-color:#9945ff" /> | |
| </linearGradient> | |
| <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" style="stop-color:rgba(20,241,149,0.25)" /> | |
| <stop offset="100%" style="stop-color:rgba(20,241,149,0)" /> | |
| </linearGradient> | |
| </defs> | |
| <path class="chart-area" id="chartArea"></path> | |
| <path class="chart-line" id="chartLine"></path> | |
| </svg> | |
| </div> | |
| <!-- Active Agents Preview --> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 bg-[var(--bg)] rounded-xl"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--accent-secondary)] flex items-center justify-center"> | |
| <i data-lucide="brain" class="w-5 h-5 text-[var(--bg)]"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">Momentum Bot</div> | |
| <div class="text-xs text-[var(--fg-muted)]">SOL/USDC</div> | |
| </div> | |
| </div> | |
| <span class="stat-change positive text-xs">+8.2%</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-[var(--bg)] rounded-xl"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent-secondary)] to-[var(--accent)] flex items-center justify-center"> | |
| <i data-lucide="git-branch" class="w-5 h-5 text-[var(--bg)]"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">Arb Scout</div> | |
| <div class="text-xs text-[var(--fg-muted)]">Cross-DEX</div> | |
| </div> | |
| </div> | |
| <span class="stat-change positive text-xs">+3.7%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ticker --> | |
| <section class="ticker-wrapper"> | |
| <div class="ticker" id="ticker"></div> | |
| </section> | |
| <!-- Agents Section --> | |
| <section id="agents" class="py-28"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16 reveal"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">Agent Marketplace</h2> | |
| <p class="text-[var(--fg-muted)] max-w-xl mx-auto"> | |
| Choose from battle-tested trading agents or create your own | |
| </p> | |
| </div> | |
| <!-- Filter Tabs --> | |
| <div class="flex justify-center mb-10 reveal"> | |
| <div class="tab-container"> | |
| <button class="tab-btn active" data-filter="all">All Agents</button> | |
| <button class="tab-btn" data-filter="trending">Trending</button> | |
| <button class="tab-btn" data-filter="new">New</button> | |
| <button class="tab-btn" data-filter="verified">Verified</button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="agentGrid"> | |
| <!-- Agent Cards --> | |
| <div class="agent-card reveal reveal-delay-1" data-category="trending verified"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="agent-avatar bg-gradient-to-br from-[var(--accent)] to-[#0ea5e9]"> | |
| <i data-lucide="trending-up" class="w-7 h-7 text-[var(--bg)]"></i> | |
| </div> | |
| <span class="agent-status active">Active</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 relative z-10">Momentum Alpha</h3> | |
| <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10"> | |
| Trend-following agent with dynamic position sizing. Optimized for high-volatility markets. | |
| </p> | |
| <div class="grid grid-cols-3 gap-4 mb-5 relative z-10"> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">30d Return</div> | |
| <div class="font-mono font-semibold text-[var(--success)]">+24.7%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Win Rate</div> | |
| <div class="font-mono font-semibold">68.4%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Trades</div> | |
| <div class="font-mono font-semibold">1,247</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-6 h-6 rounded-full bg-[var(--accent)] opacity-60"></div> | |
| <div class="w-6 h-6 rounded-full bg-[var(--accent-secondary)] opacity-60"></div> | |
| <div class="w-6 h-6 rounded-full bg-[var(--fg-muted)] opacity-40"></div> | |
| </div> | |
| <span class="text-xs text-[var(--fg-muted)]">2.4k users</span> | |
| </div> | |
| <button class="btn-primary text-sm py-2 px-5">Deploy</button> | |
| </div> | |
| </div> | |
| <div class="agent-card reveal reveal-delay-2" data-category="trending verified"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="agent-avatar bg-gradient-to-br from-[var(--accent-secondary)] to-[#ec4899]"> | |
| <i data-lucide="git-branch" class="w-7 h-7 text-[var(--bg)]"></i> | |
| </div> | |
| <span class="agent-status active">Active</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 relative z-10">Arb Scout</h3> | |
| <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10"> | |
| Cross-DEX arbitrage agent. Scans Jupiter, Raydium, Orca for price discrepancies. | |
| </p> | |
| <div class="grid grid-cols-3 gap-4 mb-5 relative z-10"> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">30d Return</div> | |
| <div class="font-mono font-semibold text-[var(--success)]">+12.3%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Win Rate</div> | |
| <div class="font-mono font-semibold">91.2%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Trades</div> | |
| <div class="font-mono font-semibold">8,492</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-6 h-6 rounded-full bg-[var(--accent-secondary)] opacity-60"></div> | |
| <div class="w-6 h-6 rounded-full bg-[var(--accent)] opacity-60"></div> | |
| </div> | |
| <span class="text-xs text-[var(--fg-muted)]">3.1k users</span> | |
| </div> | |
| <button class="btn-primary text-sm py-2 px-5">Deploy</button> | |
| </div> | |
| </div> | |
| <div class="agent-card reveal reveal-delay-3" data-category="new"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="agent-avatar bg-gradient-to-br from-[#f59e0b] to-[#ef4444]"> | |
| <i data-lucide="shield" class="w-7 h-7 text-[var(--bg)]"></i> | |
| </div> | |
| <span class="agent-status active">Active</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 relative z-10">Grid Guardian</h3> | |
| <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10"> | |
| Grid trading specialist for ranging markets with adaptive spacing algorithms. | |
| </p> | |
| <div class="grid grid-cols-3 gap-4 mb-5 relative z-10"> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">30d Return</div> | |
| <div class="font-mono font-semibold text-[var(--success)]">+18.9%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Win Rate</div> | |
| <div class="font-mono font-semibold">76.1%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Trades</div> | |
| <div class="font-mono font-semibold">3,847</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-6 h-6 rounded-full bg-[#f59e0b] opacity-60"></div> | |
| </div> | |
| <span class="text-xs text-[var(--fg-muted)]">892 users</span> | |
| </div> | |
| <button class="btn-primary text-sm py-2 px-5">Deploy</button> | |
| </div> | |
| </div> | |
| <div class="agent-card reveal reveal-delay-1" data-category="verified"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="agent-avatar bg-gradient-to-br from-[#8b5cf6] to-[#6366f1]"> | |
| <i data-lucide="brain" class="w-7 h-7 text-[var(--bg)]"></i> | |
| </div> | |
| <span class="agent-status active">Active</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 relative z-10">Sentiment Sage</h3> | |
| <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10"> | |
| NLP-powered agent analyzing Twitter, Discord sentiment for alpha signals. | |
| </p> | |
| <div class="grid grid-cols-3 gap-4 mb-5 relative z-10"> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">30d Return</div> | |
| <div class="font-mono font-semibold text-[var(--success)]">+21.4%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Win Rate</div> | |
| <div class="font-mono font-semibold">64.7%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Trades</div> | |
| <div class="font-mono font-semibold">567</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-6 h-6 rounded-full bg-[#8b5cf6] opacity-60"></div> | |
| <div class="w-6 h-6 rounded-full bg-[#6366f1] opacity-60"></div> | |
| </div> | |
| <span class="text-xs text-[var(--fg-muted)]">1.8k users</span> | |
| </div> | |
| <button class="btn-primary text-sm py-2 px-5">Deploy</button> | |
| </div> | |
| </div> | |
| <div class="agent-card reveal reveal-delay-2" data-category="new"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="agent-avatar bg-gradient-to-br from-[#06b6d4] to-[#0891b2]"> | |
| <i data-lucide="droplets" class="w-7 h-7 text-[var(--bg)]"></i> | |
| </div> | |
| <span class="agent-status active">Active</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 relative z-10">Liquidity Flow</h3> | |
| <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10"> | |
| Market-making agent for DeFi protocols. Earns fees while managing impermanent loss. | |
| </p> | |
| <div class="grid grid-cols-3 gap-4 mb-5 relative z-10"> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">30d Return</div> | |
| <div class="font-mono font-semibold text-[var(--success)]">+9.8%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Win Rate</div> | |
| <div class="font-mono font-semibold">94.3%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Trades</div> | |
| <div class="font-mono font-semibold">12,847</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-6 h-6 rounded-full bg-[#06b6d4] opacity-60"></div> | |
| </div> | |
| <span class="text-xs text-[var(--fg-muted)]">624 users</span> | |
| </div> | |
| <button class="btn-primary text-sm py-2 px-5">Deploy</button> | |
| </div> | |
| </div> | |
| <div class="agent-card reveal reveal-delay-3" data-category="trending"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div class="agent-avatar bg-gradient-to-br from-[#10b981] to-[#059669]"> | |
| <i data-lucide="activity" class="w-7 h-7 text-[var(--bg)]"></i> | |
| </div> | |
| <span class="agent-status active">Active</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 relative z-10">Volatility Hunter</h3> | |
| <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10"> | |
| Options-focused agent capitalizing on volatility spikes and mean reversion. | |
| </p> | |
| <div class="grid grid-cols-3 gap-4 mb-5 relative z-10"> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">30d Return</div> | |
| <div class="font-mono font-semibold text-[var(--success)]">+31.2%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Win Rate</div> | |
| <div class="font-mono font-semibold">58.9%</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-[var(--fg-muted)]">Trades</div> | |
| <div class="font-mono font-semibold">892</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-6 h-6 rounded-full bg-[#10b981] opacity-60"></div> | |
| <div class="w-6 h-6 rounded-full bg-[#059669] opacity-60"></div> | |
| <div class="w-6 h-6 rounded-full bg-[var(--fg-muted)] opacity-40"></div> | |
| </div> | |
| <span class="text-xs text-[var(--fg-muted)]">1.5k users</span> | |
| </div> | |
| <button class="btn-primary text-sm py-2 px-5">Deploy</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Performance Section --> | |
| <section id="performance" class="py-28 bg-[var(--bg-elevated)]"> | |
| <div class="max-w-7xl mx-auto px-6"> | |
| <div class="text-center mb-16 reveal"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">Proven Performance</h2> | |
| <p class="text-[var(--fg-muted)] max-w-xl mx-auto"> | |
| Real-time metrics from our agent network | |
| </p> | |
| </div> | |
| <!-- Time Tabs --> | |
| <div class="flex justify-center mb-10 reveal"> | |
| <div class="tab-container"> | |
| <button class="tab-btn active" data-tab="1m">1M</button> | |
| <button class="tab-btn" data-tab="3m">3M</button> | |
| <button class="tab-btn" data-tab="1y">1Y</button> | |
| <button class="tab-btn" data-tab="all">All</button> | |
| </div> | |
| </div> | |
| <div class="grid lg:grid-cols-4 gap-6"> | |
| <div class="lg:col-span-3 reveal"> | |
| <div class="stat-card h-full"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-semibold">Cumulative Returns</h3> | |
| <div class="flex items-center gap-6"> | |
| < |