Hugging Face's logo

Spaces:
namana23
/
anycoder-7e258a49
Running

App Files Community
namana23 commited on
Commit
a3f64fe
·
verified ·
1 Parent(s): 1b1fac4

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1026 -19
index.html CHANGED
@@ -1,19 +1,1026 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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