@jaimevalasek/aioson 1.5.1 โ†’ 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/README.md +6 -0
  2. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  3. package/docs/design-previews/aurora-command-ui.html +682 -0
  4. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  5. package/docs/design-previews/bold-editorial-ui.html +717 -0
  6. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  7. package/docs/design-previews/clean-saas-ui.html +549 -0
  8. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  9. package/docs/design-previews/cognitive-core-ui.html +463 -0
  10. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  11. package/docs/design-previews/glassmorphism-ui.html +886 -0
  12. package/docs/design-previews/index.html +699 -0
  13. package/docs/design-previews/interface-design-website.html +1187 -0
  14. package/docs/design-previews/interface-design.html +513 -0
  15. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  16. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  17. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  18. package/docs/design-previews/premium-command-center-ui.html +552 -0
  19. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  20. package/docs/design-previews/warm-craft-ui.html +739 -0
  21. package/docs/en/cli-reference.md +20 -9
  22. package/docs/pt/README.md +7 -0
  23. package/docs/pt/agent-sharding.md +132 -0
  24. package/docs/pt/agentes.md +8 -2
  25. package/docs/pt/busca-de-contexto.md +129 -0
  26. package/docs/pt/cache-de-contexto.md +156 -0
  27. package/docs/pt/comandos-cli.md +28 -0
  28. package/docs/pt/design-hybrid-forge.md +107 -0
  29. package/docs/pt/inicio-rapido.md +54 -3
  30. package/docs/pt/inteligencia-adaptativa.md +324 -0
  31. package/docs/pt/monitor-de-contexto.md +104 -0
  32. package/docs/pt/recuperacao-de-sessao.md +125 -0
  33. package/docs/pt/sandbox.md +125 -0
  34. package/docs/pt/skills.md +98 -6
  35. package/package.json +1 -1
  36. package/src/agent-loader.js +280 -0
  37. package/src/cli.js +94 -0
  38. package/src/commands/agent-loader.js +85 -0
  39. package/src/commands/context-cache.js +90 -0
  40. package/src/commands/context-monitor.js +92 -0
  41. package/src/commands/context-search.js +66 -0
  42. package/src/commands/design-hybrid-options.js +385 -0
  43. package/src/commands/health.js +214 -0
  44. package/src/commands/init.js +54 -13
  45. package/src/commands/install.js +52 -13
  46. package/src/commands/learning-evolve.js +355 -0
  47. package/src/commands/live.js +34 -0
  48. package/src/commands/recovery.js +43 -0
  49. package/src/commands/sandbox.js +37 -0
  50. package/src/commands/setup-context.js +22 -2
  51. package/src/commands/setup.js +178 -0
  52. package/src/commands/skill.js +79 -32
  53. package/src/commands/tool-registry-cmd.js +232 -0
  54. package/src/commands/update.js +7 -0
  55. package/src/constants.js +9 -0
  56. package/src/context-cache.js +159 -0
  57. package/src/context-search.js +326 -0
  58. package/src/design-variation-catalog.js +503 -0
  59. package/src/i18n/messages/en.js +32 -2
  60. package/src/i18n/messages/es.js +30 -2
  61. package/src/i18n/messages/fr.js +30 -2
  62. package/src/i18n/messages/pt-BR.js +32 -2
  63. package/src/install-animation.js +260 -0
  64. package/src/install-profile.js +143 -0
  65. package/src/install-wizard.js +474 -0
  66. package/src/installer.js +38 -10
  67. package/src/parser.js +7 -1
  68. package/src/recovery-context-session.js +154 -0
  69. package/src/runtime-store.js +97 -1
  70. package/src/sandbox.js +177 -0
  71. package/src/tool-executor.js +94 -0
  72. package/src/updater.js +11 -3
  73. package/template/.aioson/agents/analyst.md +58 -3
  74. package/template/.aioson/agents/architect.md +38 -0
  75. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  76. package/template/.aioson/agents/dev.md +103 -0
  77. package/template/.aioson/agents/deyvin.md +57 -0
  78. package/template/.aioson/agents/pm.md +58 -0
  79. package/template/.aioson/agents/product.md +28 -0
  80. package/template/.aioson/agents/qa.md +79 -0
  81. package/template/.aioson/agents/setup.md +65 -3
  82. package/template/.aioson/agents/sheldon.md +107 -6
  83. package/template/.aioson/agents/tester.md +156 -0
  84. package/template/.aioson/config.md +15 -0
  85. package/template/.aioson/context/forensics/.gitkeep +0 -0
  86. package/template/.aioson/context/seeds/seed-example.md +27 -0
  87. package/template/.aioson/context/user-profile.md +42 -0
  88. package/template/.aioson/locales/en/agents/setup.md +33 -1
  89. package/template/.aioson/locales/es/agents/setup.md +33 -1
  90. package/template/.aioson/locales/fr/agents/setup.md +33 -1
  91. package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
  92. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  93. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  94. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  95. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  96. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  97. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  98. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  99. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  100. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  101. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  102. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  103. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  104. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  105. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  106. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  107. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  108. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  109. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  110. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  111. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  112. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  113. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  114. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  115. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  116. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  117. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  118. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  119. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  120. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  121. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  122. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  123. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  124. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  125. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  126. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  127. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  128. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  129. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  130. package/template/AGENTS.md +23 -1
  131. package/template/CLAUDE.md +1 -0
package/docs/design-previews/cognitive-core-ui-website.html ADDED
@@ -0,0 +1,1009 @@
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>SynapseAI โ€” AI Platform Landing / Cognitive Core UI Preview</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --bg: #0B0F15;
15
+ --surface: #111827;
16
+ --elevated: #1A2332;
17
+ --border: rgba(255,255,255,0.06);
18
+ --border-accent: rgba(34,211,238,0.30);
19
+ --accent: #22D3EE;
20
+ --accent-dim: rgba(34,211,238,0.12);
21
+ --accent-glow: 0 0 40px rgba(34,211,238,0.12);
22
+ --text-heading: #F9FAFB;
23
+ --text-body: #E5E7EB;
24
+ --text-secondary: #9CA3AF;
25
+ --text-muted: #6B7280;
26
+ --void: #060910;
27
+ }
28
+
29
+ html { scroll-behavior: smooth; }
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ font-size: 15px;
34
+ line-height: 1.6;
35
+ color: var(--text-body);
36
+ background: var(--bg);
37
+ }
38
+
39
+ /* โ”€โ”€ NAV โ”€โ”€ */
40
+ nav {
41
+ position: sticky;
42
+ top: 0;
43
+ z-index: 100;
44
+ background: rgba(11,15,21,0.92);
45
+ backdrop-filter: blur(12px);
46
+ border-bottom: 1px solid var(--border);
47
+ padding: 0 40px;
48
+ height: 64px;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
52
+ }
53
+
54
+ .nav-logo {
55
+ font-size: 18px;
56
+ font-weight: 800;
57
+ color: var(--text-heading);
58
+ text-decoration: none;
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 10px;
62
+ letter-spacing: -0.02em;
63
+ }
64
+
65
+ .nav-logo-mark {
66
+ width: 30px;
67
+ height: 30px;
68
+ background: var(--accent);
69
+ border-radius: 8px;
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ font-size: 14px;
74
+ font-weight: 800;
75
+ color: #0B0F15;
76
+ box-shadow: 0 0 16px rgba(34,211,238,0.4);
77
+ }
78
+
79
+ .live-dot {
80
+ width: 7px;
81
+ height: 7px;
82
+ border-radius: 50%;
83
+ background: var(--accent);
84
+ box-shadow: 0 0 8px rgba(34,211,238,0.8);
85
+ animation: pulse 2s ease-in-out infinite;
86
+ }
87
+
88
+ @keyframes pulse {
89
+ 0%, 100% { opacity: 1; }
90
+ 50% { opacity: 0.4; }
91
+ }
92
+
93
+ .nav-links {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 32px;
97
+ list-style: none;
98
+ }
99
+
100
+ .nav-links a {
101
+ font-size: 14px;
102
+ font-weight: 500;
103
+ color: var(--text-secondary);
104
+ text-decoration: none;
105
+ transition: color 0.2s;
106
+ }
107
+
108
+ .nav-links a:hover { color: var(--text-heading); }
109
+
110
+ .btn-teal {
111
+ font-family: 'Inter', sans-serif;
112
+ font-size: 14px;
113
+ font-weight: 600;
114
+ color: #0B0F15;
115
+ background: var(--accent);
116
+ border: none;
117
+ border-radius: 6px;
118
+ padding: 9px 20px;
119
+ cursor: pointer;
120
+ text-decoration: none;
121
+ display: inline-flex;
122
+ align-items: center;
123
+ gap: 6px;
124
+ }
125
+
126
+ /* โ”€โ”€ SECTIONS โ”€โ”€ */
127
+ section { padding: 96px 40px; }
128
+ .container { max-width: 1140px; margin: 0 auto; }
129
+
130
+ /* โ”€โ”€ HERO โ”€โ”€ */
131
+ .hero {
132
+ padding: 100px 40px 0;
133
+ text-align: center;
134
+ position: relative;
135
+ overflow: hidden;
136
+ }
137
+
138
+ .hero::before {
139
+ content: '';
140
+ position: absolute;
141
+ top: -200px;
142
+ left: 50%;
143
+ transform: translateX(-50%);
144
+ width: 800px;
145
+ height: 600px;
146
+ background: radial-gradient(ellipse, rgba(34,211,238,0.07) 0%, transparent 70%);
147
+ pointer-events: none;
148
+ }
149
+
150
+ .mono-overline {
151
+ font-family: 'JetBrains Mono', monospace;
152
+ font-size: 11px;
153
+ font-weight: 500;
154
+ letter-spacing: 0.14em;
155
+ text-transform: uppercase;
156
+ color: var(--accent);
157
+ display: inline-flex;
158
+ align-items: center;
159
+ gap: 10px;
160
+ margin-bottom: 28px;
161
+ border: 1px solid var(--border-accent);
162
+ padding: 5px 14px;
163
+ border-radius: 999px;
164
+ background: rgba(34,211,238,0.06);
165
+ }
166
+
167
+ .hero h1 {
168
+ font-size: 56px;
169
+ font-weight: 800;
170
+ color: var(--text-heading);
171
+ line-height: 1.08;
172
+ letter-spacing: -0.03em;
173
+ max-width: 800px;
174
+ margin: 0 auto 24px;
175
+ }
176
+
177
+ .hero h1 span {
178
+ color: var(--accent);
179
+ }
180
+
181
+ .hero-sub {
182
+ font-size: 18px;
183
+ color: var(--text-secondary);
184
+ max-width: 560px;
185
+ margin: 0 auto 44px;
186
+ line-height: 1.65;
187
+ }
188
+
189
+ .hero-ctas {
190
+ display: flex;
191
+ gap: 14px;
192
+ justify-content: center;
193
+ margin-bottom: 72px;
194
+ }
195
+
196
+ .btn-teal-lg {
197
+ font-family: 'Inter', sans-serif;
198
+ font-size: 15px;
199
+ font-weight: 600;
200
+ color: #0B0F15;
201
+ background: var(--accent);
202
+ border: none;
203
+ border-radius: 6px;
204
+ padding: 13px 28px;
205
+ cursor: pointer;
206
+ text-decoration: none;
207
+ display: inline-flex;
208
+ align-items: center;
209
+ gap: 8px;
210
+ }
211
+
212
+ .btn-ghost-dark-lg {
213
+ font-family: 'Inter', sans-serif;
214
+ font-size: 15px;
215
+ font-weight: 500;
216
+ color: var(--text-secondary);
217
+ background: none;
218
+ border: 1px solid var(--border);
219
+ border-radius: 6px;
220
+ padding: 13px 28px;
221
+ cursor: pointer;
222
+ text-decoration: none;
223
+ display: inline-flex;
224
+ align-items: center;
225
+ gap: 8px;
226
+ transition: border-color 0.2s, color 0.2s;
227
+ }
228
+
229
+ .btn-ghost-dark-lg:hover {
230
+ border-color: rgba(255,255,255,0.2);
231
+ color: var(--text-heading);
232
+ }
233
+
234
+ /* Graph mock */
235
+ .graph-mock {
236
+ max-width: 900px;
237
+ margin: 0 auto;
238
+ background: var(--surface);
239
+ border: 1px solid var(--border);
240
+ border-radius: 12px;
241
+ padding: 32px;
242
+ position: relative;
243
+ }
244
+
245
+ .graph-mock-header {
246
+ display: flex;
247
+ justify-content: space-between;
248
+ align-items: center;
249
+ margin-bottom: 32px;
250
+ }
251
+
252
+ .graph-mock-title {
253
+ font-size: 13px;
254
+ font-weight: 600;
255
+ color: var(--text-heading);
256
+ }
257
+
258
+ .graph-mock-meta {
259
+ font-family: 'JetBrains Mono', monospace;
260
+ font-size: 11px;
261
+ color: var(--text-muted);
262
+ display: flex;
263
+ gap: 16px;
264
+ }
265
+
266
+ .graph-meta-item {
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 6px;
270
+ }
271
+
272
+ .graph-meta-dot {
273
+ width: 7px;
274
+ height: 7px;
275
+ border-radius: 50%;
276
+ }
277
+
278
+ .graph-bars {
279
+ display: flex;
280
+ align-items: flex-end;
281
+ gap: 6px;
282
+ height: 140px;
283
+ padding-bottom: 1px;
284
+ border-bottom: 1px solid var(--border);
285
+ position: relative;
286
+ }
287
+
288
+ .graph-bar-wrap {
289
+ flex: 1;
290
+ display: flex;
291
+ flex-direction: column;
292
+ justify-content: flex-end;
293
+ height: 100%;
294
+ gap: 3px;
295
+ }
296
+
297
+ .graph-bar {
298
+ border-radius: 3px 3px 0 0;
299
+ background: linear-gradient(180deg, var(--accent) 0%, rgba(34,211,238,0.3) 100%);
300
+ transition: opacity 0.2s;
301
+ }
302
+
303
+ .graph-bar-secondary {
304
+ border-radius: 3px 3px 0 0;
305
+ background: rgba(34,211,238,0.15);
306
+ }
307
+
308
+ .graph-gridlines {
309
+ position: absolute;
310
+ inset: 0;
311
+ display: flex;
312
+ flex-direction: column;
313
+ justify-content: space-between;
314
+ pointer-events: none;
315
+ }
316
+
317
+ .graph-gridline {
318
+ border-top: 1px dashed rgba(255,255,255,0.04);
319
+ width: 100%;
320
+ }
321
+
322
+ .graph-x-labels {
323
+ display: flex;
324
+ gap: 6px;
325
+ margin-top: 10px;
326
+ }
327
+
328
+ .graph-x-label {
329
+ flex: 1;
330
+ text-align: center;
331
+ font-family: 'JetBrains Mono', monospace;
332
+ font-size: 9px;
333
+ color: var(--text-muted);
334
+ }
335
+
336
+ /* โ”€โ”€ STATS ROW โ”€โ”€ */
337
+ .stats-section {
338
+ padding: 48px 40px;
339
+ background: var(--bg);
340
+ }
341
+
342
+ .stats-grid {
343
+ display: grid;
344
+ grid-template-columns: repeat(3, 1fr);
345
+ gap: 20px;
346
+ max-width: 1140px;
347
+ margin: 0 auto;
348
+ }
349
+
350
+ .stat-card {
351
+ background: var(--surface);
352
+ border: 1px solid var(--border);
353
+ border-radius: 8px;
354
+ padding: 32px;
355
+ position: relative;
356
+ }
357
+
358
+ .stat-mono-label {
359
+ font-family: 'JetBrains Mono', monospace;
360
+ font-size: 10px;
361
+ font-weight: 500;
362
+ letter-spacing: 0.12em;
363
+ text-transform: uppercase;
364
+ color: var(--text-muted);
365
+ margin-bottom: 12px;
366
+ }
367
+
368
+ .stat-value {
369
+ font-size: 38px;
370
+ font-weight: 800;
371
+ color: var(--accent);
372
+ letter-spacing: -0.03em;
373
+ line-height: 1;
374
+ margin-bottom: 6px;
375
+ }
376
+
377
+ .stat-desc {
378
+ font-size: 13px;
379
+ color: var(--text-secondary);
380
+ }
381
+
382
+ /* โ”€โ”€ ARCHITECTURE โ”€โ”€ */
383
+ .arch-section { background: var(--bg); }
384
+
385
+ .section-label-mono {
386
+ font-family: 'JetBrains Mono', monospace;
387
+ font-size: 11px;
388
+ font-weight: 500;
389
+ letter-spacing: 0.12em;
390
+ text-transform: uppercase;
391
+ color: var(--accent);
392
+ display: block;
393
+ margin-bottom: 16px;
394
+ }
395
+
396
+ .section-heading {
397
+ font-size: 38px;
398
+ font-weight: 800;
399
+ color: var(--text-heading);
400
+ letter-spacing: -0.03em;
401
+ margin-bottom: 14px;
402
+ line-height: 1.15;
403
+ }
404
+
405
+ .section-sub {
406
+ font-size: 16px;
407
+ color: var(--text-secondary);
408
+ max-width: 480px;
409
+ margin-bottom: 56px;
410
+ line-height: 1.65;
411
+ }
412
+
413
+ .arch-diagram {
414
+ background: var(--surface);
415
+ border: 1px solid var(--border);
416
+ border-radius: 12px;
417
+ padding: 48px 40px;
418
+ display: flex;
419
+ align-items: center;
420
+ justify-content: center;
421
+ gap: 0;
422
+ position: relative;
423
+ }
424
+
425
+ .arch-node {
426
+ background: var(--elevated);
427
+ border: 1px solid var(--border);
428
+ border-radius: 8px;
429
+ padding: 24px 32px;
430
+ text-align: center;
431
+ min-width: 180px;
432
+ position: relative;
433
+ }
434
+
435
+ .arch-node.accent-node {
436
+ border-color: var(--border-accent);
437
+ box-shadow: var(--accent-glow);
438
+ }
439
+
440
+ .arch-node-icon {
441
+ width: 40px;
442
+ height: 40px;
443
+ border-radius: 8px;
444
+ margin: 0 auto 12px;
445
+ display: flex;
446
+ align-items: center;
447
+ justify-content: center;
448
+ font-size: 18px;
449
+ }
450
+
451
+ .arch-node-icon.teal { background: rgba(34,211,238,0.15); }
452
+ .arch-node-icon.dim { background: rgba(255,255,255,0.06); }
453
+
454
+ .arch-node-label {
455
+ font-family: 'JetBrains Mono', monospace;
456
+ font-size: 10px;
457
+ font-weight: 500;
458
+ letter-spacing: 0.1em;
459
+ text-transform: uppercase;
460
+ color: var(--text-muted);
461
+ margin-bottom: 6px;
462
+ }
463
+
464
+ .arch-node-name {
465
+ font-size: 15px;
466
+ font-weight: 700;
467
+ color: var(--text-heading);
468
+ margin-bottom: 4px;
469
+ }
470
+
471
+ .arch-node-sub {
472
+ font-size: 12px;
473
+ color: var(--text-muted);
474
+ }
475
+
476
+ .arch-connector {
477
+ display: flex;
478
+ flex-direction: column;
479
+ align-items: center;
480
+ gap: 4px;
481
+ min-width: 80px;
482
+ }
483
+
484
+ .arch-line {
485
+ width: 100%;
486
+ height: 1px;
487
+ background: linear-gradient(90deg, var(--border-accent), rgba(34,211,238,0.6), var(--border-accent));
488
+ position: relative;
489
+ }
490
+
491
+ .arch-arrow {
492
+ font-size: 12px;
493
+ color: var(--accent);
494
+ }
495
+
496
+ .arch-flow-label {
497
+ font-family: 'JetBrains Mono', monospace;
498
+ font-size: 9px;
499
+ color: var(--text-muted);
500
+ letter-spacing: 0.06em;
501
+ text-transform: uppercase;
502
+ }
503
+
504
+ /* โ”€โ”€ FEATURES โ”€โ”€ */
505
+ .features-dark { background: var(--surface); }
506
+
507
+ .features-grid {
508
+ display: grid;
509
+ grid-template-columns: repeat(3, 1fr);
510
+ gap: 24px;
511
+ }
512
+
513
+ .feature-card-dark {
514
+ background: var(--elevated);
515
+ border: 1px solid var(--border);
516
+ border-radius: 8px;
517
+ padding: 32px;
518
+ position: relative;
519
+ transition: border-color 0.2s;
520
+ }
521
+
522
+ .feature-card-dark:hover { border-color: rgba(255,255,255,0.12); }
523
+
524
+ .feature-card-dark.glow {
525
+ border-color: var(--border-accent);
526
+ box-shadow: var(--accent-glow);
527
+ }
528
+
529
+ .feature-icon-circle {
530
+ width: 44px;
531
+ height: 44px;
532
+ border-radius: 50%;
533
+ background: rgba(34,211,238,0.12);
534
+ border: 1px solid rgba(34,211,238,0.2);
535
+ display: flex;
536
+ align-items: center;
537
+ justify-content: center;
538
+ font-size: 20px;
539
+ margin-bottom: 20px;
540
+ }
541
+
542
+ .feature-card-dark .card-mono-label {
543
+ font-family: 'JetBrains Mono', monospace;
544
+ font-size: 10px;
545
+ font-weight: 500;
546
+ letter-spacing: 0.1em;
547
+ text-transform: uppercase;
548
+ color: var(--text-muted);
549
+ margin-bottom: 8px;
550
+ }
551
+
552
+ .feature-card-dark h3 {
553
+ font-size: 16px;
554
+ font-weight: 700;
555
+ color: var(--text-heading);
556
+ margin-bottom: 10px;
557
+ letter-spacing: -0.01em;
558
+ }
559
+
560
+ .feature-card-dark p {
561
+ font-size: 14px;
562
+ color: var(--text-secondary);
563
+ line-height: 1.6;
564
+ }
565
+
566
+ /* โ”€โ”€ TESTIMONIAL โ”€โ”€ */
567
+ .testimonial-dark { background: var(--bg); }
568
+
569
+ .testimonial-card-dark {
570
+ max-width: 760px;
571
+ margin: 0 auto;
572
+ background: var(--surface);
573
+ border: 1px solid var(--border);
574
+ border-radius: 12px;
575
+ padding: 52px 56px;
576
+ position: relative;
577
+ }
578
+
579
+ .quote-mark {
580
+ font-family: Georgia, serif;
581
+ font-size: 80px;
582
+ line-height: 0.6;
583
+ color: var(--accent);
584
+ opacity: 0.4;
585
+ margin-bottom: 24px;
586
+ display: block;
587
+ }
588
+
589
+ .testimonial-quote-dark {
590
+ font-family: Georgia, serif;
591
+ font-size: 20px;
592
+ font-style: italic;
593
+ color: var(--text-body);
594
+ line-height: 1.65;
595
+ margin-bottom: 32px;
596
+ }
597
+
598
+ .testimonial-author-dark {
599
+ display: flex;
600
+ align-items: center;
601
+ gap: 14px;
602
+ }
603
+
604
+ .author-avatar-dark {
605
+ width: 44px;
606
+ height: 44px;
607
+ border-radius: 50%;
608
+ background: rgba(34,211,238,0.15);
609
+ border: 1px solid var(--border-accent);
610
+ display: flex;
611
+ align-items: center;
612
+ justify-content: center;
613
+ font-weight: 700;
614
+ font-size: 14px;
615
+ color: var(--accent);
616
+ flex-shrink: 0;
617
+ }
618
+
619
+ .author-name-dark {
620
+ font-size: 14px;
621
+ font-weight: 600;
622
+ color: var(--text-heading);
623
+ margin-bottom: 3px;
624
+ }
625
+
626
+ .author-role-dark {
627
+ font-family: 'JetBrains Mono', monospace;
628
+ font-size: 11px;
629
+ color: var(--text-muted);
630
+ }
631
+
632
+ /* โ”€โ”€ CTA โ”€โ”€ */
633
+ .cta-dark {
634
+ background: linear-gradient(135deg, #0B0F15 0%, #0d1e24 50%, #0B0F15 100%);
635
+ border-top: 1px solid var(--border);
636
+ border-bottom: 1px solid var(--border);
637
+ padding: 96px 40px;
638
+ text-align: center;
639
+ position: relative;
640
+ overflow: hidden;
641
+ }
642
+
643
+ .cta-dark::before {
644
+ content: '';
645
+ position: absolute;
646
+ top: 50%;
647
+ left: 50%;
648
+ transform: translate(-50%, -50%);
649
+ width: 700px;
650
+ height: 400px;
651
+ background: radial-gradient(ellipse, rgba(34,211,238,0.09) 0%, transparent 70%);
652
+ pointer-events: none;
653
+ }
654
+
655
+ .cta-dark h2 {
656
+ font-size: 44px;
657
+ font-weight: 800;
658
+ color: var(--text-heading);
659
+ letter-spacing: -0.03em;
660
+ margin-bottom: 16px;
661
+ position: relative;
662
+ }
663
+
664
+ .cta-dark p {
665
+ font-size: 17px;
666
+ color: var(--text-secondary);
667
+ margin-bottom: 40px;
668
+ position: relative;
669
+ }
670
+
671
+ /* โ”€โ”€ FOOTER โ”€โ”€ */
672
+ footer {
673
+ background: var(--void);
674
+ padding: 60px 40px 32px;
675
+ }
676
+
677
+ .footer-inner {
678
+ max-width: 1140px;
679
+ margin: 0 auto;
680
+ }
681
+
682
+ .footer-grid {
683
+ display: grid;
684
+ grid-template-columns: 1.6fr 1fr 1fr 1fr;
685
+ gap: 48px;
686
+ margin-bottom: 48px;
687
+ }
688
+
689
+ .footer-brand p {
690
+ font-size: 13px;
691
+ color: var(--text-muted);
692
+ margin-top: 14px;
693
+ line-height: 1.65;
694
+ max-width: 240px;
695
+ }
696
+
697
+ .footer-col-heading {
698
+ font-family: 'JetBrains Mono', monospace;
699
+ font-size: 10px;
700
+ font-weight: 500;
701
+ letter-spacing: 0.12em;
702
+ text-transform: uppercase;
703
+ color: var(--text-muted);
704
+ margin-bottom: 18px;
705
+ }
706
+
707
+ .footer-links { list-style: none; }
708
+ .footer-links li { margin-bottom: 10px; }
709
+
710
+ .footer-links a {
711
+ font-size: 14px;
712
+ color: var(--text-secondary);
713
+ text-decoration: none;
714
+ transition: color 0.2s;
715
+ }
716
+
717
+ .footer-links a:hover { color: var(--text-heading); }
718
+
719
+ .footer-bottom {
720
+ border-top: 1px solid var(--border);
721
+ padding-top: 24px;
722
+ display: flex;
723
+ justify-content: space-between;
724
+ align-items: center;
725
+ }
726
+
727
+ .footer-bottom-mono {
728
+ font-family: 'JetBrains Mono', monospace;
729
+ font-size: 11px;
730
+ color: var(--text-muted);
731
+ }
732
+
733
+ .footer-accent { color: var(--accent); }
734
+
735
+ .text-center { text-align: center; }
736
+ .mb-48 { margin-bottom: 48px; }
737
+ </style>
738
+ </head>
739
+ <body>
740
+
741
+ <!-- NAV -->
742
+ <nav>
743
+ <a href="#" class="nav-logo">
744
+ <div class="nav-logo-mark">S</div>
745
+ SynapseAI
746
+ <div class="live-dot"></div>
747
+ </a>
748
+ <ul class="nav-links">
749
+ <li><a href="#">Platform</a></li>
750
+ <li><a href="#">Developers</a></li>
751
+ <li><a href="#">Enterprise</a></li>
752
+ <li><a href="#">Pricing</a></li>
753
+ </ul>
754
+ <a href="#" class="btn-teal">Start building โ†’</a>
755
+ </nav>
756
+
757
+ <!-- HERO -->
758
+ <div class="hero">
759
+ <div class="container" style="padding:0;">
760
+ <div class="mono-overline">
761
+ <div class="live-dot"></div>
762
+ AI Operations Platform
763
+ </div>
764
+ <h1>The <span>cognitive core</span> for enterprise AI.</h1>
765
+ <p class="hero-sub">Orchestrate AI agents, pipelines, and operations at scale. Real-time intelligence. Zero guesswork.</p>
766
+ <div class="hero-ctas">
767
+ <a href="#" class="btn-teal-lg">Deploy now โ†’</a>
768
+ <a href="#" class="btn-ghost-dark-lg">Read the docs</a>
769
+ </div>
770
+
771
+ <!-- Graph mock -->
772
+ <div class="graph-mock">
773
+ <div class="graph-mock-header">
774
+ <span class="graph-mock-title">Operations Throughput โ€” Last 24h</span>
775
+ <div class="graph-mock-meta">
776
+ <span class="graph-meta-item">
777
+ <span class="graph-meta-dot" style="background:var(--accent);box-shadow:0 0 6px rgba(34,211,238,0.6)"></span>
778
+ Processed
779
+ </span>
780
+ <span class="graph-meta-item">
781
+ <span class="graph-meta-dot" style="background:rgba(34,211,238,0.25)"></span>
782
+ Queued
783
+ </span>
784
+ <span style="color:var(--accent)">โ†‘ 18.4% vs yesterday</span>
785
+ </div>
786
+ </div>
787
+ <div class="graph-bars">
788
+ <div class="graph-gridlines">
789
+ <div class="graph-gridline"></div>
790
+ <div class="graph-gridline"></div>
791
+ <div class="graph-gridline"></div>
792
+ <div class="graph-gridline"></div>
793
+ </div>
794
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:55%"></div></div>
795
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:20%"></div><div class="graph-bar" style="height:62%"></div></div>
796
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:25%"></div><div class="graph-bar" style="height:48%"></div></div>
797
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:15%"></div><div class="graph-bar" style="height:71%"></div></div>
798
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:22%"></div><div class="graph-bar" style="height:59%"></div></div>
799
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:18%"></div><div class="graph-bar" style="height:80%"></div></div>
800
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:28%"></div><div class="graph-bar" style="height:66%"></div></div>
801
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:35%"></div><div class="graph-bar" style="height:72%"></div></div>
802
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:24%"></div><div class="graph-bar" style="height:58%"></div></div>
803
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:88%"></div></div>
804
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:18%"></div><div class="graph-bar" style="height:76%"></div></div>
805
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:22%"></div><div class="graph-bar" style="height:92%"></div></div>
806
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:14%"></div><div class="graph-bar" style="height:84%"></div></div>
807
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:26%"></div><div class="graph-bar" style="height:70%"></div></div>
808
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:32%"></div><div class="graph-bar" style="height:95%"></div></div>
809
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:20%"></div><div class="graph-bar" style="height:78%"></div></div>
810
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:28%"></div><div class="graph-bar" style="height:63%"></div></div>
811
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:16%"></div><div class="graph-bar" style="height:100%"></div></div>
812
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:24%"></div><div class="graph-bar" style="height:87%"></div></div>
813
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:73%"></div></div>
814
+ </div>
815
+ <div class="graph-x-labels">
816
+ <span class="graph-x-label">00:00</span>
817
+ <span class="graph-x-label">02:00</span>
818
+ <span class="graph-x-label">04:00</span>
819
+ <span class="graph-x-label">06:00</span>
820
+ <span class="graph-x-label">08:00</span>
821
+ <span class="graph-x-label">10:00</span>
822
+ <span class="graph-x-label">12:00</span>
823
+ <span class="graph-x-label">14:00</span>
824
+ <span class="graph-x-label">16:00</span>
825
+ <span class="graph-x-label">18:00</span>
826
+ <span class="graph-x-label">20:00</span>
827
+ <span class="graph-x-label">22:00</span>
828
+ <span class="graph-x-label">now</span>
829
+ <span class="graph-x-label"></span>
830
+ <span class="graph-x-label"></span>
831
+ <span class="graph-x-label"></span>
832
+ <span class="graph-x-label"></span>
833
+ <span class="graph-x-label"></span>
834
+ <span class="graph-x-label"></span>
835
+ <span class="graph-x-label"></span>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ </div>
840
+
841
+ <!-- STATS -->
842
+ <div class="stats-section">
843
+ <div class="stats-grid">
844
+ <div class="stat-card">
845
+ <div class="stat-mono-label">Total operations</div>
846
+ <div class="stat-value">2.4B+</div>
847
+ <div class="stat-desc">Operations orchestrated this quarter across all customers</div>
848
+ </div>
849
+ <div class="stat-card">
850
+ <div class="stat-mono-label">Model accuracy</div>
851
+ <div class="stat-value">98.7%</div>
852
+ <div class="stat-desc">Average intent resolution accuracy across all pipelines</div>
853
+ </div>
854
+ <div class="stat-card">
855
+ <div class="stat-mono-label">Response latency</div>
856
+ <div class="stat-value">&lt; 50ms</div>
857
+ <div class="stat-desc">P99 end-to-end latency for production agent calls</div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+
862
+ <!-- ARCHITECTURE -->
863
+ <section class="arch-section">
864
+ <div class="container">
865
+ <span class="section-label-mono">How it works</span>
866
+ <h2 class="section-heading">Purpose-built orchestration<br>for AI at scale.</h2>
867
+ <p class="section-sub">SynapseAI connects your models, agents, and outputs through a unified orchestration layer โ€” with full observability at every step.</p>
868
+
869
+ <div class="arch-diagram">
870
+ <div class="arch-node">
871
+ <div class="arch-node-icon dim">๐Ÿค–</div>
872
+ <div class="arch-node-label">Layer 1</div>
873
+ <div class="arch-node-name">AI Agents</div>
874
+ <div class="arch-node-sub">GPT-4 ยท Claude ยท Custom</div>
875
+ </div>
876
+
877
+ <div class="arch-connector">
878
+ <div class="arch-flow-label">route</div>
879
+ <div class="arch-line"></div>
880
+ <div class="arch-arrow">โ†’</div>
881
+ </div>
882
+
883
+ <div class="arch-node accent-node">
884
+ <div class="arch-node-icon teal">โšก</div>
885
+ <div class="arch-node-label">Core Layer</div>
886
+ <div class="arch-node-name">Orchestrator</div>
887
+ <div class="arch-node-sub">SynapseAI Engine</div>
888
+ </div>
889
+
890
+ <div class="arch-connector">
891
+ <div class="arch-flow-label">emit</div>
892
+ <div class="arch-line"></div>
893
+ <div class="arch-arrow">โ†’</div>
894
+ </div>
895
+
896
+ <div class="arch-node">
897
+ <div class="arch-node-icon dim">๐Ÿ“ค</div>
898
+ <div class="arch-node-label">Layer 3</div>
899
+ <div class="arch-node-name">Output</div>
900
+ <div class="arch-node-sub">APIs ยท Webhooks ยท Store</div>
901
+ </div>
902
+ </div>
903
+ </div>
904
+ </section>
905
+
906
+ <!-- FEATURES -->
907
+ <section class="features-dark">
908
+ <div class="container">
909
+ <div class="text-center mb-48">
910
+ <span class="section-label-mono">Features</span>
911
+ <h2 class="section-heading">Built for cognitive workloads.</h2>
912
+ </div>
913
+ <div class="features-grid">
914
+ <div class="feature-card-dark glow">
915
+ <div class="feature-icon-circle">๐Ÿง </div>
916
+ <div class="card-mono-label">Intelligence</div>
917
+ <h3>Multi-Model Routing</h3>
918
+ <p>Route requests to the optimal model based on cost, latency, and capability. Automatic fallbacks included.</p>
919
+ </div>
920
+ <div class="feature-card-dark">
921
+ <div class="feature-icon-circle">๐Ÿ”</div>
922
+ <div class="card-mono-label">Orchestration</div>
923
+ <h3>Pipeline Composer</h3>
924
+ <p>Build complex agent pipelines with branching, retries, and parallel execution โ€” no infrastructure to manage.</p>
925
+ </div>
926
+ <div class="feature-card-dark">
927
+ <div class="feature-icon-circle">๐Ÿ“ก</div>
928
+ <div class="card-mono-label">Observability</div>
929
+ <h3>Real-Time Tracing</h3>
930
+ <p>Full span-level visibility into every agent call, token, and decision. Debug production AI like a pro.</p>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ </section>
935
+
936
+ <!-- TESTIMONIAL -->
937
+ <section class="testimonial-dark">
938
+ <div class="container">
939
+ <div class="testimonial-card-dark">
940
+ <span class="quote-mark">"</span>
941
+ <p class="testimonial-quote-dark">SynapseAI replaced three different tools we were stitching together. The orchestration engine is genuinely remarkable โ€” we went from prototype to production in 11 days, and the latency improvements were immediate.</p>
942
+ <div class="testimonial-author-dark">
943
+ <div class="author-avatar-dark">TR</div>
944
+ <div>
945
+ <div class="author-name-dark">Thomas Reinhardt</div>
946
+ <div class="author-role-dark">VP Engineering @ Meridian Labs</div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </div>
951
+ </section>
952
+
953
+ <!-- CTA -->
954
+ <div class="cta-dark">
955
+ <div class="container">
956
+ <h2>Deploy your cognitive core today.</h2>
957
+ <p>Start with the free tier. Scale to billions of operations. No commitment required.</p>
958
+ <a href="#" class="btn-teal-lg">Get started โ€” it's free โ†’</a>
959
+ </div>
960
+ </div>
961
+
962
+ <!-- FOOTER -->
963
+ <footer>
964
+ <div class="footer-inner">
965
+ <div class="footer-grid">
966
+ <div class="footer-brand">
967
+ <a href="#" class="nav-logo">
968
+ <div class="nav-logo-mark">S</div>
969
+ SynapseAI
970
+ </a>
971
+ <p>The orchestration layer for production AI โ€” built for teams who move fast and need to trust their systems.</p>
972
+ </div>
973
+ <div>
974
+ <div class="footer-col-heading">Platform</div>
975
+ <ul class="footer-links">
976
+ <li><a href="#">Orchestration</a></li>
977
+ <li><a href="#">Model Router</a></li>
978
+ <li><a href="#">Pipeline Builder</a></li>
979
+ <li><a href="#">Observability</a></li>
980
+ </ul>
981
+ </div>
982
+ <div>
983
+ <div class="footer-col-heading">Developers</div>
984
+ <ul class="footer-links">
985
+ <li><a href="#">Documentation</a></li>
986
+ <li><a href="#">API Reference</a></li>
987
+ <li><a href="#">SDKs</a></li>
988
+ <li><a href="#">Status</a></li>
989
+ </ul>
990
+ </div>
991
+ <div>
992
+ <div class="footer-col-heading">Company</div>
993
+ <ul class="footer-links">
994
+ <li><a href="#">About</a></li>
995
+ <li><a href="#">Blog</a></li>
996
+ <li><a href="#">Careers</a></li>
997
+ <li><a href="#">Security</a></li>
998
+ </ul>
999
+ </div>
1000
+ </div>
1001
+ <div class="footer-bottom">
1002
+ <span class="footer-bottom-mono">ยฉ 2024 <span class="footer-accent">SynapseAI</span>, Inc. All rights reserved.</span>
1003
+ <span class="footer-bottom-mono">Cognitive Core UI โ€” Design Skill Preview</span>
1004
+ </div>
1005
+ </div>
1006
+ </footer>
1007
+
1008
+ </body>
1009
+ </html>