forgedock 1.0.17 → 1.0.19

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 (134) hide show
  1. package/README.md +34 -1
  2. package/bin/cross-publish.mjs +344 -0
  3. package/bin/forgedock.mjs +229 -17
  4. package/commands/autopilot.md +77 -0
  5. package/commands/design-bench.md +176 -0
  6. package/commands/design-render-critique-loop.md +103 -0
  7. package/commands/design.md +259 -0
  8. package/commands/issue.md +7 -3
  9. package/commands/orchestrate.md +121 -0
  10. package/commands/{resume.md → pipeline-resume.md} +4 -4
  11. package/commands/{status.md → pipeline-status.md} +1 -1
  12. package/commands/qa-sweep.md +37 -2
  13. package/commands/quality-gate.md +57 -0
  14. package/commands/review-pr-staging.md +158 -2
  15. package/commands/test-gate.md +929 -0
  16. package/commands/work-on/build/implement.md +5 -3
  17. package/commands/work-on.md +53 -3
  18. package/docs/CI.md +177 -0
  19. package/docs/FORGE-PROTOCOL.md +324 -0
  20. package/docs/articles/b-vs-c-baseline.md +210 -0
  21. package/docs/articles/full-abc-benchmark.md +205 -0
  22. package/docs/articles/selective-spec-loading-token-savings.md +140 -0
  23. package/docs/design/abc-benchmark.md +195 -0
  24. package/docs/design/design-architect-rationale.md +123 -0
  25. package/docs/design/design-memory.md +61 -0
  26. package/docs/design/design-spec-schema.md +248 -0
  27. package/docs/design/design-system-lint.md +150 -0
  28. package/docs/design/divergent-generation.md +106 -0
  29. package/docs/design/effects-appropriateness.md +133 -0
  30. package/docs/design/fixtures/briefs/README.md +47 -0
  31. package/docs/design/fixtures/briefs/cadence.md +39 -0
  32. package/docs/design/fixtures/briefs/plume.md +39 -0
  33. package/docs/design/fixtures/briefs/slipstream.md +39 -0
  34. package/docs/design/fixtures/briefs/tender.md +39 -0
  35. package/docs/design/fixtures/briefs/voltage.md +39 -0
  36. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
  37. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
  38. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
  39. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
  40. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
  41. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
  42. package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
  43. package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
  44. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
  45. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
  46. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
  47. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
  48. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
  49. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
  50. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
  51. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
  52. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
  53. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
  54. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
  55. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
  56. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
  57. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
  58. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
  59. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
  60. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
  61. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
  62. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
  63. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
  64. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
  65. package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
  66. package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
  67. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
  68. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
  69. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
  70. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
  71. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
  72. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
  73. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
  74. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
  75. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
  76. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
  77. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
  78. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
  79. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
  80. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
  81. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
  82. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
  83. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
  84. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
  85. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
  86. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
  87. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
  88. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
  89. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
  90. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
  91. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
  92. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
  93. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
  94. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
  95. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
  96. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
  97. package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
  98. package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
  99. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
  100. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
  101. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
  102. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
  103. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
  104. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
  105. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
  106. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
  107. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
  108. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
  109. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
  110. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
  111. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
  112. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
  113. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
  114. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
  115. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
  116. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
  117. package/docs/design/foundations/brutalist.css +294 -0
  118. package/docs/design/foundations/editorial.css +300 -0
  119. package/docs/design/foundations/minimal-luxury.css +295 -0
  120. package/docs/design/foundations/technical.css +293 -0
  121. package/docs/design/foundations/warm-photo.css +299 -0
  122. package/docs/design/reference-corpus.md +1726 -0
  123. package/docs/design/render-critique-loop.md +57 -0
  124. package/docs/spec-graph-schema.md +397 -0
  125. package/package.json +1 -1
  126. package/scripts/bench-scorecard.mjs +239 -0
  127. package/scripts/build-spec-graph.mjs +509 -0
  128. package/scripts/check-native-conflicts.sh +200 -0
  129. package/scripts/classify-lane.sh +0 -7
  130. package/scripts/design-system-lint.mjs +993 -0
  131. package/scripts/graph-query.sh +486 -0
  132. package/scripts/transition-label.sh +10 -2
  133. package/scripts/validate-spec-graph.sh +423 -0
  134. package/templates/workflows/forgedock-review.yml +96 -0
package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html ADDED
@@ -0,0 +1,1423 @@
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>Cadence — Email infrastructure for developers</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=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
12
+
13
+ :root {
14
+ --bg: #0C0E12;
15
+ --surface: #13161C;
16
+ --surface-2: #1A1D25;
17
+ --border: #242830;
18
+ --border-light: #2E323C;
19
+ --text: #E2E4E9;
20
+ --text-muted: #7B8194;
21
+ --text-dim: #4E5468;
22
+ --accent: #22C55E;
23
+ --accent-dim: rgba(34,197,94,0.12);
24
+ --accent-muted: rgba(34,197,94,0.3);
25
+ --orange: #F59E0B;
26
+ --red: #EF4444;
27
+ --blue: #3B82F6;
28
+ }
29
+
30
+ html { font-size: 16px; scroll-behavior: smooth; }
31
+
32
+ body {
33
+ font-family: 'Space Grotesk', sans-serif;
34
+ background: var(--bg);
35
+ color: var(--text);
36
+ line-height: 1.5;
37
+ -webkit-font-smoothing: antialiased;
38
+ }
39
+
40
+ /* NAV */
41
+ nav {
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ padding: 16px 32px;
46
+ border-bottom: 1px solid var(--border);
47
+ position: sticky;
48
+ top: 0;
49
+ background: rgba(12,14,18,0.92);
50
+ backdrop-filter: blur(12px);
51
+ z-index: 100;
52
+ }
53
+
54
+ .nav-left {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 32px;
58
+ }
59
+
60
+ .logo {
61
+ font-weight: 700;
62
+ font-size: 1.1rem;
63
+ letter-spacing: -0.03em;
64
+ color: var(--text);
65
+ text-decoration: none;
66
+ }
67
+
68
+ .logo-dot {
69
+ display: inline-block;
70
+ width: 6px;
71
+ height: 6px;
72
+ background: var(--accent);
73
+ border-radius: 50%;
74
+ margin-left: 2px;
75
+ vertical-align: super;
76
+ }
77
+
78
+ .nav-tabs {
79
+ display: flex;
80
+ gap: 4px;
81
+ list-style: none;
82
+ }
83
+
84
+ .nav-tabs a {
85
+ text-decoration: none;
86
+ color: var(--text-muted);
87
+ font-size: 0.8rem;
88
+ font-weight: 500;
89
+ padding: 6px 12px;
90
+ border-radius: 4px;
91
+ transition: all 0.15s;
92
+ }
93
+
94
+ .nav-tabs a:hover {
95
+ color: var(--text);
96
+ background: var(--surface-2);
97
+ }
98
+
99
+ .nav-tabs a.active {
100
+ color: var(--text);
101
+ background: var(--surface-2);
102
+ }
103
+
104
+ .nav-right {
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 12px;
108
+ }
109
+
110
+ .btn-ghost {
111
+ background: transparent;
112
+ color: var(--text-muted);
113
+ border: 1px solid var(--border);
114
+ padding: 7px 16px;
115
+ border-radius: 5px;
116
+ font-family: inherit;
117
+ font-size: 0.8rem;
118
+ font-weight: 500;
119
+ cursor: pointer;
120
+ text-decoration: none;
121
+ transition: all 0.15s;
122
+ }
123
+
124
+ .btn-ghost:hover {
125
+ color: var(--text);
126
+ border-color: var(--border-light);
127
+ }
128
+
129
+ .btn-accent {
130
+ background: var(--accent);
131
+ color: #0C0E12;
132
+ border: none;
133
+ padding: 8px 18px;
134
+ border-radius: 5px;
135
+ font-family: inherit;
136
+ font-size: 0.8rem;
137
+ font-weight: 600;
138
+ cursor: pointer;
139
+ text-decoration: none;
140
+ transition: background 0.15s;
141
+ }
142
+
143
+ .btn-accent:hover { background: #1CAE4A; }
144
+
145
+ /* HERO — full terminal emulator */
146
+ .hero {
147
+ padding: 64px 32px 48px;
148
+ max-width: 1320px;
149
+ margin: 0 auto;
150
+ }
151
+
152
+ .hero-top {
153
+ display: grid;
154
+ grid-template-columns: 420px 1fr;
155
+ gap: 64px;
156
+ align-items: start;
157
+ margin-bottom: 48px;
158
+ }
159
+
160
+ .hero-intro h1 {
161
+ font-size: 2.4rem;
162
+ font-weight: 700;
163
+ letter-spacing: -0.04em;
164
+ line-height: 1.1;
165
+ margin-bottom: 20px;
166
+ }
167
+
168
+ .hero-intro h1 .highlight {
169
+ color: var(--accent);
170
+ }
171
+
172
+ .hero-intro p {
173
+ color: var(--text-muted);
174
+ font-size: 0.95rem;
175
+ line-height: 1.65;
176
+ margin-bottom: 28px;
177
+ }
178
+
179
+ .hero-badges {
180
+ display: flex;
181
+ gap: 8px;
182
+ flex-wrap: wrap;
183
+ margin-bottom: 32px;
184
+ }
185
+
186
+ .badge {
187
+ font-family: 'JetBrains Mono', monospace;
188
+ font-size: 0.65rem;
189
+ padding: 4px 10px;
190
+ border-radius: 3px;
191
+ background: var(--surface-2);
192
+ color: var(--text-muted);
193
+ border: 1px solid var(--border);
194
+ }
195
+
196
+ .badge.green {
197
+ color: var(--accent);
198
+ background: var(--accent-dim);
199
+ border-color: var(--accent-muted);
200
+ }
201
+
202
+ /* TERMINAL */
203
+ .terminal {
204
+ background: var(--surface);
205
+ border: 1px solid var(--border);
206
+ border-radius: 8px;
207
+ overflow: hidden;
208
+ }
209
+
210
+ .terminal-bar {
211
+ display: flex;
212
+ align-items: center;
213
+ justify-content: space-between;
214
+ padding: 10px 16px;
215
+ background: var(--surface-2);
216
+ border-bottom: 1px solid var(--border);
217
+ }
218
+
219
+ .terminal-dots {
220
+ display: flex;
221
+ gap: 6px;
222
+ }
223
+
224
+ .terminal-dots span {
225
+ width: 10px;
226
+ height: 10px;
227
+ border-radius: 50%;
228
+ }
229
+
230
+ .terminal-dots span:nth-child(1) { background: #EF4444; }
231
+ .terminal-dots span:nth-child(2) { background: #F59E0B; }
232
+ .terminal-dots span:nth-child(3) { background: #22C55E; }
233
+
234
+ .terminal-title {
235
+ font-family: 'JetBrains Mono', monospace;
236
+ font-size: 0.7rem;
237
+ color: var(--text-dim);
238
+ }
239
+
240
+ .terminal-body {
241
+ padding: 24px;
242
+ font-family: 'JetBrains Mono', monospace;
243
+ font-size: 0.78rem;
244
+ line-height: 1.85;
245
+ overflow-x: auto;
246
+ }
247
+
248
+ .t-prompt { color: var(--accent); }
249
+ .t-cmd { color: var(--text); }
250
+ .t-flag { color: var(--orange); }
251
+ .t-str { color: #A78BFA; }
252
+ .t-comment { color: var(--text-dim); }
253
+ .t-url { color: var(--blue); }
254
+ .t-key { color: var(--text-muted); }
255
+ .t-val { color: #A78BFA; }
256
+ .t-status { color: var(--accent); }
257
+ .t-dim { color: var(--text-dim); }
258
+ .t-bracket { color: var(--text-muted); }
259
+
260
+ .terminal-body .line { display: block; min-height: 1.85em; }
261
+ .terminal-body .blank { display: block; height: 0.9em; }
262
+
263
+ /* METRICS ROW */
264
+ .metrics-row {
265
+ display: grid;
266
+ grid-template-columns: repeat(5, 1fr);
267
+ gap: 1px;
268
+ background: var(--border);
269
+ border: 1px solid var(--border);
270
+ border-radius: 6px;
271
+ overflow: hidden;
272
+ margin: 48px 32px 0;
273
+ max-width: 1320px;
274
+ margin-left: auto;
275
+ margin-right: auto;
276
+ }
277
+
278
+ .metric {
279
+ background: var(--surface);
280
+ padding: 24px 20px;
281
+ }
282
+
283
+ .metric-label {
284
+ font-size: 0.68rem;
285
+ color: var(--text-dim);
286
+ text-transform: uppercase;
287
+ letter-spacing: 0.08em;
288
+ margin-bottom: 8px;
289
+ }
290
+
291
+ .metric-value {
292
+ font-size: 1.6rem;
293
+ font-weight: 700;
294
+ letter-spacing: -0.03em;
295
+ }
296
+
297
+ .metric-sub {
298
+ font-family: 'JetBrains Mono', monospace;
299
+ font-size: 0.65rem;
300
+ color: var(--accent);
301
+ margin-top: 4px;
302
+ }
303
+
304
+ /* SECTIONS */
305
+ .content-area {
306
+ max-width: 1320px;
307
+ margin: 0 auto;
308
+ padding: 0 32px;
309
+ }
310
+
311
+ .section-divider {
312
+ border: none;
313
+ border-top: 1px solid var(--border);
314
+ margin: 80px 0;
315
+ }
316
+
317
+ .section-header {
318
+ display: flex;
319
+ justify-content: space-between;
320
+ align-items: flex-end;
321
+ margin-bottom: 40px;
322
+ gap: 40px;
323
+ }
324
+
325
+ .section-header h2 {
326
+ font-size: 1.8rem;
327
+ font-weight: 700;
328
+ letter-spacing: -0.03em;
329
+ max-width: 500px;
330
+ line-height: 1.15;
331
+ }
332
+
333
+ .section-header p {
334
+ color: var(--text-muted);
335
+ font-size: 0.88rem;
336
+ max-width: 400px;
337
+ text-align: right;
338
+ line-height: 1.6;
339
+ }
340
+
341
+ /* SDK GRID */
342
+ .sdk-grid {
343
+ display: grid;
344
+ grid-template-columns: 1fr 1fr;
345
+ gap: 16px;
346
+ }
347
+
348
+ .sdk-card {
349
+ background: var(--surface);
350
+ border: 1px solid var(--border);
351
+ border-radius: 6px;
352
+ overflow: hidden;
353
+ }
354
+
355
+ .sdk-card-header {
356
+ display: flex;
357
+ justify-content: space-between;
358
+ align-items: center;
359
+ padding: 14px 20px;
360
+ border-bottom: 1px solid var(--border);
361
+ background: var(--surface-2);
362
+ }
363
+
364
+ .sdk-card-lang {
365
+ font-family: 'JetBrains Mono', monospace;
366
+ font-size: 0.7rem;
367
+ color: var(--text-muted);
368
+ font-weight: 500;
369
+ }
370
+
371
+ .sdk-card-install {
372
+ font-family: 'JetBrains Mono', monospace;
373
+ font-size: 0.65rem;
374
+ color: var(--text-dim);
375
+ }
376
+
377
+ .sdk-card pre {
378
+ padding: 20px;
379
+ font-family: 'JetBrains Mono', monospace;
380
+ font-size: 0.73rem;
381
+ line-height: 1.8;
382
+ overflow-x: auto;
383
+ }
384
+
385
+ /* FEATURE TABLE */
386
+ .feature-table {
387
+ width: 100%;
388
+ border-collapse: collapse;
389
+ }
390
+
391
+ .feature-table th {
392
+ text-align: left;
393
+ font-size: 0.68rem;
394
+ text-transform: uppercase;
395
+ letter-spacing: 0.08em;
396
+ color: var(--text-dim);
397
+ padding: 12px 20px;
398
+ border-bottom: 1px solid var(--border);
399
+ font-weight: 500;
400
+ }
401
+
402
+ .feature-table td {
403
+ padding: 16px 20px;
404
+ border-bottom: 1px solid var(--border);
405
+ font-size: 0.88rem;
406
+ vertical-align: top;
407
+ }
408
+
409
+ .feature-table tr:last-child td { border-bottom: none; }
410
+
411
+ .feature-table td:first-child {
412
+ font-weight: 600;
413
+ white-space: nowrap;
414
+ color: var(--text);
415
+ width: 220px;
416
+ }
417
+
418
+ .feature-table td:nth-child(2) {
419
+ color: var(--text-muted);
420
+ line-height: 1.6;
421
+ }
422
+
423
+ .feature-table td:nth-child(3) {
424
+ font-family: 'JetBrains Mono', monospace;
425
+ font-size: 0.73rem;
426
+ color: var(--text-dim);
427
+ white-space: nowrap;
428
+ }
429
+
430
+ .feature-table-wrap {
431
+ border: 1px solid var(--border);
432
+ border-radius: 6px;
433
+ overflow: hidden;
434
+ background: var(--surface);
435
+ }
436
+
437
+ /* DELIVERABILITY PANEL */
438
+ .deliv-grid {
439
+ display: grid;
440
+ grid-template-columns: 2fr 1fr;
441
+ gap: 16px;
442
+ }
443
+
444
+ .deliv-main {
445
+ background: var(--surface);
446
+ border: 1px solid var(--border);
447
+ border-radius: 6px;
448
+ padding: 32px;
449
+ }
450
+
451
+ .deliv-main h3 {
452
+ font-size: 1.1rem;
453
+ font-weight: 600;
454
+ margin-bottom: 8px;
455
+ letter-spacing: -0.02em;
456
+ }
457
+
458
+ .deliv-main p {
459
+ color: var(--text-muted);
460
+ font-size: 0.85rem;
461
+ line-height: 1.6;
462
+ margin-bottom: 24px;
463
+ max-width: 520px;
464
+ }
465
+
466
+ .dns-record {
467
+ display: grid;
468
+ grid-template-columns: 80px 1fr 60px;
469
+ gap: 12px;
470
+ padding: 10px 0;
471
+ border-bottom: 1px solid var(--border);
472
+ font-family: 'JetBrains Mono', monospace;
473
+ font-size: 0.72rem;
474
+ align-items: center;
475
+ }
476
+
477
+ .dns-record:last-child { border-bottom: none; }
478
+
479
+ .dns-type {
480
+ color: var(--text-muted);
481
+ font-weight: 500;
482
+ }
483
+
484
+ .dns-value {
485
+ color: var(--text-dim);
486
+ overflow: hidden;
487
+ text-overflow: ellipsis;
488
+ }
489
+
490
+ .dns-status {
491
+ text-align: right;
492
+ font-weight: 500;
493
+ }
494
+
495
+ .dns-status.pass { color: var(--accent); }
496
+
497
+ .deliv-sidebar {
498
+ display: flex;
499
+ flex-direction: column;
500
+ gap: 16px;
501
+ }
502
+
503
+ .deliv-stat {
504
+ background: var(--surface);
505
+ border: 1px solid var(--border);
506
+ border-radius: 6px;
507
+ padding: 24px;
508
+ flex: 1;
509
+ }
510
+
511
+ .deliv-stat-label {
512
+ font-size: 0.68rem;
513
+ color: var(--text-dim);
514
+ text-transform: uppercase;
515
+ letter-spacing: 0.08em;
516
+ margin-bottom: 10px;
517
+ }
518
+
519
+ .deliv-stat-value {
520
+ font-size: 1.8rem;
521
+ font-weight: 700;
522
+ letter-spacing: -0.03em;
523
+ }
524
+
525
+ .deliv-stat-value.green { color: var(--accent); }
526
+
527
+ .deliv-stat-detail {
528
+ font-size: 0.75rem;
529
+ color: var(--text-dim);
530
+ margin-top: 4px;
531
+ }
532
+
533
+ /* TEMPLATE SECTION */
534
+ .template-split {
535
+ display: grid;
536
+ grid-template-columns: 1fr 1fr;
537
+ gap: 16px;
538
+ }
539
+
540
+ .template-editor {
541
+ background: var(--surface);
542
+ border: 1px solid var(--border);
543
+ border-radius: 6px;
544
+ overflow: hidden;
545
+ }
546
+
547
+ .template-editor-bar {
548
+ display: flex;
549
+ align-items: center;
550
+ gap: 12px;
551
+ padding: 10px 16px;
552
+ border-bottom: 1px solid var(--border);
553
+ background: var(--surface-2);
554
+ }
555
+
556
+ .tab-btn {
557
+ font-family: 'JetBrains Mono', monospace;
558
+ font-size: 0.65rem;
559
+ padding: 4px 10px;
560
+ border-radius: 3px;
561
+ background: transparent;
562
+ color: var(--text-dim);
563
+ border: none;
564
+ cursor: pointer;
565
+ }
566
+
567
+ .tab-btn.active {
568
+ background: var(--bg);
569
+ color: var(--text);
570
+ }
571
+
572
+ .template-editor pre {
573
+ padding: 20px;
574
+ font-family: 'JetBrains Mono', monospace;
575
+ font-size: 0.73rem;
576
+ line-height: 1.8;
577
+ overflow-x: auto;
578
+ }
579
+
580
+ .template-visual {
581
+ background: var(--surface);
582
+ border: 1px solid var(--border);
583
+ border-radius: 6px;
584
+ overflow: hidden;
585
+ }
586
+
587
+ .template-visual-bar {
588
+ display: flex;
589
+ justify-content: space-between;
590
+ align-items: center;
591
+ padding: 10px 16px;
592
+ border-bottom: 1px solid var(--border);
593
+ background: var(--surface-2);
594
+ }
595
+
596
+ .template-visual-label {
597
+ font-family: 'JetBrains Mono', monospace;
598
+ font-size: 0.65rem;
599
+ color: var(--text-dim);
600
+ }
601
+
602
+ .device-toggle {
603
+ display: flex;
604
+ gap: 4px;
605
+ }
606
+
607
+ .device-toggle span {
608
+ font-size: 0.65rem;
609
+ padding: 3px 8px;
610
+ border-radius: 3px;
611
+ color: var(--text-dim);
612
+ cursor: pointer;
613
+ }
614
+
615
+ .device-toggle span.active {
616
+ background: var(--bg);
617
+ color: var(--text-muted);
618
+ }
619
+
620
+ .template-preview-area {
621
+ padding: 32px;
622
+ display: flex;
623
+ justify-content: center;
624
+ }
625
+
626
+ .email-preview {
627
+ background: #FFFFFF;
628
+ border-radius: 4px;
629
+ width: 100%;
630
+ max-width: 400px;
631
+ overflow: hidden;
632
+ }
633
+
634
+ .email-preview-header {
635
+ background: #F3F4F6;
636
+ padding: 16px 20px;
637
+ border-bottom: 1px solid #E5E7EB;
638
+ }
639
+
640
+ .email-preview-header .from {
641
+ font-size: 0.72rem;
642
+ color: #374151;
643
+ font-weight: 600;
644
+ }
645
+
646
+ .email-preview-header .subject {
647
+ font-size: 0.8rem;
648
+ color: #111827;
649
+ font-weight: 600;
650
+ margin-top: 4px;
651
+ }
652
+
653
+ .email-preview-header .to {
654
+ font-size: 0.68rem;
655
+ color: #9CA3AF;
656
+ margin-top: 2px;
657
+ }
658
+
659
+ .email-preview-body {
660
+ padding: 24px 20px;
661
+ color: #374151;
662
+ font-size: 0.82rem;
663
+ line-height: 1.7;
664
+ }
665
+
666
+ .email-preview-body h3 {
667
+ color: #111827;
668
+ font-size: 1rem;
669
+ margin-bottom: 12px;
670
+ font-family: 'Space Grotesk', sans-serif;
671
+ }
672
+
673
+ .email-preview-body p {
674
+ margin-bottom: 16px;
675
+ }
676
+
677
+ .email-preview-body .preview-btn {
678
+ display: inline-block;
679
+ background: #22C55E;
680
+ color: #fff;
681
+ padding: 10px 24px;
682
+ border-radius: 4px;
683
+ font-size: 0.78rem;
684
+ font-weight: 600;
685
+ font-family: 'Space Grotesk', sans-serif;
686
+ }
687
+
688
+ /* WEBHOOK SECTION */
689
+ .webhook-stream {
690
+ background: var(--surface);
691
+ border: 1px solid var(--border);
692
+ border-radius: 6px;
693
+ overflow: hidden;
694
+ }
695
+
696
+ .webhook-header {
697
+ display: flex;
698
+ justify-content: space-between;
699
+ align-items: center;
700
+ padding: 14px 20px;
701
+ border-bottom: 1px solid var(--border);
702
+ background: var(--surface-2);
703
+ }
704
+
705
+ .webhook-title {
706
+ font-family: 'JetBrains Mono', monospace;
707
+ font-size: 0.7rem;
708
+ color: var(--text-muted);
709
+ }
710
+
711
+ .webhook-live {
712
+ display: flex;
713
+ align-items: center;
714
+ gap: 6px;
715
+ font-family: 'JetBrains Mono', monospace;
716
+ font-size: 0.65rem;
717
+ color: var(--accent);
718
+ }
719
+
720
+ .webhook-live-dot {
721
+ width: 6px;
722
+ height: 6px;
723
+ border-radius: 50%;
724
+ background: var(--accent);
725
+ animation: pulse 2s infinite;
726
+ }
727
+
728
+ @keyframes pulse {
729
+ 0%, 100% { opacity: 1; }
730
+ 50% { opacity: 0.4; }
731
+ }
732
+
733
+ .webhook-events {
734
+ padding: 4px 0;
735
+ }
736
+
737
+ .webhook-event {
738
+ display: grid;
739
+ grid-template-columns: 140px 120px 1fr 80px;
740
+ gap: 16px;
741
+ padding: 10px 20px;
742
+ font-family: 'JetBrains Mono', monospace;
743
+ font-size: 0.68rem;
744
+ border-bottom: 1px solid var(--border);
745
+ align-items: center;
746
+ }
747
+
748
+ .webhook-event:last-child { border-bottom: none; }
749
+
750
+ .webhook-event-time { color: var(--text-dim); }
751
+
752
+ .webhook-event-type { font-weight: 500; }
753
+ .webhook-event-type.delivered { color: var(--accent); }
754
+ .webhook-event-type.opened { color: var(--blue); }
755
+ .webhook-event-type.clicked { color: var(--orange); }
756
+ .webhook-event-type.bounced { color: var(--red); }
757
+
758
+ .webhook-event-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
759
+ .webhook-event-id { color: var(--text-dim); text-align: right; }
760
+
761
+ /* CTA SECTION */
762
+ .cta-section {
763
+ margin: 80px 0;
764
+ padding: 64px;
765
+ background: var(--surface);
766
+ border: 1px solid var(--border);
767
+ border-radius: 8px;
768
+ display: grid;
769
+ grid-template-columns: 1fr 1fr;
770
+ gap: 64px;
771
+ align-items: center;
772
+ }
773
+
774
+ .cta-left h2 {
775
+ font-size: 2rem;
776
+ font-weight: 700;
777
+ letter-spacing: -0.03em;
778
+ margin-bottom: 16px;
779
+ line-height: 1.1;
780
+ }
781
+
782
+ .cta-left p {
783
+ color: var(--text-muted);
784
+ font-size: 0.9rem;
785
+ line-height: 1.65;
786
+ margin-bottom: 28px;
787
+ max-width: 400px;
788
+ }
789
+
790
+ .cta-left .cta-actions {
791
+ display: flex;
792
+ gap: 12px;
793
+ }
794
+
795
+ .cta-right {
796
+ background: var(--bg);
797
+ border: 1px solid var(--border);
798
+ border-radius: 6px;
799
+ padding: 24px;
800
+ }
801
+
802
+ .cta-right .step {
803
+ display: flex;
804
+ gap: 16px;
805
+ padding: 12px 0;
806
+ border-bottom: 1px solid var(--border);
807
+ }
808
+
809
+ .cta-right .step:last-child { border-bottom: none; }
810
+
811
+ .cta-right .step-num {
812
+ font-family: 'JetBrains Mono', monospace;
813
+ font-size: 0.65rem;
814
+ color: var(--accent);
815
+ font-weight: 500;
816
+ padding-top: 2px;
817
+ flex-shrink: 0;
818
+ }
819
+
820
+ .cta-right .step-text {
821
+ font-size: 0.85rem;
822
+ color: var(--text-muted);
823
+ line-height: 1.5;
824
+ }
825
+
826
+ .cta-right .step-text strong {
827
+ color: var(--text);
828
+ font-weight: 600;
829
+ }
830
+
831
+ .cta-right .step-text code {
832
+ font-family: 'JetBrains Mono', monospace;
833
+ font-size: 0.75rem;
834
+ background: var(--surface-2);
835
+ padding: 2px 6px;
836
+ border-radius: 3px;
837
+ color: var(--accent);
838
+ }
839
+
840
+ /* FOOTER */
841
+ footer {
842
+ border-top: 1px solid var(--border);
843
+ padding: 32px;
844
+ display: flex;
845
+ justify-content: space-between;
846
+ align-items: center;
847
+ max-width: 1320px;
848
+ margin: 0 auto;
849
+ }
850
+
851
+ .footer-left {
852
+ display: flex;
853
+ align-items: center;
854
+ gap: 24px;
855
+ }
856
+
857
+ .footer-links {
858
+ display: flex;
859
+ gap: 20px;
860
+ list-style: none;
861
+ }
862
+
863
+ .footer-links a {
864
+ font-size: 0.78rem;
865
+ color: var(--text-dim);
866
+ text-decoration: none;
867
+ transition: color 0.15s;
868
+ }
869
+
870
+ .footer-links a:hover { color: var(--text-muted); }
871
+
872
+ .footer-status {
873
+ display: flex;
874
+ align-items: center;
875
+ gap: 6px;
876
+ font-family: 'JetBrains Mono', monospace;
877
+ font-size: 0.68rem;
878
+ color: var(--accent);
879
+ }
880
+
881
+ .footer-status-dot {
882
+ width: 6px;
883
+ height: 6px;
884
+ border-radius: 50%;
885
+ background: var(--accent);
886
+ }
887
+
888
+ /* RESPONSIVE */
889
+ @media (max-width: 1024px) {
890
+ .hero-top { grid-template-columns: 1fr; gap: 32px; }
891
+ .sdk-grid { grid-template-columns: 1fr; }
892
+ .deliv-grid { grid-template-columns: 1fr; }
893
+ .template-split { grid-template-columns: 1fr; }
894
+ .cta-section { grid-template-columns: 1fr; gap: 32px; }
895
+ .metrics-row { grid-template-columns: repeat(3, 1fr); }
896
+ .webhook-event { grid-template-columns: 1fr 1fr; gap: 8px; }
897
+ .webhook-event-detail, .webhook-event-id { display: none; }
898
+ }
899
+
900
+ @media (max-width: 640px) {
901
+ nav { padding: 12px 16px; }
902
+ .nav-tabs { display: none; }
903
+ .hero { padding: 32px 16px; }
904
+ .hero-intro h1 { font-size: 1.8rem; }
905
+ .metrics-row { grid-template-columns: 1fr 1fr; margin: 32px 16px 0; }
906
+ .content-area { padding: 0 16px; }
907
+ .section-header { flex-direction: column; align-items: flex-start; }
908
+ .section-header p { text-align: left; }
909
+ .cta-section { padding: 32px; }
910
+ footer { flex-direction: column; gap: 16px; padding: 24px 16px; }
911
+ }
912
+ </style>
913
+ </head>
914
+ <body>
915
+
916
+ <nav>
917
+ <div class="nav-left">
918
+ <a href="#" class="logo">cadence<span class="logo-dot"></span></a>
919
+ <ul class="nav-tabs">
920
+ <li><a href="#" class="active">Overview</a></li>
921
+ <li><a href="#sdk">SDKs</a></li>
922
+ <li><a href="#deliverability">Deliverability</a></li>
923
+ <li><a href="#templates">Templates</a></li>
924
+ <li><a href="#events">Events</a></li>
925
+ <li><a href="#">Pricing</a></li>
926
+ </ul>
927
+ </div>
928
+ <div class="nav-right">
929
+ <a href="#" class="btn-ghost">Docs</a>
930
+ <a href="#" class="btn-accent">Get API Key</a>
931
+ </div>
932
+ </nav>
933
+
934
+ <!-- HERO: terminal as hero -->
935
+ <section class="hero">
936
+ <div class="hero-top">
937
+ <div class="hero-intro">
938
+ <h1>Email infrastructure that <span class="highlight">stays out of your way</span>.</h1>
939
+ <p>One REST endpoint to send transactional and marketing email. Deliverability monitoring, template management, and real-time event streams included. Production-grade from day one.</p>
940
+ <div class="hero-badges">
941
+ <span class="badge green">99.97% uptime</span>
942
+ <span class="badge">SOC 2 Type II</span>
943
+ <span class="badge">GDPR compliant</span>
944
+ <span class="badge">5 SDKs</span>
945
+ </div>
946
+ <div style="display:flex;gap:12px;">
947
+ <a href="#" class="btn-accent">Get Started Free</a>
948
+ <a href="#" class="btn-ghost">View API Docs</a>
949
+ </div>
950
+ </div>
951
+
952
+ <div class="terminal">
953
+ <div class="terminal-bar">
954
+ <div class="terminal-dots"><span></span><span></span><span></span></div>
955
+ <span class="terminal-title">~/ &mdash; bash</span>
956
+ <span></span>
957
+ </div>
958
+ <div class="terminal-body">
959
+ <span class="line"><span class="t-comment"># Install the SDK</span></span>
960
+ <span class="line"><span class="t-prompt">$</span> <span class="t-cmd">npm install</span> <span class="t-str">@cadence/node</span></span>
961
+ <span class="line"><span class="t-dim">added 3 packages in 1.2s</span></span>
962
+ <span class="blank"></span>
963
+ <span class="line"><span class="t-comment"># Send your first email</span></span>
964
+ <span class="line"><span class="t-prompt">$</span> <span class="t-cmd">curl</span> <span class="t-flag">-X POST</span> <span class="t-url">https://api.cadence.dev/v1/emails/send</span> \</span>
965
+ <span class="line"> <span class="t-flag">-H</span> <span class="t-str">"Authorization: Bearer cd_live_9x8f..."</span> \</span>
966
+ <span class="line"> <span class="t-flag">-H</span> <span class="t-str">"Content-Type: application/json"</span> \</span>
967
+ <span class="line"> <span class="t-flag">-d</span> <span class="t-str">'{
968
+ "from": "team@yourapp.com",
969
+ "to": "jane@example.com",
970
+ "template": "welcome-v2",
971
+ "data": {
972
+ "first_name": "Jane",
973
+ "plan": "Pro",
974
+ "login_url": "https://app.yourco.com/login"
975
+ }
976
+ }'</span></span>
977
+ <span class="blank"></span>
978
+ <span class="line"><span class="t-bracket">{</span></span>
979
+ <span class="line"> <span class="t-key">"id"</span>: <span class="t-val">"msg_8xK2pRw4n"</span>,</span>
980
+ <span class="line"> <span class="t-key">"status"</span>: <span class="t-status">"queued"</span>,</span>
981
+ <span class="line"> <span class="t-key">"estimated_delivery"</span>: <span class="t-val">"1.1s"</span></span>
982
+ <span class="line"><span class="t-bracket">}</span></span>
983
+ <span class="blank"></span>
984
+ <span class="line"><span class="t-comment"># Check delivery status</span></span>
985
+ <span class="line"><span class="t-prompt">$</span> <span class="t-cmd">curl</span> <span class="t-url">https://api.cadence.dev/v1/emails/msg_8xK2pRw4n</span> \</span>
986
+ <span class="line"> <span class="t-flag">-H</span> <span class="t-str">"Authorization: Bearer cd_live_9x8f..."</span></span>
987
+ <span class="blank"></span>
988
+ <span class="line"><span class="t-bracket">{</span></span>
989
+ <span class="line"> <span class="t-key">"id"</span>: <span class="t-val">"msg_8xK2pRw4n"</span>,</span>
990
+ <span class="line"> <span class="t-key">"status"</span>: <span class="t-status">"delivered"</span>,</span>
991
+ <span class="line"> <span class="t-key">"delivered_at"</span>: <span class="t-val">"2024-11-14T09:41:02Z"</span>,</span>
992
+ <span class="line"> <span class="t-key">"opens"</span>: <span class="t-val">1</span>,</span>
993
+ <span class="line"> <span class="t-key">"clicks"</span>: <span class="t-val">0</span></span>
994
+ <span class="line"><span class="t-bracket">}</span></span>
995
+ </div>
996
+ </div>
997
+ </div>
998
+ </section>
999
+
1000
+ <!-- METRICS -->
1001
+ <div class="metrics-row">
1002
+ <div class="metric">
1003
+ <div class="metric-label">Emails sent (30d)</div>
1004
+ <div class="metric-value">48.2M</div>
1005
+ <div class="metric-sub">+18% MoM</div>
1006
+ </div>
1007
+ <div class="metric">
1008
+ <div class="metric-label">Avg. delivery time</div>
1009
+ <div class="metric-value">1.2s</div>
1010
+ <div class="metric-sub">p99: 2.8s</div>
1011
+ </div>
1012
+ <div class="metric">
1013
+ <div class="metric-label">Inbox placement</div>
1014
+ <div class="metric-value">99.1%</div>
1015
+ <div class="metric-sub">Across 30+ ISPs</div>
1016
+ </div>
1017
+ <div class="metric">
1018
+ <div class="metric-label">Bounce rate</div>
1019
+ <div class="metric-value">0.12%</div>
1020
+ <div class="metric-sub">Auto-suppressed</div>
1021
+ </div>
1022
+ <div class="metric">
1023
+ <div class="metric-label">Uptime (12mo)</div>
1024
+ <div class="metric-value">99.97%</div>
1025
+ <div class="metric-sub">Multi-region</div>
1026
+ </div>
1027
+ </div>
1028
+
1029
+ <div class="content-area">
1030
+
1031
+ <hr class="section-divider" id="sdk">
1032
+
1033
+ <!-- SDKs -->
1034
+ <div class="section-header">
1035
+ <h2>SDKs for five languages. One consistent API.</h2>
1036
+ <p>Every SDK wraps the same REST API. Same method names, same error handling, same response shapes. Pick the one that matches your stack.</p>
1037
+ </div>
1038
+
1039
+ <div class="sdk-grid">
1040
+ <div class="sdk-card">
1041
+ <div class="sdk-card-header">
1042
+ <span class="sdk-card-lang">Node.js / TypeScript</span>
1043
+ <span class="sdk-card-install">npm i @cadence/node</span>
1044
+ </div>
1045
+ <pre><span class="t-comment">import</span> { Cadence } <span class="t-comment">from</span> <span class="t-str">'@cadence/node'</span>;
1046
+
1047
+ <span class="t-comment">const</span> cadence = <span class="t-comment">new</span> <span class="t-url">Cadence</span>(<span class="t-str">'cd_live_...'</span>);
1048
+
1049
+ <span class="t-comment">const</span> result = <span class="t-comment">await</span> cadence.<span class="t-url">send</span>({
1050
+ from: <span class="t-str">'team@yourapp.com'</span>,
1051
+ to: <span class="t-str">'jane@customer.io'</span>,
1052
+ template: <span class="t-str">'welcome-v2'</span>,
1053
+ data: { first_name: <span class="t-str">'Jane'</span> },
1054
+ });
1055
+
1056
+ console.<span class="t-url">log</span>(result.id); <span class="t-dim">// msg_8xK2p...</span></pre>
1057
+ </div>
1058
+
1059
+ <div class="sdk-card">
1060
+ <div class="sdk-card-header">
1061
+ <span class="sdk-card-lang">Python</span>
1062
+ <span class="sdk-card-install">pip install cadence-email</span>
1063
+ </div>
1064
+ <pre><span class="t-comment">from</span> cadence <span class="t-comment">import</span> Cadence
1065
+
1066
+ client = <span class="t-url">Cadence</span>(api_key=<span class="t-str">"cd_live_..."</span>)
1067
+
1068
+ result = client.<span class="t-url">send</span>(
1069
+ from_email=<span class="t-str">"team@yourapp.com"</span>,
1070
+ to=<span class="t-str">"jane@customer.io"</span>,
1071
+ template=<span class="t-str">"welcome-v2"</span>,
1072
+ data={<span class="t-str">"first_name"</span>: <span class="t-str">"Jane"</span>},
1073
+ )
1074
+
1075
+ <span class="t-url">print</span>(result.id) <span class="t-dim"># msg_8xK2p...</span></pre>
1076
+ </div>
1077
+
1078
+ <div class="sdk-card">
1079
+ <div class="sdk-card-header">
1080
+ <span class="sdk-card-lang">Go</span>
1081
+ <span class="sdk-card-install">go get cadence.dev/sdk</span>
1082
+ </div>
1083
+ <pre>client := cadence.<span class="t-url">New</span>(<span class="t-str">"cd_live_..."</span>)
1084
+
1085
+ result, err := client.<span class="t-url">Send</span>(ctx, &cadence.<span class="t-url">Email</span>{
1086
+ From: <span class="t-str">"team@yourapp.com"</span>,
1087
+ To: <span class="t-str">"jane@customer.io"</span>,
1088
+ Template: <span class="t-str">"welcome-v2"</span>,
1089
+ Data: map[string]any{
1090
+ <span class="t-str">"first_name"</span>: <span class="t-str">"Jane"</span>,
1091
+ },
1092
+ })
1093
+
1094
+ fmt.<span class="t-url">Println</span>(result.ID) <span class="t-dim">// msg_8xK2p...</span></pre>
1095
+ </div>
1096
+
1097
+ <div class="sdk-card">
1098
+ <div class="sdk-card-header">
1099
+ <span class="sdk-card-lang">Ruby</span>
1100
+ <span class="sdk-card-install">gem install cadence-email</span>
1101
+ </div>
1102
+ <pre>client = <span class="t-url">Cadence</span>::Client.<span class="t-url">new</span>(<span class="t-str">"cd_live_..."</span>)
1103
+
1104
+ result = client.<span class="t-url">send</span>(
1105
+ from: <span class="t-str">"team@yourapp.com"</span>,
1106
+ to: <span class="t-str">"jane@customer.io"</span>,
1107
+ template: <span class="t-str">"welcome-v2"</span>,
1108
+ data: { first_name: <span class="t-str">"Jane"</span> }
1109
+ )
1110
+
1111
+ puts result.id <span class="t-dim"># msg_8xK2p...</span></pre>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ <hr class="section-divider" id="deliverability">
1116
+
1117
+ <!-- DELIVERABILITY -->
1118
+ <div class="section-header">
1119
+ <h2>Deliverability is infrastructure, not a feature.</h2>
1120
+ <p>Domain authentication, IP warm-up, bounce handling, and inbox placement monitoring. All managed, all visible.</p>
1121
+ </div>
1122
+
1123
+ <div class="deliv-grid">
1124
+ <div class="deliv-main">
1125
+ <h3>Domain health: yourapp.com</h3>
1126
+ <p>All DNS records verified and propagated. DKIM keys rotate automatically every 90 days. DMARC policy set to reject with aggregate reporting enabled.</p>
1127
+
1128
+ <div class="dns-record">
1129
+ <span class="dns-type">SPF</span>
1130
+ <span class="dns-value">v=spf1 include:spf.cadence.dev ~all</span>
1131
+ <span class="dns-status pass">PASS</span>
1132
+ </div>
1133
+ <div class="dns-record">
1134
+ <span class="dns-type">DKIM</span>
1135
+ <span class="dns-value">cadence._domainkey.yourapp.com → k=rsa; p=MIIBIj...</span>
1136
+ <span class="dns-status pass">PASS</span>
1137
+ </div>
1138
+ <div class="dns-record">
1139
+ <span class="dns-type">DMARC</span>
1140
+ <span class="dns-value">v=DMARC1; p=reject; rua=mailto:dmarc@cadence.dev</span>
1141
+ <span class="dns-status pass">PASS</span>
1142
+ </div>
1143
+ <div class="dns-record">
1144
+ <span class="dns-type">MX</span>
1145
+ <span class="dns-value">feedback.cadence.dev (bounce processing)</span>
1146
+ <span class="dns-status pass">PASS</span>
1147
+ </div>
1148
+ <div class="dns-record">
1149
+ <span class="dns-type">BIMI</span>
1150
+ <span class="dns-value">v=BIMI1; l=https://yourapp.com/.well-known/logo.svg</span>
1151
+ <span class="dns-status pass">PASS</span>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <div class="deliv-sidebar">
1156
+ <div class="deliv-stat">
1157
+ <div class="deliv-stat-label">Sender reputation</div>
1158
+ <div class="deliv-stat-value green">97</div>
1159
+ <div class="deliv-stat-detail">Google Postmaster: High</div>
1160
+ </div>
1161
+ <div class="deliv-stat">
1162
+ <div class="deliv-stat-label">Complaint rate</div>
1163
+ <div class="deliv-stat-value">0.02%</div>
1164
+ <div class="deliv-stat-detail">Below 0.1% threshold</div>
1165
+ </div>
1166
+ <div class="deliv-stat">
1167
+ <div class="deliv-stat-label">Suppressed</div>
1168
+ <div class="deliv-stat-value">1,847</div>
1169
+ <div class="deliv-stat-detail">Auto-removed from lists</div>
1170
+ </div>
1171
+ </div>
1172
+ </div>
1173
+
1174
+ <hr class="section-divider">
1175
+
1176
+ <!-- FEATURE TABLE -->
1177
+ <div class="section-header">
1178
+ <h2>What you get.</h2>
1179
+ <p>Every feature below is available on every plan. Usage-based pricing, no feature gates.</p>
1180
+ </div>
1181
+
1182
+ <div class="feature-table-wrap">
1183
+ <table class="feature-table">
1184
+ <thead>
1185
+ <tr>
1186
+ <th>Capability</th>
1187
+ <th>Description</th>
1188
+ <th>API</th>
1189
+ </tr>
1190
+ </thead>
1191
+ <tbody>
1192
+ <tr>
1193
+ <td>Transactional send</td>
1194
+ <td>Single-recipient email with template or inline HTML. Supports attachments, inline images, custom headers, and reply-to.</td>
1195
+ <td>POST /v1/emails/send</td>
1196
+ </tr>
1197
+ <tr>
1198
+ <td>Batch send</td>
1199
+ <td>Up to 10,000 recipients per call with per-recipient data merge. Scheduled or immediate. Progress tracked via webhook.</td>
1200
+ <td>POST /v1/emails/batch</td>
1201
+ </tr>
1202
+ <tr>
1203
+ <td>Template management</td>
1204
+ <td>Version-controlled templates with variables, conditionals, loops, and component includes. Visual editor for non-engineers.</td>
1205
+ <td>GET/POST /v1/templates</td>
1206
+ </tr>
1207
+ <tr>
1208
+ <td>Domain authentication</td>
1209
+ <td>Automated SPF, DKIM, DMARC, and BIMI setup. Continuous monitoring with alerts on DNS drift or key expiry.</td>
1210
+ <td>POST /v1/domains/verify</td>
1211
+ </tr>
1212
+ <tr>
1213
+ <td>Suppression lists</td>
1214
+ <td>Global and per-account suppression. Auto-add on hard bounce, complaint, or unsubscribe. Manual import/export.</td>
1215
+ <td>GET/POST /v1/suppressions</td>
1216
+ </tr>
1217
+ <tr>
1218
+ <td>Webhook events</td>
1219
+ <td>Real-time delivery, open, click, bounce, complaint, and unsubscribe events. Retry with exponential backoff.</td>
1220
+ <td>POST /v1/webhooks</td>
1221
+ </tr>
1222
+ <tr>
1223
+ <td>Analytics</td>
1224
+ <td>Aggregate and per-message analytics. Filter by template, tag, domain, or date range. CSV and API export.</td>
1225
+ <td>GET /v1/analytics</td>
1226
+ </tr>
1227
+ <tr>
1228
+ <td>Test mode</td>
1229
+ <td>Sandbox sending that captures email without delivering. Full header inspection and rendering preview.</td>
1230
+ <td>X-Cadence-Test: true</td>
1231
+ </tr>
1232
+ </tbody>
1233
+ </table>
1234
+ </div>
1235
+
1236
+ <hr class="section-divider" id="templates">
1237
+
1238
+ <!-- TEMPLATES -->
1239
+ <div class="section-header">
1240
+ <h2>Templates your whole team can work with.</h2>
1241
+ <p>Engineers write components in code. Content owners edit in a visual tool. Both deploy through the same API.</p>
1242
+ </div>
1243
+
1244
+ <div class="template-split">
1245
+ <div class="template-editor">
1246
+ <div class="template-editor-bar">
1247
+ <button class="tab-btn active">Code</button>
1248
+ <button class="tab-btn">Variables</button>
1249
+ <button class="tab-btn">History</button>
1250
+ </div>
1251
+ <pre><span class="t-comment">import</span> { Email, Section, Button, Text }
1252
+ <span class="t-comment">from</span> <span class="t-str">'@cadence/components'</span>;
1253
+
1254
+ <span class="t-comment">export default function</span> <span class="t-url">WelcomeEmail</span>({
1255
+ first_name, plan, login_url
1256
+ }) {
1257
+ <span class="t-comment">return</span> (
1258
+ &lt;<span class="t-url">Email</span>
1259
+ subject={<span class="t-str">`Welcome aboard, ${first_name}`</span>}
1260
+ preview=<span class="t-str">"Your account is ready"</span>
1261
+ &gt;
1262
+ &lt;<span class="t-url">Section</span> padding=<span class="t-str">"32"</span> bg=<span class="t-str">"#ffffff"</span>&gt;
1263
+ &lt;<span class="t-url">Text</span> size=<span class="t-str">"xl"</span> weight=<span class="t-str">"bold"</span>&gt;
1264
+ Welcome aboard, {first_name}
1265
+ &lt;/<span class="t-url">Text</span>&gt;
1266
+ &lt;<span class="t-url">Text</span> color=<span class="t-str">"muted"</span> mt=<span class="t-str">"12"</span>&gt;
1267
+ You're on the {plan} plan.
1268
+ Here's what to do next.
1269
+ &lt;/<span class="t-url">Text</span>&gt;
1270
+ &lt;<span class="t-url">Button</span>
1271
+ href={login_url}
1272
+ bg=<span class="t-str">"#22C55E"</span>
1273
+ mt=<span class="t-str">"24"</span>
1274
+ &gt;
1275
+ Open Your Dashboard
1276
+ &lt;/<span class="t-url">Button</span>&gt;
1277
+ &lt;/<span class="t-url">Section</span>&gt;
1278
+ &lt;/<span class="t-url">Email</span>&gt;
1279
+ );
1280
+ }</pre>
1281
+ </div>
1282
+
1283
+ <div class="template-visual">
1284
+ <div class="template-visual-bar">
1285
+ <span class="template-visual-label">Preview: welcome-v2</span>
1286
+ <div class="device-toggle">
1287
+ <span class="active">Desktop</span>
1288
+ <span>Mobile</span>
1289
+ </div>
1290
+ </div>
1291
+ <div class="template-preview-area">
1292
+ <div class="email-preview">
1293
+ <div class="email-preview-header">
1294
+ <div class="from">team@yourapp.com</div>
1295
+ <div class="subject">Welcome aboard, Jane</div>
1296
+ <div class="to">to: jane@customer.io</div>
1297
+ </div>
1298
+ <div class="email-preview-body">
1299
+ <h3>Welcome aboard, Jane</h3>
1300
+ <p>You're on the Pro plan. Here's what to do next.</p>
1301
+ <p style="font-size:0.78rem;color:#6B7280;">Set up your sending domain, create your first template, and send a test email. The whole process takes about five minutes.</p>
1302
+ <span class="preview-btn">Open Your Dashboard</span>
1303
+ </div>
1304
+ </div>
1305
+ </div>
1306
+ </div>
1307
+ </div>
1308
+
1309
+ <hr class="section-divider" id="events">
1310
+
1311
+ <!-- WEBHOOK STREAM -->
1312
+ <div class="section-header">
1313
+ <h2>Every event, in real time.</h2>
1314
+ <p>Webhook stream with delivery, open, click, bounce, and complaint events. Searchable, filterable, exportable.</p>
1315
+ </div>
1316
+
1317
+ <div class="webhook-stream">
1318
+ <div class="webhook-header">
1319
+ <span class="webhook-title">Event Stream &mdash; last 60 seconds</span>
1320
+ <span class="webhook-live"><span class="webhook-live-dot"></span> Live</span>
1321
+ </div>
1322
+ <div class="webhook-events">
1323
+ <div class="webhook-event">
1324
+ <span class="webhook-event-time">2024-11-14 09:41:04</span>
1325
+ <span class="webhook-event-type delivered">email.delivered</span>
1326
+ <span class="webhook-event-detail">jane@customer.io &mdash; welcome-v2</span>
1327
+ <span class="webhook-event-id">msg_8xK2p</span>
1328
+ </div>
1329
+ <div class="webhook-event">
1330
+ <span class="webhook-event-time">2024-11-14 09:41:02</span>
1331
+ <span class="webhook-event-type opened">email.opened</span>
1332
+ <span class="webhook-event-detail">alex@acme.co &mdash; invoice-receipt</span>
1333
+ <span class="webhook-event-id">msg_r3Wp1</span>
1334
+ </div>
1335
+ <div class="webhook-event">
1336
+ <span class="webhook-event-time">2024-11-14 09:40:58</span>
1337
+ <span class="webhook-event-type clicked">email.link_clicked</span>
1338
+ <span class="webhook-event-detail">maria@startup.io &mdash; onboarding-3 &mdash; /docs/quickstart</span>
1339
+ <span class="webhook-event-id">msg_p4Lk8</span>
1340
+ </div>
1341
+ <div class="webhook-event">
1342
+ <span class="webhook-event-time">2024-11-14 09:40:51</span>
1343
+ <span class="webhook-event-type delivered">email.delivered</span>
1344
+ <span class="webhook-event-detail">ops@bigcorp.com &mdash; alert-critical</span>
1345
+ <span class="webhook-event-id">msg_w9Nn2</span>
1346
+ </div>
1347
+ <div class="webhook-event">
1348
+ <span class="webhook-event-time">2024-11-14 09:40:47</span>
1349
+ <span class="webhook-event-type delivered">email.delivered</span>
1350
+ <span class="webhook-event-detail">dev@freelance.dev &mdash; password-reset</span>
1351
+ <span class="webhook-event-id">msg_t1Qx5</span>
1352
+ </div>
1353
+ <div class="webhook-event">
1354
+ <span class="webhook-event-time">2024-11-14 09:40:39</span>
1355
+ <span class="webhook-event-type bounced">email.bounced</span>
1356
+ <span class="webhook-event-detail">old@defunct.org &mdash; newsletter-42 &mdash; 550 User unknown</span>
1357
+ <span class="webhook-event-id">msg_k7Rm3</span>
1358
+ </div>
1359
+ <div class="webhook-event">
1360
+ <span class="webhook-event-time">2024-11-14 09:40:31</span>
1361
+ <span class="webhook-event-type opened">email.opened</span>
1362
+ <span class="webhook-event-detail">cto@saas.app &mdash; feature-announce</span>
1363
+ <span class="webhook-event-id">msg_j2Hv9</span>
1364
+ </div>
1365
+ </div>
1366
+ </div>
1367
+
1368
+ <!-- CTA -->
1369
+ <div class="cta-section">
1370
+ <div class="cta-left">
1371
+ <h2>Five minutes to first&nbsp;email.</h2>
1372
+ <p>Free tier: 10,000 emails/month, all features, no credit card. Upgrade when you need dedicated IPs or higher volume.</p>
1373
+ <div class="cta-actions">
1374
+ <a href="#" class="btn-accent">Get Your API Key</a>
1375
+ <a href="#" class="btn-ghost">Read the Docs</a>
1376
+ </div>
1377
+ </div>
1378
+ <div class="cta-right">
1379
+ <div class="step">
1380
+ <span class="step-num">01</span>
1381
+ <span class="step-text"><strong>Sign up</strong> and grab your API key from the dashboard. No credit card required.</span>
1382
+ </div>
1383
+ <div class="step">
1384
+ <span class="step-num">02</span>
1385
+ <span class="step-text"><strong>Verify your domain</strong> by adding the DNS records Cadence generates. Takes about 2 minutes.</span>
1386
+ </div>
1387
+ <div class="step">
1388
+ <span class="step-num">03</span>
1389
+ <span class="step-text"><strong>Install the SDK:</strong> <code>npm i @cadence/node</code> (or pip, go get, gem install)</span>
1390
+ </div>
1391
+ <div class="step">
1392
+ <span class="step-num">04</span>
1393
+ <span class="step-text"><strong>Send a test email</strong> with <code>X-Cadence-Test: true</code> header. Inspect it in the dashboard.</span>
1394
+ </div>
1395
+ <div class="step">
1396
+ <span class="step-num">05</span>
1397
+ <span class="step-text"><strong>Go live.</strong> Remove the test header and start sending. Monitor delivery in real time.</span>
1398
+ </div>
1399
+ </div>
1400
+ </div>
1401
+
1402
+ </div>
1403
+
1404
+ <footer>
1405
+ <div class="footer-left">
1406
+ <a href="#" class="logo">cadence<span class="logo-dot"></span></a>
1407
+ <ul class="footer-links">
1408
+ <li><a href="#">Documentation</a></li>
1409
+ <li><a href="#">API Reference</a></li>
1410
+ <li><a href="#">Status</a></li>
1411
+ <li><a href="#">Changelog</a></li>
1412
+ <li><a href="#">GitHub</a></li>
1413
+ <li><a href="#">Pricing</a></li>
1414
+ </ul>
1415
+ </div>
1416
+ <div class="footer-status">
1417
+ <span class="footer-status-dot"></span>
1418
+ All systems operational
1419
+ </div>
1420
+ </footer>
1421
+
1422
+ </body>
1423
+ </html>