Hugging Face's logo

Spaces:
namana23
/
anycoder-7e258a49
Running

App Files Community
namana23 commited on
Commit
96b5643
·
verified ·
1 Parent(s): a01cebd

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +972 -995
index.html CHANGED
@@ -1,1026 +1,1003 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NexTrade AI - Autonomous Trading Agents</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
9
- <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
12
- <style>
13
- :root {
14
- --bg: #0a0a0f;
15
- --bg-elevated: #12121a;
16
- --fg: #f0f0f5;
17
- --muted: #6b7280;
18
- --accent: #00d4aa;
19
- --accent-dim: rgba(0, 212, 170, 0.15);
20
- --card: #16161f;
21
- --border: #2a2a3a;
22
- --danger: #ff4757;
23
- --warning: #ffa502;
24
- --success: #00d4aa;
25
- }
26
-
27
- * {
28
- margin: 0;
29
- padding: 0;
30
- box-sizing: border-box;
31
- }
32
-
33
- html {
34
- scroll-behavior: smooth;
35
- }
36
-
37
- @media (prefers-reduced-motion: reduce) {
38
- html {
39
- scroll-behavior: auto;
40
- }
41
- *, *::before, *::after {
42
- animation-duration: 0.01ms !important;
43
- animation-iteration-count: 1 !important;
44
- transition-duration: 0.01ms !important;
45
- }
46
- }
47
-
48
- body {
49
- font-family: 'Space Grotesk', sans-serif;
50
- background: var(--bg);
51
- color: var(--fg);
52
- line-height: 1.6;
53
- overflow-x: hidden;
54
- }
55
-
56
- .font-mono {
57
- font-family: 'JetBrains Mono', monospace;
58
- }
59
-
60
- /* Background Grid Pattern */
61
- .bg-grid {
62
- background-image:
63
- linear-gradient(rgba(0, 212, 170, 0.03) 1px, transparent 1px),
64
- linear-gradient(90deg, rgba(0, 212, 170, 0.03) 1px, transparent 1px);
65
- background-size: 60px 60px;
66
- }
67
-
68
- /* Gradient Orbs */
69
- .orb {
70
- position: absolute;
71
- border-radius: 50%;
72
- filter: blur(80px);
73
- opacity: 0.4;
74
- pointer-events: none;
75
- }
76
-
77
- .orb-1 {
78
- width: 600px;
79
- height: 600px;
80
- background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
81
- top: -200px;
82
- right: -200px;
83
- }
84
-
85
- .orb-2 {
86
- width: 400px;
87
- height: 400px;
88
- background: radial-gradient(circle, #6366f1 0%, transparent 70%);
89
- bottom: -100px;
90
- left: -100px;
91
- }
92
-
93
- /* Navigation */
94
- .nav {
95
- position: fixed;
96
- top: 0;
97
- left: 0;
98
- right: 0;
99
- z-index: 100;
100
- backdrop-filter: blur(20px);
101
- background: rgba(10, 10, 15, 0.8);
102
- border-bottom: 1px solid var(--border);
103
- transition: transform 0.3s ease;
104
- }
105
-
106
- .nav-hidden {
107
- transform: translateY(-100%);
108
- }
109
-
110
- /* Buttons */
111
- .btn-primary {
112
- background: var(--accent);
113
- color: var(--bg);
114
- padding: 12px 28px;
115
- border-radius: 8px;
116
- font-weight: 600;
117
- border: none;
118
- cursor: pointer;
119
- transition: all 0.2s ease;
120
- position: relative;
121
- overflow: hidden;
122
- }
123
-
124
- .btn-primary::before {
125
- content: '';
126
- position: absolute;
127
- top: 0;
128
- left: -100%;
129
- width: 100%;
130
- height: 100%;
131
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
132
- transition: left 0.5s ease;
133
- }
134
-
135
- .btn-primary:hover::before {
136
- left: 100%;
137
- }
138
-
139
- .btn-primary:hover {
140
- transform: translateY(-2px);
141
- box-shadow: 0 10px 40px rgba(0, 212, 170, 0.3);
142
- }
143
-
144
- .btn-secondary {
145
- background: transparent;
146
- color: var(--fg);
147
- padding: 12px 28px;
148
- border-radius: 8px;
149
- font-weight: 500;
150
- border: 1px solid var(--border);
151
- cursor: pointer;
152
- transition: all 0.2s ease;
153
- }
154
-
155
- .btn-secondary:hover {
156
- border-color: var(--accent);
157
- color: var(--accent);
158
- }
159
-
160
- /* Hero Section */
161
- .hero {
162
- min-height: 100vh;
163
- display: flex;
164
- align-items: center;
165
- position: relative;
166
- padding-top: 80px;
167
- }
168
-
169
- .hero-title {
170
- font-size: clamp(2.5rem, 8vw, 5rem);
171
- font-weight: 700;
172
- line-height: 1.1;
173
- letter-spacing: -0.02em;
174
- }
175
-
176
- .gradient-text {
177
- background: linear-gradient(135deg, var(--accent) 0%, #6366f1 50%, var(--accent) 100%);
178
- background-size: 200% 200%;
179
- -webkit-background-clip: text;
180
- -webkit-text-fill-color: transparent;
181
- background-clip: text;
182
- animation: gradientShift 4s ease infinite;
183
- }
184
-
185
- @keyframes gradientShift {
186
- 0%, 100% { background-position: 0% 50%; }
187
- 50% { background-position: 100% 50%; }
188
- }
189
-
190
- /* Live Stats Panel */
191
- .stats-panel {
192
- background: var(--card);
193
- border: 1px solid var(--border);
194
- border-radius: 16px;
195
- padding: 24px;
196
- position: relative;
197
- overflow: hidden;
198
- }
199
-
200
- .stats-panel::before {
201
- content: '';
202
- position: absolute;
203
- top: 0;
204
- left: 0;
205
- right: 0;
206
- height: 2px;
207
- background: linear-gradient(90deg, transparent, var(--accent), transparent);
208
- }
209
-
210
- .stat-value {
211
- font-size: 2rem;
212
- font-weight: 700;
213
- font-family: 'JetBrains Mono', monospace;
214
- }
215
-
216
- .stat-change {
217
- display: inline-flex;
218
- align-items: center;
219
- gap: 4px;
220
- font-size: 0.875rem;
221
- padding: 4px 8px;
222
- border-radius: 4px;
223
- }
224
-
225
- .stat-change.positive {
226
- background: rgba(0, 212, 170, 0.15);
227
- color: var(--success);
228
- }
229
-
230
- .stat-change.negative {
231
- background: rgba(255, 71, 87, 0.15);
232
- color: var(--danger);
233
- }
234
-
235
- /* Agent Cards */
236
- .agent-card {
237
- background: var(--card);
238
- border: 1px solid var(--border);
239
- border-radius: 16px;
240
- padding: 28px;
241
- transition: all 0.3s ease;
242
- position: relative;
243
- overflow: hidden;
244
- }
245
-
246
- .agent-card::before {
247
- content: '';
248
- position: absolute;
249
- top: 0;
250
- left: 0;
251
- right: 0;
252
- bottom: 0;
253
- background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 50%);
254
- opacity: 0;
255
- transition: opacity 0.3s ease;
256
- }
257
-
258
- .agent-card:hover {
259
- transform: translateY(-8px);
260
- border-color: var(--accent);
261
- box-shadow: 0 20px 60px rgba(0, 212, 170, 0.15);
262
- }
263
-
264
- .agent-card:hover::before {
265
- opacity: 1;
266
- }
267
-
268
- .agent-icon {
269
- width: 56px;
270
- height: 56px;
271
- border-radius: 12px;
272
- display: flex;
273
- align-items: center;
274
- justify-content: center;
275
- margin-bottom: 20px;
276
- position: relative;
277
- z-index: 1;
278
- }
279
-
280
- .agent-icon svg {
281
- width: 28px;
282
- height: 28px;
283
- }
284
-
285
- /* Performance Chart */
286
- .chart-container {
287
- height: 200px;
288
- position: relative;
289
- background: linear-gradient(180deg, rgba(0, 212, 170, 0.05) 0%, transparent 100%);
290
- border-radius: 12px;
291
- overflow: hidden;
292
- }
293
-
294
- .chart-line {
295
- fill: none;
296
- stroke: var(--accent);
297
- stroke-width: 2;
298
- stroke-linecap: round;
299
- stroke-linejoin: round;
300
- }
301
-
302
- .chart-area {
303
- fill: url(#chartGradient);
304
- }
305
-
306
- .chart-dot {
307
- fill: var(--accent);
308
- filter: drop-shadow(0 0 6px var(--accent));
309
- }
310
-
311
- /* Feature Grid */
312
- .feature-item {
313
- padding: 32px;
314
- background: var(--card);
315
- border: 1px solid var(--border);
316
- border-radius: 16px;
317
- transition: all 0.3s ease;
318
- }
319
-
320
- .feature-item:hover {
321
- border-color: rgba(0, 212, 170, 0.5);
322
- background: var(--bg-elevated);
323
- }
324
-
325
- /* Pricing Cards */
326
- .pricing-card {
327
- background: var(--card);
328
- border: 1px solid var(--border);
329
- border-radius: 20px;
330
- padding: 36px;
331
- position: relative;
332
- transition: all 0.3s ease;
333
- }
334
-
335
- .pricing-card.featured {
336
- border-color: var(--accent);
337
- transform: scale(1.02);
338
- }
339
-
340
- .pricing-card.featured::before {
341
- content: 'Most Popular';
342
- position: absolute;
343
- top: -12px;
344
- left: 50%;
345
- transform: translateX(-50%);
346
- background: var(--accent);
347
- color: var(--bg);
348
- padding: 6px 16px;
349
- border-radius: 20px;
350
- font-size: 0.75rem;
351
- font-weight: 600;
352
- text-transform: uppercase;
353
- letter-spacing: 0.05em;
354
- }
355
-
356
- .pricing-card:hover {
357
- transform: translateY(-8px);
358
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
359
- }
360
-
361
- .pricing-card.featured:hover {
362
- transform: scale(1.02) translateY(-8px);
363
- }
364
-
365
- .price {
366
- font-size: 3rem;
367
- font-weight: 700;
368
- font-family: 'JetBrains Mono', monospace;
369
- }
370
-
371
- /* Scroll Reveal Animation */
372
- .reveal {
373
- opacity: 0;
374
- transform: translateY(40px);
375
- transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
376
- }
377
-
378
- .reveal.active {
379
- opacity: 1;
380
- transform: translateY(0);
381
- }
382
-
383
- .reveal-delay-1 { transition-delay: 0.1s; }
384
- .reveal-delay-2 { transition-delay: 0.2s; }
385
- .reveal-delay-3 { transition-delay: 0.3s; }
386
- .reveal-delay-4 { transition-delay: 0.4s; }
387
-
388
- /* Ticker Animation */
389
- .ticker {
390
- display: flex;
391
- gap: 48px;
392
- animation: ticker 30s linear infinite;
393
- }
394
-
395
- @keyframes ticker {
396
- 0% { transform: translateX(0); }
397
- 100% { transform: translateX(-50%); }
398
- }
399
-
400
- .ticker-item {
401
- display: flex;
402
- align-items: center;
403
- gap: 12px;
404
- white-space: nowrap;
405
- }
406
-
407
- /* Pulse Animation */
408
- .pulse {
409
- animation: pulse 2s ease-in-out infinite;
410
- }
411
-
412
- @keyframes pulse {
413
- 0%, 100% { opacity: 1; }
414
- 50% { opacity: 0.5; }
415
- }
416
-
417
- /* Live Indicator */
418
- .live-indicator {
419
- display: flex;
420
- align-items: center;
421
- gap: 8px;
422
- }
423
-
424
- .live-dot {
425
- width: 8px;
426
- height: 8px;
427
- background: var(--success);
428
- border-radius: 50%;
429
- animation: livePulse 1.5s ease-in-out infinite;
430
- }
431
-
432
- @keyframes livePulse {
433
- 0%, 100% { transform: scale(1); opacity: 1; }
434
- 50% { transform: scale(1.5); opacity: 0.5; }
435
- }
436
-
437
- /* Mobile Menu */
438
- .mobile-menu {
439
- position: fixed;
440
- top: 0;
441
- left: 0;
442
- right: 0;
443
- bottom: 0;
444
- background: rgba(10, 10, 15, 0.98);
445
- z-index: 200;
446
- display: flex;
447
- flex-direction: column;
448
- align-items: center;
449
- justify-content: center;
450
- gap: 32px;
451
- transform: translateX(100%);
452
- transition: transform 0.3s ease;
453
- }
454
-
455
- .mobile-menu.open {
456
- transform: translateX(0);
457
- }
458
-
459
- /* Focus States */
460
- button:focus-visible,
461
- a:focus-visible {
462
- outline: 2px solid var(--accent);
463
- outline-offset: 2px;
464
- }
465
-
466
- /* Custom Scrollbar */
467
- ::-webkit-scrollbar {
468
- width: 8px;
469
- }
470
-
471
- ::-webkit-scrollbar-track {
472
- background: var(--bg);
473
- }
474
-
475
- ::-webkit-scrollbar-thumb {
476
- background: var(--border);
477
- border-radius: 4px;
478
- }
479
-
480
- ::-webkit-scrollbar-thumb:hover {
481
- background: var(--muted);
482
- }
483
-
484
- /* Tab System */
485
- .tab-btn {
486
- padding: 12px 24px;
487
- background: transparent;
488
- border: none;
489
- color: var(--muted);
490
- font-weight: 500;
491
- cursor: pointer;
492
- position: relative;
493
- transition: color 0.2s ease;
494
- }
495
-
496
- .tab-btn.active {
497
- color: var(--accent);
498
- }
499
-
500
- .tab-btn::after {
501
- content: '';
502
- position: absolute;
503
- bottom: 0;
504
- left: 0;
505
- right: 0;
506
- height: 2px;
507
- background: var(--accent);
508
- transform: scaleX(0);
509
- transition: transform 0.2s ease;
510
- }
511
-
512
- .tab-btn.active::after {
513
- transform: scaleX(1);
514
- }
515
-
516
- .tab-content {
517
- display: none;
518
- }
519
-
520
- .tab-content.active {
521
- display: block;
522
- animation: fadeIn 0.3s ease;
523
- }
524
-
525
- @keyframes fadeIn {
526
- from { opacity: 0; transform: translateY(10px); }
527
- to { opacity: 1; transform: translateY(0); }
528
- }
529
-
530
- /* Floating Elements */
531
- .float {
532
- animation: float 6s ease-in-out infinite;
533
- }
534
-
535
- @keyframes float {
536
- 0%, 100% { transform: translateY(0); }
537
- 50% { transform: translateY(-20px); }
538
- }
539
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
540
  </head>
541
- <body class="bg-grid">
542
- <!-- Background Orbs -->
543
- <div class="orb orb-1"></div>
544
- <div class="orb orb-2"></div>
545
-
546
- <!-- Navigation -->
547
- <nav class="nav" id="navbar">
548
- <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
549
- <a href="#" class="flex items-center gap-3">
550
- <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-[var(--accent)] to-[#6366f1] flex items-center justify-center">
551
- <i data-lucide="zap" class="w-5 h-5 text-[var(--bg)]"></i>
552
- </div>
553
- <span class="text-xl font-bold">NexTrade AI</span>
554
- </a>
555
-
556
- <div class="hidden md:flex items-center gap-8">
557
- <a href="#agents" class="text-[var(--muted)] hover:text-[var(--fg)] transition-colors">Agents</a>
558
- <a href="#features" class="text-[var(--muted)] hover:text-[var(--fg)] transition-colors">Features</a>
559
- <a href="#performance" class="text-[var(--muted)] hover:text-[var(--fg)] transition-colors">Performance</a>
560
- <a href="#pricing" class="text-[var(--muted)] hover:text-[var(--fg)] transition-colors">Pricing</a>
561
- </div>
562
-
563
- <div class="hidden md:flex items-center gap-4">
564
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-sm text-[var(--muted)] hover:text-[var(--accent)] transition-colors">Built with anycoder</a>
565
- <button class="btn-secondary">Sign In</button>
566
- <button class="btn-primary">Get Started</button>
567
- </div>
568
 
569
- <button class="md:hidden p-2" id="menuToggle" aria-label="Toggle menu">
570
- <i data-lucide="menu" class="w-6 h-6"></i>
571
- </button>
572
- </div>
573
- </nav>
574
-
575
- <!-- Mobile Menu -->
576
- <div class="mobile-menu" id="mobileMenu">
577
- <button class="absolute top-6 right-6 p-2" id="menuClose" aria-label="Close menu">
578
- <i data-lucide="x" class="w-6 h-6"></i>
579
- </button>
580
- <a href="#agents" class="text-2xl font-semibold">Agents</a>
581
- <a href="#features" class="text-2xl font-semibold">Features</a>
582
- <a href="#performance" class="text-2xl font-semibold">Performance</a>
583
- <a href="#pricing" class="text-2xl font-semibold">Pricing</a>
584
- <div class="flex gap-4 mt-8">
585
- <button class="btn-secondary">Sign In</button>
586
- <button class="btn-primary">Get Started</button>
587
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
588
  </div>
589
-
590
- <!-- Hero Section -->
591
- <section class="hero relative">
592
- <div class="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-12 items-center">
593
- <div class="reveal">
594
- <div class="live-indicator mb-6">
595
- <span class="live-dot"></span>
596
- <span class="text-sm text-[var(--muted)] font-mono">Live Trading Active</span>
597
- </div>
598
- <h1 class="hero-title mb-6">
599
- Autonomous <span class="gradient-text">Trading Agents</span> That Never Sleep
600
- </h1>
601
- <p class="text-lg text-[var(--muted)] mb-8 max-w-xl">
602
- Deploy AI-powered trading agents that analyze markets, execute strategies, and manage risk 24/7. Built for professional traders and institutions.
603
- </p>
604
- <div class="flex flex-wrap gap-4 mb-12">
605
- <button class="btn-primary flex items-center gap-2">
606
- <span>Start Trading</span>
607
- <i data-lucide="arrow-right" class="w-4 h-4"></i>
608
- </button>
609
- <button class="btn-secondary flex items-center gap-2">
610
- <i data-lucide="play" class="w-4 h-4"></i>
611
- <span>Watch Demo</span>
612
- </button>
613
- </div>
614
- <div class="flex items-center gap-8">
615
- <div>
616
- <div class="text-2xl font-bold font-mono">$2.4B+</div>
617
- <div class="text-sm text-[var(--muted)]">Trading Volume</div>
618
- </div>
619
- <div class="w-px h-12 bg-[var(--border)]"></div>
620
- <div>
621
- <div class="text-2xl font-bold font-mono">15,000+</div>
622
- <div class="text-sm text-[var(--muted)]">Active Agents</div>
623
- </div>
624
- <div class="w-px h-12 bg-[var(--border)]"></div>
625
- <div>
626
- <div class="text-2xl font-bold font-mono">99.9%</div>
627
- <div class="text-sm text-[var(--muted)]">Uptime</div>
628
- </div>
629
- </div>
 
 
 
 
 
630
  </div>
631
-
632
- <!-- Live Stats Panel -->
633
- <div class="reveal reveal-delay-2">
634
- <div class="stats-panel">
635
- <div class="flex items-center justify-between mb-6">
636
- <h3 class="font-semibold">Portfolio Overview</h3>
637
- <div class="live-indicator">
638
- <span class="live-dot"></span>
639
- <span class="text-xs text-[var(--muted)]">Live</span>
640
- </div>
641
- </div>
642
-
643
- <div class="grid grid-cols-2 gap-4 mb-6">
644
- <div>
645
- <div class="text-sm text-[var(--muted)] mb-1">Total Value</div>
646
- <div class="stat-value" id="totalValue">$847,293</div>
647
- </div>
648
- <div>
649
- <div class="text-sm text-[var(--muted)] mb-1">24h Change</div>
650
- <div class="stat-value flex items-center gap-2">
651
- <span class="stat-change positive" id="dailyChange">
652
- <i data-lucide="trending-up" class="w-3 h-3"></i>
653
- +4.82%
654
- </span>
655
- </div>
656
- </div>
657
- </div>
658
-
659
- <!-- Mini Chart -->
660
- <div class="chart-container mb-6" id="heroChart">
661
- <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none">
662
- <defs>
663
- <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
664
- <stop offset="0%" style="stop-color:rgba(0,212,170,0.3)" />
665
- <stop offset="100%" style="stop-color:rgba(0,212,170,0)" />
666
- </linearGradient>
667
- </defs>
668
- <path class="chart-area" id="chartArea"></path>
669
- <path class="chart-line" id="chartLine"></path>
670
- </svg>
671
- </div>
672
-
673
- <!-- Active Agents -->
674
- <div class="space-y-3">
675
- <div class="flex items-center justify-between p-3 bg-[var(--bg)] rounded-lg">
676
- <div class="flex items-center gap-3">
677
- <div class="w-8 h-8 rounded-lg bg-[var(--accent-dim)] flex items-center justify-center">
678
- <i data-lucide="brain" class="w-4 h-4 text-[var(--accent)]"></i>
679
- </div>
680
- <div>
681
- <div class="text-sm font-medium">Momentum Alpha</div>
682
- <div class="text-xs text-[var(--muted)]">BTC/USDT</div>
683
- </div>
684
- </div>
685
- <span class="stat-change positive text-xs">+2.4%</span>
686
- </div>
687
- <div class="flex items-center justify-between p-3 bg-[var(--bg)] rounded-lg">
688
- <div class="flex items-center gap-3">
689
- <div class="w-8 h-8 rounded-lg bg-[rgba(99,102,241,0.15)] flex items-center justify-center">
690
- <i data-lucide="git-branch" class="w-4 h-4 text-[#6366f1]"></i>
691
- </div>
692
- <div>
693
- <div class="text-sm font-medium">Arb Scout</div>
694
- <div class="text-xs text-[var(--muted)]">Multi-Chain</div>
695
- </div>
696
- </div>
697
- <span class="stat-change positive text-xs">+1.8%</span>
698
- </div>
699
- </div>
700
- </div>
701
  </div>
 
702
  </div>
703
- </section>
704
 
705
- <!-- Ticker Bar -->
706
- <section class="border-y border-[var(--border)] bg-[var(--bg-elevated)] py-4 overflow-hidden">
707
- <div class="ticker" id="ticker">
708
- <!-- Populated by JS -->
709
- </div>
710
- </section>
711
-
712
- <!-- Agents Section -->
713
- <section id="agents" class="py-24">
714
- <div class="max-w-7xl mx-auto px-6">
715
- <div class="text-center mb-16 reveal">
716
- <h2 class="text-4xl md:text-5xl font-bold mb-4">Choose Your Agent</h2>
717
- <p class="text-[var(--muted)] max-w-2xl mx-auto">
718
- Specialized trading agents designed for different market conditions and strategies
719
- </p>
720
  </div>
721
 
722
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
723
- <!-- Agent Cards -->
724
- <div class="agent-card reveal reveal-delay-1">
725
- <div class="agent-icon bg-[var(--accent-dim)]">
726
- <i data-lucide="trending-up" class="text-[var(--accent)]"></i>
727
- </div>
728
- <h3 class="text-xl font-semibold mb-2 relative z-10">Momentum Alpha</h3>
729
- <p class="text-[var(--muted)] text-sm mb-4 relative z-10">
730
- Trend-following agent that identifies and rides momentum across major crypto pairs with dynamic position sizing.
731
- </p>
732
- <div class="flex items-center justify-between pt-4 border-t border-[var(--border)] relative z-10">
733
- <div>
734
- <div class="text-xs text-[var(--muted)]">Avg. Return</div>
735
- <div class="font-mono font-semibold text-[var(--success)]">+18.4%/mo</div>
736
- </div>
737
- <div>
738
- <div class="text-xs text-[var(--muted)]">Win Rate</div>
739
- <div class="font-mono font-semibold">67.2%</div>
740
- </div>
741
- <button class="btn-primary text-sm py-2 px-4">Deploy</button>
742
- </div>
743
- </div>
744
-
745
- <div class="agent-card reveal reveal-delay-2">
746
- <div class="agent-icon bg-[rgba(99,102,241,0.15)]">
747
- <i data-lucide="git-branch" class="text-[#6366f1]"></i>
748
- </div>
749
- <h3 class="text-xl font-semibold mb-2 relative z-10">Arb Scout</h3>
750
- <p class="text-[var(--muted)] text-sm mb-4 relative z-10">
751
- Cross-exchange arbitrage agent scanning 50+ venues for price discrepancies in real-time.
752
- </p>
753
- <div class="flex items-center justify-between pt-4 border-t border-[var(--border)] relative z-10">
754
- <div>
755
- <div class="text-xs text-[var(--muted)]">Avg. Return</div>
756
- <div class="font-mono font-semibold text-[var(--success)]">+8.2%/mo</div>
757
- </div>
758
- <div>
759
- <div class="text-xs text-[var(--muted)]">Win Rate</div>
760
- <div class="font-mono font-semibold">89.1%</div>
761
- </div>
762
- <button class="btn-primary text-sm py-2 px-4">Deploy</button>
763
- </div>
764
- </div>
765
-
766
- <div class="agent-card reveal reveal-delay-3">
767
- <div class="agent-icon bg-[rgba(255,165,2,0.15)]">
768
- <i data-lucide="shield" class="text-[var(--warning)]"></i>
769
- </div>
770
- <h3 class="text-xl font-semibold mb-2 relative z-10">Grid Guardian</h3>
771
- <p class="text-[var(--muted)] text-sm mb-4 relative z-10">
772
- Grid trading specialist optimized for ranging markets with adaptive grid spacing and risk management.
773
- </p>
774
- <div class="flex items-center justify-between pt-4 border-t border-[var(--border)] relative z-10">
775
- <div>
776
- <div class="text-xs text-[var(--muted)]">Avg. Return</div>
777
- <div class="font-mono font-semibold text-[var(--success)]">+12.1%/mo</div>
778
- </div>
779
- <div>
780
- <div class="text-xs text-[var(--muted)]">Win Rate</div>
781
- <div class="font-mono font-semibold">73.5%</div>
782
- </div>
783
- <button class="btn-primary text-sm py-2 px-4">Deploy</button>
784
- </div>
785
  </div>
 
 
786
 
787
- <div class="agent-card reveal reveal-delay-1">
788
- <div class="agent-icon bg-[rgba(255,71,87,0.15)]">
789
- <i data-lucide="activity" class="text-[var(--danger)]"></i>
790
- </div>
791
- <h3 class="text-xl font-semibold mb-2 relative z-10">Volatility Hunter</h3>
792
- <p class="text-[var(--muted)] text-sm mb-4 relative z-10">
793
- Options-focused agent capitalizing on volatility spikes and mean reversion opportunities.
794
- </p>
795
- <div class="flex items-center justify-between pt-4 border-t border-[var(--border)] relative z-10">
796
- <div>
797
- <div class="text-xs text-[var(--muted)]">Avg. Return</div>
798
- <div class="font-mono font-semibold text-[var(--success)]">+24.7%/mo</div>
799
- </div>
800
- <div>
801
- <div class="text-xs text-[var(--muted)]">Win Rate</div>
802
- <div class="font-mono font-semibold">58.9%</div>
803
- </div>
804
- <button class="btn-primary text-sm py-2 px-4">Deploy</button>
805
- </div>
806
- </div>
807
 
808
- <div class="agent-card reveal reveal-delay-2">
809
- <div class="agent-icon bg-[rgba(0,212,170,0.15)]">
810
- <i data-lucide="droplets" class="text-[var(--accent)]"></i>
811
- </div>
812
- <h3 class="text-xl font-semibold mb-2 relative z-10">Liquidity Flow</h3>
813
- <p class="text-[var(--muted)] text-sm mb-4 relative z-10">
814
- Market-making agent providing liquidity while capturing spread across DeFi protocols.
815
- </p>
816
- <div class="flex items-center justify-between pt-4 border-t border-[var(--border)] relative z-10">
817
- <div>
818
- <div class="text-xs text-[var(--muted)]">Avg. Return</div>
819
- <div class="font-mono font-semibold text-[var(--success)]">+6.8%/mo</div>
820
- </div>
821
- <div>
822
- <div class="text-xs text-[var(--muted)]">Win Rate</div>
823
- <div class="font-mono font-semibold">94.2%</div>
824
- </div>
825
- <button class="btn-primary text-sm py-2 px-4">Deploy</button>
826
- </div>
827
  </div>
828
-
829
- <div class="agent-card reveal reveal-delay-3">
830
- <div class="agent-icon bg-[rgba(99,102,241,0.15)]">
831
- <i data-lucide="brain" class="text-[#6366f1]"></i>
832
- </div>
833
- <h3 class="text-xl font-semibold mb-2 relative z-10">Sentiment Sage</h3>
834
- <p class="text-[var(--muted)] text-sm mb-4 relative z-10">
835
- NLP-powered agent analyzing social sentiment, news, and on-chain data for alpha signals.
836
- </p>
837
- <div class="flex items-center justify-between pt-4 border-t border-[var(--border)] relative z-10">
838
- <div>
839
- <div class="text-xs text-[var(--muted)]">Avg. Return</div>
840
- <div class="font-mono font-semibold text-[var(--success)]">+15.3%/mo</div>
841
- </div>
842
- <div>
843
- <div class="text-xs text-[var(--muted)]">Win Rate</div>
844
- <div class="font-mono font-semibold">62.8%</div>
845
- </div>
846
- <button class="btn-primary text-sm py-2 px-4">Deploy</button>
847
- </div>
848
  </div>
 
 
849
  </div>
 
850
  </div>
851
- </section>
852
-
853
- <!-- Features Section -->
854
- <section id="features" class="py-24 bg-[var(--bg-elevated)]">
855
- <div class="max-w-7xl mx-auto px-6">
856
- <div class="text-center mb-16 reveal">
857
- <h2 class="text-4xl md:text-5xl font-bold mb-4">Enterprise-Grade Infrastructure</h2>
858
- <p class="text-[var(--muted)] max-w-2xl mx-auto">
859
- Built for reliability, speed, and security from the ground up
860
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
861
  </div>
862
-
863
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
864
- <div class="feature-item reveal reveal-delay-1">
865
- <div class="w-12 h-12 rounded-xl bg-[var(--accent-dim)] flex items-center justify-center mb-4">
866
- <i data-lucide="cpu" class="w-6 h-6 text-[var(--accent)]"></i>
867
- </div>
868
- <h3 class="text-lg font-semibold mb-2">Low-Latency Execution</h3>
869
- <p class="text-[var(--muted)] text-sm">
870
- Sub-millisecond order execution with direct exchange connectivity and co-location options.
871
- </p>
872
- </div>
873
-
874
- <div class="feature-item reveal reveal-delay-2">
875
- <div class="w-12 h-12 rounded-xl bg-[var(--accent-dim)] flex items-center justify-center mb-4">
876
- <i data-lucide="lock" class="w-6 h-6 text-[var(--accent)]"></i>
877
- </div>
878
- <h3 class="text-lg font-semibold mb-2">Bank-Grade Security</h3>
879
- <p class="text-[var(--muted)] text-sm">
880
- MPC wallets, hardware security modules, and SOC 2 Type II compliance for institutional safety.
881
- </p>
882
- </div>
883
-
884
- <div class="feature-item reveal reveal-delay-3">
885
- <div class="w-12 h-12 rounded-xl bg-[var(--accent-dim)] flex items-center justify-center mb-4">
886
- <i data-lucide="globe" class="w-6 h-6 text-[var(--accent)]"></i>
887
- </div>
888
- <h3 class="text-lg font-semibold mb-2">Multi-Exchange Support</h3>
889
- <p class="text-[var(--muted)] text-sm">
890
- Connect to 50+ CEX and DEX venues through a unified API with smart order routing.
891
- </p>
892
- </div>
893
-
894
- <div class="feature-item reveal reveal-delay-1">
895
- <div class="w-12 h-12 rounded-xl bg-[var(--accent-dim)] flex items-center justify-center mb-4">
896
- <i data-lucide="bar-chart-3" class="w-6 h-6 text-[var(--accent)]"></i>
897
- </div>
898
- <h3 class="text-lg font-semibold mb-2">Real-Time Analytics</h3>
899
- <p class="text-[var(--muted)] text-sm">
900
- Live P&L tracking, risk metrics, and performance attribution with customizable dashboards.
901
- </p>
902
- </div>
903
-
904
- <div class="feature-item reveal reveal-delay-2">
905
- <div class="w-12 h-12 rounded-xl bg-[var(--accent-dim)] flex items-center justify-center mb-4">
906
- <i data-lucide="code-2" class="w-6 h-6 text-[var(--accent)]"></i>
907
- </div>
908
- <h3 class="text-lg font-semibold mb-2">Strategy Builder</h3>
909
- <p class="text-[var(--muted)] text-sm">
910
- Visual strategy builder with 200+ indicators or code custom agents with our SDK.
911
- </p>
912
- </div>
913
-
914
- <div class="feature-item reveal reveal-delay-3">
915
- <div class="w-12 h-12 rounded-xl bg-[var(--accent-dim)] flex items-center justify-center mb-4">
916
- <i data-lucide="bell" class="w-6 h-6 text-[var(--accent)]"></i>
917
- </div>
918
- <h3 class="text-lg font-semibold mb-2">Smart Alerts</h3>
919
- <p class="text-[var(--muted)] text-sm">
920
- Customizable notifications via Slack, Discord, Telegram, and email for critical events.
921
- </p>
922
- </div>
923
  </div>
924
- </div>
925
- </section>
926
-
927
- <!-- Performance Section -->
928
- <section id="performance" class="py-24">
929
- <div class="max-w-7xl mx-auto px-6">
930
- <div class="text-center mb-16 reveal">
931
- <h2 class="text-4xl md:text-5xl font-bold mb-4">Proven Performance</h2>
932
- <p class="text-[var(--muted)] max-w-2xl mx-auto">
933
- Track record of consistent returns across market conditions
934
- </p>
 
 
 
 
 
 
935
  </div>
 
 
 
936
 
937
- <!-- Tabs -->
938
- <div class="flex justify-center mb-8 reveal">
939
- <div class="inline-flex bg-[var(--card)] rounded-lg p-1 border border-[var(--border)]">
940
- <button class="tab-btn active" data-tab="1m">1M</button>
941
- <button class="tab-btn" data-tab="3m">3M</button>
942
- <button class="tab-btn" data-tab="1y">1Y</button>
943
- <button class="tab-btn" data-tab="all">All</button>
944
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
945
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
946
 
947
- <div class="grid lg:grid-cols-3 gap-6">
948
- <div class="lg:col-span-2 reveal">
949
- <div class="stats-panel h-full">
950
- <div class="flex items-center justify-between mb-6">
951
- <h3 class="font-semibold">Cumulative Returns</h3>
952
- <div class="flex items-center gap-4">
953
- <div class="flex items-center gap-2">
954
- <div class="w-3 h-3 rounded-full bg-[var(--accent)]"></div>
955
- <span class="text-sm text-[var(--muted)]">NexTrade Portfolio</span>
956
- </div>
957
- <div class="flex items-center gap-2">
958
- <div class="w-3 h-3 rounded-full bg-[var(--muted)]"></div>
959
- <span class="text-sm text-[var(--muted)]">BTC Benchmark</span>
960
- </div>
961
- </div>
962
- </div>
963
- <div class="chart-container h-64" id="performanceChart">
964
- <svg width="100%" height="100%" viewBox="0 0 600 250" preserveAspectRatio="none">
965
- <defs>
966
- <linearGradient id="perfGradient" x1="0%" y1="0%" x2="0%" y2="100%">
967
- <stop offset="0%" style="stop-color:rgba(0,212,170,0.2)" />
968
- <stop offset="100%" style="stop-color:rgba(0,212,170,0)" />
969
- </linearGradient>
970
- </defs>
971
- <path class="chart-area" id="perfArea"></path>
972
- <path class="chart-line" id="perfLine"></path>
973
- <path class="chart-line" id="benchmarkLine" style="stroke: var(--muted); stroke-dasharray: 4 4;"></path>
974
- </svg>
975
- </div>
976
- </div>
977
- </div>
 
 
 
 
978
 
979
- <div class="space-y-4 reveal reveal-delay-2">
980
- <div class="stats-panel">
981
- <div class="text-sm text-[var(--muted)] mb-1">Total Return</div>
982
- <div class="stat-value text-[var(--success)]">+247.3%</div>
983
- <div class="stat-change positive mt-2">
984
- <i data-lucide="trending-up" class="w-3 h-3"></i>
985
- vs +89.2% BTC
986
- </div>
987
- </div>
988
- <div class="stats-panel">
989
- <div class="text-sm text-[var(--muted)] mb-1">Sharpe Ratio</div>
990
- <div class="stat-value">2.84</div>
991
- </div>
992
- <div class="stats-panel">
993
- <div class="text-sm text-[var(--muted)] mb-1">Max Drawdown</div>
994
- <div class="stat-value text-[var(--warning)]">-12.4%</div>
995
- </div>
996
- <div class="stats-panel">
997
- <div class="text-sm text-[var(--muted)] mb-1">Total Trades</div>
998
- <div class="stat-value">48,291</div>
999
- </div>
1000
- </div>
 
 
 
 
 
 
 
 
 
 
1001
  </div>
 
 
1002
  </div>
1003
- </section>
1004
-
1005
- <!-- Pricing Section -->
1006
- <section id="pricing" class="py-24 bg-[var(--bg-elevated)]">
1007
- <div class="max-w-7xl mx-auto px-6">
1008
- <div class="text-center mb-16 reveal">
1009
- <h2 class="text-4xl md:text-5xl font-bold mb-4">Simple Pricing</h2>
1010
- <p class="text-[var(--muted)] max-w-2xl mx-auto">
1011
- Start free, scale as you grow. No hidden fees.
1012
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1013
  </div>
 
 
 
1014
 
1015
- <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
1016
- <div class="pricing-card reveal reveal-delay-1">
1017
- <h3 class="text-lg font-semibold mb-2">Starter</h3>
1018
- <p class="text-[var(--muted)] text-sm mb-6">For individual traders</p>
1019
- <div class="mb-6">
1020
- <span class="price">$0</span>
1021
- <span class="text-[var(--muted)]">/month</span>
1022
- </div>
1023
- <ul class="space-y-3 mb-8">
1024
- <li class="flex items-center gap-3 text-sm">
1025
- <i data-lucide="check" class="w-4 h-4 text-[var(--accent)]"></i>
1026
- <span>2 Active Agents</span
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>SendAI - Autonomous Trading Agents on Solana</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <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">
13
+ <style>
14
+ :root {
15
+ --bg: #09090b;
16
+ --bg-elevated: #0f0f12;
17
+ --bg-card: #141419;
18
+ --fg: #fafafa;
19
+ --fg-muted: #71717a;
20
+ --accent: #14f195;
21
+ --accent-secondary: #9945ff;
22
+ --border: #27272a;
23
+ --border-hover: #3f3f46;
24
+ --success: #14f195;
25
+ --danger: #ff4757;
26
+ --warning: #fbbf24;
27
+ }
28
+
29
+ * {
30
+ margin: 0;
31
+ padding: 0;
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ html {
36
+ scroll-behavior: smooth;
37
+ }
38
+
39
+ @media (prefers-reduced-motion: reduce) {
40
+ html { scroll-behavior: auto; }
41
+ *, *::before, *::after {
42
+ animation-duration: 0.01ms !important;
43
+ animation-iteration-count: 1 !important;
44
+ transition-duration: 0.01ms !important;
45
+ }
46
+ }
47
+
48
+ body {
49
+ font-family: 'Inter', sans-serif;
50
+ background: var(--bg);
51
+ color: var(--fg);
52
+ line-height: 1.6;
53
+ overflow-x: hidden;
54
+ }
55
+
56
+ .font-mono { font-family: 'JetBrains Mono', monospace; }
57
+
58
+ /* Animated Background */
59
+ .bg-mesh {
60
+ position: fixed;
61
+ inset: 0;
62
+ z-index: -1;
63
+ background:
64
+ radial-gradient(ellipse 80% 50% at 50% -20%, rgba(20, 241, 149, 0.12), transparent),
65
+ radial-gradient(ellipse 60% 40% at 100% 50%, rgba(153, 69, 255, 0.08), transparent),
66
+ radial-gradient(ellipse 50% 30% at 0% 80%, rgba(20, 241, 149, 0.06), transparent);
67
+ }
68
+
69
+ .grid-overlay {
70
+ position: fixed;
71
+ inset: 0;
72
+ z-index: -1;
73
+ background-image:
74
+ linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
75
+ linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
76
+ background-size: 64px 64px;
77
+ mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, black 40%, transparent 80%);
78
+ }
79
+
80
+ /* Navigation */
81
+ .nav {
82
+ position: fixed;
83
+ top: 0;
84
+ left: 0;
85
+ right: 0;
86
+ z-index: 100;
87
+ backdrop-filter: blur(24px);
88
+ background: rgba(9, 9, 11, 0.85);
89
+ border-bottom: 1px solid var(--border);
90
+ }
91
+
92
+ .nav-blur {
93
+ position: absolute;
94
+ inset: 0;
95
+ background: linear-gradient(180deg, rgba(9,9,11,0.95) 0%, rgba(9,9,11,0.8) 100%);
96
+ z-index: -1;
97
+ }
98
+
99
+ /* Buttons */
100
+ .btn-primary {
101
+ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
102
+ color: var(--bg);
103
+ padding: 14px 32px;
104
+ border-radius: 12px;
105
+ font-weight: 700;
106
+ font-size: 0.9375rem;
107
+ border: none;
108
+ cursor: pointer;
109
+ transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
110
+ position: relative;
111
+ overflow: hidden;
112
+ }
113
+
114
+ .btn-primary::before {
115
+ content: '';
116
+ position: absolute;
117
+ inset: 0;
118
+ background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
119
+ opacity: 0;
120
+ transition: opacity 0.25s;
121
+ }
122
+
123
+ .btn-primary:hover {
124
+ transform: translateY(-2px);
125
+ box-shadow: 0 8px 32px rgba(20, 241, 149, 0.35), 0 0 0 1px rgba(20, 241, 149, 0.2);
126
+ }
127
+
128
+ .btn-primary:hover::before { opacity: 1; }
129
+
130
+ .btn-secondary {
131
+ background: transparent;
132
+ color: var(--fg);
133
+ padding: 14px 32px;
134
+ border-radius: 12px;
135
+ font-weight: 600;
136
+ border: 1px solid var(--border);
137
+ cursor: pointer;
138
+ transition: all 0.2s ease;
139
+ }
140
+
141
+ .btn-secondary:hover {
142
+ border-color: var(--accent);
143
+ background: rgba(20, 241, 149, 0.05);
144
+ }
145
+
146
+ .btn-ghost {
147
+ background: rgba(255,255,255,0.03);
148
+ color: var(--fg);
149
+ padding: 10px 20px;
150
+ border-radius: 10px;
151
+ font-weight: 500;
152
+ border: 1px solid var(--border);
153
+ cursor: pointer;
154
+ transition: all 0.2s ease;
155
+ font-size: 0.875rem;
156
+ }
157
+
158
+ .btn-ghost:hover {
159
+ background: rgba(255,255,255,0.06);
160
+ border-color: var(--border-hover);
161
+ }
162
+
163
+ /* Hero */
164
+ .hero {
165
+ min-height: 100vh;
166
+ display: flex;
167
+ align-items: center;
168
+ padding-top: 100px;
169
+ position: relative;
170
+ }
171
+
172
+ .hero-badge {
173
+ display: inline-flex;
174
+ align-items: center;
175
+ gap: 8px;
176
+ padding: 6px 14px 6px 6px;
177
+ background: rgba(20, 241, 149, 0.08);
178
+ border: 1px solid rgba(20, 241, 149, 0.2);
179
+ border-radius: 100px;
180
+ font-size: 0.8125rem;
181
+ font-weight: 500;
182
+ color: var(--accent);
183
+ margin-bottom: 24px;
184
+ }
185
+
186
+ .hero-badge-dot {
187
+ width: 6px;
188
+ height: 6px;
189
+ background: var(--accent);
190
+ border-radius: 50%;
191
+ animation: pulse-dot 2s ease-in-out infinite;
192
+ }
193
+
194
+ @keyframes pulse-dot {
195
+ 0%, 100% { opacity: 1; transform: scale(1); }
196
+ 50% { opacity: 0.5; transform: scale(1.2); }
197
+ }
198
+
199
+ .hero-title {
200
+ font-size: clamp(3rem, 10vw, 5.5rem);
201
+ font-weight: 900;
202
+ line-height: 1.05;
203
+ letter-spacing: -0.03em;
204
+ margin-bottom: 24px;
205
+ }
206
+
207
+ .gradient-text {
208
+ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 50%, var(--accent) 100%);
209
+ background-size: 200% 200%;
210
+ -webkit-background-clip: text;
211
+ -webkit-text-fill-color: transparent;
212
+ background-clip: text;
213
+ animation: gradient-shift 4s ease infinite;
214
+ }
215
+
216
+ @keyframes gradient-shift {
217
+ 0%, 100% { background-position: 0% 50%; }
218
+ 50% { background-position: 100% 50%; }
219
+ }
220
+
221
+ /* Stats Cards */
222
+ .stat-card {
223
+ background: var(--bg-card);
224
+ border: 1px solid var(--border);
225
+ border-radius: 16px;
226
+ padding: 24px;
227
+ position: relative;
228
+ overflow: hidden;
229
+ transition: all 0.3s ease;
230
+ }
231
+
232
+ .stat-card::before {
233
+ content: '';
234
+ position: absolute;
235
+ top: 0;
236
+ left: 0;
237
+ right: 0;
238
+ height: 1px;
239
+ background: linear-gradient(90deg, transparent, rgba(20, 241, 149, 0.5), transparent);
240
+ opacity: 0;
241
+ transition: opacity 0.3s;
242
+ }
243
+
244
+ .stat-card:hover {
245
+ border-color: var(--border-hover);
246
+ transform: translateY(-4px);
247
+ }
248
+
249
+ .stat-card:hover::before { opacity: 1; }
250
+
251
+ .stat-value {
252
+ font-size: 1.75rem;
253
+ font-weight: 700;
254
+ font-family: 'JetBrains Mono', monospace;
255
+ }
256
+
257
+ .stat-change {
258
+ display: inline-flex;
259
+ align-items: center;
260
+ gap: 4px;
261
+ font-size: 0.8125rem;
262
+ font-weight: 600;
263
+ padding: 4px 10px;
264
+ border-radius: 6px;
265
+ }
266
+
267
+ .stat-change.positive {
268
+ background: rgba(20, 241, 149, 0.12);
269
+ color: var(--success);
270
+ }
271
+
272
+ .stat-change.negative {
273
+ background: rgba(255, 71, 87, 0.12);
274
+ color: var(--danger);
275
+ }
276
+
277
+ /* Agent Cards */
278
+ .agent-card {
279
+ background: var(--bg-card);
280
+ border: 1px solid var(--border);
281
+ border-radius: 20px;
282
+ padding: 28px;
283
+ position: relative;
284
+ overflow: hidden;
285
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
286
+ }
287
+
288
+ .agent-card::before {
289
+ content: '';
290
+ position: absolute;
291
+ inset: 0;
292
+ background: linear-gradient(135deg, rgba(20, 241, 149, 0.05) 0%, transparent 60%);
293
+ opacity: 0;
294
+ transition: opacity 0.35s;
295
+ }
296
+
297
+ .agent-card::after {
298
+ content: '';
299
+ position: absolute;
300
+ top: 0;
301
+ left: 0;
302
+ right: 0;
303
+ height: 2px;
304
+ background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
305
+ opacity: 0;
306
+ transition: opacity 0.35s;
307
+ }
308
+
309
+ .agent-card:hover {
310
+ transform: translateY(-8px);
311
+ border-color: rgba(20, 241, 149, 0.3);
312
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 60px rgba(20, 241, 149, 0.1);
313
+ }
314
+
315
+ .agent-card:hover::before,
316
+ .agent-card:hover::after { opacity: 1; }
317
+
318
+ .agent-avatar {
319
+ width: 64px;
320
+ height: 64px;
321
+ border-radius: 16px;
322
+ display: flex;
323
+ align-items: center;
324
+ justify-content: center;
325
+ margin-bottom: 20px;
326
+ position: relative;
327
+ overflow: hidden;
328
+ }
329
+
330
+ .agent-avatar::before {
331
+ content: '';
332
+ position: absolute;
333
+ inset: 0;
334
+ background: inherit;
335
+ filter: blur(12px);
336
+ opacity: 0.5;
337
+ transform: scale(1.5);
338
+ }
339
+
340
+ .agent-avatar svg {
341
+ position: relative;
342
+ z-index: 1;
343
+ }
344
+
345
+ .agent-status {
346
+ display: inline-flex;
347
+ align-items: center;
348
+ gap: 6px;
349
+ padding: 6px 12px;
350
+ border-radius: 100px;
351
+ font-size: 0.75rem;
352
+ font-weight: 600;
353
+ text-transform: uppercase;
354
+ letter-spacing: 0.02em;
355
+ }
356
+
357
+ .agent-status.active {
358
+ background: rgba(20, 241, 149, 0.12);
359
+ color: var(--success);
360
+ }
361
+
362
+ .agent-status.paused {
363
+ background: rgba(251, 191, 36, 0.12);
364
+ color: var(--warning);
365
+ }
366
+
367
+ /* Chart */
368
+ .chart-container {
369
+ height: 300px;
370
+ position: relative;
371
+ border-radius: 16px;
372
+ overflow: hidden;
373
+ background: linear-gradient(180deg, rgba(20, 241, 149, 0.03) 0%, transparent 100%);
374
+ }
375
+
376
+ .chart-line {
377
+ fill: none;
378
+ stroke: url(#lineGradient);
379
+ stroke-width: 2.5;
380
+ stroke-linecap: round;
381
+ stroke-linejoin: round;
382
+ }
383
+
384
+ .chart-area {
385
+ fill: url(#areaGradient);
386
+ }
387
+
388
+ /* Live Feed */
389
+ .live-feed {
390
+ background: var(--bg-card);
391
+ border: 1px solid var(--border);
392
+ border-radius: 16px;
393
+ overflow: hidden;
394
+ }
395
+
396
+ .feed-item {
397
+ display: flex;
398
+ align-items: center;
399
+ gap: 16px;
400
+ padding: 16px 20px;
401
+ border-bottom: 1px solid var(--border);
402
+ transition: background 0.2s;
403
+ }
404
+
405
+ .feed-item:last-child { border-bottom: none; }
406
+ .feed-item:hover { background: rgba(255,255,255,0.02); }
407
+
408
+ .feed-icon {
409
+ width: 40px;
410
+ height: 40px;
411
+ border-radius: 10px;
412
+ display: flex;
413
+ align-items: center;
414
+ justify-content: center;
415
+ flex-shrink: 0;
416
+ }
417
+
418
+ /* Ticker */
419
+ .ticker-wrapper {
420
+ overflow: hidden;
421
+ background: var(--bg-elevated);
422
+ border-top: 1px solid var(--border);
423
+ border-bottom: 1px solid var(--border);
424
+ }
425
+
426
+ .ticker {
427
+ display: flex;
428
+ gap: 48px;
429
+ padding: 16px 0;
430
+ animation: ticker-scroll 40s linear infinite;
431
+ }
432
+
433
+ @keyframes ticker-scroll {
434
+ 0% { transform: translateX(0); }
435
+ 100% { transform: translateX(-50%); }
436
+ }
437
+
438
+ .ticker-item {
439
+ display: flex;
440
+ align-items: center;
441
+ gap: 12px;
442
+ white-space: nowrap;
443
+ }
444
+
445
+ /* Reveal Animation */
446
+ .reveal {
447
+ opacity: 0;
448
+ transform: translateY(30px);
449
+ transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
450
+ }
451
+
452
+ .reveal.active {
453
+ opacity: 1;
454
+ transform: translateY(0);
455
+ }
456
+
457
+ .reveal-delay-1 { transition-delay: 0.1s; }
458
+ .reveal-delay-2 { transition-delay: 0.2s; }
459
+ .reveal-delay-3 { transition-delay: 0.3s; }
460
+ .reveal-delay-4 { transition-delay: 0.4s; }
461
+
462
+ /* Tabs */
463
+ .tab-container {
464
+ display: inline-flex;
465
+ background: var(--bg-card);
466
+ border: 1px solid var(--border);
467
+ border-radius: 12px;
468
+ padding: 4px;
469
+ }
470
+
471
+ .tab-btn {
472
+ padding: 10px 20px;
473
+ background: transparent;
474
+ border: none;
475
+ color: var(--fg-muted);
476
+ font-weight: 500;
477
+ font-size: 0.875rem;
478
+ cursor: pointer;
479
+ border-radius: 8px;
480
+ transition: all 0.2s;
481
+ }
482
+
483
+ .tab-btn.active {
484
+ background: rgba(20, 241, 149, 0.1);
485
+ color: var(--accent);
486
+ }
487
+
488
+ .tab-btn:hover:not(.active) {
489
+ color: var(--fg);
490
+ }
491
+
492
+ .tab-content { display: none; }
493
+ .tab-content.active { display: block; animation: fadeIn 0.3s ease; }
494
+
495
+ @keyframes fadeIn {
496
+ from { opacity: 0; transform: translateY(10px); }
497
+ to { opacity: 1; transform: translateY(0); }
498
+ }
499
+
500
+ /* Mobile Menu */
501
+ .mobile-menu {
502
+ position: fixed;
503
+ inset: 0;
504
+ background: rgba(9, 9, 11, 0.98);
505
+ z-index: 200;
506
+ display: flex;
507
+ flex-direction: column;
508
+ align-items: center;
509
+ justify-content: center;
510
+ gap: 32px;
511
+ transform: translateX(100%);
512
+ transition: transform 0.3s ease;
513
+ }
514
+
515
+ .mobile-menu.open { transform: translateX(0); }
516
+
517
+ /* Focus States */
518
+ button:focus-visible, a:focus-visible {
519
+ outline: 2px solid var(--accent);
520
+ outline-offset: 2px;
521
+ }
522
+
523
+ /* Scrollbar */
524
+ ::-webkit-scrollbar { width: 6px; }
525
+ ::-webkit-scrollbar-track { background: var(--bg); }
526
+ ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
527
+ ::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
528
+
529
+ /* Pulse Ring */
530
+ .pulse-ring {
531
+ position: relative;
532
+ }
533
+
534
+ .pulse-ring::after {
535
+ content: '';
536
+ position: absolute;
537
+ inset: -4px;
538
+ border-radius: inherit;
539
+ border: 2px solid var(--accent);
540
+ animation: pulse-ring 2s ease-out infinite;
541
+ }
542
+
543
+ @keyframes pulse-ring {
544
+ 0% { transform: scale(1); opacity: 0.5; }
545
+ 100% { transform: scale(1.3); opacity: 0; }
546
+ }
547
+
548
+ /* Number Counter Animation */
549
+ .counter {
550
+ display: inline-block;
551
+ }
552
+ </style>
553
  </head>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
554
 
555
+ <body>
556
+ <!-- Background -->
557
+ <div class="bg-mesh"></div>
558
+ <div class="grid-overlay"></div>
559
+
560
+ <!-- Navigation -->
561
+ <nav class="nav" id="navbar">
562
+ <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
563
+ <a href="#" class="flex items-center gap-3">
564
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--accent-secondary)] flex items-center justify-center">
565
+ <i data-lucide="send" class="w-5 h-5 text-[var(--bg)]"></i>
 
 
 
 
 
 
 
566
  </div>
567
+ <span class="text-xl font-bold tracking-tight">SendAI</span>
568
+ </a>
569
+
570
+ <div class="hidden lg:flex items-center gap-10">
571
+ <a href="#agents" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Agents</a>
572
+ <a href="#performance" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Performance</a>
573
+ <a href="#features" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Features</a>
574
+ <a href="#docs" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors text-sm font-medium">Docs</a>
575
+ </div>
576
+
577
+ <div class="hidden lg:flex items-center gap-4">
578
+ <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>
579
+ <button class="btn-ghost">Connect Wallet</button>
580
+ <button class="btn-primary">Launch App</button>
581
+ </div>
582
+
583
+ <button class="lg:hidden p-2" id="menuToggle" aria-label="Toggle menu">
584
+ <i data-lucide="menu" class="w-6 h-6"></i>
585
+ </button>
586
  </div>
587
+ </nav>
588
+
589
+ <!-- Mobile Menu -->
590
+ <div class="mobile-menu" id="mobileMenu">
591
+ <button class="absolute top-6 right-6 p-2" id="menuClose" aria-label="Close menu">
592
+ <i data-lucide="x" class="w-6 h-6"></i>
593
+ </button>
594
+ <a href="#agents" class="text-2xl font-semibold">Agents</a>
595
+ <a href="#performance" class="text-2xl font-semibold">Performance</a>
596
+ <a href="#features" class="text-2xl font-semibold">Features</a>
597
+ <a href="#docs" class="text-2xl font-semibold">Docs</a>
598
+ <div class="flex gap-4 mt-8">
599
+ <button class="btn-secondary">Connect Wallet</button>
600
+ <button class="btn-primary">Launch App</button>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Hero Section -->
605
+ <section class="hero">
606
+ <div class="max-w-7xl mx-auto px-6 w-full">
607
+ <div class="grid lg:grid-cols-2 gap-16 items-center">
608
+ <div class="reveal">
609
+ <div class="hero-badge">
610
+ <span class="hero-badge-dot"></span>
611
+ <span>Live on Solana Mainnet</span>
612
+ </div>
613
+ <h1 class="hero-title">
614
+ Trade Smarter with <span class="gradient-text">AI Agents</span>
615
+ </h1>
616
+ <p class="text-lg text-[var(--fg-muted)] mb-10 max-w-lg leading-relaxed">
617
+ Deploy autonomous trading agents that analyze markets, execute strategies, and optimize your portfolio 24/7. Built on Solana for lightning-fast execution.
618
+ </p>
619
+ <div class="flex flex-wrap gap-4 mb-12">
620
+ <button class="btn-primary flex items-center gap-2">
621
+ <span>Start Trading</span>
622
+ <i data-lucide="arrow-right" class="w-4 h-4"></i>
623
+ </button>
624
+ <button class="btn-secondary flex items-center gap-2">
625
+ <i data-lucide="play-circle" class="w-4 h-4"></i>
626
+ <span>Watch Demo</span>
627
+ </button>
628
+ </div>
629
+ <div class="flex items-center gap-10">
630
+ <div>
631
+ <div class="text-2xl font-bold font-mono">$847M+</div>
632
+ <div class="text-sm text-[var(--fg-muted)]">Volume Traded</div>
633
  </div>
634
+ <div class="w-px h-10 bg-[var(--border)]"></div>
635
+ <div>
636
+ <div class="text-2xl font-bold font-mono">12,400+</div>
637
+ <div class="text-sm text-[var(--fg-muted)]">Active Agents</div>
638
+ </div>
639
+ <div class="w-px h-10 bg-[var(--border)]"></div>
640
+ <div>
641
+ <div class="text-2xl font-bold font-mono">99.9%</div>
642
+ <div class="text-sm text-[var(--fg-muted)]">Uptime</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
643
  </div>
644
+ </div>
645
  </div>
 
646
 
647
+ <!-- Stats Panel -->
648
+ <div class="reveal reveal-delay-2">
649
+ <div class="stat-card">
650
+ <div class="flex items-center justify-between mb-6">
651
+ <h3 class="font-semibold">Portfolio Overview</h3>
652
+ <div class="flex items-center gap-2 text-xs text-[var(--accent)]">
653
+ <span class="w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse"></span>
654
+ Live
655
+ </div>
 
 
 
 
 
 
656
  </div>
657
 
658
+ <div class="grid grid-cols-2 gap-6 mb-6">
659
+ <div>
660
+ <div class="text-sm text-[var(--fg-muted)] mb-1">Total Value</div>
661
+ <div class="stat-value" id="totalValue">$124,847</div>
662
+ </div>
663
+ <div>
664
+ <div class="text-sm text-[var(--fg-muted)] mb-1">24h Change</div>
665
+ <div class="flex items-center gap-2">
666
+ <span class="stat-change positive">
667
+ <i data-lucide="trending-up" class="w-3 h-3"></i>
668
+ +12.4%
669
+ </span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
670
  </div>
671
+ </div>
672
+ </div>
673
 
674
+ <!-- Chart -->
675
+ <div class="chart-container mb-6" id="heroChart">
676
+ <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none">
677
+ <defs>
678
+ <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
679
+ <stop offset="0%" style="stop-color:#14f195" />
680
+ <stop offset="100%" style="stop-color:#9945ff" />
681
+ </linearGradient>
682
+ <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
683
+ <stop offset="0%" style="stop-color:rgba(20,241,149,0.25)" />
684
+ <stop offset="100%" style="stop-color:rgba(20,241,149,0)" />
685
+ </linearGradient>
686
+ </defs>
687
+ <path class="chart-area" id="chartArea"></path>
688
+ <path class="chart-line" id="chartLine"></path>
689
+ </svg>
690
+ </div>
 
 
 
691
 
692
+ <!-- Active Agents Preview -->
693
+ <div class="space-y-3">
694
+ <div class="flex items-center justify-between p-3 bg-[var(--bg)] rounded-xl">
695
+ <div class="flex items-center gap-3">
696
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--accent-secondary)] flex items-center justify-center">
697
+ <i data-lucide="brain" class="w-5 h-5 text-[var(--bg)]"></i>
698
+ </div>
699
+ <div>
700
+ <div class="text-sm font-medium">Momentum Bot</div>
701
+ <div class="text-xs text-[var(--fg-muted)]">SOL/USDC</div>
702
+ </div>
 
 
 
 
 
 
 
 
703
  </div>
704
+ <span class="stat-change positive text-xs">+8.2%</span>
705
+ </div>
706
+ <div class="flex items-center justify-between p-3 bg-[var(--bg)] rounded-xl">
707
+ <div class="flex items-center gap-3">
708
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent-secondary)] to-[var(--accent)] flex items-center justify-center">
709
+ <i data-lucide="git-branch" class="w-5 h-5 text-[var(--bg)]"></i>
710
+ </div>
711
+ <div>
712
+ <div class="text-sm font-medium">Arb Scout</div>
713
+ <div class="text-xs text-[var(--fg-muted)]">Cross-DEX</div>
714
+ </div>
 
 
 
 
 
 
 
 
 
715
  </div>
716
+ <span class="stat-change positive text-xs">+3.7%</span>
717
+ </div>
718
  </div>
719
+ </div>
720
  </div>
721
+ </div>
722
+ </div>
723
+ </section>
724
+
725
+ <!-- Ticker -->
726
+ <section class="ticker-wrapper">
727
+ <div class="ticker" id="ticker"></div>
728
+ </section>
729
+
730
+ <!-- Agents Section -->
731
+ <section id="agents" class="py-28">
732
+ <div class="max-w-7xl mx-auto px-6">
733
+ <div class="text-center mb-16 reveal">
734
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">Agent Marketplace</h2>
735
+ <p class="text-[var(--fg-muted)] max-w-xl mx-auto">
736
+ Choose from battle-tested trading agents or create your own
737
+ </p>
738
+ </div>
739
+
740
+ <!-- Filter Tabs -->
741
+ <div class="flex justify-center mb-10 reveal">
742
+ <div class="tab-container">
743
+ <button class="tab-btn active" data-filter="all">All Agents</button>
744
+ <button class="tab-btn" data-filter="trending">Trending</button>
745
+ <button class="tab-btn" data-filter="new">New</button>
746
+ <button class="tab-btn" data-filter="verified">Verified</button>
747
+ </div>
748
+ </div>
749
+
750
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="agentGrid">
751
+ <!-- Agent Cards -->
752
+ <div class="agent-card reveal reveal-delay-1" data-category="trending verified">
753
+ <div class="flex items-start justify-between mb-4">
754
+ <div class="agent-avatar bg-gradient-to-br from-[var(--accent)] to-[#0ea5e9]">
755
+ <i data-lucide="trending-up" class="w-7 h-7 text-[var(--bg)]"></i>
756
  </div>
757
+ <span class="agent-status active">Active</span>
758
+ </div>
759
+ <h3 class="text-xl font-semibold mb-2 relative z-10">Momentum Alpha</h3>
760
+ <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10">
761
+ Trend-following agent with dynamic position sizing. Optimized for high-volatility markets.
762
+ </p>
763
+ <div class="grid grid-cols-3 gap-4 mb-5 relative z-10">
764
+ <div>
765
+ <div class="text-xs text-[var(--fg-muted)]">30d Return</div>
766
+ <div class="font-mono font-semibold text-[var(--success)]">+24.7%</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
767
  </div>
768
+ <div>
769
+ <div class="text-xs text-[var(--fg-muted)]">Win Rate</div>
770
+ <div class="font-mono font-semibold">68.4%</div>
771
+ </div>
772
+ <div>
773
+ <div class="text-xs text-[var(--fg-muted)]">Trades</div>
774
+ <div class="font-mono font-semibold">1,247</div>
775
+ </div>
776
+ </div>
777
+ <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10">
778
+ <div class="flex items-center gap-2">
779
+ <div class="flex -space-x-2">
780
+ <div class="w-6 h-6 rounded-full bg-[var(--accent)] opacity-60"></div>
781
+ <div class="w-6 h-6 rounded-full bg-[var(--accent-secondary)] opacity-60"></div>
782
+ <div class="w-6 h-6 rounded-full bg-[var(--fg-muted)] opacity-40"></div>
783
+ </div>
784
+ <span class="text-xs text-[var(--fg-muted)]">2.4k users</span>
785
  </div>
786
+ <button class="btn-primary text-sm py-2 px-5">Deploy</button>
787
+ </div>
788
+ </div>
789
 
790
+ <div class="agent-card reveal reveal-delay-2" data-category="trending verified">
791
+ <div class="flex items-start justify-between mb-4">
792
+ <div class="agent-avatar bg-gradient-to-br from-[var(--accent-secondary)] to-[#ec4899]">
793
+ <i data-lucide="git-branch" class="w-7 h-7 text-[var(--bg)]"></i>
794
+ </div>
795
+ <span class="agent-status active">Active</span>
796
+ </div>
797
+ <h3 class="text-xl font-semibold mb-2 relative z-10">Arb Scout</h3>
798
+ <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10">
799
+ Cross-DEX arbitrage agent. Scans Jupiter, Raydium, Orca for price discrepancies.
800
+ </p>
801
+ <div class="grid grid-cols-3 gap-4 mb-5 relative z-10">
802
+ <div>
803
+ <div class="text-xs text-[var(--fg-muted)]">30d Return</div>
804
+ <div class="font-mono font-semibold text-[var(--success)]">+12.3%</div>
805
+ </div>
806
+ <div>
807
+ <div class="text-xs text-[var(--fg-muted)]">Win Rate</div>
808
+ <div class="font-mono font-semibold">91.2%</div>
809
+ </div>
810
+ <div>
811
+ <div class="text-xs text-[var(--fg-muted)]">Trades</div>
812
+ <div class="font-mono font-semibold">8,492</div>
813
  </div>
814
+ </div>
815
+ <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10">
816
+ <div class="flex items-center gap-2">
817
+ <div class="flex -space-x-2">
818
+ <div class="w-6 h-6 rounded-full bg-[var(--accent-secondary)] opacity-60"></div>
819
+ <div class="w-6 h-6 rounded-full bg-[var(--accent)] opacity-60"></div>
820
+ </div>
821
+ <span class="text-xs text-[var(--fg-muted)]">3.1k users</span>
822
+ </div>
823
+ <button class="btn-primary text-sm py-2 px-5">Deploy</button>
824
+ </div>
825
+ </div>
826
 
827
+ <div class="agent-card reveal reveal-delay-3" data-category="new">
828
+ <div class="flex items-start justify-between mb-4">
829
+ <div class="agent-avatar bg-gradient-to-br from-[#f59e0b] to-[#ef4444]">
830
+ <i data-lucide="shield" class="w-7 h-7 text-[var(--bg)]"></i>
831
+ </div>
832
+ <span class="agent-status active">Active</span>
833
+ </div>
834
+ <h3 class="text-xl font-semibold mb-2 relative z-10">Grid Guardian</h3>
835
+ <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10">
836
+ Grid trading specialist for ranging markets with adaptive spacing algorithms.
837
+ </p>
838
+ <div class="grid grid-cols-3 gap-4 mb-5 relative z-10">
839
+ <div>
840
+ <div class="text-xs text-[var(--fg-muted)]">30d Return</div>
841
+ <div class="font-mono font-semibold text-[var(--success)]">+18.9%</div>
842
+ </div>
843
+ <div>
844
+ <div class="text-xs text-[var(--fg-muted)]">Win Rate</div>
845
+ <div class="font-mono font-semibold">76.1%</div>
846
+ </div>
847
+ <div>
848
+ <div class="text-xs text-[var(--fg-muted)]">Trades</div>
849
+ <div class="font-mono font-semibold">3,847</div>
850
+ </div>
851
+ </div>
852
+ <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10">
853
+ <div class="flex items-center gap-2">
854
+ <div class="flex -space-x-2">
855
+ <div class="w-6 h-6 rounded-full bg-[#f59e0b] opacity-60"></div>
856
+ </div>
857
+ <span class="text-xs text-[var(--fg-muted)]">892 users</span>
858
+ </div>
859
+ <button class="btn-primary text-sm py-2 px-5">Deploy</button>
860
+ </div>
861
+ </div>
862
 
863
+ <div class="agent-card reveal reveal-delay-1" data-category="verified">
864
+ <div class="flex items-start justify-between mb-4">
865
+ <div class="agent-avatar bg-gradient-to-br from-[#8b5cf6] to-[#6366f1]">
866
+ <i data-lucide="brain" class="w-7 h-7 text-[var(--bg)]"></i>
867
+ </div>
868
+ <span class="agent-status active">Active</span>
869
+ </div>
870
+ <h3 class="text-xl font-semibold mb-2 relative z-10">Sentiment Sage</h3>
871
+ <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10">
872
+ NLP-powered agent analyzing Twitter, Discord sentiment for alpha signals.
873
+ </p>
874
+ <div class="grid grid-cols-3 gap-4 mb-5 relative z-10">
875
+ <div>
876
+ <div class="text-xs text-[var(--fg-muted)]">30d Return</div>
877
+ <div class="font-mono font-semibold text-[var(--success)]">+21.4%</div>
878
+ </div>
879
+ <div>
880
+ <div class="text-xs text-[var(--fg-muted)]">Win Rate</div>
881
+ <div class="font-mono font-semibold">64.7%</div>
882
+ </div>
883
+ <div>
884
+ <div class="text-xs text-[var(--fg-muted)]">Trades</div>
885
+ <div class="font-mono font-semibold">567</div>
886
+ </div>
887
+ </div>
888
+ <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10">
889
+ <div class="flex items-center gap-2">
890
+ <div class="flex -space-x-2">
891
+ <div class="w-6 h-6 rounded-full bg-[#8b5cf6] opacity-60"></div>
892
+ <div class="w-6 h-6 rounded-full bg-[#6366f1] opacity-60"></div>
893
+ </div>
894
+ <span class="text-xs text-[var(--fg-muted)]">1.8k users</span>
895
  </div>
896
+ <button class="btn-primary text-sm py-2 px-5">Deploy</button>
897
+ </div>
898
  </div>
899
+
900
+ <div class="agent-card reveal reveal-delay-2" data-category="new">
901
+ <div class="flex items-start justify-between mb-4">
902
+ <div class="agent-avatar bg-gradient-to-br from-[#06b6d4] to-[#0891b2]">
903
+ <i data-lucide="droplets" class="w-7 h-7 text-[var(--bg)]"></i>
904
+ </div>
905
+ <span class="agent-status active">Active</span>
906
+ </div>
907
+ <h3 class="text-xl font-semibold mb-2 relative z-10">Liquidity Flow</h3>
908
+ <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10">
909
+ Market-making agent for DeFi protocols. Earns fees while managing impermanent loss.
910
+ </p>
911
+ <div class="grid grid-cols-3 gap-4 mb-5 relative z-10">
912
+ <div>
913
+ <div class="text-xs text-[var(--fg-muted)]">30d Return</div>
914
+ <div class="font-mono font-semibold text-[var(--success)]">+9.8%</div>
915
+ </div>
916
+ <div>
917
+ <div class="text-xs text-[var(--fg-muted)]">Win Rate</div>
918
+ <div class="font-mono font-semibold">94.3%</div>
919
+ </div>
920
+ <div>
921
+ <div class="text-xs text-[var(--fg-muted)]">Trades</div>
922
+ <div class="font-mono font-semibold">12,847</div>
923
+ </div>
924
+ </div>
925
+ <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10">
926
+ <div class="flex items-center gap-2">
927
+ <div class="flex -space-x-2">
928
+ <div class="w-6 h-6 rounded-full bg-[#06b6d4] opacity-60"></div>
929
+ </div>
930
+ <span class="text-xs text-[var(--fg-muted)]">624 users</span>
931
  </div>
932
+ <button class="btn-primary text-sm py-2 px-5">Deploy</button>
933
+ </div>
934
+ </div>
935
 
936
+ <div class="agent-card reveal reveal-delay-3" data-category="trending">
937
+ <div class="flex items-start justify-between mb-4">
938
+ <div class="agent-avatar bg-gradient-to-br from-[#10b981] to-[#059669]">
939
+ <i data-lucide="activity" class="w-7 h-7 text-[var(--bg)]"></i>
940
+ </div>
941
+ <span class="agent-status active">Active</span>
942
+ </div>
943
+ <h3 class="text-xl font-semibold mb-2 relative z-10">Volatility Hunter</h3>
944
+ <p class="text-[var(--fg-muted)] text-sm mb-5 relative z-10">
945
+ Options-focused agent capitalizing on volatility spikes and mean reversion.
946
+ </p>
947
+ <div class="grid grid-cols-3 gap-4 mb-5 relative z-10">
948
+ <div>
949
+ <div class="text-xs text-[var(--fg-muted)]">30d Return</div>
950
+ <div class="font-mono font-semibold text-[var(--success)]">+31.2%</div>
951
+ </div>
952
+ <div>
953
+ <div class="text-xs text-[var(--fg-muted)]">Win Rate</div>
954
+ <div class="font-mono font-semibold">58.9%</div>
955
+ </div>
956
+ <div>
957
+ <div class="text-xs text-[var(--fg-muted)]">Trades</div>
958
+ <div class="font-mono font-semibold">892</div>
959
+ </div>
960
+ </div>
961
+ <div class="flex items-center justify-between pt-5 border-t border-[var(--border)] relative z-10">
962
+ <div class="flex items-center gap-2">
963
+ <div class="flex -space-x-2">
964
+ <div class="w-6 h-6 rounded-full bg-[#10b981] opacity-60"></div>
965
+ <div class="w-6 h-6 rounded-full bg-[#059669] opacity-60"></div>
966
+ <div class="w-6 h-6 rounded-full bg-[var(--fg-muted)] opacity-40"></div>
967
+ </div>
968
+ <span class="text-xs text-[var(--fg-muted)]">1.5k users</span>
969
+ </div>
970
+ <button class="btn-primary text-sm py-2 px-5">Deploy</button>
971
+ </div>
972
+ </div>
973
+ </div>
974
+ </div>
975
+ </section>
976
+
977
+ <!-- Performance Section -->
978
+ <section id="performance" class="py-28 bg-[var(--bg-elevated)]">
979
+ <div class="max-w-7xl mx-auto px-6">
980
+ <div class="text-center mb-16 reveal">
981
+ <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight">Proven Performance</h2>
982
+ <p class="text-[var(--fg-muted)] max-w-xl mx-auto">
983
+ Real-time metrics from our agent network
984
+ </p>
985
+ </div>
986
+
987
+ <!-- Time Tabs -->
988
+ <div class="flex justify-center mb-10 reveal">
989
+ <div class="tab-container">
990
+ <button class="tab-btn active" data-tab="1m">1M</button>
991
+ <button class="tab-btn" data-tab="3m">3M</button>
992
+ <button class="tab-btn" data-tab="1y">1Y</button>
993
+ <button class="tab-btn" data-tab="all">All</button>
994
+ </div>
995
+ </div>
996
+
997
+ <div class="grid lg:grid-cols-4 gap-6">
998
+ <div class="lg:col-span-3 reveal">
999
+ <div class="stat-card h-full">
1000
+ <div class="flex items-center justify-between mb-6">
1001
+ <h3 class="font-semibold">Cumulative Returns</h3>
1002
+ <div class="flex items-center gap-6">
1003
+ <