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-1.html ADDED
@@ -0,0 +1,1068 @@
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 API for teams that ship</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=DM+Serif+Display&family=Instrument+Sans: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
+ --cream: #F6F1EB;
15
+ --ink: #1A1714;
16
+ --warm-gray: #8C857B;
17
+ --accent: #C45D3E;
18
+ --accent-light: #F0DDD6;
19
+ --border: #D9D3CB;
20
+ --code-bg: #1A1714;
21
+ --code-fg: #E8E2DA;
22
+ }
23
+
24
+ html { font-size: 16px; scroll-behavior: smooth; }
25
+
26
+ body {
27
+ font-family: 'Instrument Sans', sans-serif;
28
+ background: var(--cream);
29
+ color: var(--ink);
30
+ line-height: 1.55;
31
+ -webkit-font-smoothing: antialiased;
32
+ }
33
+
34
+ /* NAV */
35
+ nav {
36
+ display: flex;
37
+ justify-content: space-between;
38
+ align-items: center;
39
+ padding: 24px 48px;
40
+ border-bottom: 1px solid var(--border);
41
+ position: sticky;
42
+ top: 0;
43
+ background: var(--cream);
44
+ z-index: 100;
45
+ }
46
+
47
+ .nav-logo {
48
+ font-family: 'DM Serif Display', serif;
49
+ font-size: 1.5rem;
50
+ color: var(--ink);
51
+ text-decoration: none;
52
+ letter-spacing: -0.02em;
53
+ }
54
+
55
+ .nav-links {
56
+ display: flex;
57
+ gap: 32px;
58
+ align-items: center;
59
+ list-style: none;
60
+ }
61
+
62
+ .nav-links a {
63
+ text-decoration: none;
64
+ color: var(--warm-gray);
65
+ font-size: 0.9rem;
66
+ font-weight: 500;
67
+ transition: color 0.2s;
68
+ }
69
+
70
+ .nav-links a:hover { color: var(--ink); }
71
+
72
+ .btn-primary {
73
+ display: inline-block;
74
+ background: var(--accent);
75
+ color: #fff;
76
+ padding: 10px 24px;
77
+ border-radius: 4px;
78
+ text-decoration: none;
79
+ font-weight: 600;
80
+ font-size: 0.9rem;
81
+ transition: background 0.2s;
82
+ border: none;
83
+ cursor: pointer;
84
+ }
85
+
86
+ .btn-primary:hover { background: #A8492F; }
87
+
88
+ .btn-secondary {
89
+ display: inline-block;
90
+ background: transparent;
91
+ color: var(--ink);
92
+ padding: 10px 24px;
93
+ border: 1px solid var(--border);
94
+ border-radius: 4px;
95
+ text-decoration: none;
96
+ font-weight: 600;
97
+ font-size: 0.9rem;
98
+ transition: all 0.2s;
99
+ cursor: pointer;
100
+ }
101
+
102
+ .btn-secondary:hover { border-color: var(--ink); }
103
+
104
+ /* HERO — editorial split */
105
+ .hero {
106
+ display: grid;
107
+ grid-template-columns: 1fr 1fr;
108
+ min-height: 85vh;
109
+ border-bottom: 1px solid var(--border);
110
+ }
111
+
112
+ .hero-left {
113
+ padding: 80px 64px 80px 48px;
114
+ display: flex;
115
+ flex-direction: column;
116
+ justify-content: center;
117
+ }
118
+
119
+ .hero-label {
120
+ font-size: 0.75rem;
121
+ font-weight: 600;
122
+ text-transform: uppercase;
123
+ letter-spacing: 0.12em;
124
+ color: var(--accent);
125
+ margin-bottom: 24px;
126
+ }
127
+
128
+ .hero-headline {
129
+ font-family: 'DM Serif Display', serif;
130
+ font-size: 4rem;
131
+ line-height: 1.05;
132
+ letter-spacing: -0.03em;
133
+ margin-bottom: 28px;
134
+ max-width: 520px;
135
+ }
136
+
137
+ .hero-sub {
138
+ font-size: 1.15rem;
139
+ color: var(--warm-gray);
140
+ max-width: 420px;
141
+ margin-bottom: 40px;
142
+ line-height: 1.65;
143
+ }
144
+
145
+ .hero-actions {
146
+ display: flex;
147
+ gap: 16px;
148
+ align-items: center;
149
+ }
150
+
151
+ .hero-meta {
152
+ margin-top: 48px;
153
+ display: flex;
154
+ gap: 48px;
155
+ }
156
+
157
+ .hero-meta dt {
158
+ font-size: 0.7rem;
159
+ text-transform: uppercase;
160
+ letter-spacing: 0.1em;
161
+ color: var(--warm-gray);
162
+ margin-bottom: 4px;
163
+ }
164
+
165
+ .hero-meta dd {
166
+ font-family: 'DM Serif Display', serif;
167
+ font-size: 1.6rem;
168
+ letter-spacing: -0.02em;
169
+ }
170
+
171
+ /* HERO RIGHT — live API log */
172
+ .hero-right {
173
+ background: var(--code-bg);
174
+ padding: 48px 40px;
175
+ display: flex;
176
+ flex-direction: column;
177
+ overflow: hidden;
178
+ position: relative;
179
+ }
180
+
181
+ .api-log-header {
182
+ display: flex;
183
+ justify-content: space-between;
184
+ align-items: center;
185
+ margin-bottom: 24px;
186
+ padding-bottom: 16px;
187
+ border-bottom: 1px solid #2E2A25;
188
+ }
189
+
190
+ .api-log-title {
191
+ font-family: 'JetBrains Mono', monospace;
192
+ font-size: 0.75rem;
193
+ color: #7A7368;
194
+ text-transform: uppercase;
195
+ letter-spacing: 0.08em;
196
+ }
197
+
198
+ .api-log-dot {
199
+ width: 8px;
200
+ height: 8px;
201
+ border-radius: 50%;
202
+ background: #4CAF50;
203
+ box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
204
+ }
205
+
206
+ .api-entry {
207
+ margin-bottom: 20px;
208
+ padding: 16px;
209
+ border-radius: 3px;
210
+ background: rgba(255,255,255,0.03);
211
+ border-left: 2px solid transparent;
212
+ }
213
+
214
+ .api-entry.post { border-left-color: var(--accent); }
215
+ .api-entry.get { border-left-color: #4CAF50; }
216
+ .api-entry.response { border-left-color: #7A7368; }
217
+
218
+ .api-entry-method {
219
+ font-family: 'JetBrains Mono', monospace;
220
+ font-size: 0.7rem;
221
+ font-weight: 500;
222
+ letter-spacing: 0.04em;
223
+ }
224
+
225
+ .api-entry-method.post { color: var(--accent); }
226
+ .api-entry-method.get { color: #4CAF50; }
227
+
228
+ .api-entry-path {
229
+ font-family: 'JetBrains Mono', monospace;
230
+ font-size: 0.8rem;
231
+ color: var(--code-fg);
232
+ margin-left: 8px;
233
+ }
234
+
235
+ .api-entry-time {
236
+ font-family: 'JetBrains Mono', monospace;
237
+ font-size: 0.65rem;
238
+ color: #5A5449;
239
+ float: right;
240
+ }
241
+
242
+ .api-entry-body {
243
+ margin-top: 10px;
244
+ font-family: 'JetBrains Mono', monospace;
245
+ font-size: 0.72rem;
246
+ color: #9E9789;
247
+ line-height: 1.7;
248
+ white-space: pre;
249
+ }
250
+
251
+ .api-entry-status {
252
+ display: inline-block;
253
+ font-family: 'JetBrains Mono', monospace;
254
+ font-size: 0.65rem;
255
+ padding: 2px 8px;
256
+ border-radius: 2px;
257
+ margin-top: 8px;
258
+ }
259
+
260
+ .api-entry-status.ok {
261
+ background: rgba(76,175,80,0.15);
262
+ color: #4CAF50;
263
+ }
264
+
265
+ /* EDITORIAL SECTION */
266
+ .section-editorial {
267
+ display: grid;
268
+ grid-template-columns: 300px 1fr;
269
+ gap: 0;
270
+ border-bottom: 1px solid var(--border);
271
+ }
272
+
273
+ .section-editorial .section-label-col {
274
+ padding: 80px 48px;
275
+ border-right: 1px solid var(--border);
276
+ }
277
+
278
+ .section-label {
279
+ font-family: 'DM Serif Display', serif;
280
+ font-size: 0.85rem;
281
+ color: var(--warm-gray);
282
+ position: sticky;
283
+ top: 120px;
284
+ writing-mode: horizontal-tb;
285
+ }
286
+
287
+ .section-label-num {
288
+ display: block;
289
+ font-family: 'JetBrains Mono', monospace;
290
+ font-size: 0.65rem;
291
+ color: var(--accent);
292
+ margin-bottom: 8px;
293
+ letter-spacing: 0.06em;
294
+ }
295
+
296
+ .section-content {
297
+ padding: 80px 64px;
298
+ }
299
+
300
+ .section-headline {
301
+ font-family: 'DM Serif Display', serif;
302
+ font-size: 2.8rem;
303
+ line-height: 1.1;
304
+ letter-spacing: -0.02em;
305
+ margin-bottom: 24px;
306
+ max-width: 600px;
307
+ }
308
+
309
+ .section-body {
310
+ font-size: 1.05rem;
311
+ color: var(--warm-gray);
312
+ max-width: 540px;
313
+ line-height: 1.7;
314
+ margin-bottom: 40px;
315
+ }
316
+
317
+ /* CODE BLOCK */
318
+ .code-block {
319
+ background: var(--code-bg);
320
+ border-radius: 6px;
321
+ overflow: hidden;
322
+ margin-bottom: 32px;
323
+ max-width: 640px;
324
+ }
325
+
326
+ .code-block-header {
327
+ display: flex;
328
+ justify-content: space-between;
329
+ align-items: center;
330
+ padding: 12px 20px;
331
+ background: rgba(255,255,255,0.04);
332
+ border-bottom: 1px solid #2E2A25;
333
+ }
334
+
335
+ .code-block-lang {
336
+ font-family: 'JetBrains Mono', monospace;
337
+ font-size: 0.65rem;
338
+ color: #7A7368;
339
+ text-transform: uppercase;
340
+ letter-spacing: 0.06em;
341
+ }
342
+
343
+ .code-block-dots {
344
+ display: flex;
345
+ gap: 6px;
346
+ }
347
+
348
+ .code-block-dots span {
349
+ width: 8px;
350
+ height: 8px;
351
+ border-radius: 50%;
352
+ background: #3A352F;
353
+ }
354
+
355
+ .code-block pre {
356
+ padding: 24px 20px;
357
+ font-family: 'JetBrains Mono', monospace;
358
+ font-size: 0.78rem;
359
+ line-height: 1.75;
360
+ color: var(--code-fg);
361
+ overflow-x: auto;
362
+ }
363
+
364
+ .code-block pre .kw { color: var(--accent); }
365
+ .code-block pre .str { color: #C9A96E; }
366
+ .code-block pre .cm { color: #5A5449; }
367
+ .code-block pre .fn { color: #7DAECC; }
368
+ .code-block pre .num { color: #C45D3E; }
369
+
370
+ /* FEATURE GRID — asymmetric */
371
+ .features-grid {
372
+ display: grid;
373
+ grid-template-columns: 1.2fr 0.8fr;
374
+ gap: 1px;
375
+ background: var(--border);
376
+ border-bottom: 1px solid var(--border);
377
+ }
378
+
379
+ .feature-cell {
380
+ background: var(--cream);
381
+ padding: 56px 48px;
382
+ }
383
+
384
+ .feature-cell.tall {
385
+ grid-row: span 2;
386
+ }
387
+
388
+ .feature-cell-num {
389
+ font-family: 'JetBrains Mono', monospace;
390
+ font-size: 0.65rem;
391
+ color: var(--accent);
392
+ margin-bottom: 16px;
393
+ letter-spacing: 0.06em;
394
+ }
395
+
396
+ .feature-cell h3 {
397
+ font-family: 'DM Serif Display', serif;
398
+ font-size: 1.5rem;
399
+ margin-bottom: 12px;
400
+ letter-spacing: -0.01em;
401
+ }
402
+
403
+ .feature-cell p {
404
+ color: var(--warm-gray);
405
+ font-size: 0.92rem;
406
+ line-height: 1.65;
407
+ max-width: 400px;
408
+ }
409
+
410
+ .feature-cell ul {
411
+ list-style: none;
412
+ margin-top: 16px;
413
+ }
414
+
415
+ .feature-cell ul li {
416
+ padding: 8px 0;
417
+ border-bottom: 1px solid var(--border);
418
+ font-size: 0.88rem;
419
+ color: var(--warm-gray);
420
+ }
421
+
422
+ .feature-cell ul li:last-child { border-bottom: none; }
423
+
424
+ .feature-cell ul li strong {
425
+ color: var(--ink);
426
+ font-weight: 600;
427
+ }
428
+
429
+ /* DELIVERABILITY SECTION */
430
+ .deliverability {
431
+ padding: 100px 48px;
432
+ border-bottom: 1px solid var(--border);
433
+ }
434
+
435
+ .deliverability-inner {
436
+ max-width: 1200px;
437
+ margin: 0 auto;
438
+ display: grid;
439
+ grid-template-columns: 1fr 1fr;
440
+ gap: 80px;
441
+ align-items: start;
442
+ }
443
+
444
+ .deliverability-left .section-headline {
445
+ max-width: 480px;
446
+ }
447
+
448
+ .deliverability-stats {
449
+ display: grid;
450
+ grid-template-columns: 1fr 1fr;
451
+ gap: 24px;
452
+ margin-top: 40px;
453
+ }
454
+
455
+ .stat-card {
456
+ padding: 24px;
457
+ border: 1px solid var(--border);
458
+ border-radius: 3px;
459
+ }
460
+
461
+ .stat-card-value {
462
+ font-family: 'DM Serif Display', serif;
463
+ font-size: 2.2rem;
464
+ letter-spacing: -0.02em;
465
+ margin-bottom: 6px;
466
+ }
467
+
468
+ .stat-card-label {
469
+ font-size: 0.78rem;
470
+ color: var(--warm-gray);
471
+ text-transform: uppercase;
472
+ letter-spacing: 0.06em;
473
+ }
474
+
475
+ .deliverability-right {
476
+ padding-top: 24px;
477
+ }
478
+
479
+ .deliverability-item {
480
+ padding: 24px 0;
481
+ border-bottom: 1px solid var(--border);
482
+ }
483
+
484
+ .deliverability-item:first-child { border-top: 1px solid var(--border); }
485
+
486
+ .deliverability-item h4 {
487
+ font-family: 'DM Serif Display', serif;
488
+ font-size: 1.15rem;
489
+ margin-bottom: 8px;
490
+ }
491
+
492
+ .deliverability-item p {
493
+ font-size: 0.88rem;
494
+ color: var(--warm-gray);
495
+ line-height: 1.6;
496
+ }
497
+
498
+ /* TEMPLATE SECTION */
499
+ .templates-section {
500
+ display: grid;
501
+ grid-template-columns: 300px 1fr;
502
+ border-bottom: 1px solid var(--border);
503
+ }
504
+
505
+ .templates-sidebar {
506
+ padding: 80px 48px;
507
+ border-right: 1px solid var(--border);
508
+ background: var(--accent-light);
509
+ }
510
+
511
+ .templates-main {
512
+ padding: 80px 64px;
513
+ }
514
+
515
+ .template-code-pair {
516
+ display: grid;
517
+ grid-template-columns: 1fr 1fr;
518
+ gap: 32px;
519
+ margin-top: 32px;
520
+ }
521
+
522
+ .template-preview {
523
+ border: 1px solid var(--border);
524
+ border-radius: 3px;
525
+ padding: 32px;
526
+ background: #fff;
527
+ }
528
+
529
+ .template-preview-header {
530
+ font-size: 0.7rem;
531
+ text-transform: uppercase;
532
+ letter-spacing: 0.08em;
533
+ color: var(--warm-gray);
534
+ margin-bottom: 20px;
535
+ padding-bottom: 12px;
536
+ border-bottom: 1px solid var(--border);
537
+ }
538
+
539
+ .template-preview h4 {
540
+ font-family: 'DM Serif Display', serif;
541
+ font-size: 1.3rem;
542
+ margin-bottom: 12px;
543
+ }
544
+
545
+ .template-preview p {
546
+ font-size: 0.85rem;
547
+ color: var(--warm-gray);
548
+ line-height: 1.6;
549
+ margin-bottom: 16px;
550
+ }
551
+
552
+ .template-preview .fake-btn {
553
+ display: inline-block;
554
+ background: var(--accent);
555
+ color: #fff;
556
+ padding: 8px 20px;
557
+ border-radius: 3px;
558
+ font-size: 0.8rem;
559
+ font-weight: 600;
560
+ }
561
+
562
+ /* ANALYTICS */
563
+ .analytics-section {
564
+ padding: 100px 48px;
565
+ border-bottom: 1px solid var(--border);
566
+ }
567
+
568
+ .analytics-inner {
569
+ max-width: 1200px;
570
+ margin: 0 auto;
571
+ }
572
+
573
+ .analytics-grid {
574
+ display: grid;
575
+ grid-template-columns: repeat(4, 1fr);
576
+ gap: 1px;
577
+ background: var(--border);
578
+ border: 1px solid var(--border);
579
+ border-radius: 3px;
580
+ overflow: hidden;
581
+ margin-top: 48px;
582
+ }
583
+
584
+ .analytics-cell {
585
+ background: var(--cream);
586
+ padding: 40px 32px;
587
+ }
588
+
589
+ .analytics-cell-label {
590
+ font-size: 0.7rem;
591
+ text-transform: uppercase;
592
+ letter-spacing: 0.08em;
593
+ color: var(--warm-gray);
594
+ margin-bottom: 12px;
595
+ }
596
+
597
+ .analytics-cell-value {
598
+ font-family: 'DM Serif Display', serif;
599
+ font-size: 2rem;
600
+ margin-bottom: 6px;
601
+ letter-spacing: -0.02em;
602
+ }
603
+
604
+ .analytics-cell-change {
605
+ font-family: 'JetBrains Mono', monospace;
606
+ font-size: 0.7rem;
607
+ color: #4CAF50;
608
+ }
609
+
610
+ .analytics-bar-chart {
611
+ display: flex;
612
+ align-items: flex-end;
613
+ gap: 4px;
614
+ height: 60px;
615
+ margin-top: 16px;
616
+ }
617
+
618
+ .analytics-bar {
619
+ flex: 1;
620
+ background: var(--border);
621
+ border-radius: 1px;
622
+ min-width: 4px;
623
+ }
624
+
625
+ .analytics-bar.active { background: var(--accent); }
626
+
627
+ /* CTA */
628
+ .cta-section {
629
+ padding: 120px 48px;
630
+ text-align: left;
631
+ max-width: 1200px;
632
+ margin: 0 auto;
633
+ display: grid;
634
+ grid-template-columns: 1fr 1fr;
635
+ gap: 80px;
636
+ align-items: center;
637
+ }
638
+
639
+ .cta-headline {
640
+ font-family: 'DM Serif Display', serif;
641
+ font-size: 3.5rem;
642
+ line-height: 1.08;
643
+ letter-spacing: -0.03em;
644
+ }
645
+
646
+ .cta-right {
647
+ padding: 48px;
648
+ border: 1px solid var(--border);
649
+ border-radius: 3px;
650
+ }
651
+
652
+ .cta-right p {
653
+ color: var(--warm-gray);
654
+ margin-bottom: 24px;
655
+ line-height: 1.6;
656
+ }
657
+
658
+ .cta-install {
659
+ background: var(--code-bg);
660
+ padding: 16px 20px;
661
+ border-radius: 3px;
662
+ font-family: 'JetBrains Mono', monospace;
663
+ font-size: 0.8rem;
664
+ color: var(--code-fg);
665
+ margin-bottom: 24px;
666
+ }
667
+
668
+ .cta-install .prompt { color: var(--accent); }
669
+
670
+ /* FOOTER */
671
+ footer {
672
+ padding: 48px;
673
+ border-top: 1px solid var(--border);
674
+ display: flex;
675
+ justify-content: space-between;
676
+ align-items: center;
677
+ }
678
+
679
+ footer .nav-logo { font-size: 1.2rem; }
680
+
681
+ .footer-links {
682
+ display: flex;
683
+ gap: 24px;
684
+ list-style: none;
685
+ }
686
+
687
+ .footer-links a {
688
+ text-decoration: none;
689
+ color: var(--warm-gray);
690
+ font-size: 0.82rem;
691
+ }
692
+
693
+ /* RESPONSIVE */
694
+ @media (max-width: 1024px) {
695
+ .hero { grid-template-columns: 1fr; }
696
+ .hero-right { min-height: 500px; }
697
+ .hero-headline { font-size: 3rem; }
698
+ .section-editorial { grid-template-columns: 1fr; }
699
+ .section-editorial .section-label-col { padding: 40px 48px 0; border-right: none; border-bottom: none; }
700
+ .section-label { position: static; }
701
+ .features-grid { grid-template-columns: 1fr; }
702
+ .feature-cell.tall { grid-row: span 1; }
703
+ .deliverability-inner { grid-template-columns: 1fr; gap: 48px; }
704
+ .templates-section { grid-template-columns: 1fr; }
705
+ .templates-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
706
+ .template-code-pair { grid-template-columns: 1fr; }
707
+ .analytics-grid { grid-template-columns: 1fr 1fr; }
708
+ .cta-section { grid-template-columns: 1fr; gap: 48px; }
709
+ .cta-headline { font-size: 2.5rem; }
710
+ }
711
+
712
+ @media (max-width: 640px) {
713
+ nav { padding: 16px 24px; }
714
+ .nav-links { display: none; }
715
+ .hero-left { padding: 48px 24px; }
716
+ .hero-headline { font-size: 2.2rem; }
717
+ .hero-meta { flex-direction: column; gap: 16px; }
718
+ .hero-right { padding: 24px; }
719
+ .section-content { padding: 48px 24px; }
720
+ .feature-cell { padding: 32px 24px; }
721
+ .deliverability { padding: 48px 24px; }
722
+ .deliverability-stats { grid-template-columns: 1fr; }
723
+ .templates-sidebar { padding: 48px 24px; }
724
+ .templates-main { padding: 48px 24px; }
725
+ .analytics-section { padding: 48px 24px; }
726
+ .analytics-grid { grid-template-columns: 1fr; }
727
+ .cta-section { padding: 64px 24px; }
728
+ footer { flex-direction: column; gap: 16px; padding: 32px 24px; }
729
+ }
730
+ </style>
731
+ </head>
732
+ <body>
733
+
734
+ <nav>
735
+ <a href="#" class="nav-logo">Cadence</a>
736
+ <ul class="nav-links">
737
+ <li><a href="#api">API</a></li>
738
+ <li><a href="#deliverability">Deliverability</a></li>
739
+ <li><a href="#templates">Templates</a></li>
740
+ <li><a href="#analytics">Analytics</a></li>
741
+ <li><a href="#" class="btn-primary">Get API Key</a></li>
742
+ </ul>
743
+ </nav>
744
+
745
+ <!-- HERO: editorial split with live API log -->
746
+ <section class="hero">
747
+ <div class="hero-left">
748
+ <div class="hero-label">Email API for developers</div>
749
+ <h1 class="hero-headline">Send email from&nbsp;code. Let your team write&nbsp;it.</h1>
750
+ <p class="hero-sub">A REST API and SDKs for transactional and marketing email. Domain authentication, deliverability monitoring, and a template editor your content team can actually use.</p>
751
+ <div class="hero-actions">
752
+ <a href="#" class="btn-primary">Get Started Free</a>
753
+ <a href="#" class="btn-secondary">Read the Docs</a>
754
+ </div>
755
+ <dl class="hero-meta">
756
+ <div>
757
+ <dt>Avg. delivery</dt>
758
+ <dd>1.2s</dd>
759
+ </div>
760
+ <div>
761
+ <dt>Inbox rate</dt>
762
+ <dd>99.1%</dd>
763
+ </div>
764
+ <div>
765
+ <dt>Uptime</dt>
766
+ <dd>99.97%</dd>
767
+ </div>
768
+ </dl>
769
+ </div>
770
+
771
+ <div class="hero-right">
772
+ <div class="api-log-header">
773
+ <span class="api-log-title">Live API Log</span>
774
+ <span class="api-log-dot"></span>
775
+ </div>
776
+
777
+ <div class="api-entry post">
778
+ <span class="api-entry-time">12ms ago</span>
779
+ <span class="api-entry-method post">POST</span>
780
+ <span class="api-entry-path">/v1/emails/send</span>
781
+ <div class="api-entry-body">{
782
+ "from": "team@yourapp.com",
783
+ "to": "jane@customer.io",
784
+ "template": "welcome-series-1",
785
+ "data": { "first_name": "Jane", "plan": "Pro" }
786
+ }</div>
787
+ <span class="api-entry-status ok">202 Accepted</span>
788
+ </div>
789
+
790
+ <div class="api-entry get">
791
+ <span class="api-entry-time">340ms ago</span>
792
+ <span class="api-entry-method get">GET</span>
793
+ <span class="api-entry-path">/v1/emails/msg_8xK2p/status</span>
794
+ <div class="api-entry-body">{
795
+ "status": "delivered",
796
+ "delivered_at": "2024-11-14T09:41:02Z",
797
+ "open_count": 1,
798
+ "click_count": 0
799
+ }</div>
800
+ </div>
801
+
802
+ <div class="api-entry post">
803
+ <span class="api-entry-time">1.4s ago</span>
804
+ <span class="api-entry-method post">POST</span>
805
+ <span class="api-entry-path">/v1/emails/batch</span>
806
+ <div class="api-entry-body">{
807
+ "template": "invoice-receipt",
808
+ "recipients": 847,
809
+ "scheduled_for": "2024-11-14T14:00:00Z"
810
+ }</div>
811
+ <span class="api-entry-status ok">202 Accepted &middot; 847 queued</span>
812
+ </div>
813
+
814
+ <div class="api-entry get">
815
+ <span class="api-entry-time">3.1s ago</span>
816
+ <span class="api-entry-method get">GET</span>
817
+ <span class="api-entry-path">/v1/domains/yourapp.com/health</span>
818
+ <div class="api-entry-body">{
819
+ "spf": "pass", "dkim": "pass", "dmarc": "pass",
820
+ "reputation": 97, "bounce_rate": "0.3%"
821
+ }</div>
822
+ </div>
823
+ </div>
824
+ </section>
825
+
826
+ <!-- SECTION 01: The API -->
827
+ <section class="section-editorial" id="api">
828
+ <div class="section-label-col">
829
+ <div class="section-label">
830
+ <span class="section-label-num">01</span>
831
+ The API
832
+ </div>
833
+ </div>
834
+ <div class="section-content">
835
+ <h2 class="section-headline">Three lines to send. One endpoint to learn.</h2>
836
+ <p class="section-body">The core API is one POST to <code>/v1/emails/send</code>. Pass a recipient, a template ID (or inline HTML), and your data. Cadence handles DKIM signing, retry logic, bounce processing, and delivery tracking. SDKs for Node, Python, Go, Ruby, and PHP.</p>
837
+
838
+ <div class="code-block">
839
+ <div class="code-block-header">
840
+ <span class="code-block-lang">Node.js</span>
841
+ <div class="code-block-dots"><span></span><span></span><span></span></div>
842
+ </div>
843
+ <pre><span class="kw">import</span> { Cadence } <span class="kw">from</span> <span class="str">'@cadence/node'</span>;
844
+
845
+ <span class="kw">const</span> cadence = <span class="kw">new</span> <span class="fn">Cadence</span>(<span class="str">'cd_live_9x8f...'</span>);
846
+
847
+ <span class="kw">await</span> cadence.<span class="fn">send</span>({
848
+ <span class="str">from</span>: <span class="str">'notifications@yourapp.com'</span>,
849
+ <span class="str">to</span>: <span class="str">'jane@customer.io'</span>,
850
+ <span class="str">template</span>: <span class="str">'welcome-series-1'</span>,
851
+ <span class="str">data</span>: { <span class="str">first_name</span>: <span class="str">'Jane'</span>, <span class="str">plan</span>: <span class="str">'Pro'</span> },
852
+ });
853
+ <span class="cm">// => { id: 'msg_8xK2p', status: 'queued' }</span></pre>
854
+ </div>
855
+
856
+ <div class="code-block">
857
+ <div class="code-block-header">
858
+ <span class="code-block-lang">Python</span>
859
+ <div class="code-block-dots"><span></span><span></span><span></span></div>
860
+ </div>
861
+ <pre><span class="kw">from</span> cadence <span class="kw">import</span> Cadence
862
+
863
+ client = <span class="fn">Cadence</span>(api_key=<span class="str">"cd_live_9x8f..."</span>)
864
+
865
+ response = client.<span class="fn">send</span>(
866
+ from_email=<span class="str">"billing@yourapp.com"</span>,
867
+ to=<span class="str">"jane@customer.io"</span>,
868
+ template=<span class="str">"invoice-receipt"</span>,
869
+ data={<span class="str">"amount"</span>: <span class="str">"$49.00"</span>, <span class="str">"invoice_id"</span>: <span class="str">"INV-1042"</span>},
870
+ )
871
+ <span class="cm"># response.id => "msg_r3Wp1"</span></pre>
872
+ </div>
873
+ </div>
874
+ </section>
875
+
876
+ <!-- FEATURES GRID -->
877
+ <section class="features-grid">
878
+ <div class="feature-cell tall">
879
+ <div class="feature-cell-num">02</div>
880
+ <h3>Built for production</h3>
881
+ <p>Cadence runs on dedicated IPs with automatic warm-up, handles suppression lists, processes bounces and complaints in real time, and provides domain health monitoring. This is infrastructure, not a weekend project.</p>
882
+ <ul>
883
+ <li><strong>Automatic IP warm-up</strong> &mdash; graduated volume increase over 14 days</li>
884
+ <li><strong>Suppression management</strong> &mdash; global + account-level suppression lists</li>
885
+ <li><strong>Bounce classification</strong> &mdash; hard/soft bounce detection with auto-suppression</li>
886
+ <li><strong>Complaint loops</strong> &mdash; ISP feedback loop integration (AOL, Yahoo, Outlook)</li>
887
+ <li><strong>Webhook events</strong> &mdash; delivery, open, click, bounce, complaint, unsubscribe</li>
888
+ <li><strong>Rate limiting</strong> &mdash; per-domain throttling to protect sender reputation</li>
889
+ </ul>
890
+ </div>
891
+
892
+ <div class="feature-cell">
893
+ <div class="feature-cell-num">03</div>
894
+ <h3>Domain authentication</h3>
895
+ <p>One API call generates your SPF, DKIM, and DMARC records. Cadence continuously monitors DNS propagation and alerts you if records drift or expire. BIMI support included.</p>
896
+ </div>
897
+
898
+ <div class="feature-cell">
899
+ <div class="feature-cell-num">04</div>
900
+ <h3>Test and preview</h3>
901
+ <p>Send to a sandbox domain that captures every email without delivering. Render previews for any template with test data. Inspect headers, MIME structure, and link rewriting before going live.</p>
902
+ </div>
903
+ </section>
904
+
905
+ <!-- DELIVERABILITY -->
906
+ <section class="deliverability" id="deliverability">
907
+ <div class="deliverability-inner">
908
+ <div class="deliverability-left">
909
+ <h2 class="section-headline">Deliverability you can measure, not just hope for.</h2>
910
+ <p class="section-body">Cadence monitors inbox placement across Gmail, Outlook, Yahoo, and Apple Mail. When something changes, you see it in the dashboard and in your webhook stream before it becomes a problem.</p>
911
+ <div class="deliverability-stats">
912
+ <div class="stat-card">
913
+ <div class="stat-card-value">99.1%</div>
914
+ <div class="stat-card-label">Inbox placement</div>
915
+ </div>
916
+ <div class="stat-card">
917
+ <div class="stat-card-value">0.12%</div>
918
+ <div class="stat-card-label">Bounce rate</div>
919
+ </div>
920
+ <div class="stat-card">
921
+ <div class="stat-card-value">1.2s</div>
922
+ <div class="stat-card-label">Avg. delivery</div>
923
+ </div>
924
+ <div class="stat-card">
925
+ <div class="stat-card-value">42</div>
926
+ <div class="stat-card-label">ISP feedback loops</div>
927
+ </div>
928
+ </div>
929
+ </div>
930
+
931
+ <div class="deliverability-right">
932
+ <div class="deliverability-item">
933
+ <h4>Inbox placement testing</h4>
934
+ <p>Seed-list tests across 30+ mailbox providers. See exactly where your email lands: inbox, promotions, spam, or missing. Run tests on-demand or on a schedule.</p>
935
+ </div>
936
+ <div class="deliverability-item">
937
+ <h4>Reputation monitoring</h4>
938
+ <p>Track sender score, domain reputation, and IP reputation in one place. Cadence pulls data from Google Postmaster Tools, Microsoft SNDS, and proprietary signals.</p>
939
+ </div>
940
+ <div class="deliverability-item">
941
+ <h4>Content scanning</h4>
942
+ <p>Before you send, Cadence checks your HTML against known spam triggers: link shorteners, excessive images, missing unsubscribe headers, and authentication gaps.</p>
943
+ </div>
944
+ <div class="deliverability-item">
945
+ <h4>Dedicated IPs</h4>
946
+ <p>Starter plans use Cadence's shared pool (maintained at 95+ reputation). Scaling plans get dedicated IPs with automated warm-up and per-IP analytics.</p>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </section>
951
+
952
+ <!-- TEMPLATES -->
953
+ <section class="templates-section" id="templates">
954
+ <div class="templates-sidebar">
955
+ <div class="section-label">
956
+ <span class="section-label-num">05</span>
957
+ Templates
958
+ </div>
959
+ <h2 style="font-family:'DM Serif Display',serif; font-size:1.8rem; margin-top:24px; line-height:1.15; letter-spacing:-0.02em;">Write templates in code. Edit them in a visual tool.</h2>
960
+ <p style="color:var(--warm-gray); margin-top:16px; font-size:0.92rem; line-height:1.6;">Engineers define email templates as React-like components. Content owners edit text, images, and variables in a visual editor without touching the codebase. Version-controlled, preview-able, and deployable via API or dashboard.</p>
961
+ </div>
962
+
963
+ <div class="templates-main">
964
+ <div class="template-code-pair">
965
+ <div class="code-block" style="margin:0;">
966
+ <div class="code-block-header">
967
+ <span class="code-block-lang">Template JSX</span>
968
+ <div class="code-block-dots"><span></span><span></span><span></span></div>
969
+ </div>
970
+ <pre><span class="kw">import</span> { Email, Section, Button }
971
+ <span class="kw">from</span> <span class="str">'@cadence/components'</span>;
972
+
973
+ <span class="kw">export default</span> <span class="kw">function</span> <span class="fn">WelcomeEmail</span>({ first_name, plan }) {
974
+ <span class="kw">return</span> (
975
+ &lt;<span class="fn">Email</span> subject={<span class="str">`Welcome, ${first_name}`</span>}&gt;
976
+ &lt;<span class="fn">Section</span> padding=<span class="str">"32"</span>&gt;
977
+ &lt;h1&gt;You're on {plan}&lt;/h1&gt;
978
+ &lt;p&gt;Hi {first_name}, your account
979
+ is ready.&lt;/p&gt;
980
+ &lt;<span class="fn">Button</span> href=<span class="str">"/dashboard"</span>&gt;
981
+ Open Dashboard
982
+ &lt;/<span class="fn">Button</span>&gt;
983
+ &lt;/<span class="fn">Section</span>&gt;
984
+ &lt;/<span class="fn">Email</span>&gt;
985
+ );
986
+ }</pre>
987
+ </div>
988
+
989
+ <div class="template-preview">
990
+ <div class="template-preview-header">Preview: welcome-series-1</div>
991
+ <h4>You're on Pro</h4>
992
+ <p>Hi Jane, your account is ready. Explore the dashboard to configure your sending domain and create your first template.</p>
993
+ <span class="fake-btn">Open Dashboard</span>
994
+ </div>
995
+ </div>
996
+ </div>
997
+ </section>
998
+
999
+ <!-- ANALYTICS -->
1000
+ <section class="analytics-section" id="analytics">
1001
+ <div class="analytics-inner">
1002
+ <h2 class="section-headline">Every email, measured.</h2>
1003
+ <p class="section-body">Real-time analytics on sends, deliveries, opens, clicks, bounces, and unsubscribes. Filter by template, domain, tag, or recipient. Export via API or webhooks.</p>
1004
+
1005
+ <div class="analytics-grid">
1006
+ <div class="analytics-cell">
1007
+ <div class="analytics-cell-label">Sent (24h)</div>
1008
+ <div class="analytics-cell-value">142,847</div>
1009
+ <div class="analytics-cell-change">+12.3% vs. yesterday</div>
1010
+ <div class="analytics-bar-chart">
1011
+ <div class="analytics-bar" style="height:30%"></div>
1012
+ <div class="analytics-bar" style="height:45%"></div>
1013
+ <div class="analytics-bar" style="height:55%"></div>
1014
+ <div class="analytics-bar" style="height:40%"></div>
1015
+ <div class="analytics-bar" style="height:65%"></div>
1016
+ <div class="analytics-bar" style="height:70%"></div>
1017
+ <div class="analytics-bar" style="height:50%"></div>
1018
+ <div class="analytics-bar" style="height:80%"></div>
1019
+ <div class="analytics-bar active" style="height:90%"></div>
1020
+ <div class="analytics-bar active" style="height:100%"></div>
1021
+ </div>
1022
+ </div>
1023
+ <div class="analytics-cell">
1024
+ <div class="analytics-cell-label">Delivered</div>
1025
+ <div class="analytics-cell-value">99.1%</div>
1026
+ <div class="analytics-cell-change">Stable</div>
1027
+ </div>
1028
+ <div class="analytics-cell">
1029
+ <div class="analytics-cell-label">Open rate</div>
1030
+ <div class="analytics-cell-value">34.2%</div>
1031
+ <div class="analytics-cell-change">+2.1pp vs. last week</div>
1032
+ </div>
1033
+ <div class="analytics-cell">
1034
+ <div class="analytics-cell-label">Click rate</div>
1035
+ <div class="analytics-cell-value">8.7%</div>
1036
+ <div class="analytics-cell-change">+0.9pp vs. last week</div>
1037
+ </div>
1038
+ </div>
1039
+ </div>
1040
+ </section>
1041
+
1042
+ <!-- CTA -->
1043
+ <section class="cta-section">
1044
+ <div>
1045
+ <h2 class="cta-headline">Start sending in five&nbsp;minutes.</h2>
1046
+ </div>
1047
+ <div class="cta-right">
1048
+ <p>Sign up for a free account, verify your domain, and send your first email. No credit card required. Free tier includes 10,000 emails per month.</p>
1049
+ <div class="cta-install">
1050
+ <span class="prompt">$</span> npm install @cadence/node
1051
+ </div>
1052
+ <a href="#" class="btn-primary" style="width:100%;text-align:center;display:block;">Get Your API Key</a>
1053
+ </div>
1054
+ </section>
1055
+
1056
+ <footer>
1057
+ <a href="#" class="nav-logo">Cadence</a>
1058
+ <ul class="footer-links">
1059
+ <li><a href="#">Documentation</a></li>
1060
+ <li><a href="#">API Reference</a></li>
1061
+ <li><a href="#">Status</a></li>
1062
+ <li><a href="#">Pricing</a></li>
1063
+ <li><a href="#">GitHub</a></li>
1064
+ </ul>
1065
+ </footer>
1066
+
1067
+ </body>
1068
+ </html>