@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.
- package/README.md +6 -0
- package/docs/design-previews/aurora-command-ui-website.html +884 -0
- package/docs/design-previews/aurora-command-ui.html +682 -0
- package/docs/design-previews/bold-editorial-ui-website.html +658 -0
- package/docs/design-previews/bold-editorial-ui.html +717 -0
- package/docs/design-previews/clean-saas-ui-website.html +1202 -0
- package/docs/design-previews/clean-saas-ui.html +549 -0
- package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
- package/docs/design-previews/cognitive-core-ui.html +463 -0
- package/docs/design-previews/glassmorphism-ui-website.html +572 -0
- package/docs/design-previews/glassmorphism-ui.html +886 -0
- package/docs/design-previews/index.html +699 -0
- package/docs/design-previews/interface-design-website.html +1187 -0
- package/docs/design-previews/interface-design.html +513 -0
- package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
- package/docs/design-previews/neo-brutalist-ui.html +797 -0
- package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
- package/docs/design-previews/premium-command-center-ui.html +552 -0
- package/docs/design-previews/warm-craft-ui-website.html +684 -0
- package/docs/design-previews/warm-craft-ui.html +739 -0
- package/docs/en/cli-reference.md +20 -9
- package/docs/pt/README.md +7 -0
- package/docs/pt/agent-sharding.md +132 -0
- package/docs/pt/agentes.md +8 -2
- package/docs/pt/busca-de-contexto.md +129 -0
- package/docs/pt/cache-de-contexto.md +156 -0
- package/docs/pt/comandos-cli.md +28 -0
- package/docs/pt/design-hybrid-forge.md +107 -0
- package/docs/pt/inicio-rapido.md +54 -3
- package/docs/pt/inteligencia-adaptativa.md +324 -0
- package/docs/pt/monitor-de-contexto.md +104 -0
- package/docs/pt/recuperacao-de-sessao.md +125 -0
- package/docs/pt/sandbox.md +125 -0
- package/docs/pt/skills.md +98 -6
- package/package.json +1 -1
- package/src/agent-loader.js +280 -0
- package/src/cli.js +94 -0
- package/src/commands/agent-loader.js +85 -0
- package/src/commands/context-cache.js +90 -0
- package/src/commands/context-monitor.js +92 -0
- package/src/commands/context-search.js +66 -0
- package/src/commands/design-hybrid-options.js +385 -0
- package/src/commands/health.js +214 -0
- package/src/commands/init.js +54 -13
- package/src/commands/install.js +52 -13
- package/src/commands/learning-evolve.js +355 -0
- package/src/commands/live.js +34 -0
- package/src/commands/recovery.js +43 -0
- package/src/commands/sandbox.js +37 -0
- package/src/commands/setup-context.js +22 -2
- package/src/commands/setup.js +178 -0
- package/src/commands/skill.js +79 -32
- package/src/commands/tool-registry-cmd.js +232 -0
- package/src/commands/update.js +7 -0
- package/src/constants.js +9 -0
- package/src/context-cache.js +159 -0
- package/src/context-search.js +326 -0
- package/src/design-variation-catalog.js +503 -0
- package/src/i18n/messages/en.js +32 -2
- package/src/i18n/messages/es.js +30 -2
- package/src/i18n/messages/fr.js +30 -2
- package/src/i18n/messages/pt-BR.js +32 -2
- package/src/install-animation.js +260 -0
- package/src/install-profile.js +143 -0
- package/src/install-wizard.js +474 -0
- package/src/installer.js +38 -10
- package/src/parser.js +7 -1
- package/src/recovery-context-session.js +154 -0
- package/src/runtime-store.js +97 -1
- package/src/sandbox.js +177 -0
- package/src/tool-executor.js +94 -0
- package/src/updater.js +11 -3
- package/template/.aioson/agents/analyst.md +58 -3
- package/template/.aioson/agents/architect.md +38 -0
- package/template/.aioson/agents/design-hybrid-forge.md +127 -0
- package/template/.aioson/agents/dev.md +103 -0
- package/template/.aioson/agents/deyvin.md +57 -0
- package/template/.aioson/agents/pm.md +58 -0
- package/template/.aioson/agents/product.md +28 -0
- package/template/.aioson/agents/qa.md +79 -0
- package/template/.aioson/agents/setup.md +65 -3
- package/template/.aioson/agents/sheldon.md +107 -6
- package/template/.aioson/agents/tester.md +156 -0
- package/template/.aioson/config.md +15 -0
- package/template/.aioson/context/forensics/.gitkeep +0 -0
- package/template/.aioson/context/seeds/seed-example.md +27 -0
- package/template/.aioson/context/user-profile.md +42 -0
- package/template/.aioson/locales/en/agents/setup.md +33 -1
- package/template/.aioson/locales/es/agents/setup.md +33 -1
- package/template/.aioson/locales/fr/agents/setup.md +33 -1
- package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
- package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
- package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
- package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
- package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
- package/template/AGENTS.md +23 -1
- package/template/CLAUDE.md +1 -0
|
@@ -0,0 +1,717 @@
|
|
|
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>Bold Editorial UI — AIOSON Design Skill 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@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
10
|
+
<style>
|
|
11
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
--bg: #0A0A0A;
|
|
15
|
+
--surface: #141414;
|
|
16
|
+
--elevated: #1E1E1E;
|
|
17
|
+
--accent: #FF4D2A;
|
|
18
|
+
--accent-dim: rgba(255, 77, 42, 0.15);
|
|
19
|
+
--text-white: #FFFFFF;
|
|
20
|
+
--text-body: #B8B8B8;
|
|
21
|
+
--text-secondary: #787878;
|
|
22
|
+
--border: rgba(255,255,255,0.08);
|
|
23
|
+
--border-strong: rgba(255,255,255,0.14);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
html, body {
|
|
27
|
+
background: var(--bg);
|
|
28
|
+
color: var(--text-body);
|
|
29
|
+
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
|
30
|
+
font-size: 14px;
|
|
31
|
+
line-height: 1.6;
|
|
32
|
+
overflow-x: hidden;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* ── Display font simulation (Clash Display / Impact) ── */
|
|
36
|
+
.display {
|
|
37
|
+
font-family: Impact, 'Clash Display', 'Arial Black', system-ui;
|
|
38
|
+
font-weight: 700;
|
|
39
|
+
letter-spacing: -0.04em;
|
|
40
|
+
line-height: 0.9;
|
|
41
|
+
color: var(--text-white);
|
|
42
|
+
text-transform: uppercase;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.mono {
|
|
46
|
+
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
|
47
|
+
text-transform: uppercase;
|
|
48
|
+
letter-spacing: 0.12em;
|
|
49
|
+
font-size: 0.75rem;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* ── Nav ── */
|
|
53
|
+
nav {
|
|
54
|
+
position: sticky;
|
|
55
|
+
top: 0;
|
|
56
|
+
z-index: 50;
|
|
57
|
+
background: rgba(10,10,10,0.92);
|
|
58
|
+
backdrop-filter: blur(12px);
|
|
59
|
+
-webkit-backdrop-filter: blur(12px);
|
|
60
|
+
border-bottom: 1px solid var(--border);
|
|
61
|
+
height: 60px;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
padding: 0 40px;
|
|
65
|
+
gap: 32px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.nav-logo {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: 10px;
|
|
72
|
+
margin-right: auto;
|
|
73
|
+
}
|
|
74
|
+
.logo-mark {
|
|
75
|
+
width: 30px;
|
|
76
|
+
height: 30px;
|
|
77
|
+
background: var(--accent);
|
|
78
|
+
border-radius: 6px;
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
}
|
|
83
|
+
.logo-mark svg { width: 16px; height: 16px; fill: #fff; }
|
|
84
|
+
.logo-name {
|
|
85
|
+
font-family: Impact, 'Arial Black', system-ui;
|
|
86
|
+
font-size: 18px;
|
|
87
|
+
color: var(--text-white);
|
|
88
|
+
letter-spacing: -0.03em;
|
|
89
|
+
text-transform: uppercase;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.nav-links {
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
gap: 28px;
|
|
96
|
+
list-style: none;
|
|
97
|
+
}
|
|
98
|
+
.nav-links li a {
|
|
99
|
+
color: var(--text-secondary);
|
|
100
|
+
text-decoration: none;
|
|
101
|
+
font-size: 13px;
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
letter-spacing: 0.01em;
|
|
104
|
+
transition: color 0.15s;
|
|
105
|
+
}
|
|
106
|
+
.nav-links li a:hover { color: var(--text-white); }
|
|
107
|
+
|
|
108
|
+
.nav-cta {
|
|
109
|
+
background: var(--accent);
|
|
110
|
+
color: #fff;
|
|
111
|
+
border: none;
|
|
112
|
+
border-radius: 6px;
|
|
113
|
+
padding: 8px 18px;
|
|
114
|
+
font-size: 13px;
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
font-family: 'Inter', sans-serif;
|
|
118
|
+
letter-spacing: 0.01em;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* ── Hero ── */
|
|
122
|
+
.hero {
|
|
123
|
+
padding: 96px 40px 80px;
|
|
124
|
+
max-width: 1100px;
|
|
125
|
+
margin: 0 auto;
|
|
126
|
+
position: relative;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.hero-overline {
|
|
130
|
+
color: var(--accent);
|
|
131
|
+
margin-bottom: 28px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.hero-headline {
|
|
135
|
+
font-size: clamp(64px, 8vw, 100px);
|
|
136
|
+
margin-bottom: 36px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.hero-sub {
|
|
140
|
+
font-size: 18px;
|
|
141
|
+
color: var(--text-body);
|
|
142
|
+
max-width: 520px;
|
|
143
|
+
line-height: 1.65;
|
|
144
|
+
margin-bottom: 40px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.hero-cta-row {
|
|
148
|
+
display: flex;
|
|
149
|
+
align-items: center;
|
|
150
|
+
gap: 16px;
|
|
151
|
+
flex-wrap: wrap;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.btn-primary {
|
|
155
|
+
display: inline-flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
gap: 8px;
|
|
158
|
+
background: var(--accent);
|
|
159
|
+
color: #fff;
|
|
160
|
+
border: none;
|
|
161
|
+
border-radius: 6px;
|
|
162
|
+
padding: 14px 28px;
|
|
163
|
+
font-size: 14px;
|
|
164
|
+
font-weight: 600;
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
font-family: 'Inter', sans-serif;
|
|
167
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
|
|
168
|
+
}
|
|
169
|
+
.btn-primary svg { width: 16px; height: 16px; }
|
|
170
|
+
|
|
171
|
+
.btn-ghost {
|
|
172
|
+
display: inline-flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
gap: 8px;
|
|
175
|
+
background: transparent;
|
|
176
|
+
color: var(--text-body);
|
|
177
|
+
border: 1px solid var(--border-strong);
|
|
178
|
+
border-radius: 6px;
|
|
179
|
+
padding: 14px 28px;
|
|
180
|
+
font-size: 14px;
|
|
181
|
+
font-weight: 500;
|
|
182
|
+
cursor: pointer;
|
|
183
|
+
font-family: 'Inter', sans-serif;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.hero-badge {
|
|
187
|
+
display: inline-flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
gap: 8px;
|
|
190
|
+
background: var(--elevated);
|
|
191
|
+
border: 1px solid var(--border-strong);
|
|
192
|
+
border-radius: 6px;
|
|
193
|
+
padding: 6px 14px;
|
|
194
|
+
font-size: 12px;
|
|
195
|
+
color: var(--text-body);
|
|
196
|
+
}
|
|
197
|
+
.hero-badge .dot {
|
|
198
|
+
width: 7px;
|
|
199
|
+
height: 7px;
|
|
200
|
+
border-radius: 50%;
|
|
201
|
+
background: #22C55E;
|
|
202
|
+
flex-shrink: 0;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Hero visual — code mock */
|
|
206
|
+
.hero-code {
|
|
207
|
+
position: absolute;
|
|
208
|
+
right: 40px;
|
|
209
|
+
top: 80px;
|
|
210
|
+
width: 380px;
|
|
211
|
+
background: var(--surface);
|
|
212
|
+
border: 1px solid var(--border-strong);
|
|
213
|
+
border-radius: 10px;
|
|
214
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 60px var(--accent-dim);
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
}
|
|
217
|
+
.code-titlebar {
|
|
218
|
+
display: flex;
|
|
219
|
+
align-items: center;
|
|
220
|
+
gap: 6px;
|
|
221
|
+
padding: 10px 14px;
|
|
222
|
+
background: var(--elevated);
|
|
223
|
+
border-bottom: 1px solid var(--border);
|
|
224
|
+
}
|
|
225
|
+
.dot-r { width:10px;height:10px;border-radius:50%;background:#FF5F57; }
|
|
226
|
+
.dot-y { width:10px;height:10px;border-radius:50%;background:#FFBD2E; }
|
|
227
|
+
.dot-g { width:10px;height:10px;border-radius:50%;background:#28CA41; }
|
|
228
|
+
.code-filename {
|
|
229
|
+
margin-left: 8px;
|
|
230
|
+
font-family: 'JetBrains Mono', monospace;
|
|
231
|
+
font-size: 11px;
|
|
232
|
+
color: var(--text-secondary);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.code-body {
|
|
236
|
+
padding: 18px 20px;
|
|
237
|
+
font-family: 'JetBrains Mono', monospace;
|
|
238
|
+
font-size: 11.5px;
|
|
239
|
+
line-height: 1.8;
|
|
240
|
+
}
|
|
241
|
+
.c-ln { color: var(--text-secondary); user-select: none; margin-right: 16px; font-size: 10px; }
|
|
242
|
+
.c-k { color: #C792EA; }
|
|
243
|
+
.c-s { color: #C3E88D; }
|
|
244
|
+
.c-f { color: #82AAFF; }
|
|
245
|
+
.c-n { color: #FFCB6B; }
|
|
246
|
+
.c-c { color: var(--text-secondary); }
|
|
247
|
+
.c-v { color: var(--accent); }
|
|
248
|
+
.c-w { color: var(--text-body); }
|
|
249
|
+
|
|
250
|
+
.code-cursor {
|
|
251
|
+
display: inline-block;
|
|
252
|
+
width: 8px;
|
|
253
|
+
height: 14px;
|
|
254
|
+
background: var(--accent);
|
|
255
|
+
vertical-align: middle;
|
|
256
|
+
animation: blink 1.1s step-end infinite;
|
|
257
|
+
}
|
|
258
|
+
@keyframes blink { 50% { opacity: 0; } }
|
|
259
|
+
|
|
260
|
+
/* ── Stats band ── */
|
|
261
|
+
.stats-band {
|
|
262
|
+
border-top: 1px solid var(--border);
|
|
263
|
+
border-bottom: 1px solid var(--border);
|
|
264
|
+
background: var(--surface);
|
|
265
|
+
padding: 0;
|
|
266
|
+
}
|
|
267
|
+
.stats-inner {
|
|
268
|
+
max-width: 1100px;
|
|
269
|
+
margin: 0 auto;
|
|
270
|
+
display: grid;
|
|
271
|
+
grid-template-columns: repeat(3, 1fr);
|
|
272
|
+
}
|
|
273
|
+
.stat-block {
|
|
274
|
+
padding: 48px 40px;
|
|
275
|
+
border-right: 1px solid var(--border);
|
|
276
|
+
position: relative;
|
|
277
|
+
}
|
|
278
|
+
.stat-block:last-child { border-right: none; }
|
|
279
|
+
|
|
280
|
+
.stat-overline {
|
|
281
|
+
color: var(--text-secondary);
|
|
282
|
+
margin-bottom: 14px;
|
|
283
|
+
font-size: 0.72rem;
|
|
284
|
+
}
|
|
285
|
+
.stat-number {
|
|
286
|
+
font-size: clamp(48px, 6vw, 72px);
|
|
287
|
+
color: var(--text-white);
|
|
288
|
+
margin-bottom: 8px;
|
|
289
|
+
}
|
|
290
|
+
.stat-desc {
|
|
291
|
+
font-size: 13px;
|
|
292
|
+
color: var(--text-secondary);
|
|
293
|
+
line-height: 1.6;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* Accent stat */
|
|
297
|
+
.stat-block.accent-stat .stat-number {
|
|
298
|
+
background: linear-gradient(135deg, var(--accent), #FF8C5A);
|
|
299
|
+
-webkit-background-clip: text;
|
|
300
|
+
-webkit-text-fill-color: transparent;
|
|
301
|
+
background-clip: text;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* ── Features section ── */
|
|
305
|
+
.features {
|
|
306
|
+
background: var(--bg);
|
|
307
|
+
padding: 80px 40px;
|
|
308
|
+
border-top: 1px solid var(--border);
|
|
309
|
+
}
|
|
310
|
+
.features-inner {
|
|
311
|
+
max-width: 1100px;
|
|
312
|
+
margin: 0 auto;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.section-overline {
|
|
316
|
+
color: var(--accent);
|
|
317
|
+
margin-bottom: 16px;
|
|
318
|
+
}
|
|
319
|
+
.section-title {
|
|
320
|
+
font-size: clamp(36px, 4vw, 52px);
|
|
321
|
+
margin-bottom: 56px;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.features-grid {
|
|
325
|
+
display: grid;
|
|
326
|
+
grid-template-columns: repeat(3, 1fr);
|
|
327
|
+
gap: 1px;
|
|
328
|
+
background: var(--border);
|
|
329
|
+
border: 1px solid var(--border);
|
|
330
|
+
border-radius: 10px;
|
|
331
|
+
overflow: hidden;
|
|
332
|
+
}
|
|
333
|
+
.feature-card {
|
|
334
|
+
background: var(--surface);
|
|
335
|
+
padding: 32px 28px;
|
|
336
|
+
}
|
|
337
|
+
.feature-icon {
|
|
338
|
+
width: 44px;
|
|
339
|
+
height: 44px;
|
|
340
|
+
border-radius: 8px;
|
|
341
|
+
background: var(--elevated);
|
|
342
|
+
border: 1px solid var(--border-strong);
|
|
343
|
+
display: flex;
|
|
344
|
+
align-items: center;
|
|
345
|
+
justify-content: center;
|
|
346
|
+
margin-bottom: 18px;
|
|
347
|
+
font-size: 20px;
|
|
348
|
+
}
|
|
349
|
+
.feature-title {
|
|
350
|
+
font-size: 16px;
|
|
351
|
+
font-weight: 600;
|
|
352
|
+
color: var(--text-white);
|
|
353
|
+
margin-bottom: 10px;
|
|
354
|
+
line-height: 1.3;
|
|
355
|
+
}
|
|
356
|
+
.feature-text {
|
|
357
|
+
font-size: 13px;
|
|
358
|
+
color: var(--text-secondary);
|
|
359
|
+
line-height: 1.7;
|
|
360
|
+
}
|
|
361
|
+
.feature-link {
|
|
362
|
+
display: inline-flex;
|
|
363
|
+
align-items: center;
|
|
364
|
+
gap: 6px;
|
|
365
|
+
color: var(--accent);
|
|
366
|
+
font-size: 12px;
|
|
367
|
+
font-weight: 600;
|
|
368
|
+
margin-top: 16px;
|
|
369
|
+
cursor: pointer;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
/* ── White counterpoint section ── */
|
|
373
|
+
.counterpoint {
|
|
374
|
+
background: #FFFFFF;
|
|
375
|
+
padding: 80px 40px;
|
|
376
|
+
}
|
|
377
|
+
.counterpoint-inner {
|
|
378
|
+
max-width: 1100px;
|
|
379
|
+
margin: 0 auto;
|
|
380
|
+
display: grid;
|
|
381
|
+
grid-template-columns: 1fr 1fr;
|
|
382
|
+
gap: 80px;
|
|
383
|
+
align-items: center;
|
|
384
|
+
}
|
|
385
|
+
.cp-label {
|
|
386
|
+
font-family: 'JetBrains Mono', monospace;
|
|
387
|
+
text-transform: uppercase;
|
|
388
|
+
font-size: 0.7rem;
|
|
389
|
+
letter-spacing: 0.14em;
|
|
390
|
+
color: var(--accent);
|
|
391
|
+
margin-bottom: 16px;
|
|
392
|
+
}
|
|
393
|
+
.cp-title {
|
|
394
|
+
font-family: Impact, 'Clash Display', 'Arial Black', system-ui;
|
|
395
|
+
font-weight: 700;
|
|
396
|
+
letter-spacing: -0.04em;
|
|
397
|
+
line-height: 0.92;
|
|
398
|
+
color: #0A0A0A;
|
|
399
|
+
text-transform: uppercase;
|
|
400
|
+
font-size: clamp(36px, 4vw, 52px);
|
|
401
|
+
margin-bottom: 24px;
|
|
402
|
+
}
|
|
403
|
+
.cp-body {
|
|
404
|
+
font-size: 15px;
|
|
405
|
+
color: #4A4A4A;
|
|
406
|
+
line-height: 1.75;
|
|
407
|
+
margin-bottom: 28px;
|
|
408
|
+
}
|
|
409
|
+
.cp-checklist { list-style: none; }
|
|
410
|
+
.cp-checklist li {
|
|
411
|
+
display: flex;
|
|
412
|
+
align-items: flex-start;
|
|
413
|
+
gap: 10px;
|
|
414
|
+
font-size: 13.5px;
|
|
415
|
+
color: #333;
|
|
416
|
+
padding: 6px 0;
|
|
417
|
+
border-bottom: 1px solid #F0F0F0;
|
|
418
|
+
line-height: 1.5;
|
|
419
|
+
}
|
|
420
|
+
.cp-checklist li:last-child { border-bottom: none; }
|
|
421
|
+
.cp-check {
|
|
422
|
+
width: 18px;
|
|
423
|
+
height: 18px;
|
|
424
|
+
border-radius: 50%;
|
|
425
|
+
background: var(--accent);
|
|
426
|
+
display: flex;
|
|
427
|
+
align-items: center;
|
|
428
|
+
justify-content: center;
|
|
429
|
+
flex-shrink: 0;
|
|
430
|
+
margin-top: 2px;
|
|
431
|
+
}
|
|
432
|
+
.cp-check::after {
|
|
433
|
+
content: '';
|
|
434
|
+
width: 5px;
|
|
435
|
+
height: 8px;
|
|
436
|
+
border-right: 2px solid #fff;
|
|
437
|
+
border-bottom: 2px solid #fff;
|
|
438
|
+
transform: rotate(45deg) translate(-1px, -1px);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.metric-stack {
|
|
442
|
+
display: flex;
|
|
443
|
+
flex-direction: column;
|
|
444
|
+
gap: 2px;
|
|
445
|
+
}
|
|
446
|
+
.metric-item {
|
|
447
|
+
background: #F9F9F9;
|
|
448
|
+
border: 1px solid #EBEBEB;
|
|
449
|
+
border-radius: 10px;
|
|
450
|
+
padding: 20px 22px;
|
|
451
|
+
display: flex;
|
|
452
|
+
align-items: center;
|
|
453
|
+
justify-content: space-between;
|
|
454
|
+
}
|
|
455
|
+
.metric-label {
|
|
456
|
+
font-size: 12px;
|
|
457
|
+
color: #666;
|
|
458
|
+
font-weight: 500;
|
|
459
|
+
}
|
|
460
|
+
.metric-value {
|
|
461
|
+
font-family: Impact, 'Arial Black', system-ui;
|
|
462
|
+
font-size: 26px;
|
|
463
|
+
color: #0A0A0A;
|
|
464
|
+
letter-spacing: -0.03em;
|
|
465
|
+
}
|
|
466
|
+
.metric-value.red { color: var(--accent); }
|
|
467
|
+
|
|
468
|
+
/* ── Footer ── */
|
|
469
|
+
footer {
|
|
470
|
+
background: var(--surface);
|
|
471
|
+
border-top: 1px solid var(--border);
|
|
472
|
+
padding: 40px 40px;
|
|
473
|
+
}
|
|
474
|
+
.footer-inner {
|
|
475
|
+
max-width: 1100px;
|
|
476
|
+
margin: 0 auto;
|
|
477
|
+
display: flex;
|
|
478
|
+
align-items: center;
|
|
479
|
+
justify-content: space-between;
|
|
480
|
+
gap: 20px;
|
|
481
|
+
}
|
|
482
|
+
.footer-brand {
|
|
483
|
+
font-family: Impact, 'Arial Black', system-ui;
|
|
484
|
+
font-size: 20px;
|
|
485
|
+
color: var(--text-white);
|
|
486
|
+
letter-spacing: -0.03em;
|
|
487
|
+
text-transform: uppercase;
|
|
488
|
+
}
|
|
489
|
+
.footer-links {
|
|
490
|
+
display: flex;
|
|
491
|
+
gap: 24px;
|
|
492
|
+
list-style: none;
|
|
493
|
+
}
|
|
494
|
+
.footer-links li a {
|
|
495
|
+
font-size: 12px;
|
|
496
|
+
color: var(--text-secondary);
|
|
497
|
+
text-decoration: none;
|
|
498
|
+
}
|
|
499
|
+
.footer-copy {
|
|
500
|
+
font-size: 11px;
|
|
501
|
+
color: var(--text-secondary);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
/* ── Watermark ── */
|
|
505
|
+
.watermark {
|
|
506
|
+
position: fixed;
|
|
507
|
+
top: 70px;
|
|
508
|
+
right: 16px;
|
|
509
|
+
background: var(--elevated);
|
|
510
|
+
border: 1px solid var(--border-strong);
|
|
511
|
+
border-radius: 20px;
|
|
512
|
+
padding: 4px 12px;
|
|
513
|
+
font-size: 10px;
|
|
514
|
+
font-weight: 600;
|
|
515
|
+
color: var(--accent);
|
|
516
|
+
z-index: 100;
|
|
517
|
+
letter-spacing: 0.06em;
|
|
518
|
+
font-family: 'JetBrains Mono', monospace;
|
|
519
|
+
text-transform: uppercase;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
/* Responsive: hide code mock below ~900px */
|
|
523
|
+
@media (max-width: 900px) {
|
|
524
|
+
.hero-code { display: none; }
|
|
525
|
+
.hero { padding-right: 40px; }
|
|
526
|
+
}
|
|
527
|
+
</style>
|
|
528
|
+
</head>
|
|
529
|
+
<body>
|
|
530
|
+
|
|
531
|
+
<div class="watermark">AIOSON Design Skill</div>
|
|
532
|
+
|
|
533
|
+
<!-- Nav -->
|
|
534
|
+
<nav>
|
|
535
|
+
<div class="nav-logo">
|
|
536
|
+
<div class="logo-mark">
|
|
537
|
+
<svg viewBox="0 0 16 16"><path d="M8 1.5L14 5v6L8 14.5 2 11V5L8 1.5z"/></svg>
|
|
538
|
+
</div>
|
|
539
|
+
<span class="logo-name">Nexus</span>
|
|
540
|
+
</div>
|
|
541
|
+
<ul class="nav-links">
|
|
542
|
+
<li><a href="#">Platform</a></li>
|
|
543
|
+
<li><a href="#">Docs</a></li>
|
|
544
|
+
<li><a href="#">Pricing</a></li>
|
|
545
|
+
</ul>
|
|
546
|
+
<button class="nav-cta">Start Free →</button>
|
|
547
|
+
</nav>
|
|
548
|
+
|
|
549
|
+
<!-- Hero -->
|
|
550
|
+
<section class="hero">
|
|
551
|
+
<div class="hero-overline mono">Developer Platform / V2.0</div>
|
|
552
|
+
|
|
553
|
+
<h1 class="hero-headline display">
|
|
554
|
+
Ship Faster.<br>Break Nothing.
|
|
555
|
+
</h1>
|
|
556
|
+
|
|
557
|
+
<p class="hero-sub">
|
|
558
|
+
Nexus gives your team the infrastructure, observability, and CI/CD pipeline to go from commit to production in under 2 minutes — without the ops overhead.
|
|
559
|
+
</p>
|
|
560
|
+
|
|
561
|
+
<div class="hero-cta-row">
|
|
562
|
+
<button class="btn-primary">
|
|
563
|
+
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 1.5L14 5v6L8 14.5 2 11V5L8 1.5z"/></svg>
|
|
564
|
+
Deploy Now
|
|
565
|
+
</button>
|
|
566
|
+
<button class="btn-ghost">View Demo →</button>
|
|
567
|
+
<div class="hero-badge">
|
|
568
|
+
<span class="dot"></span>
|
|
569
|
+
All systems operational
|
|
570
|
+
</div>
|
|
571
|
+
</div>
|
|
572
|
+
|
|
573
|
+
<!-- Code mock -->
|
|
574
|
+
<div class="hero-code">
|
|
575
|
+
<div class="code-titlebar">
|
|
576
|
+
<div class="dot-r"></div>
|
|
577
|
+
<div class="dot-y"></div>
|
|
578
|
+
<div class="dot-g"></div>
|
|
579
|
+
<span class="code-filename">nexus.config.ts</span>
|
|
580
|
+
</div>
|
|
581
|
+
<div class="code-body">
|
|
582
|
+
<div><span class="c-ln">1</span><span class="c-k">import</span><span class="c-w"> </span><span class="c-n">Nexus</span><span class="c-w"> </span><span class="c-k">from</span><span class="c-w"> </span><span class="c-s">'@nexus/sdk'</span></div>
|
|
583
|
+
<div> </div>
|
|
584
|
+
<div><span class="c-ln">3</span><span class="c-k">export default</span><span class="c-w"> </span><span class="c-f">defineConfig</span><span class="c-w">({</span></div>
|
|
585
|
+
<div><span class="c-ln">4</span><span class="c-w"> </span><span class="c-n">project</span><span class="c-w">: </span><span class="c-s">'my-app'</span><span class="c-w">,</span></div>
|
|
586
|
+
<div><span class="c-ln">5</span><span class="c-w"> </span><span class="c-n">region</span><span class="c-w">: </span><span class="c-s">'us-east-1'</span><span class="c-w">,</span></div>
|
|
587
|
+
<div><span class="c-ln">6</span><span class="c-w"> </span><span class="c-n">deploy</span><span class="c-w">: {</span></div>
|
|
588
|
+
<div><span class="c-ln">7</span><span class="c-w"> </span><span class="c-n">strategy</span><span class="c-w">: </span><span class="c-v">'canary'</span><span class="c-w">,</span></div>
|
|
589
|
+
<div><span class="c-ln">8</span><span class="c-w"> </span><span class="c-n">threshold</span><span class="c-w">: </span><span class="c-v">99.9</span><span class="c-w">,</span></div>
|
|
590
|
+
<div><span class="c-ln">9</span><span class="c-w"> </span><span class="c-n">rollback</span><span class="c-w">: </span><span class="c-k">true</span></div>
|
|
591
|
+
<div><span class="c-ln">10</span><span class="c-w"> },</span></div>
|
|
592
|
+
<div><span class="c-ln">11</span><span class="c-w"> </span><span class="c-n">observe</span><span class="c-w">: {</span></div>
|
|
593
|
+
<div><span class="c-ln">12</span><span class="c-w"> </span><span class="c-n">latencyP99</span><span class="c-w">: </span><span class="c-v">50</span><span class="c-w">, </span><span class="c-c">// ms</span></div>
|
|
594
|
+
<div><span class="c-ln">13</span><span class="c-w"> </span><span class="c-n">alerts</span><span class="c-w">: </span><span class="c-k">true</span></div>
|
|
595
|
+
<div><span class="c-ln">14</span><span class="c-w"> }</span></div>
|
|
596
|
+
<div><span class="c-ln">15</span><span class="c-w">})</span><span class="code-cursor"></span></div>
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
</section>
|
|
600
|
+
|
|
601
|
+
<!-- Stats band -->
|
|
602
|
+
<div class="stats-band">
|
|
603
|
+
<div class="stats-inner">
|
|
604
|
+
<div class="stat-block accent-stat">
|
|
605
|
+
<div class="stat-overline mono">Requests / day</div>
|
|
606
|
+
<div class="stat-number display">10M+</div>
|
|
607
|
+
<div class="stat-desc">Processed across 14 global edge nodes with zero queue drop.</div>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="stat-block">
|
|
610
|
+
<div class="stat-overline mono">Uptime SLA</div>
|
|
611
|
+
<div class="stat-number display">99.9%</div>
|
|
612
|
+
<div class="stat-desc">Contractual guarantee backed by multi-region failover and automatic rollback.</div>
|
|
613
|
+
</div>
|
|
614
|
+
<div class="stat-block">
|
|
615
|
+
<div class="stat-overline mono">p99 Latency</div>
|
|
616
|
+
<div class="stat-number display">< 50ms</div>
|
|
617
|
+
<div class="stat-desc">Cold start included. Measured at edge, not at origin. Verified monthly.</div>
|
|
618
|
+
</div>
|
|
619
|
+
</div>
|
|
620
|
+
</div>
|
|
621
|
+
|
|
622
|
+
<!-- Features -->
|
|
623
|
+
<section class="features">
|
|
624
|
+
<div class="features-inner">
|
|
625
|
+
<div class="section-overline mono">Platform Features</div>
|
|
626
|
+
<h2 class="section-title display">Everything you need.<br>Nothing you don't.</h2>
|
|
627
|
+
|
|
628
|
+
<div class="features-grid">
|
|
629
|
+
<div class="feature-card">
|
|
630
|
+
<div class="feature-icon">⚡</div>
|
|
631
|
+
<div class="feature-title">Instant Deploys</div>
|
|
632
|
+
<div class="feature-text">Push to main and go live in under 90 seconds. Atomic deployments with instant rollback if something goes wrong.</div>
|
|
633
|
+
<div class="feature-link">Learn more →</div>
|
|
634
|
+
</div>
|
|
635
|
+
<div class="feature-card">
|
|
636
|
+
<div class="feature-icon">🔍</div>
|
|
637
|
+
<div class="feature-title">Deep Observability</div>
|
|
638
|
+
<div class="feature-text">Full-stack traces, error grouping, and performance budgets — all in one dashboard, no extra agents required.</div>
|
|
639
|
+
<div class="feature-link">Learn more →</div>
|
|
640
|
+
</div>
|
|
641
|
+
<div class="feature-card">
|
|
642
|
+
<div class="feature-icon">🛡</div>
|
|
643
|
+
<div class="feature-title">Zero-Trust Security</div>
|
|
644
|
+
<div class="feature-text">Secrets management, automatic TLS, RBAC, and audit logs baked in. SOC 2 Type II certified infrastructure.</div>
|
|
645
|
+
<div class="feature-link">Learn more →</div>
|
|
646
|
+
</div>
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
649
|
+
</section>
|
|
650
|
+
|
|
651
|
+
<!-- White counterpoint section -->
|
|
652
|
+
<section class="counterpoint">
|
|
653
|
+
<div class="counterpoint-inner">
|
|
654
|
+
<div>
|
|
655
|
+
<div class="cp-label">Why teams switch</div>
|
|
656
|
+
<h2 class="cp-title">Your infra should be invisible</h2>
|
|
657
|
+
<p class="cp-body">
|
|
658
|
+
Most developer platforms give you control, then drown you in configuration. Nexus is different — sensible defaults, zero lock-in, and a CLI that gets out of your way.
|
|
659
|
+
</p>
|
|
660
|
+
<ul class="cp-checklist">
|
|
661
|
+
<li><div class="cp-check"></div><span>Works with any stack — Node, Go, Python, Rust, WASM</span></li>
|
|
662
|
+
<li><div class="cp-check"></div><span>Git-native workflow, no YAML sprawl required</span></li>
|
|
663
|
+
<li><div class="cp-check"></div><span>Bring your own cloud or use our managed infra</span></li>
|
|
664
|
+
<li><div class="cp-check"></div><span>Preview environments for every pull request automatically</span></li>
|
|
665
|
+
<li><div class="cp-check"></div><span>Pricing that scales down, not just up</span></li>
|
|
666
|
+
</ul>
|
|
667
|
+
</div>
|
|
668
|
+
|
|
669
|
+
<div class="metric-stack">
|
|
670
|
+
<div class="metric-item">
|
|
671
|
+
<div>
|
|
672
|
+
<div class="metric-label">Average deploy time</div>
|
|
673
|
+
</div>
|
|
674
|
+
<div class="metric-value red">1:47</div>
|
|
675
|
+
</div>
|
|
676
|
+
<div class="metric-item">
|
|
677
|
+
<div>
|
|
678
|
+
<div class="metric-label">Time to first deploy</div>
|
|
679
|
+
</div>
|
|
680
|
+
<div class="metric-value">6 min</div>
|
|
681
|
+
</div>
|
|
682
|
+
<div class="metric-item">
|
|
683
|
+
<div>
|
|
684
|
+
<div class="metric-label">Rollback time</div>
|
|
685
|
+
</div>
|
|
686
|
+
<div class="metric-value red">< 10s</div>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="metric-item">
|
|
689
|
+
<div>
|
|
690
|
+
<div class="metric-label">Support response (P1)</div>
|
|
691
|
+
</div>
|
|
692
|
+
<div class="metric-value">15 min</div>
|
|
693
|
+
</div>
|
|
694
|
+
<div style="margin-top: 12px; display: flex; gap: 10px;">
|
|
695
|
+
<button class="btn-primary" style="flex:1; justify-content:center; background:#0A0A0A;">Start free trial →</button>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</section>
|
|
700
|
+
|
|
701
|
+
<!-- Footer -->
|
|
702
|
+
<footer>
|
|
703
|
+
<div class="footer-inner">
|
|
704
|
+
<div class="footer-brand">Nexus</div>
|
|
705
|
+
<ul class="footer-links">
|
|
706
|
+
<li><a href="#">Platform</a></li>
|
|
707
|
+
<li><a href="#">Pricing</a></li>
|
|
708
|
+
<li><a href="#">Changelog</a></li>
|
|
709
|
+
<li><a href="#">Status</a></li>
|
|
710
|
+
<li><a href="#">Blog</a></li>
|
|
711
|
+
</ul>
|
|
712
|
+
<div class="footer-copy">© 2026 Nexus Inc. — Bold Editorial UI · AIOSON Design Skill Preview</div>
|
|
713
|
+
</div>
|
|
714
|
+
</footer>
|
|
715
|
+
|
|
716
|
+
</body>
|
|
717
|
+
</html>
|