@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
@@ -0,0 +1,1202 @@
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>Runbook — Incident Management Landing / Clean SaaS 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&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-gray: #F9FAFB;
15
+ --bg-white: #FFFFFF;
16
+ --border: #E5E7EB;
17
+ --accent: #2563EB;
18
+ --accent-hover: #1D4ED8;
19
+ --text-heading: #111827;
20
+ --text-body: #374151;
21
+ --text-secondary: #6B7280;
22
+ --text-muted: #9CA3AF;
23
+ --green: #16A34A;
24
+ --red: #DC2626;
25
+ --yellow: #D97706;
26
+ }
27
+
28
+ html { scroll-behavior: smooth; }
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ font-size: 15px;
33
+ line-height: 1.6;
34
+ color: var(--text-body);
35
+ background: var(--bg-gray);
36
+ }
37
+
38
+ /* ── NAV ── */
39
+ nav {
40
+ position: sticky;
41
+ top: 0;
42
+ z-index: 100;
43
+ background: var(--bg-white);
44
+ border-bottom: 1px solid var(--border);
45
+ padding: 0 32px;
46
+ height: 60px;
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: space-between;
50
+ }
51
+
52
+ .nav-logo {
53
+ font-size: 18px;
54
+ font-weight: 700;
55
+ color: var(--text-heading);
56
+ display: flex;
57
+ align-items: center;
58
+ gap: 8px;
59
+ text-decoration: none;
60
+ }
61
+
62
+ .nav-logo-icon {
63
+ width: 28px;
64
+ height: 28px;
65
+ background: var(--accent);
66
+ border-radius: 6px;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ color: white;
71
+ font-size: 13px;
72
+ font-weight: 700;
73
+ }
74
+
75
+ .nav-links {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 28px;
79
+ list-style: none;
80
+ }
81
+
82
+ .nav-links a {
83
+ font-size: 14px;
84
+ font-weight: 500;
85
+ color: var(--text-body);
86
+ text-decoration: none;
87
+ }
88
+
89
+ .nav-links a:hover { color: var(--text-heading); }
90
+
91
+ .nav-actions {
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 12px;
95
+ }
96
+
97
+ .btn-ghost {
98
+ font-family: 'Inter', sans-serif;
99
+ font-size: 14px;
100
+ font-weight: 500;
101
+ color: var(--text-body);
102
+ background: none;
103
+ border: 1px solid var(--border);
104
+ border-radius: 6px;
105
+ padding: 7px 16px;
106
+ cursor: pointer;
107
+ text-decoration: none;
108
+ display: inline-flex;
109
+ align-items: center;
110
+ }
111
+
112
+ .btn-primary {
113
+ font-family: 'Inter', sans-serif;
114
+ font-size: 14px;
115
+ font-weight: 600;
116
+ color: white;
117
+ background: var(--accent);
118
+ border: none;
119
+ border-radius: 6px;
120
+ padding: 8px 18px;
121
+ cursor: pointer;
122
+ text-decoration: none;
123
+ display: inline-flex;
124
+ align-items: center;
125
+ }
126
+
127
+ .btn-primary:hover { background: var(--accent-hover); }
128
+
129
+ .btn-primary-lg {
130
+ font-family: 'Inter', sans-serif;
131
+ font-size: 15px;
132
+ font-weight: 600;
133
+ color: white;
134
+ background: var(--accent);
135
+ border: none;
136
+ border-radius: 6px;
137
+ padding: 12px 24px;
138
+ cursor: pointer;
139
+ text-decoration: none;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ gap: 8px;
143
+ }
144
+
145
+ .btn-ghost-lg {
146
+ font-family: 'Inter', sans-serif;
147
+ font-size: 15px;
148
+ font-weight: 500;
149
+ color: var(--text-body);
150
+ background: none;
151
+ border: 1px solid var(--border);
152
+ border-radius: 6px;
153
+ padding: 12px 24px;
154
+ cursor: pointer;
155
+ text-decoration: none;
156
+ display: inline-flex;
157
+ align-items: center;
158
+ gap: 8px;
159
+ }
160
+
161
+ /* ── SECTIONS ── */
162
+ section { padding: 80px 32px; }
163
+
164
+ .container { max-width: 1120px; margin: 0 auto; }
165
+
166
+ /* ── HERO ── */
167
+ .hero {
168
+ background: var(--bg-white);
169
+ padding: 80px 32px 60px;
170
+ }
171
+
172
+ .hero-inner {
173
+ max-width: 1120px;
174
+ margin: 0 auto;
175
+ }
176
+
177
+ .overline {
178
+ font-family: 'JetBrains Mono', monospace;
179
+ font-size: 11px;
180
+ font-weight: 500;
181
+ letter-spacing: 0.12em;
182
+ text-transform: uppercase;
183
+ color: var(--accent);
184
+ display: inline-block;
185
+ margin-bottom: 20px;
186
+ }
187
+
188
+ .hero h1 {
189
+ font-size: 52px;
190
+ font-weight: 700;
191
+ color: var(--text-heading);
192
+ line-height: 1.12;
193
+ letter-spacing: -0.02em;
194
+ max-width: 700px;
195
+ margin-bottom: 20px;
196
+ }
197
+
198
+ .hero-sub {
199
+ font-size: 18px;
200
+ color: var(--text-secondary);
201
+ max-width: 560px;
202
+ margin-bottom: 36px;
203
+ line-height: 1.6;
204
+ }
205
+
206
+ .hero-ctas {
207
+ display: flex;
208
+ gap: 12px;
209
+ margin-bottom: 56px;
210
+ flex-wrap: wrap;
211
+ }
212
+
213
+ /* Dashboard mock */
214
+ .dashboard-mock {
215
+ background: var(--bg-white);
216
+ border: 1px solid var(--border);
217
+ border-radius: 8px;
218
+ box-shadow: 0 4px 24px rgba(0,0,0,0.08);
219
+ overflow: hidden;
220
+ }
221
+
222
+ .mock-topbar {
223
+ background: var(--bg-gray);
224
+ border-bottom: 1px solid var(--border);
225
+ padding: 10px 16px;
226
+ display: flex;
227
+ align-items: center;
228
+ gap: 8px;
229
+ }
230
+
231
+ .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
232
+ .mock-dot.red { background: #FC5F5A; }
233
+ .mock-dot.yellow { background: #FDBC40; }
234
+ .mock-dot.green { background: #35C759; }
235
+
236
+ .mock-bar {
237
+ background: var(--bg-white);
238
+ border: 1px solid var(--border);
239
+ border-radius: 4px;
240
+ height: 22px;
241
+ flex: 1;
242
+ margin-left: 8px;
243
+ padding: 0 10px;
244
+ display: flex;
245
+ align-items: center;
246
+ }
247
+
248
+ .mock-bar-text {
249
+ font-family: 'JetBrains Mono', monospace;
250
+ font-size: 10px;
251
+ color: var(--text-muted);
252
+ }
253
+
254
+ .mock-body {
255
+ display: flex;
256
+ }
257
+
258
+ .mock-sidebar {
259
+ width: 200px;
260
+ border-right: 1px solid var(--border);
261
+ padding: 16px 0;
262
+ flex-shrink: 0;
263
+ }
264
+
265
+ .mock-sidebar-item {
266
+ padding: 7px 16px;
267
+ font-size: 12px;
268
+ font-weight: 500;
269
+ color: var(--text-secondary);
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 8px;
273
+ }
274
+
275
+ .mock-sidebar-item.active {
276
+ color: var(--accent);
277
+ background: #EFF6FF;
278
+ border-left: 3px solid var(--accent);
279
+ }
280
+
281
+ .mock-sidebar-icon {
282
+ width: 14px;
283
+ height: 14px;
284
+ border-radius: 3px;
285
+ background: currentColor;
286
+ opacity: 0.3;
287
+ }
288
+
289
+ .mock-main {
290
+ flex: 1;
291
+ padding: 20px;
292
+ }
293
+
294
+ .mock-table-header {
295
+ display: flex;
296
+ justify-content: space-between;
297
+ align-items: center;
298
+ margin-bottom: 16px;
299
+ }
300
+
301
+ .mock-table-title {
302
+ font-size: 13px;
303
+ font-weight: 600;
304
+ color: var(--text-heading);
305
+ }
306
+
307
+ .mock-badge {
308
+ font-family: 'JetBrains Mono', monospace;
309
+ font-size: 10px;
310
+ background: #EFF6FF;
311
+ color: var(--accent);
312
+ border: 1px solid #BFDBFE;
313
+ border-radius: 4px;
314
+ padding: 2px 8px;
315
+ }
316
+
317
+ .mock-table { width: 100%; border-collapse: collapse; }
318
+
319
+ .mock-table th {
320
+ font-family: 'JetBrains Mono', monospace;
321
+ font-size: 10px;
322
+ font-weight: 500;
323
+ color: var(--text-muted);
324
+ text-transform: uppercase;
325
+ letter-spacing: 0.06em;
326
+ text-align: left;
327
+ padding: 6px 10px;
328
+ border-bottom: 1px solid var(--border);
329
+ }
330
+
331
+ .mock-table td {
332
+ padding: 9px 10px;
333
+ font-size: 12px;
334
+ color: var(--text-body);
335
+ border-bottom: 1px solid var(--bg-gray);
336
+ }
337
+
338
+ .status-dot {
339
+ display: inline-flex;
340
+ align-items: center;
341
+ gap: 5px;
342
+ }
343
+
344
+ .status-dot::before {
345
+ content: '';
346
+ display: inline-block;
347
+ width: 7px;
348
+ height: 7px;
349
+ border-radius: 50%;
350
+ }
351
+
352
+ .status-dot.critical::before { background: var(--red); }
353
+ .status-dot.warning::before { background: var(--yellow); }
354
+ .status-dot.resolved::before { background: var(--green); }
355
+ .status-dot.monitoring::before { background: var(--accent); }
356
+
357
+ .severity-tag {
358
+ font-family: 'JetBrains Mono', monospace;
359
+ font-size: 10px;
360
+ padding: 2px 7px;
361
+ border-radius: 4px;
362
+ font-weight: 500;
363
+ }
364
+
365
+ .sev-p1 { background: #FEF2F2; color: var(--red); }
366
+ .sev-p2 { background: #FFFBEB; color: var(--yellow); }
367
+ .sev-p3 { background: #EFF6FF; color: var(--accent); }
368
+
369
+ /* ── TRUSTED BY ── */
370
+ .trusted { background: var(--bg-gray); padding: 48px 32px; }
371
+
372
+ .trusted-label {
373
+ font-size: 13px;
374
+ font-weight: 500;
375
+ color: var(--text-muted);
376
+ text-align: center;
377
+ margin-bottom: 28px;
378
+ }
379
+
380
+ .logos-row {
381
+ display: flex;
382
+ justify-content: center;
383
+ align-items: center;
384
+ gap: 48px;
385
+ flex-wrap: wrap;
386
+ }
387
+
388
+ .logo-name {
389
+ font-size: 15px;
390
+ font-weight: 600;
391
+ color: var(--text-muted);
392
+ letter-spacing: -0.01em;
393
+ }
394
+
395
+ /* ── FEATURES ── */
396
+ .features { background: var(--bg-white); }
397
+
398
+ .section-label {
399
+ font-family: 'JetBrains Mono', monospace;
400
+ font-size: 11px;
401
+ font-weight: 500;
402
+ letter-spacing: 0.12em;
403
+ text-transform: uppercase;
404
+ color: var(--accent);
405
+ display: block;
406
+ margin-bottom: 12px;
407
+ }
408
+
409
+ .section-heading {
410
+ font-size: 36px;
411
+ font-weight: 700;
412
+ color: var(--text-heading);
413
+ line-height: 1.2;
414
+ letter-spacing: -0.02em;
415
+ margin-bottom: 12px;
416
+ }
417
+
418
+ .section-sub {
419
+ font-size: 16px;
420
+ color: var(--text-secondary);
421
+ max-width: 480px;
422
+ margin-bottom: 52px;
423
+ }
424
+
425
+ .features-grid {
426
+ display: grid;
427
+ grid-template-columns: repeat(3, 1fr);
428
+ gap: 24px;
429
+ }
430
+
431
+ .feature-card {
432
+ background: var(--bg-white);
433
+ border: 1px solid var(--border);
434
+ border-radius: 8px;
435
+ padding: 28px;
436
+ position: relative;
437
+ transition: box-shadow 0.2s;
438
+ }
439
+
440
+ .feature-card:hover {
441
+ box-shadow: 0 4px 16px rgba(0,0,0,0.08);
442
+ }
443
+
444
+ .feature-card.featured {
445
+ border-top: 3px solid var(--accent);
446
+ }
447
+
448
+ .feature-icon {
449
+ width: 40px;
450
+ height: 40px;
451
+ background: #EFF6FF;
452
+ border-radius: 8px;
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: center;
456
+ margin-bottom: 16px;
457
+ color: var(--accent);
458
+ font-size: 18px;
459
+ }
460
+
461
+ .feature-card h3 {
462
+ font-size: 15px;
463
+ font-weight: 600;
464
+ color: var(--text-heading);
465
+ margin-bottom: 8px;
466
+ }
467
+
468
+ .feature-card p {
469
+ font-size: 14px;
470
+ color: var(--text-secondary);
471
+ line-height: 1.55;
472
+ }
473
+
474
+ /* ── METRICS ── */
475
+ .metrics { background: var(--bg-gray); padding: 60px 32px; }
476
+
477
+ .metrics-row {
478
+ display: grid;
479
+ grid-template-columns: repeat(3, 1fr);
480
+ gap: 2px;
481
+ max-width: 1120px;
482
+ margin: 0 auto;
483
+ background: var(--border);
484
+ border: 1px solid var(--border);
485
+ border-radius: 8px;
486
+ overflow: hidden;
487
+ }
488
+
489
+ .metric-cell {
490
+ background: var(--bg-white);
491
+ padding: 40px 36px;
492
+ text-align: center;
493
+ }
494
+
495
+ .metric-value {
496
+ font-size: 42px;
497
+ font-weight: 700;
498
+ color: var(--accent);
499
+ letter-spacing: -0.02em;
500
+ line-height: 1;
501
+ margin-bottom: 8px;
502
+ }
503
+
504
+ .metric-label {
505
+ font-size: 15px;
506
+ font-weight: 500;
507
+ color: var(--text-heading);
508
+ margin-bottom: 4px;
509
+ }
510
+
511
+ .metric-sub {
512
+ font-family: 'JetBrains Mono', monospace;
513
+ font-size: 11px;
514
+ color: var(--text-muted);
515
+ }
516
+
517
+ /* ── TESTIMONIAL ── */
518
+ .testimonial-section { background: var(--bg-white); }
519
+
520
+ .testimonial-card {
521
+ max-width: 760px;
522
+ margin: 0 auto;
523
+ background: var(--bg-white);
524
+ border: 1px solid var(--border);
525
+ border-radius: 8px;
526
+ padding: 44px 48px;
527
+ box-shadow: 0 1px 3px rgba(0,0,0,0.06);
528
+ }
529
+
530
+ .testimonial-quote {
531
+ font-size: 20px;
532
+ font-weight: 400;
533
+ color: var(--text-heading);
534
+ line-height: 1.55;
535
+ margin-bottom: 28px;
536
+ font-style: italic;
537
+ }
538
+
539
+ .testimonial-author {
540
+ display: flex;
541
+ align-items: center;
542
+ gap: 14px;
543
+ }
544
+
545
+ .author-avatar {
546
+ width: 44px;
547
+ height: 44px;
548
+ border-radius: 50%;
549
+ background: #DBEAFE;
550
+ display: flex;
551
+ align-items: center;
552
+ justify-content: center;
553
+ font-weight: 700;
554
+ font-size: 16px;
555
+ color: var(--accent);
556
+ flex-shrink: 0;
557
+ }
558
+
559
+ .author-name {
560
+ font-size: 14px;
561
+ font-weight: 600;
562
+ color: var(--text-heading);
563
+ margin-bottom: 2px;
564
+ }
565
+
566
+ .author-role {
567
+ font-family: 'JetBrains Mono', monospace;
568
+ font-size: 11px;
569
+ color: var(--text-muted);
570
+ }
571
+
572
+ /* ── PRICING ── */
573
+ .pricing { background: var(--bg-gray); }
574
+
575
+ .pricing-grid {
576
+ display: grid;
577
+ grid-template-columns: repeat(3, 1fr);
578
+ gap: 24px;
579
+ margin-bottom: 40px;
580
+ }
581
+
582
+ .pricing-card {
583
+ background: var(--bg-white);
584
+ border: 1px solid var(--border);
585
+ border-radius: 8px;
586
+ overflow: hidden;
587
+ box-shadow: 0 1px 3px rgba(0,0,0,0.06);
588
+ }
589
+
590
+ .pricing-card.featured {
591
+ border-color: var(--accent);
592
+ box-shadow: 0 4px 20px rgba(37,99,235,0.12);
593
+ }
594
+
595
+ .pricing-header {
596
+ padding: 28px 28px 24px;
597
+ border-bottom: 1px solid var(--border);
598
+ }
599
+
600
+ .pricing-card.featured .pricing-header {
601
+ background: var(--accent);
602
+ border-color: var(--accent);
603
+ }
604
+
605
+ .pricing-tier {
606
+ font-size: 12px;
607
+ font-weight: 600;
608
+ letter-spacing: 0.06em;
609
+ text-transform: uppercase;
610
+ color: var(--text-secondary);
611
+ margin-bottom: 12px;
612
+ }
613
+
614
+ .pricing-card.featured .pricing-tier { color: rgba(255,255,255,0.8); }
615
+
616
+ .pricing-price {
617
+ font-size: 36px;
618
+ font-weight: 700;
619
+ color: var(--text-heading);
620
+ letter-spacing: -0.02em;
621
+ display: flex;
622
+ align-items: baseline;
623
+ gap: 4px;
624
+ }
625
+
626
+ .pricing-card.featured .pricing-price { color: white; }
627
+
628
+ .pricing-price-unit {
629
+ font-size: 14px;
630
+ font-weight: 500;
631
+ color: var(--text-muted);
632
+ }
633
+
634
+ .pricing-card.featured .pricing-price-unit { color: rgba(255,255,255,0.7); }
635
+
636
+ .pricing-desc {
637
+ font-size: 13px;
638
+ color: var(--text-secondary);
639
+ margin-top: 8px;
640
+ }
641
+
642
+ .pricing-card.featured .pricing-desc { color: rgba(255,255,255,0.8); }
643
+
644
+ .pricing-body {
645
+ padding: 24px 28px;
646
+ }
647
+
648
+ .pricing-feature-list {
649
+ list-style: none;
650
+ margin-bottom: 24px;
651
+ }
652
+
653
+ .pricing-feature-list li {
654
+ font-size: 13px;
655
+ color: var(--text-body);
656
+ padding: 6px 0;
657
+ display: flex;
658
+ align-items: center;
659
+ gap: 8px;
660
+ border-bottom: 1px solid var(--bg-gray);
661
+ }
662
+
663
+ .pricing-feature-list li::before {
664
+ content: '✓';
665
+ color: var(--green);
666
+ font-weight: 700;
667
+ font-size: 12px;
668
+ flex-shrink: 0;
669
+ }
670
+
671
+ .pricing-feature-list li.unavailable {
672
+ color: var(--text-muted);
673
+ }
674
+
675
+ .pricing-feature-list li.unavailable::before {
676
+ content: '–';
677
+ color: var(--text-muted);
678
+ font-weight: 400;
679
+ }
680
+
681
+ .pricing-cta {
682
+ display: block;
683
+ text-align: center;
684
+ padding: 10px 20px;
685
+ border-radius: 6px;
686
+ font-size: 14px;
687
+ font-weight: 600;
688
+ text-decoration: none;
689
+ cursor: pointer;
690
+ }
691
+
692
+ .pricing-cta.primary {
693
+ background: var(--accent);
694
+ color: white;
695
+ border: none;
696
+ }
697
+
698
+ .pricing-cta.secondary {
699
+ background: var(--bg-white);
700
+ color: var(--accent);
701
+ border: 1px solid var(--accent);
702
+ }
703
+
704
+ .pricing-cta.ghost {
705
+ background: var(--bg-white);
706
+ color: var(--text-body);
707
+ border: 1px solid var(--border);
708
+ }
709
+
710
+ /* Comparison table */
711
+ .compare-table { width: 100%; border-collapse: collapse; background: var(--bg-white); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
712
+
713
+ .compare-table th {
714
+ padding: 12px 20px;
715
+ text-align: center;
716
+ font-size: 13px;
717
+ font-weight: 600;
718
+ color: var(--text-heading);
719
+ background: var(--bg-gray);
720
+ border-bottom: 1px solid var(--border);
721
+ }
722
+
723
+ .compare-table th:first-child { text-align: left; }
724
+
725
+ .compare-table td {
726
+ padding: 12px 20px;
727
+ font-size: 13px;
728
+ color: var(--text-body);
729
+ border-bottom: 1px solid var(--bg-gray);
730
+ text-align: center;
731
+ }
732
+
733
+ .compare-table td:first-child { text-align: left; font-weight: 500; color: var(--text-heading); }
734
+
735
+ .check { color: var(--green); font-weight: 700; }
736
+ .cross { color: var(--text-muted); }
737
+
738
+ /* ── CTA SECTION ── */
739
+ .cta-section {
740
+ background: var(--accent);
741
+ padding: 80px 32px;
742
+ text-align: center;
743
+ }
744
+
745
+ .cta-section h2 {
746
+ font-size: 36px;
747
+ font-weight: 700;
748
+ color: white;
749
+ letter-spacing: -0.02em;
750
+ margin-bottom: 16px;
751
+ }
752
+
753
+ .cta-section p {
754
+ font-size: 17px;
755
+ color: rgba(255,255,255,0.8);
756
+ margin-bottom: 36px;
757
+ }
758
+
759
+ .btn-white {
760
+ font-family: 'Inter', sans-serif;
761
+ font-size: 15px;
762
+ font-weight: 600;
763
+ color: var(--accent);
764
+ background: white;
765
+ border: none;
766
+ border-radius: 6px;
767
+ padding: 13px 28px;
768
+ cursor: pointer;
769
+ text-decoration: none;
770
+ display: inline-flex;
771
+ align-items: center;
772
+ gap: 8px;
773
+ }
774
+
775
+ /* ── FOOTER ── */
776
+ footer {
777
+ background: var(--bg-white);
778
+ border-top: 1px solid var(--border);
779
+ padding: 60px 32px 32px;
780
+ }
781
+
782
+ .footer-inner {
783
+ max-width: 1120px;
784
+ margin: 0 auto;
785
+ }
786
+
787
+ .footer-grid {
788
+ display: grid;
789
+ grid-template-columns: 1.5fr 1fr 1fr 1fr;
790
+ gap: 48px;
791
+ margin-bottom: 48px;
792
+ }
793
+
794
+ .footer-brand p {
795
+ font-size: 13px;
796
+ color: var(--text-secondary);
797
+ margin-top: 12px;
798
+ line-height: 1.6;
799
+ max-width: 240px;
800
+ }
801
+
802
+ .footer-col h4 {
803
+ font-size: 12px;
804
+ font-weight: 600;
805
+ color: var(--text-heading);
806
+ letter-spacing: 0.04em;
807
+ text-transform: uppercase;
808
+ margin-bottom: 16px;
809
+ }
810
+
811
+ .footer-col ul { list-style: none; }
812
+
813
+ .footer-col li { margin-bottom: 10px; }
814
+
815
+ .footer-col a {
816
+ font-size: 14px;
817
+ color: var(--text-secondary);
818
+ text-decoration: none;
819
+ }
820
+
821
+ .footer-col a:hover { color: var(--text-heading); }
822
+
823
+ .footer-bottom {
824
+ border-top: 1px solid var(--border);
825
+ padding-top: 24px;
826
+ display: flex;
827
+ justify-content: space-between;
828
+ align-items: center;
829
+ }
830
+
831
+ .footer-bottom-text {
832
+ font-family: 'JetBrains Mono', monospace;
833
+ font-size: 11px;
834
+ color: var(--text-muted);
835
+ }
836
+
837
+ /* MISC */
838
+ .text-center { text-align: center; }
839
+ .mb-8 { margin-bottom: 8px; }
840
+ .mb-16 { margin-bottom: 16px; }
841
+ .mb-24 { margin-bottom: 24px; }
842
+ .mb-48 { margin-bottom: 48px; }
843
+ </style>
844
+ </head>
845
+ <body>
846
+
847
+ <!-- NAV -->
848
+ <nav>
849
+ <a href="#" class="nav-logo">
850
+ <div class="nav-logo-icon">R</div>
851
+ Runbook
852
+ </a>
853
+ <ul class="nav-links">
854
+ <li><a href="#">Product</a></li>
855
+ <li><a href="#">Integrations</a></li>
856
+ <li><a href="#">Pricing</a></li>
857
+ <li><a href="#">Docs</a></li>
858
+ </ul>
859
+ <div class="nav-actions">
860
+ <a href="#" class="btn-ghost">Sign in</a>
861
+ <a href="#" class="btn-primary">Start free</a>
862
+ </div>
863
+ </nav>
864
+
865
+ <!-- HERO -->
866
+ <div class="hero">
867
+ <div class="hero-inner">
868
+ <span class="overline">Incident Management / For Engineering Teams</span>
869
+ <h1>Resolve incidents faster. Ship with confidence.</h1>
870
+ <p class="hero-sub">Runbook gives on-call engineers a single pane of glass — from alert to postmortem, without the chaos.</p>
871
+ <div class="hero-ctas">
872
+ <a href="#" class="btn-primary-lg">Start free trial →</a>
873
+ <a href="#" class="btn-ghost-lg">View live demo</a>
874
+ </div>
875
+
876
+ <!-- Dashboard mock -->
877
+ <div class="dashboard-mock">
878
+ <div class="mock-topbar">
879
+ <div class="mock-dot red"></div>
880
+ <div class="mock-dot yellow"></div>
881
+ <div class="mock-dot green"></div>
882
+ <div class="mock-bar"><span class="mock-bar-text">app.runbook.io/incidents</span></div>
883
+ </div>
884
+ <div class="mock-body">
885
+ <div class="mock-sidebar">
886
+ <div class="mock-sidebar-item active">
887
+ <div class="mock-sidebar-icon"></div>
888
+ Incidents
889
+ </div>
890
+ <div class="mock-sidebar-item">
891
+ <div class="mock-sidebar-icon"></div>
892
+ On-call
893
+ </div>
894
+ <div class="mock-sidebar-item">
895
+ <div class="mock-sidebar-icon"></div>
896
+ Runbooks
897
+ </div>
898
+ <div class="mock-sidebar-item">
899
+ <div class="mock-sidebar-icon"></div>
900
+ Postmortems
901
+ </div>
902
+ <div class="mock-sidebar-item">
903
+ <div class="mock-sidebar-icon"></div>
904
+ Integrations
905
+ </div>
906
+ <div class="mock-sidebar-item">
907
+ <div class="mock-sidebar-icon"></div>
908
+ Analytics
909
+ </div>
910
+ </div>
911
+ <div class="mock-main">
912
+ <div class="mock-table-header">
913
+ <span class="mock-table-title">Active Incidents</span>
914
+ <span class="mock-badge">3 open</span>
915
+ </div>
916
+ <table class="mock-table">
917
+ <thead>
918
+ <tr>
919
+ <th>Status</th>
920
+ <th>Title</th>
921
+ <th>Severity</th>
922
+ <th>Assignee</th>
923
+ <th>Duration</th>
924
+ </tr>
925
+ </thead>
926
+ <tbody>
927
+ <tr>
928
+ <td><span class="status-dot critical">Critical</span></td>
929
+ <td>API gateway latency spike — prod</td>
930
+ <td><span class="severity-tag sev-p1">P1</span></td>
931
+ <td>Sarah K.</td>
932
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--red)">00:14:33</span></td>
933
+ </tr>
934
+ <tr>
935
+ <td><span class="status-dot warning">Monitoring</span></td>
936
+ <td>Elevated error rate — payment service</td>
937
+ <td><span class="severity-tag sev-p2">P2</span></td>
938
+ <td>Marcus L.</td>
939
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--yellow)">01:02:17</span></td>
940
+ </tr>
941
+ <tr>
942
+ <td><span class="status-dot monitoring">Investigating</span></td>
943
+ <td>CDN cache miss ratio above threshold</td>
944
+ <td><span class="severity-tag sev-p3">P3</span></td>
945
+ <td>Priya M.</td>
946
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent)">00:28:05</span></td>
947
+ </tr>
948
+ <tr>
949
+ <td><span class="status-dot resolved">Resolved</span></td>
950
+ <td>Database connection pool exhausted</td>
951
+ <td><span class="severity-tag sev-p2">P2</span></td>
952
+ <td>James T.</td>
953
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green)">Resolved</span></td>
954
+ </tr>
955
+ </tbody>
956
+ </table>
957
+ </div>
958
+ </div>
959
+ </div>
960
+ </div>
961
+ </div>
962
+
963
+ <!-- TRUSTED BY -->
964
+ <div class="trusted">
965
+ <p class="trusted-label">Trusted by 1,200+ engineering teams worldwide</p>
966
+ <div class="logos-row">
967
+ <span class="logo-name">Streamline</span>
968
+ <span class="logo-name">Northvault</span>
969
+ <span class="logo-name">Cascadeio</span>
970
+ <span class="logo-name">Meridian</span>
971
+ <span class="logo-name">Apertive</span>
972
+ </div>
973
+ </div>
974
+
975
+ <!-- FEATURES -->
976
+ <section class="features">
977
+ <div class="container">
978
+ <span class="section-label">Product</span>
979
+ <h2 class="section-heading">Everything you need during an incident</h2>
980
+ <p class="section-sub">Built for speed and clarity when pressure is highest.</p>
981
+
982
+ <div class="features-grid">
983
+ <div class="feature-card featured">
984
+ <div class="feature-icon">⚡</div>
985
+ <h3>Instant Alert Routing</h3>
986
+ <p>Connect PagerDuty, Datadog, or Grafana. Alerts land in Slack in seconds with full context attached.</p>
987
+ </div>
988
+ <div class="feature-card">
989
+ <div class="feature-icon">📋</div>
990
+ <h3>Runbook Automation</h3>
991
+ <p>Auto-surface the right runbook for each incident type. Reduce time-to-action from minutes to seconds.</p>
992
+ </div>
993
+ <div class="feature-card">
994
+ <div class="feature-icon">🧭</div>
995
+ <h3>Incident Commander</h3>
996
+ <p>Assign roles, track actions, and maintain a clean timeline — all from one command center.</p>
997
+ </div>
998
+ <div class="feature-card">
999
+ <div class="feature-icon">📊</div>
1000
+ <h3>Postmortem Generator</h3>
1001
+ <p>One-click postmortems with a full incident timeline, action log, and customizable templates.</p>
1002
+ </div>
1003
+ <div class="feature-card">
1004
+ <div class="feature-icon">🔔</div>
1005
+ <h3>On-Call Scheduling</h3>
1006
+ <p>Visual schedules, overrides, and escalation policies. No spreadsheet needed.</p>
1007
+ </div>
1008
+ <div class="feature-card">
1009
+ <div class="feature-icon">📈</div>
1010
+ <h3>MTTR Analytics</h3>
1011
+ <p>Track MTTA, MTTR, and incident frequency. Spot patterns before they become outages.</p>
1012
+ </div>
1013
+ </div>
1014
+ </div>
1015
+ </section>
1016
+
1017
+ <!-- METRICS -->
1018
+ <div class="metrics">
1019
+ <div class="metrics-row">
1020
+ <div class="metric-cell">
1021
+ <div class="metric-value">99.9%</div>
1022
+ <div class="metric-label">Uptime SLA</div>
1023
+ <div class="metric-sub">Guaranteed reliability</div>
1024
+ </div>
1025
+ <div class="metric-cell">
1026
+ <div class="metric-value">&lt; 5 min</div>
1027
+ <div class="metric-label">Median MTTR</div>
1028
+ <div class="metric-sub">Across all customers</div>
1029
+ </div>
1030
+ <div class="metric-cell">
1031
+ <div class="metric-value">10,000+</div>
1032
+ <div class="metric-label">Incidents resolved</div>
1033
+ <div class="metric-sub">In the last 30 days</div>
1034
+ </div>
1035
+ </div>
1036
+ </div>
1037
+
1038
+ <!-- TESTIMONIAL -->
1039
+ <section class="testimonial-section">
1040
+ <div class="container">
1041
+ <div class="testimonial-card">
1042
+ <p class="testimonial-quote">"Runbook cut our mean time to resolution in half. The runbook automation feature alone is worth the subscription — our junior engineers can handle incidents that used to require senior escalation."</p>
1043
+ <div class="testimonial-author">
1044
+ <div class="author-avatar">SK</div>
1045
+ <div>
1046
+ <div class="author-name">Sarah Kim</div>
1047
+ <div class="author-role">Director of Engineering @ Streamline</div>
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ </section>
1053
+
1054
+ <!-- PRICING -->
1055
+ <section class="pricing">
1056
+ <div class="container">
1057
+ <div class="text-center mb-48">
1058
+ <span class="section-label">Pricing</span>
1059
+ <h2 class="section-heading">Simple, transparent pricing</h2>
1060
+ <p class="section-sub" style="margin: 0 auto;">Start free. Scale as your team grows.</p>
1061
+ </div>
1062
+
1063
+ <div class="pricing-grid">
1064
+ <div class="pricing-card">
1065
+ <div class="pricing-header">
1066
+ <div class="pricing-tier">Free</div>
1067
+ <div class="pricing-price">$0 <span class="pricing-price-unit">/ month</span></div>
1068
+ <div class="pricing-desc">For small teams getting started</div>
1069
+ </div>
1070
+ <div class="pricing-body">
1071
+ <ul class="pricing-feature-list">
1072
+ <li>Up to 5 users</li>
1073
+ <li>50 incidents / month</li>
1074
+ <li>Basic runbooks</li>
1075
+ <li>Slack integration</li>
1076
+ <li class="unavailable">Custom escalation policies</li>
1077
+ <li class="unavailable">Analytics dashboard</li>
1078
+ <li class="unavailable">Postmortem templates</li>
1079
+ </ul>
1080
+ <a href="#" class="pricing-cta ghost">Get started free</a>
1081
+ </div>
1082
+ </div>
1083
+
1084
+ <div class="pricing-card featured">
1085
+ <div class="pricing-header">
1086
+ <div class="pricing-tier">Pro</div>
1087
+ <div class="pricing-price">$29 <span class="pricing-price-unit">/ user / mo</span></div>
1088
+ <div class="pricing-desc">For growing engineering teams</div>
1089
+ </div>
1090
+ <div class="pricing-body">
1091
+ <ul class="pricing-feature-list">
1092
+ <li>Unlimited users</li>
1093
+ <li>Unlimited incidents</li>
1094
+ <li>Advanced runbooks</li>
1095
+ <li>All integrations</li>
1096
+ <li>Custom escalation policies</li>
1097
+ <li>Analytics dashboard</li>
1098
+ <li>Postmortem templates</li>
1099
+ </ul>
1100
+ <a href="#" class="pricing-cta primary">Start free trial</a>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <div class="pricing-card">
1105
+ <div class="pricing-header">
1106
+ <div class="pricing-tier">Enterprise</div>
1107
+ <div class="pricing-price">Custom</div>
1108
+ <div class="pricing-desc">For large orgs with specific needs</div>
1109
+ </div>
1110
+ <div class="pricing-body">
1111
+ <ul class="pricing-feature-list">
1112
+ <li>Everything in Pro</li>
1113
+ <li>SSO / SAML</li>
1114
+ <li>Audit logs</li>
1115
+ <li>SLA guarantees</li>
1116
+ <li>Dedicated CSM</li>
1117
+ <li>Custom integrations</li>
1118
+ <li>On-prem deployment</li>
1119
+ </ul>
1120
+ <a href="#" class="pricing-cta secondary">Contact sales</a>
1121
+ </div>
1122
+ </div>
1123
+ </div>
1124
+
1125
+ <table class="compare-table">
1126
+ <thead>
1127
+ <tr>
1128
+ <th>Feature</th>
1129
+ <th>Free</th>
1130
+ <th>Pro</th>
1131
+ <th>Enterprise</th>
1132
+ </tr>
1133
+ </thead>
1134
+ <tbody>
1135
+ <tr><td>Incident tracking</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
1136
+ <tr><td>Slack / Teams alerts</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
1137
+ <tr><td>Custom runbooks</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
1138
+ <tr><td>MTTR analytics</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
1139
+ <tr><td>SSO / SAML</td><td class="cross">—</td><td class="cross">—</td><td class="check">✓</td></tr>
1140
+ <tr><td>Dedicated support</td><td class="cross">—</td><td class="cross">—</td><td class="check">✓</td></tr>
1141
+ </tbody>
1142
+ </table>
1143
+ </div>
1144
+ </section>
1145
+
1146
+ <!-- CTA -->
1147
+ <div class="cta-section">
1148
+ <div class="container">
1149
+ <h2>Ready to stop firefighting?</h2>
1150
+ <p>Join 1,200+ engineering teams that resolve incidents faster with Runbook.</p>
1151
+ <a href="#" class="btn-white">Start your free trial — no credit card required →</a>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <!-- FOOTER -->
1156
+ <footer>
1157
+ <div class="footer-inner">
1158
+ <div class="footer-grid">
1159
+ <div class="footer-brand">
1160
+ <a href="#" class="nav-logo" style="display:inline-flex;">
1161
+ <div class="nav-logo-icon">R</div>
1162
+ Runbook
1163
+ </a>
1164
+ <p>Incident management built for engineering teams who care about reliability.</p>
1165
+ </div>
1166
+ <div class="footer-col">
1167
+ <h4>Product</h4>
1168
+ <ul>
1169
+ <li><a href="#">Features</a></li>
1170
+ <li><a href="#">Integrations</a></li>
1171
+ <li><a href="#">Changelog</a></li>
1172
+ <li><a href="#">Roadmap</a></li>
1173
+ </ul>
1174
+ </div>
1175
+ <div class="footer-col">
1176
+ <h4>Resources</h4>
1177
+ <ul>
1178
+ <li><a href="#">Documentation</a></li>
1179
+ <li><a href="#">API Reference</a></li>
1180
+ <li><a href="#">Status Page</a></li>
1181
+ <li><a href="#">Blog</a></li>
1182
+ </ul>
1183
+ </div>
1184
+ <div class="footer-col">
1185
+ <h4>Company</h4>
1186
+ <ul>
1187
+ <li><a href="#">About</a></li>
1188
+ <li><a href="#">Careers</a></li>
1189
+ <li><a href="#">Security</a></li>
1190
+ <li><a href="#">Privacy</a></li>
1191
+ </ul>
1192
+ </div>
1193
+ </div>
1194
+ <div class="footer-bottom">
1195
+ <span class="footer-bottom-text">© 2024 Runbook, Inc. All rights reserved.</span>
1196
+ <span class="footer-bottom-text">Clean SaaS UI — Design Skill Preview</span>
1197
+ </div>
1198
+ </div>
1199
+ </footer>
1200
+
1201
+ </body>
1202
+ </html>