forgedock 1.0.17 → 1.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/README.md +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/qa-sweep.md +37 -2
  11. package/commands/quality-gate.md +30 -0
  12. package/commands/review-pr-staging.md +158 -2
  13. package/commands/test-gate.md +929 -0
  14. package/commands/work-on/build/implement.md +5 -3
  15. package/commands/work-on.md +53 -3
  16. package/docs/CI.md +177 -0
  17. package/docs/FORGE-PROTOCOL.md +324 -0
  18. package/docs/articles/b-vs-c-baseline.md +210 -0
  19. package/docs/articles/full-abc-benchmark.md +205 -0
  20. package/docs/articles/selective-spec-loading-token-savings.md +140 -0
  21. package/docs/design/abc-benchmark.md +195 -0
  22. package/docs/design/design-architect-rationale.md +123 -0
  23. package/docs/design/design-memory.md +61 -0
  24. package/docs/design/design-spec-schema.md +248 -0
  25. package/docs/design/design-system-lint.md +150 -0
  26. package/docs/design/divergent-generation.md +106 -0
  27. package/docs/design/effects-appropriateness.md +133 -0
  28. package/docs/design/fixtures/briefs/README.md +47 -0
  29. package/docs/design/fixtures/briefs/cadence.md +39 -0
  30. package/docs/design/fixtures/briefs/plume.md +39 -0
  31. package/docs/design/fixtures/briefs/slipstream.md +39 -0
  32. package/docs/design/fixtures/briefs/tender.md +39 -0
  33. package/docs/design/fixtures/briefs/voltage.md +39 -0
  34. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
  35. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
  36. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
  37. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
  38. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
  39. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
  40. package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
  41. package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
  42. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
  43. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
  44. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
  45. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
  46. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
  47. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
  48. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
  49. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
  50. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
  51. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
  52. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
  53. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
  54. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
  55. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
  56. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
  57. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
  58. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
  59. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
  60. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
  61. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
  62. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
  63. package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
  64. package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
  65. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
  66. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
  67. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
  68. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
  69. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
  70. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
  71. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
  72. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
  73. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
  74. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
  75. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
  76. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
  77. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
  78. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
  79. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
  80. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
  81. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
  82. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
  83. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
  84. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
  85. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
  86. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
  87. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
  88. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
  89. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
  90. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
  91. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
  92. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
  93. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
  94. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
  95. package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
  96. package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
  97. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
  98. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
  99. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
  100. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
  101. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
  102. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
  103. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
  104. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
  105. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
  106. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
  107. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
  108. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
  109. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
  110. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
  111. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
  112. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
  113. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
  114. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
  115. package/docs/design/foundations/brutalist.css +294 -0
  116. package/docs/design/foundations/editorial.css +300 -0
  117. package/docs/design/foundations/minimal-luxury.css +295 -0
  118. package/docs/design/foundations/technical.css +293 -0
  119. package/docs/design/foundations/warm-photo.css +299 -0
  120. package/docs/design/reference-corpus.md +1726 -0
  121. package/docs/design/render-critique-loop.md +57 -0
  122. package/docs/spec-graph-schema.md +397 -0
  123. package/package.json +1 -1
  124. package/scripts/bench-scorecard.mjs +239 -0
  125. package/scripts/build-spec-graph.mjs +509 -0
  126. package/scripts/classify-lane.sh +0 -7
  127. package/scripts/design-system-lint.mjs +993 -0
  128. package/scripts/graph-query.sh +486 -0
  129. package/scripts/transition-label.sh +10 -2
  130. package/scripts/validate-spec-graph.sh +423 -0
  131. package/templates/workflows/forgedock-review.yml +96 -0
package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html ADDED
@@ -0,0 +1,1245 @@
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 — Send email. Ship faster.</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=Cabinet+Grotesk:wght@400;500;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ @font-face {
12
+ font-family: 'Cabinet Grotesk';
13
+ src: url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap');
14
+ }
15
+
16
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
17
+
18
+ :root {
19
+ --black: #0A0A0A;
20
+ --white: #F5F5F0;
21
+ --off-white: #E8E8E2;
22
+ --mid: #999990;
23
+ --dim: #666660;
24
+ --accent: #FF3D00;
25
+ --accent-dark: #CC3100;
26
+ --border: #2A2A2A;
27
+ --border-light: #D0D0C8;
28
+ --code-bg: #111111;
29
+ }
30
+
31
+ html { font-size: 16px; scroll-behavior: smooth; }
32
+
33
+ body {
34
+ font-family: 'Plus Jakarta Sans', 'Cabinet Grotesk', sans-serif;
35
+ background: var(--white);
36
+ color: var(--black);
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: 20px 48px;
46
+ border-bottom: 2px solid var(--black);
47
+ position: sticky;
48
+ top: 0;
49
+ background: var(--white);
50
+ z-index: 100;
51
+ }
52
+
53
+ .nav-logo {
54
+ font-size: 1rem;
55
+ font-weight: 800;
56
+ letter-spacing: 0.2em;
57
+ text-transform: uppercase;
58
+ color: var(--black);
59
+ text-decoration: none;
60
+ }
61
+
62
+ .nav-center {
63
+ display: flex;
64
+ gap: 32px;
65
+ list-style: none;
66
+ }
67
+
68
+ .nav-center a {
69
+ text-decoration: none;
70
+ color: var(--dim);
71
+ font-size: 0.78rem;
72
+ font-weight: 700;
73
+ text-transform: uppercase;
74
+ letter-spacing: 0.08em;
75
+ transition: color 0.15s;
76
+ }
77
+
78
+ .nav-center a:hover { color: var(--black); }
79
+
80
+ .btn-brutal {
81
+ display: inline-block;
82
+ background: var(--accent);
83
+ color: var(--white);
84
+ padding: 12px 28px;
85
+ font-family: inherit;
86
+ font-size: 0.78rem;
87
+ font-weight: 800;
88
+ text-transform: uppercase;
89
+ letter-spacing: 0.08em;
90
+ text-decoration: none;
91
+ border: 2px solid var(--black);
92
+ cursor: pointer;
93
+ transition: all 0.15s;
94
+ box-shadow: 3px 3px 0 var(--black);
95
+ }
96
+
97
+ .btn-brutal:hover {
98
+ box-shadow: 1px 1px 0 var(--black);
99
+ transform: translate(2px, 2px);
100
+ }
101
+
102
+ .btn-outline {
103
+ display: inline-block;
104
+ background: transparent;
105
+ color: var(--black);
106
+ padding: 12px 28px;
107
+ font-family: inherit;
108
+ font-size: 0.78rem;
109
+ font-weight: 800;
110
+ text-transform: uppercase;
111
+ letter-spacing: 0.08em;
112
+ text-decoration: none;
113
+ border: 2px solid var(--black);
114
+ cursor: pointer;
115
+ transition: all 0.15s;
116
+ }
117
+
118
+ .btn-outline:hover {
119
+ background: var(--black);
120
+ color: var(--white);
121
+ }
122
+
123
+ /* HERO — massive type with scale shift */
124
+ .hero {
125
+ border-bottom: 2px solid var(--black);
126
+ display: grid;
127
+ grid-template-columns: 1fr 480px;
128
+ min-height: 90vh;
129
+ }
130
+
131
+ .hero-type {
132
+ padding: 80px 48px 48px;
133
+ display: flex;
134
+ flex-direction: column;
135
+ justify-content: space-between;
136
+ }
137
+
138
+ .hero-overline {
139
+ font-size: 0.72rem;
140
+ font-weight: 800;
141
+ text-transform: uppercase;
142
+ letter-spacing: 0.15em;
143
+ color: var(--accent);
144
+ margin-bottom: 24px;
145
+ }
146
+
147
+ .hero-h1 {
148
+ font-size: 7.5rem;
149
+ font-weight: 900;
150
+ line-height: 0.88;
151
+ letter-spacing: -0.06em;
152
+ text-transform: uppercase;
153
+ margin-bottom: 32px;
154
+ }
155
+
156
+ .hero-h1 .thin {
157
+ font-weight: 400;
158
+ display: block;
159
+ }
160
+
161
+ .hero-h1 .accent {
162
+ color: var(--accent);
163
+ }
164
+
165
+ .hero-sub {
166
+ font-size: 1.1rem;
167
+ color: var(--dim);
168
+ max-width: 480px;
169
+ line-height: 1.65;
170
+ margin-bottom: 40px;
171
+ font-weight: 500;
172
+ }
173
+
174
+ .hero-actions {
175
+ display: flex;
176
+ gap: 16px;
177
+ align-items: center;
178
+ margin-bottom: 48px;
179
+ }
180
+
181
+ .hero-stats {
182
+ display: flex;
183
+ gap: 48px;
184
+ padding-top: 32px;
185
+ border-top: 2px solid var(--black);
186
+ }
187
+
188
+ .hero-stat {
189
+ display: flex;
190
+ flex-direction: column;
191
+ }
192
+
193
+ .hero-stat-value {
194
+ font-size: 2.4rem;
195
+ font-weight: 900;
196
+ letter-spacing: -0.04em;
197
+ line-height: 1;
198
+ }
199
+
200
+ .hero-stat-label {
201
+ font-size: 0.68rem;
202
+ font-weight: 700;
203
+ text-transform: uppercase;
204
+ letter-spacing: 0.1em;
205
+ color: var(--dim);
206
+ margin-top: 4px;
207
+ }
208
+
209
+ /* HERO RIGHT — code showcase with vertical label */
210
+ .hero-code-side {
211
+ background: var(--code-bg);
212
+ border-left: 2px solid var(--black);
213
+ display: flex;
214
+ position: relative;
215
+ overflow: hidden;
216
+ }
217
+
218
+ .vertical-label {
219
+ writing-mode: vertical-rl;
220
+ text-orientation: mixed;
221
+ transform: rotate(180deg);
222
+ font-size: 0.65rem;
223
+ font-weight: 800;
224
+ text-transform: uppercase;
225
+ letter-spacing: 0.15em;
226
+ color: #333;
227
+ padding: 24px 16px;
228
+ border-right: 1px solid #222;
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ flex-shrink: 0;
233
+ }
234
+
235
+ .hero-code-content {
236
+ flex: 1;
237
+ padding: 48px 32px;
238
+ overflow: auto;
239
+ display: flex;
240
+ flex-direction: column;
241
+ gap: 24px;
242
+ }
243
+
244
+ .code-card {
245
+ border: 1px solid #222;
246
+ border-radius: 0;
247
+ overflow: hidden;
248
+ }
249
+
250
+ .code-card-bar {
251
+ display: flex;
252
+ justify-content: space-between;
253
+ align-items: center;
254
+ padding: 8px 16px;
255
+ background: #1A1A1A;
256
+ border-bottom: 1px solid #222;
257
+ }
258
+
259
+ .code-card-lang {
260
+ font-family: 'JetBrains Mono', monospace;
261
+ font-size: 0.6rem;
262
+ font-weight: 500;
263
+ color: #555;
264
+ text-transform: uppercase;
265
+ letter-spacing: 0.1em;
266
+ }
267
+
268
+ .code-card-tag {
269
+ font-family: 'JetBrains Mono', monospace;
270
+ font-size: 0.55rem;
271
+ padding: 2px 8px;
272
+ background: rgba(255,61,0,0.15);
273
+ color: var(--accent);
274
+ text-transform: uppercase;
275
+ letter-spacing: 0.06em;
276
+ }
277
+
278
+ .code-card pre {
279
+ padding: 20px 16px;
280
+ font-family: 'JetBrains Mono', monospace;
281
+ font-size: 0.72rem;
282
+ line-height: 1.8;
283
+ color: #CCC;
284
+ overflow-x: auto;
285
+ }
286
+
287
+ .code-card pre .kw { color: var(--accent); }
288
+ .code-card pre .str { color: #A78BFA; }
289
+ .code-card pre .fn { color: #7DAECC; }
290
+ .code-card pre .cm { color: #444; }
291
+ .code-card pre .num { color: #FF9F43; }
292
+ .code-card pre .res { color: #4CAF50; }
293
+
294
+ /* MARQUEE STRIP */
295
+ .marquee-strip {
296
+ border-bottom: 2px solid var(--black);
297
+ padding: 14px 0;
298
+ overflow: hidden;
299
+ white-space: nowrap;
300
+ background: var(--accent);
301
+ color: var(--white);
302
+ }
303
+
304
+ .marquee-inner {
305
+ display: inline-block;
306
+ animation: marquee 30s linear infinite;
307
+ }
308
+
309
+ .marquee-inner span {
310
+ font-size: 0.75rem;
311
+ font-weight: 800;
312
+ text-transform: uppercase;
313
+ letter-spacing: 0.12em;
314
+ margin-right: 48px;
315
+ }
316
+
317
+ @keyframes marquee {
318
+ 0% { transform: translateX(0); }
319
+ 100% { transform: translateX(-50%); }
320
+ }
321
+
322
+ /* SECTION with big number */
323
+ .big-section {
324
+ display: grid;
325
+ grid-template-columns: 120px 1fr;
326
+ border-bottom: 2px solid var(--black);
327
+ }
328
+
329
+ .big-section-num {
330
+ display: flex;
331
+ align-items: flex-start;
332
+ justify-content: center;
333
+ padding-top: 64px;
334
+ font-size: 5rem;
335
+ font-weight: 900;
336
+ color: var(--off-white);
337
+ border-right: 2px solid var(--black);
338
+ position: relative;
339
+ }
340
+
341
+ .big-section-num::after {
342
+ content: '';
343
+ position: absolute;
344
+ bottom: 0;
345
+ left: 0;
346
+ right: 0;
347
+ height: 3px;
348
+ background: var(--accent);
349
+ }
350
+
351
+ .big-section-content {
352
+ padding: 64px 48px;
353
+ }
354
+
355
+ .big-section-header {
356
+ display: flex;
357
+ justify-content: space-between;
358
+ align-items: flex-start;
359
+ gap: 48px;
360
+ margin-bottom: 48px;
361
+ }
362
+
363
+ .big-section-title {
364
+ font-size: 3rem;
365
+ font-weight: 900;
366
+ letter-spacing: -0.04em;
367
+ line-height: 1;
368
+ text-transform: uppercase;
369
+ max-width: 500px;
370
+ }
371
+
372
+ .big-section-desc {
373
+ font-size: 0.95rem;
374
+ color: var(--dim);
375
+ max-width: 380px;
376
+ line-height: 1.65;
377
+ font-weight: 500;
378
+ padding-top: 8px;
379
+ }
380
+
381
+ /* FEATURE BLOCKS — brutalist grid */
382
+ .brutal-grid {
383
+ display: grid;
384
+ grid-template-columns: repeat(3, 1fr);
385
+ gap: 0;
386
+ border: 2px solid var(--black);
387
+ }
388
+
389
+ .brutal-cell {
390
+ padding: 40px 32px;
391
+ border-right: 2px solid var(--black);
392
+ border-bottom: 2px solid var(--black);
393
+ }
394
+
395
+ .brutal-cell:nth-child(3n) { border-right: none; }
396
+ .brutal-cell:nth-last-child(-n+3) { border-bottom: none; }
397
+
398
+ .brutal-cell h4 {
399
+ font-size: 1rem;
400
+ font-weight: 800;
401
+ text-transform: uppercase;
402
+ letter-spacing: 0.04em;
403
+ margin-bottom: 10px;
404
+ }
405
+
406
+ .brutal-cell p {
407
+ font-size: 0.85rem;
408
+ color: var(--dim);
409
+ line-height: 1.6;
410
+ font-weight: 500;
411
+ }
412
+
413
+ .brutal-cell .cell-tag {
414
+ display: inline-block;
415
+ font-size: 0.6rem;
416
+ font-weight: 800;
417
+ text-transform: uppercase;
418
+ letter-spacing: 0.1em;
419
+ color: var(--accent);
420
+ margin-bottom: 16px;
421
+ }
422
+
423
+ /* FULL-WIDTH CODE */
424
+ .fw-code-section {
425
+ background: var(--code-bg);
426
+ border-bottom: 2px solid var(--black);
427
+ padding: 64px 48px;
428
+ display: grid;
429
+ grid-template-columns: 1fr 1fr;
430
+ gap: 32px;
431
+ }
432
+
433
+ .fw-code-intro {
434
+ color: #999;
435
+ display: flex;
436
+ flex-direction: column;
437
+ justify-content: center;
438
+ }
439
+
440
+ .fw-code-intro h3 {
441
+ font-size: 2.4rem;
442
+ font-weight: 900;
443
+ letter-spacing: -0.04em;
444
+ color: var(--white);
445
+ text-transform: uppercase;
446
+ line-height: 1;
447
+ margin-bottom: 20px;
448
+ }
449
+
450
+ .fw-code-intro p {
451
+ font-size: 0.92rem;
452
+ line-height: 1.65;
453
+ max-width: 400px;
454
+ font-weight: 500;
455
+ }
456
+
457
+ .fw-code-intro .accent-line {
458
+ width: 48px;
459
+ height: 3px;
460
+ background: var(--accent);
461
+ margin: 24px 0;
462
+ }
463
+
464
+ .fw-code-intro ul {
465
+ list-style: none;
466
+ margin-top: 8px;
467
+ }
468
+
469
+ .fw-code-intro ul li {
470
+ padding: 6px 0;
471
+ font-size: 0.82rem;
472
+ color: #777;
473
+ font-weight: 500;
474
+ }
475
+
476
+ .fw-code-intro ul li strong {
477
+ color: #BBB;
478
+ font-weight: 700;
479
+ }
480
+
481
+ /* DELIVERABILITY */
482
+ .deliv-section {
483
+ border-bottom: 2px solid var(--black);
484
+ }
485
+
486
+ .deliv-header {
487
+ padding: 64px 48px 0;
488
+ display: flex;
489
+ justify-content: space-between;
490
+ align-items: flex-end;
491
+ margin-bottom: 48px;
492
+ }
493
+
494
+ .deliv-header h2 {
495
+ font-size: 3rem;
496
+ font-weight: 900;
497
+ letter-spacing: -0.04em;
498
+ text-transform: uppercase;
499
+ line-height: 0.95;
500
+ max-width: 500px;
501
+ }
502
+
503
+ .deliv-header p {
504
+ font-size: 0.9rem;
505
+ color: var(--dim);
506
+ max-width: 360px;
507
+ text-align: right;
508
+ line-height: 1.6;
509
+ font-weight: 500;
510
+ }
511
+
512
+ .deliv-strip {
513
+ display: grid;
514
+ grid-template-columns: repeat(4, 1fr);
515
+ border-top: 2px solid var(--black);
516
+ }
517
+
518
+ .deliv-stat-cell {
519
+ padding: 40px 48px;
520
+ border-right: 2px solid var(--black);
521
+ }
522
+
523
+ .deliv-stat-cell:last-child { border-right: none; }
524
+
525
+ .deliv-stat-cell .val {
526
+ font-size: 3.5rem;
527
+ font-weight: 900;
528
+ letter-spacing: -0.04em;
529
+ line-height: 1;
530
+ margin-bottom: 4px;
531
+ }
532
+
533
+ .deliv-stat-cell .val.accent { color: var(--accent); }
534
+
535
+ .deliv-stat-cell .label {
536
+ font-size: 0.68rem;
537
+ font-weight: 700;
538
+ text-transform: uppercase;
539
+ letter-spacing: 0.1em;
540
+ color: var(--dim);
541
+ }
542
+
543
+ .deliv-details {
544
+ display: grid;
545
+ grid-template-columns: 1fr 1fr;
546
+ border-top: 2px solid var(--black);
547
+ }
548
+
549
+ .deliv-detail-cell {
550
+ padding: 40px 48px;
551
+ border-right: 2px solid var(--black);
552
+ }
553
+
554
+ .deliv-detail-cell:last-child { border-right: none; }
555
+
556
+ .deliv-detail-cell h4 {
557
+ font-size: 1rem;
558
+ font-weight: 800;
559
+ text-transform: uppercase;
560
+ letter-spacing: 0.04em;
561
+ margin-bottom: 10px;
562
+ }
563
+
564
+ .deliv-detail-cell p {
565
+ font-size: 0.85rem;
566
+ color: var(--dim);
567
+ line-height: 1.6;
568
+ font-weight: 500;
569
+ }
570
+
571
+ /* ANALYTICS — dense row */
572
+ .analytics-section {
573
+ border-bottom: 2px solid var(--black);
574
+ padding: 64px 48px;
575
+ }
576
+
577
+ .analytics-header {
578
+ display: flex;
579
+ justify-content: space-between;
580
+ align-items: flex-end;
581
+ margin-bottom: 32px;
582
+ }
583
+
584
+ .analytics-header h2 {
585
+ font-size: 2.4rem;
586
+ font-weight: 900;
587
+ letter-spacing: -0.04em;
588
+ text-transform: uppercase;
589
+ line-height: 1;
590
+ }
591
+
592
+ .analytics-table {
593
+ width: 100%;
594
+ border-collapse: collapse;
595
+ border: 2px solid var(--black);
596
+ }
597
+
598
+ .analytics-table th {
599
+ text-align: left;
600
+ font-size: 0.62rem;
601
+ font-weight: 800;
602
+ text-transform: uppercase;
603
+ letter-spacing: 0.1em;
604
+ padding: 12px 20px;
605
+ border-bottom: 2px solid var(--black);
606
+ border-right: 2px solid var(--black);
607
+ background: var(--off-white);
608
+ }
609
+
610
+ .analytics-table th:last-child { border-right: none; }
611
+
612
+ .analytics-table td {
613
+ padding: 14px 20px;
614
+ border-bottom: 1px solid var(--border-light);
615
+ border-right: 2px solid var(--black);
616
+ font-size: 0.82rem;
617
+ font-weight: 500;
618
+ }
619
+
620
+ .analytics-table td:last-child { border-right: none; }
621
+ .analytics-table tr:last-child td { border-bottom: none; }
622
+
623
+ .analytics-table td:first-child {
624
+ font-weight: 800;
625
+ font-family: 'JetBrains Mono', monospace;
626
+ font-size: 0.75rem;
627
+ }
628
+
629
+ .analytics-table .num-cell {
630
+ font-family: 'JetBrains Mono', monospace;
631
+ font-size: 0.78rem;
632
+ font-weight: 500;
633
+ }
634
+
635
+ .analytics-table .good { color: #16A34A; font-weight: 700; }
636
+ .analytics-table .warn { color: #D97706; font-weight: 700; }
637
+
638
+ /* CTA */
639
+ .cta-brutal {
640
+ display: grid;
641
+ grid-template-columns: 1fr 1fr;
642
+ border-bottom: 2px solid var(--black);
643
+ }
644
+
645
+ .cta-left {
646
+ background: var(--black);
647
+ color: var(--white);
648
+ padding: 80px 48px;
649
+ display: flex;
650
+ flex-direction: column;
651
+ justify-content: center;
652
+ }
653
+
654
+ .cta-left h2 {
655
+ font-size: 4rem;
656
+ font-weight: 900;
657
+ letter-spacing: -0.05em;
658
+ text-transform: uppercase;
659
+ line-height: 0.9;
660
+ margin-bottom: 24px;
661
+ }
662
+
663
+ .cta-left h2 .accent { color: var(--accent); }
664
+
665
+ .cta-left p {
666
+ color: #888;
667
+ font-size: 0.95rem;
668
+ line-height: 1.65;
669
+ max-width: 400px;
670
+ margin-bottom: 32px;
671
+ font-weight: 500;
672
+ }
673
+
674
+ .cta-left .btn-brutal {
675
+ align-self: flex-start;
676
+ box-shadow: 3px 3px 0 #444;
677
+ }
678
+
679
+ .cta-right-panel {
680
+ padding: 80px 48px;
681
+ display: flex;
682
+ flex-direction: column;
683
+ justify-content: center;
684
+ }
685
+
686
+ .cta-step {
687
+ display: grid;
688
+ grid-template-columns: 48px 1fr;
689
+ gap: 16px;
690
+ padding: 20px 0;
691
+ border-bottom: 2px solid var(--black);
692
+ }
693
+
694
+ .cta-step:last-child { border-bottom: none; }
695
+
696
+ .cta-step-num {
697
+ font-size: 1.8rem;
698
+ font-weight: 900;
699
+ color: var(--accent);
700
+ letter-spacing: -0.04em;
701
+ }
702
+
703
+ .cta-step-text {
704
+ padding-top: 4px;
705
+ }
706
+
707
+ .cta-step-text strong {
708
+ display: block;
709
+ font-weight: 800;
710
+ text-transform: uppercase;
711
+ font-size: 0.82rem;
712
+ letter-spacing: 0.04em;
713
+ margin-bottom: 4px;
714
+ }
715
+
716
+ .cta-step-text span {
717
+ font-size: 0.82rem;
718
+ color: var(--dim);
719
+ line-height: 1.5;
720
+ font-weight: 500;
721
+ }
722
+
723
+ .cta-step-text code {
724
+ font-family: 'JetBrains Mono', monospace;
725
+ font-size: 0.72rem;
726
+ background: var(--off-white);
727
+ padding: 2px 8px;
728
+ border: 1px solid var(--border-light);
729
+ color: var(--black);
730
+ }
731
+
732
+ /* FOOTER */
733
+ footer {
734
+ padding: 32px 48px;
735
+ display: flex;
736
+ justify-content: space-between;
737
+ align-items: center;
738
+ }
739
+
740
+ .footer-brand {
741
+ font-size: 0.82rem;
742
+ font-weight: 800;
743
+ letter-spacing: 0.15em;
744
+ text-transform: uppercase;
745
+ color: var(--dim);
746
+ }
747
+
748
+ .footer-nav {
749
+ display: flex;
750
+ gap: 24px;
751
+ list-style: none;
752
+ }
753
+
754
+ .footer-nav a {
755
+ font-size: 0.72rem;
756
+ font-weight: 700;
757
+ text-transform: uppercase;
758
+ letter-spacing: 0.06em;
759
+ color: var(--dim);
760
+ text-decoration: none;
761
+ transition: color 0.15s;
762
+ }
763
+
764
+ .footer-nav a:hover { color: var(--black); }
765
+
766
+ /* RESPONSIVE */
767
+ @media (max-width: 1024px) {
768
+ .hero { grid-template-columns: 1fr; }
769
+ .hero-h1 { font-size: 4.5rem; }
770
+ .hero-code-side { border-left: none; border-top: 2px solid var(--black); min-height: 500px; }
771
+ .big-section { grid-template-columns: 1fr; }
772
+ .big-section-num { display: none; }
773
+ .brutal-grid { grid-template-columns: 1fr 1fr; }
774
+ .brutal-cell:nth-child(2n) { border-right: none; }
775
+ .fw-code-section { grid-template-columns: 1fr; }
776
+ .deliv-strip { grid-template-columns: 1fr 1fr; }
777
+ .deliv-stat-cell:nth-child(2) { border-right: none; }
778
+ .deliv-details { grid-template-columns: 1fr; }
779
+ .deliv-detail-cell { border-right: none; border-bottom: 2px solid var(--black); }
780
+ .deliv-detail-cell:last-child { border-bottom: none; }
781
+ .cta-brutal { grid-template-columns: 1fr; }
782
+ .cta-left h2 { font-size: 3rem; }
783
+ }
784
+
785
+ @media (max-width: 640px) {
786
+ nav { padding: 16px 20px; }
787
+ .nav-center { display: none; }
788
+ .hero-type { padding: 40px 20px 32px; }
789
+ .hero-h1 { font-size: 3rem; }
790
+ .hero-stats { flex-direction: column; gap: 16px; }
791
+ .hero-code-content { padding: 24px 16px; }
792
+ .big-section-content { padding: 40px 20px; }
793
+ .big-section-header { flex-direction: column; gap: 16px; }
794
+ .big-section-title { font-size: 2rem; }
795
+ .brutal-grid { grid-template-columns: 1fr; }
796
+ .brutal-cell { border-right: none !important; }
797
+ .fw-code-section { padding: 40px 20px; }
798
+ .deliv-header { padding: 40px 20px 0; flex-direction: column; align-items: flex-start; gap: 16px; }
799
+ .deliv-header h2 { font-size: 2rem; }
800
+ .deliv-header p { text-align: left; }
801
+ .deliv-strip { grid-template-columns: 1fr; }
802
+ .deliv-stat-cell { border-right: none; border-bottom: 2px solid var(--black); }
803
+ .deliv-stat-cell:last-child { border-bottom: none; }
804
+ .analytics-section { padding: 40px 20px; }
805
+ .analytics-header h2 { font-size: 1.8rem; }
806
+ .analytics-table { font-size: 0.75rem; }
807
+ .cta-left { padding: 48px 20px; }
808
+ .cta-left h2 { font-size: 2.5rem; }
809
+ .cta-right-panel { padding: 48px 20px; }
810
+ footer { flex-direction: column; gap: 16px; padding: 24px 20px; }
811
+ }
812
+ </style>
813
+ </head>
814
+ <body>
815
+
816
+ <nav>
817
+ <a href="#" class="nav-logo">Cadence</a>
818
+ <ul class="nav-center">
819
+ <li><a href="#api">API</a></li>
820
+ <li><a href="#features">Features</a></li>
821
+ <li><a href="#deliverability">Deliverability</a></li>
822
+ <li><a href="#analytics">Analytics</a></li>
823
+ <li><a href="#">Docs</a></li>
824
+ <li><a href="#">Pricing</a></li>
825
+ </ul>
826
+ <a href="#" class="btn-brutal">Get API Key</a>
827
+ </nav>
828
+
829
+ <!-- HERO: massive typography with scale shift -->
830
+ <section class="hero">
831
+ <div class="hero-type">
832
+ <div>
833
+ <div class="hero-overline">Email API for developers</div>
834
+ <h1 class="hero-h1">
835
+ SEND<br>
836
+ <span class="thin">EMAIL</span><br>
837
+ FROM <span class="accent">CODE</span>
838
+ </h1>
839
+ <p class="hero-sub">A REST API that handles transactional and marketing email. Domain auth, deliverability monitoring, templates your content team can edit. Production infrastructure, not a wrapper.</p>
840
+ <div class="hero-actions">
841
+ <a href="#" class="btn-brutal">Get Started Free</a>
842
+ <a href="#" class="btn-outline">Read the Docs</a>
843
+ </div>
844
+ </div>
845
+ <div class="hero-stats">
846
+ <div class="hero-stat">
847
+ <span class="hero-stat-value">99.1%</span>
848
+ <span class="hero-stat-label">Inbox Rate</span>
849
+ </div>
850
+ <div class="hero-stat">
851
+ <span class="hero-stat-value">1.2s</span>
852
+ <span class="hero-stat-label">Avg Delivery</span>
853
+ </div>
854
+ <div class="hero-stat">
855
+ <span class="hero-stat-value">99.97%</span>
856
+ <span class="hero-stat-label">Uptime</span>
857
+ </div>
858
+ <div class="hero-stat">
859
+ <span class="hero-stat-value">5</span>
860
+ <span class="hero-stat-label">SDKs</span>
861
+ </div>
862
+ </div>
863
+ </div>
864
+
865
+ <div class="hero-code-side">
866
+ <div class="vertical-label">Quick Start</div>
867
+ <div class="hero-code-content">
868
+ <div class="code-card">
869
+ <div class="code-card-bar">
870
+ <span class="code-card-lang">Node.js</span>
871
+ <span class="code-card-tag">Send</span>
872
+ </div>
873
+ <pre><span class="kw">import</span> { Cadence } <span class="kw">from</span> <span class="str">'@cadence/node'</span>;
874
+
875
+ <span class="kw">const</span> cadence = <span class="kw">new</span> <span class="fn">Cadence</span>(<span class="str">'cd_live_9x8f...'</span>);
876
+
877
+ <span class="kw">await</span> cadence.<span class="fn">send</span>({
878
+ from: <span class="str">'team@yourapp.com'</span>,
879
+ to: <span class="str">'jane@customer.io'</span>,
880
+ template: <span class="str">'welcome-v2'</span>,
881
+ data: {
882
+ first_name: <span class="str">'Jane'</span>,
883
+ plan: <span class="str">'Pro'</span>,
884
+ },
885
+ });
886
+ <span class="cm">// => { id: 'msg_8xK2p', status: 'queued' }</span></pre>
887
+ </div>
888
+
889
+ <div class="code-card">
890
+ <div class="code-card-bar">
891
+ <span class="code-card-lang">Response</span>
892
+ <span class="code-card-tag">202</span>
893
+ </div>
894
+ <pre>{
895
+ <span class="str">"id"</span>: <span class="str">"msg_8xK2pRw4n"</span>,
896
+ <span class="str">"status"</span>: <span class="res">"queued"</span>,
897
+ <span class="str">"estimated_delivery"</span>: <span class="str">"1.1s"</span>,
898
+ <span class="str">"template"</span>: <span class="str">"welcome-v2"</span>,
899
+ <span class="str">"recipient"</span>: <span class="str">"jane@customer.io"</span>
900
+ }</pre>
901
+ </div>
902
+
903
+ <div class="code-card">
904
+ <div class="code-card-bar">
905
+ <span class="code-card-lang">cURL</span>
906
+ <span class="code-card-tag">Batch</span>
907
+ </div>
908
+ <pre>curl <span class="kw">-X POST</span> https://api.cadence.dev/v1/emails/batch \
909
+ <span class="kw">-H</span> <span class="str">"Authorization: Bearer cd_live_..."</span> \
910
+ <span class="kw">-d</span> <span class="str">'{
911
+ "template": "invoice-receipt",
912
+ "recipients": 2847,
913
+ "scheduled_for": "2024-11-14T14:00:00Z"
914
+ }'</span>
915
+
916
+ <span class="cm">// => 2847 emails queued</span></pre>
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </section>
921
+
922
+ <!-- MARQUEE -->
923
+ <div class="marquee-strip">
924
+ <div class="marquee-inner">
925
+ <span>REST API</span>
926
+ <span>Node / Python / Go / Ruby / PHP</span>
927
+ <span>SPF / DKIM / DMARC</span>
928
+ <span>React-style templates</span>
929
+ <span>Real-time webhooks</span>
930
+ <span>Batch send</span>
931
+ <span>Inbox placement testing</span>
932
+ <span>Bounce management</span>
933
+ <span>SOC 2 Type II</span>
934
+ <span>99.97% uptime</span>
935
+ <span>REST API</span>
936
+ <span>Node / Python / Go / Ruby / PHP</span>
937
+ <span>SPF / DKIM / DMARC</span>
938
+ <span>React-style templates</span>
939
+ <span>Real-time webhooks</span>
940
+ <span>Batch send</span>
941
+ <span>Inbox placement testing</span>
942
+ <span>Bounce management</span>
943
+ <span>SOC 2 Type II</span>
944
+ <span>99.97% uptime</span>
945
+ </div>
946
+ </div>
947
+
948
+ <!-- SECTION 01: FEATURES -->
949
+ <section class="big-section" id="features">
950
+ <div class="big-section-num">01</div>
951
+ <div class="big-section-content">
952
+ <div class="big-section-header">
953
+ <h2 class="big-section-title">Everything you need. Nothing you don't.</h2>
954
+ <p class="big-section-desc">One API, one dashboard, one billing line item. Every feature below ships on every plan. Volume-based pricing, no feature gates.</p>
955
+ </div>
956
+
957
+ <div class="brutal-grid">
958
+ <div class="brutal-cell">
959
+ <span class="cell-tag">Core</span>
960
+ <h4>Transactional Send</h4>
961
+ <p>Single POST, single recipient. Template or inline HTML. Attachments, inline images, custom headers, reply-to. Queued and delivered in under 2 seconds.</p>
962
+ </div>
963
+ <div class="brutal-cell">
964
+ <span class="cell-tag">Scale</span>
965
+ <h4>Batch Send</h4>
966
+ <p>Up to 10,000 recipients per call with per-recipient data merge. Schedule for later or send immediately. Progress tracked via webhook events.</p>
967
+ </div>
968
+ <div class="brutal-cell">
969
+ <span class="cell-tag">Content</span>
970
+ <h4>Template Engine</h4>
971
+ <p>React-style components for engineers. Visual drag-and-drop editor for content owners. Version history, preview with test data, deploy via API or dashboard.</p>
972
+ </div>
973
+ <div class="brutal-cell">
974
+ <span class="cell-tag">Auth</span>
975
+ <h4>Domain Setup</h4>
976
+ <p>One API call generates SPF, DKIM, and DMARC records. Continuous DNS monitoring with alerts on drift. BIMI support for brand logos in inbox.</p>
977
+ </div>
978
+ <div class="brutal-cell">
979
+ <span class="cell-tag">Safety</span>
980
+ <h4>Suppression Lists</h4>
981
+ <p>Global and per-account suppression. Auto-add on hard bounce, complaint, or unsubscribe. CSV import/export. Never send to a bad address twice.</p>
982
+ </div>
983
+ <div class="brutal-cell">
984
+ <span class="cell-tag">Events</span>
985
+ <h4>Webhook Stream</h4>
986
+ <p>Real-time events for delivery, open, click, bounce, complaint, and unsubscribe. Retry with exponential backoff. Filterable by type, template, and tag.</p>
987
+ </div>
988
+ </div>
989
+ </div>
990
+ </section>
991
+
992
+ <!-- TEMPLATES CODE SECTION -->
993
+ <section class="fw-code-section" id="api">
994
+ <div class="fw-code-intro">
995
+ <h3>Templates as&nbsp;components</h3>
996
+ <div class="accent-line"></div>
997
+ <p>Write email templates as React-like JSX components. Import shared layouts, buttons, and sections. Your content team edits copy and images in a visual tool that compiles to the same component tree.</p>
998
+ <ul>
999
+ <li><strong>Component library</strong> &mdash; Email, Section, Button, Text, Image, Divider, Spacer</li>
1000
+ <li><strong>Variables</strong> &mdash; Dynamic data injection with type-safe schemas</li>
1001
+ <li><strong>Conditionals</strong> &mdash; Show/hide blocks based on recipient data</li>
1002
+ <li><strong>Loops</strong> &mdash; Iterate over arrays (line items, notifications)</li>
1003
+ <li><strong>Preview</strong> &mdash; Render with test data, inspect HTML and plain text</li>
1004
+ <li><strong>Version control</strong> &mdash; Full history, rollback, branch previews</li>
1005
+ </ul>
1006
+ </div>
1007
+
1008
+ <div class="code-card">
1009
+ <div class="code-card-bar">
1010
+ <span class="code-card-lang">Template JSX</span>
1011
+ <span class="code-card-tag">welcome-v2</span>
1012
+ </div>
1013
+ <pre><span class="kw">import</span> { Email, Section, Button, Text, Image }
1014
+ <span class="kw">from</span> <span class="str">'@cadence/components'</span>;
1015
+
1016
+ <span class="kw">export default function</span> <span class="fn">WelcomeEmail</span>({
1017
+ first_name,
1018
+ plan,
1019
+ login_url,
1020
+ features,
1021
+ }) {
1022
+ <span class="kw">return</span> (
1023
+ &lt;<span class="fn">Email</span>
1024
+ subject={<span class="str">`Welcome, ${first_name}`</span>}
1025
+ preview=<span class="str">"Your account is ready"</span>
1026
+ &gt;
1027
+ &lt;<span class="fn">Section</span> padding=<span class="str">"32"</span> bg=<span class="str">"#ffffff"</span>&gt;
1028
+ &lt;<span class="fn">Image</span>
1029
+ src=<span class="str">"https://cdn.yourapp.com/logo.png"</span>
1030
+ width=<span class="num">120</span>
1031
+ alt=<span class="str">"YourApp"</span>
1032
+ /&gt;
1033
+ &lt;<span class="fn">Text</span> size=<span class="str">"xl"</span> weight=<span class="str">"bold"</span> mt=<span class="str">"24"</span>&gt;
1034
+ Welcome aboard, {first_name}
1035
+ &lt;/<span class="fn">Text</span>&gt;
1036
+ &lt;<span class="fn">Text</span> color=<span class="str">"muted"</span> mt=<span class="str">"12"</span>&gt;
1037
+ You're on the {plan} plan.
1038
+ &lt;/<span class="fn">Text</span>&gt;
1039
+
1040
+ {features.<span class="fn">map</span>(f =&gt; (
1041
+ &lt;<span class="fn">Text</span> key={f} size=<span class="str">"sm"</span>&gt;
1042
+ {f}
1043
+ &lt;/<span class="fn">Text</span>&gt;
1044
+ ))}
1045
+
1046
+ &lt;<span class="fn">Button</span>
1047
+ href={login_url}
1048
+ bg=<span class="str">"#FF3D00"</span>
1049
+ mt=<span class="str">"24"</span>
1050
+ &gt;
1051
+ Open Your Dashboard
1052
+ &lt;/<span class="fn">Button</span>&gt;
1053
+ &lt;/<span class="fn">Section</span>&gt;
1054
+ &lt;/<span class="fn">Email</span>&gt;
1055
+ );
1056
+ }</pre>
1057
+ </div>
1058
+ </section>
1059
+
1060
+ <!-- DELIVERABILITY -->
1061
+ <section class="deliv-section" id="deliverability">
1062
+ <div class="deliv-header">
1063
+ <h2>Deliverability is not optional</h2>
1064
+ <p>Inbox placement monitoring across Gmail, Outlook, Yahoo, and Apple Mail. Reputation tracking. Content scanning. All automated.</p>
1065
+ </div>
1066
+
1067
+ <div class="deliv-strip">
1068
+ <div class="deliv-stat-cell">
1069
+ <div class="val accent">99.1%</div>
1070
+ <div class="label">Inbox Placement</div>
1071
+ </div>
1072
+ <div class="deliv-stat-cell">
1073
+ <div class="val">0.12%</div>
1074
+ <div class="label">Bounce Rate</div>
1075
+ </div>
1076
+ <div class="deliv-stat-cell">
1077
+ <div class="val">97</div>
1078
+ <div class="label">Sender Score</div>
1079
+ </div>
1080
+ <div class="deliv-stat-cell">
1081
+ <div class="val">42</div>
1082
+ <div class="label">ISP Feedback Loops</div>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <div class="deliv-details">
1087
+ <div class="deliv-detail-cell">
1088
+ <h4>Inbox Placement Testing</h4>
1089
+ <p>Seed-list tests across 30+ mailbox providers. See where your email lands: inbox, promotions, spam, or missing. Run on-demand or scheduled. Results in under 3 minutes.</p>
1090
+ </div>
1091
+ <div class="deliv-detail-cell">
1092
+ <h4>Reputation Monitoring</h4>
1093
+ <p>Aggregate sender score, domain rep, and IP rep from Google Postmaster Tools, Microsoft SNDS, and proprietary signals. Alerts when anything drifts below threshold.</p>
1094
+ </div>
1095
+ </div>
1096
+ <div class="deliv-details">
1097
+ <div class="deliv-detail-cell">
1098
+ <h4>Content Scanning</h4>
1099
+ <p>Pre-send checks against known spam triggers: link shorteners, excessive images, missing unsubscribe headers, broken authentication. Catches problems before they reach ISPs.</p>
1100
+ </div>
1101
+ <div class="deliv-detail-cell">
1102
+ <h4>Dedicated IPs</h4>
1103
+ <p>Starter plans use Cadence's shared pool maintained at 95+ reputation. Scaling plans get dedicated IPs with automated warm-up over 14 days and per-IP analytics.</p>
1104
+ </div>
1105
+ </div>
1106
+ </section>
1107
+
1108
+ <!-- ANALYTICS TABLE -->
1109
+ <section class="analytics-section" id="analytics">
1110
+ <div class="analytics-header">
1111
+ <h2>Analytics by template</h2>
1112
+ <span style="font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--dim);">Last 30 days</span>
1113
+ </div>
1114
+
1115
+ <table class="analytics-table">
1116
+ <thead>
1117
+ <tr>
1118
+ <th>Template</th>
1119
+ <th>Sent</th>
1120
+ <th>Delivered</th>
1121
+ <th>Open Rate</th>
1122
+ <th>Click Rate</th>
1123
+ <th>Bounce</th>
1124
+ <th>Unsub</th>
1125
+ </tr>
1126
+ </thead>
1127
+ <tbody>
1128
+ <tr>
1129
+ <td>welcome-v2</td>
1130
+ <td class="num-cell">48,291</td>
1131
+ <td class="num-cell good">99.4%</td>
1132
+ <td class="num-cell">42.1%</td>
1133
+ <td class="num-cell">12.8%</td>
1134
+ <td class="num-cell good">0.08%</td>
1135
+ <td class="num-cell good">0.3%</td>
1136
+ </tr>
1137
+ <tr>
1138
+ <td>invoice-receipt</td>
1139
+ <td class="num-cell">31,847</td>
1140
+ <td class="num-cell good">99.7%</td>
1141
+ <td class="num-cell">67.3%</td>
1142
+ <td class="num-cell">8.1%</td>
1143
+ <td class="num-cell good">0.04%</td>
1144
+ <td class="num-cell good">0.1%</td>
1145
+ </tr>
1146
+ <tr>
1147
+ <td>password-reset</td>
1148
+ <td class="num-cell">12,493</td>
1149
+ <td class="num-cell good">99.8%</td>
1150
+ <td class="num-cell">89.2%</td>
1151
+ <td class="num-cell">71.4%</td>
1152
+ <td class="num-cell good">0.02%</td>
1153
+ <td class="num-cell">&mdash;</td>
1154
+ </tr>
1155
+ <tr>
1156
+ <td>onboarding-3</td>
1157
+ <td class="num-cell">8,714</td>
1158
+ <td class="num-cell good">99.1%</td>
1159
+ <td class="num-cell">38.7%</td>
1160
+ <td class="num-cell">15.2%</td>
1161
+ <td class="num-cell good">0.11%</td>
1162
+ <td class="num-cell warn">1.2%</td>
1163
+ </tr>
1164
+ <tr>
1165
+ <td>newsletter-42</td>
1166
+ <td class="num-cell">24,102</td>
1167
+ <td class="num-cell good">98.9%</td>
1168
+ <td class="num-cell">31.4%</td>
1169
+ <td class="num-cell">6.8%</td>
1170
+ <td class="num-cell good">0.19%</td>
1171
+ <td class="num-cell warn">0.8%</td>
1172
+ </tr>
1173
+ <tr>
1174
+ <td>alert-critical</td>
1175
+ <td class="num-cell">3,291</td>
1176
+ <td class="num-cell good">99.9%</td>
1177
+ <td class="num-cell">94.1%</td>
1178
+ <td class="num-cell">45.7%</td>
1179
+ <td class="num-cell good">0.01%</td>
1180
+ <td class="num-cell">&mdash;</td>
1181
+ </tr>
1182
+ </tbody>
1183
+ </table>
1184
+ </section>
1185
+
1186
+ <!-- CTA -->
1187
+ <section class="cta-brutal">
1188
+ <div class="cta-left">
1189
+ <h2>START<br>SENDING<br><span class="accent">NOW</span></h2>
1190
+ <p>Free tier: 10,000 emails/month, all features, no credit card. Dedicated IPs and higher volume when you're ready.</p>
1191
+ <a href="#" class="btn-brutal">Get Your API Key</a>
1192
+ </div>
1193
+ <div class="cta-right-panel">
1194
+ <div class="cta-step">
1195
+ <span class="cta-step-num">01</span>
1196
+ <div class="cta-step-text">
1197
+ <strong>Sign up</strong>
1198
+ <span>Create an account and copy your API key from the dashboard.</span>
1199
+ </div>
1200
+ </div>
1201
+ <div class="cta-step">
1202
+ <span class="cta-step-num">02</span>
1203
+ <div class="cta-step-text">
1204
+ <strong>Verify domain</strong>
1205
+ <span>Add DNS records Cadence generates. SPF, DKIM, DMARC in one step.</span>
1206
+ </div>
1207
+ </div>
1208
+ <div class="cta-step">
1209
+ <span class="cta-step-num">03</span>
1210
+ <div class="cta-step-text">
1211
+ <strong>Install SDK</strong>
1212
+ <span><code>npm i @cadence/node</code> or pip, go get, gem install, composer require.</span>
1213
+ </div>
1214
+ </div>
1215
+ <div class="cta-step">
1216
+ <span class="cta-step-num">04</span>
1217
+ <div class="cta-step-text">
1218
+ <strong>Send test email</strong>
1219
+ <span>Use test mode to capture without delivering. Inspect headers and rendering.</span>
1220
+ </div>
1221
+ </div>
1222
+ <div class="cta-step">
1223
+ <span class="cta-step-num">05</span>
1224
+ <div class="cta-step-text">
1225
+ <strong>Go live</strong>
1226
+ <span>Remove test header, start sending. Monitor delivery in real time.</span>
1227
+ </div>
1228
+ </div>
1229
+ </div>
1230
+ </section>
1231
+
1232
+ <footer>
1233
+ <span class="footer-brand">Cadence</span>
1234
+ <ul class="footer-nav">
1235
+ <li><a href="#">Docs</a></li>
1236
+ <li><a href="#">API Reference</a></li>
1237
+ <li><a href="#">Status</a></li>
1238
+ <li><a href="#">Changelog</a></li>
1239
+ <li><a href="#">GitHub</a></li>
1240
+ <li><a href="#">Pricing</a></li>
1241
+ </ul>
1242
+ </footer>
1243
+
1244
+ </body>
1245
+ </html>