forgedock 1.0.16 → 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 (190) hide show
  1. package/README.md +54 -3
  2. package/bin/cross-publish.mjs +344 -0
  3. package/bin/forgedock.mjs +2205 -541
  4. package/bin/github-app-manifest.json.license +2 -0
  5. package/bin/hooks/session-start.mjs +4 -5
  6. package/bin/registry.mjs +20 -0
  7. package/bin/tui.mjs +172 -96
  8. package/commands/adopt.md +433 -0
  9. package/commands/analytics.md +2 -0
  10. package/commands/audit-agents.md +2 -0
  11. package/commands/audit.md +2 -0
  12. package/commands/autopilot.md +77 -0
  13. package/commands/changelog.md +354 -0
  14. package/commands/cleanup.md +2 -0
  15. package/commands/compat-audit.md +330 -0
  16. package/commands/deploy-info.md +6 -5
  17. package/commands/design-bench.md +176 -0
  18. package/commands/design-render-critique-loop.md +103 -0
  19. package/commands/design.md +259 -0
  20. package/commands/diagnose.md +483 -0
  21. package/commands/explain.md +349 -0
  22. package/commands/forge-stats.md +2 -0
  23. package/commands/forgedock-init.md +2 -0
  24. package/commands/geo-audit.md +2 -0
  25. package/commands/incident-response.md +2 -0
  26. package/commands/issue.md +9 -3
  27. package/commands/milestone.md +2 -0
  28. package/commands/optimize.md +411 -0
  29. package/commands/orchestrate.md +239 -0
  30. package/commands/pipeline-health.md +60 -1
  31. package/commands/qa-sweep.md +39 -2
  32. package/commands/quality-gate.md +67 -0
  33. package/commands/replay.md +263 -0
  34. package/commands/resume.md +264 -0
  35. package/commands/review-pr-agents.md +5 -1
  36. package/commands/review-pr-staging.md +160 -2
  37. package/commands/review-pr.md +85 -3
  38. package/commands/rollback.md +2 -0
  39. package/commands/scope.md +280 -0
  40. package/commands/security-audit.md +2 -0
  41. package/commands/status.md +262 -0
  42. package/commands/sync-ecosystem.md +2 -0
  43. package/commands/test-gate.md +929 -0
  44. package/commands/validate.md +2 -0
  45. package/commands/work-on/build/architect.md +128 -18
  46. package/commands/work-on/build/context.md +130 -17
  47. package/commands/work-on/build/implement.md +7 -3
  48. package/commands/work-on/build/validate.md +2 -0
  49. package/commands/work-on/build.md +32 -7
  50. package/commands/work-on/close.md +85 -0
  51. package/commands/work-on/decompose.md +2 -0
  52. package/commands/work-on/investigate.md +30 -3
  53. package/commands/work-on/review.md +13 -1
  54. package/commands/work-on-monolithic.md +2 -0
  55. package/commands/work-on.md +676 -38
  56. package/docs/BRAND.md +51 -0
  57. package/docs/CI.md +177 -0
  58. package/docs/CONFIG.md +94 -0
  59. package/docs/FORGE-PROTOCOL.md +324 -0
  60. package/docs/articles/b-vs-c-baseline.md +210 -0
  61. package/docs/articles/full-abc-benchmark.md +205 -0
  62. package/docs/articles/per-repo-adaptive-scripts-token-savings.md +174 -0
  63. package/docs/articles/selective-spec-loading-token-savings.md +140 -0
  64. package/docs/claude-breakpoints.json +47 -0
  65. package/docs/design/abc-benchmark.md +195 -0
  66. package/docs/design/design-architect-rationale.md +123 -0
  67. package/docs/design/design-memory.md +61 -0
  68. package/docs/design/design-spec-schema.md +248 -0
  69. package/docs/design/design-system-lint.md +150 -0
  70. package/docs/design/divergent-generation.md +106 -0
  71. package/docs/design/effects-appropriateness.md +133 -0
  72. package/docs/design/fixtures/briefs/README.md +47 -0
  73. package/docs/design/fixtures/briefs/cadence.md +39 -0
  74. package/docs/design/fixtures/briefs/plume.md +39 -0
  75. package/docs/design/fixtures/briefs/slipstream.md +39 -0
  76. package/docs/design/fixtures/briefs/tender.md +39 -0
  77. package/docs/design/fixtures/briefs/voltage.md +39 -0
  78. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html +364 -0
  79. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-2.html +420 -0
  80. package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-3.html +506 -0
  81. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-1.html +611 -0
  82. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-2.html +594 -0
  83. package/docs/design/fixtures/runs/b-vs-c-baseline/plume/arm-b/run-3.html +817 -0
  84. package/docs/design/fixtures/runs/b-vs-c-baseline/runs.json +175 -0
  85. package/docs/design/fixtures/runs/b-vs-c-baseline/scorecard.json +138 -0
  86. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-1.html +373 -0
  87. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-2.html +398 -0
  88. package/docs/design/fixtures/runs/b-vs-c-baseline/slipstream/arm-b/run-3.html +595 -0
  89. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-1.html +531 -0
  90. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-2.html +565 -0
  91. package/docs/design/fixtures/runs/b-vs-c-baseline/tender/arm-b/run-3.html +674 -0
  92. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-1.html +388 -0
  93. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-2.html +463 -0
  94. package/docs/design/fixtures/runs/b-vs-c-baseline/voltage/arm-b/run-3.html +568 -0
  95. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html +562 -0
  96. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-2.html +618 -0
  97. package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-3.html +618 -0
  98. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-1.html +364 -0
  99. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-2.html +420 -0
  100. package/docs/design/fixtures/runs/full-abc/cadence/arm-b/run-3.html +506 -0
  101. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-1.html +527 -0
  102. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-2.html +445 -0
  103. package/docs/design/fixtures/runs/full-abc/plume/arm-a/run-3.html +483 -0
  104. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-1.html +611 -0
  105. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-2.html +594 -0
  106. package/docs/design/fixtures/runs/full-abc/plume/arm-b/run-3.html +817 -0
  107. package/docs/design/fixtures/runs/full-abc/runs.json +190 -0
  108. package/docs/design/fixtures/runs/full-abc/scorecard.json +144 -0
  109. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-1.html +496 -0
  110. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-2.html +447 -0
  111. package/docs/design/fixtures/runs/full-abc/slipstream/arm-a/run-3.html +564 -0
  112. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-1.html +373 -0
  113. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-2.html +398 -0
  114. package/docs/design/fixtures/runs/full-abc/slipstream/arm-b/run-3.html +595 -0
  115. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-1.html +622 -0
  116. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-2.html +475 -0
  117. package/docs/design/fixtures/runs/full-abc/tender/arm-a/run-3.html +660 -0
  118. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-1.html +531 -0
  119. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-2.html +565 -0
  120. package/docs/design/fixtures/runs/full-abc/tender/arm-b/run-3.html +674 -0
  121. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-1.html +525 -0
  122. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-2.html +446 -0
  123. package/docs/design/fixtures/runs/full-abc/voltage/arm-a/run-3.html +463 -0
  124. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-1.html +388 -0
  125. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-2.html +463 -0
  126. package/docs/design/fixtures/runs/full-abc/voltage/arm-b/run-3.html +568 -0
  127. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-1.html +1068 -0
  128. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-2.html +1423 -0
  129. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-a/run-3.html +1245 -0
  130. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-1.html +305 -0
  131. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-2.html +327 -0
  132. package/docs/design/fixtures/runs/full-abc-opus/cadence/arm-b/run-3.html +428 -0
  133. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-1.html +1270 -0
  134. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-2.html +1172 -0
  135. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-a/run-3.html +1532 -0
  136. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-1.html +315 -0
  137. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-2.html +342 -0
  138. package/docs/design/fixtures/runs/full-abc-opus/plume/arm-b/run-3.html +353 -0
  139. package/docs/design/fixtures/runs/full-abc-opus/runs.json +190 -0
  140. package/docs/design/fixtures/runs/full-abc-opus/scorecard.json +144 -0
  141. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-1.html +345 -0
  142. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-2.html +396 -0
  143. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-a/run-3.html +502 -0
  144. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-1.html +408 -0
  145. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-2.html +446 -0
  146. package/docs/design/fixtures/runs/full-abc-opus/slipstream/arm-b/run-3.html +496 -0
  147. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-1.html +813 -0
  148. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-2.html +711 -0
  149. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-a/run-3.html +721 -0
  150. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-1.html +280 -0
  151. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-2.html +291 -0
  152. package/docs/design/fixtures/runs/full-abc-opus/tender/arm-b/run-3.html +366 -0
  153. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-1.html +1010 -0
  154. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-2.html +836 -0
  155. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-a/run-3.html +930 -0
  156. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-1.html +407 -0
  157. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-2.html +396 -0
  158. package/docs/design/fixtures/runs/full-abc-opus/voltage/arm-b/run-3.html +529 -0
  159. package/docs/design/foundations/brutalist.css +294 -0
  160. package/docs/design/foundations/editorial.css +300 -0
  161. package/docs/design/foundations/minimal-luxury.css +295 -0
  162. package/docs/design/foundations/technical.css +293 -0
  163. package/docs/design/foundations/warm-photo.css +299 -0
  164. package/docs/design/reference-corpus.md +1726 -0
  165. package/docs/design/render-critique-loop.md +57 -0
  166. package/docs/site/getting-started.md +21 -0
  167. package/docs/spec-graph-schema.md +397 -0
  168. package/package.json +3 -3
  169. package/scripts/bench-scorecard.mjs +239 -0
  170. package/scripts/build-spec-graph.mjs +509 -0
  171. package/scripts/classify-lane.sh +138 -0
  172. package/scripts/design-system-lint.mjs +993 -0
  173. package/scripts/graph-query.sh +486 -0
  174. package/scripts/transition-label.sh +169 -0
  175. package/scripts/validate-pr-target.sh +30 -0
  176. package/scripts/validate-spec-graph.sh +423 -0
  177. package/templates/devdocs/README.md +72 -0
  178. package/templates/devdocs/agent/using-forgedock.md +3 -0
  179. package/templates/devdocs/agent/using-github.md +3 -0
  180. package/templates/devdocs/index.yaml +162 -0
  181. package/templates/devdocs/project/architecture.md +3 -0
  182. package/templates/devdocs/project/conventions.md +3 -0
  183. package/templates/devdocs/project/custom-instructions.md +3 -0
  184. package/templates/devdocs/project/glossary.md +3 -0
  185. package/templates/devdocs/project/stack.md +3 -0
  186. package/templates/devdocs/templates/commit-convention.md +3 -0
  187. package/templates/devdocs/templates/issue.md +3 -0
  188. package/templates/devdocs/templates/pull-request.md +3 -0
  189. package/templates/devdocs/templates/review-finding.md +3 -0
  190. package/templates/workflows/forgedock-review.yml +96 -0
package/docs/design/fixtures/runs/full-abc/cadence/arm-a/run-1.html ADDED
@@ -0,0 +1,562 @@
1
+ <!--
2
+ CADENCE — ARM A, RUN 1
3
+ ======================
4
+
5
+ ARCHETYPE: warm-photographic
6
+ Rationale: Cadence sits at the intersection of developer tooling and content teams —
7
+ the warm-photographic archetype earns its place by making the product feel approachable
8
+ to both audiences simultaneously. Engineers see capable tooling; marketers see a product
9
+ built for humans. The warmth fights the coldness that plagues most "API" landing pages
10
+ without sacrificing credibility. Think: Resend meets Linear's approachability.
11
+
12
+ SIGNATURE MOVE: "The Seam" — a full-bleed horizontal rule that separates the developer
13
+ half (dark, code-forward) from the content-team half (light, warm, editorial) of the
14
+ features section. The page physically demonstrates the product's dual audience by having
15
+ two visual registers that coexist without fighting each other.
16
+
17
+ EFFECTS PLAN:
18
+ - EARN: Subtle fade-up on section entry (Intersection Observer, 300ms, staggered).
19
+ Justified: confirms sequential reading order, not gratuitous animation.
20
+ - EARN: Code block cursor blink. Justified: it's a product detail (API key is real-shaped).
21
+ - EARN: Stat counter tick-up on scroll. Justified: makes deliverability numbers land harder.
22
+ - NEVER: Parallax, scroll-jacking, floating gradients, glassmorphism panels,
23
+ lottie blobs, any animation over 400ms, hover-scale on cards.
24
+
25
+ ANTI-SLOP CHECKS (all must be false to ship):
26
+ N1 Purple/blue gradient hero → NO (warm amber/cream + near-black)
27
+ N2 Inter at default weights everywhere → NO (Sora + DM Mono, weighted deliberately)
28
+ N3 Everything centered, no asymmetry → NO (hero is left-anchored, seam splits layout)
29
+ N4 Three identical feature icon cards → NO (feature section uses text-driven layout)
30
+ N5 One radius applied to everything → NO (code: 6px; cards: 0px; buttons: 4px)
31
+ N6 Default Tailwind palette as brand → NO (brand: #E8602C warm amber-orange)
32
+ N7 Boilerplate hero→3cards→test→CTA → NO (hero→code demo→dual-track→stats→CTA)
33
+ N8 Stock illustration / 3D blobs → NO (simulated terminal + inline UI mockup)
34
+ N9 Glassmorphism overuse → NO (zero glassmorphism)
35
+ N10 Equal visual weight / no hierarchy → NO (deliberate 5-level type scale)
36
+ N11 Abstract promises, no product shown → NO ("Send email in 4 lines of code" → shown)
37
+ N12 Decorative effects serving nothing → NO (every effect maps to a UX purpose)
38
+
39
+ SELF-CRITIQUE: The "seam" device is the differentiator — the page would read as generic
40
+ without it. The warm cream + charcoal palette is safe-but-correct for the audience.
41
+ The code block is the hero — it shows the product in the first 400px of scroll.
42
+ -->
43
+ <!DOCTYPE html>
44
+ <html lang="en">
45
+ <head>
46
+ <meta charset="UTF-8" />
47
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
48
+ <title>Cadence — Email API for developers and content teams</title>
49
+ <script src="https://cdn.tailwindcss.com"></script>
50
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
51
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
52
+ <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet" />
53
+ <script>
54
+ tailwind.config = {
55
+ theme: {
56
+ extend: {
57
+ fontFamily: {
58
+ sans: ['Sora', 'sans-serif'],
59
+ mono: ['DM Mono', 'monospace'],
60
+ },
61
+ colors: {
62
+ brand: {
63
+ 50: '#fff7f2',
64
+ 100: '#ffe8d9',
65
+ 200: '#ffc9a8',
66
+ 300: '#ffa070',
67
+ 400: '#f97038',
68
+ 500: '#E8602C',
69
+ 600: '#c74a1a',
70
+ 700: '#9f3612',
71
+ 800: '#7a260d',
72
+ 900: '#5c1b08',
73
+ },
74
+ ink: {
75
+ 900: '#141210',
76
+ 800: '#1f1c19',
77
+ 700: '#2e2a25',
78
+ 600: '#3d3830',
79
+ 500: '#5c554c',
80
+ 400: '#7d766d',
81
+ 300: '#a39d96',
82
+ 200: '#c9c4be',
83
+ 100: '#e8e4de',
84
+ 50: '#f5f2ee',
85
+ },
86
+ cream: '#FAF7F2',
87
+ },
88
+ fontSize: {
89
+ '2xs': ['0.65rem', { lineHeight: '1rem' }],
90
+ }
91
+ }
92
+ }
93
+ }
94
+ </script>
95
+ <style>
96
+ * { box-sizing: border-box; }
97
+ html { scroll-behavior: smooth; }
98
+ body { background-color: #FAF7F2; color: #141210; }
99
+
100
+ /* Cursor blink in code block */
101
+ .cursor-blink {
102
+ display: inline-block;
103
+ width: 2px;
104
+ height: 1.1em;
105
+ background: #E8602C;
106
+ vertical-align: text-bottom;
107
+ animation: blink 1.1s step-end infinite;
108
+ }
109
+ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
110
+
111
+ /* Fade-up reveal */
112
+ .reveal {
113
+ opacity: 0;
114
+ transform: translateY(18px);
115
+ transition: opacity 0.38s ease, transform 0.38s ease;
116
+ }
117
+ .reveal.visible {
118
+ opacity: 1;
119
+ transform: translateY(0);
120
+ }
121
+
122
+ /* Stat counter */
123
+ .stat-num { font-variant-numeric: tabular-nums; }
124
+
125
+ /* The Seam */
126
+ .the-seam {
127
+ width: 100%;
128
+ height: 1px;
129
+ background: linear-gradient(90deg, transparent 0%, #141210 20%, #141210 80%, transparent 100%);
130
+ opacity: 0.15;
131
+ }
132
+
133
+ /* Code syntax colors */
134
+ .tok-keyword { color: #E8602C; }
135
+ .tok-string { color: #c8a96e; }
136
+ .tok-const { color: #94c7b0; }
137
+ .tok-comment { color: #5c554c; font-style: italic; }
138
+ .tok-fn { color: #d4a8f0; }
139
+ .tok-num { color: #94c7b0; }
140
+
141
+ /* Nav underline */
142
+ .nav-link {
143
+ position: relative;
144
+ padding-bottom: 2px;
145
+ }
146
+ .nav-link::after {
147
+ content: '';
148
+ position: absolute;
149
+ bottom: 0; left: 0;
150
+ width: 0; height: 1px;
151
+ background: #E8602C;
152
+ transition: width 0.2s ease;
153
+ }
154
+ .nav-link:hover::after { width: 100%; }
155
+
156
+ /* Section label */
157
+ .section-label {
158
+ font-size: 0.65rem;
159
+ letter-spacing: 0.15em;
160
+ text-transform: uppercase;
161
+ font-weight: 600;
162
+ color: #E8602C;
163
+ }
164
+
165
+ /* Dual track card */
166
+ .track-card {
167
+ border: 1px solid rgba(20,18,16,0.1);
168
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
169
+ }
170
+ .track-card:hover {
171
+ border-color: rgba(232,96,44,0.35);
172
+ box-shadow: 0 4px 24px rgba(232,96,44,0.06);
173
+ }
174
+ </style>
175
+ </head>
176
+ <body class="font-sans antialiased">
177
+
178
+ <!-- NAV -->
179
+ <header class="fixed top-0 left-0 right-0 z-50 border-b border-ink-900/10 bg-cream/90 backdrop-blur-sm">
180
+ <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
181
+ <div class="flex items-center gap-8">
182
+ <a href="#" class="flex items-center gap-2">
183
+ <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
184
+ <rect x="1" y="1" width="9" height="9" rx="1.5" fill="#E8602C"/>
185
+ <rect x="12" y="1" width="9" height="9" rx="1.5" fill="#E8602C" opacity="0.35"/>
186
+ <rect x="1" y="12" width="9" height="9" rx="1.5" fill="#E8602C" opacity="0.35"/>
187
+ <rect x="12" y="12" width="9" height="9" rx="1.5" fill="#141210"/>
188
+ </svg>
189
+ <span class="font-semibold text-[15px] tracking-tight text-ink-900">Cadence</span>
190
+ </a>
191
+ <nav class="hidden md:flex items-center gap-6">
192
+ <a href="#" class="nav-link text-[13px] text-ink-600 font-medium">Docs</a>
193
+ <a href="#" class="nav-link text-[13px] text-ink-600 font-medium">Pricing</a>
194
+ <a href="#" class="nav-link text-[13px] text-ink-600 font-medium">Changelog</a>
195
+ <a href="#" class="nav-link text-[13px] text-ink-600 font-medium">Blog</a>
196
+ </nav>
197
+ </div>
198
+ <div class="flex items-center gap-3">
199
+ <a href="#" class="text-[13px] text-ink-600 font-medium hidden sm:block">Sign in</a>
200
+ <a href="#" class="px-4 py-1.5 bg-ink-900 text-cream text-[13px] font-medium rounded-[4px] hover:bg-ink-700 transition-colors">Get started</a>
201
+ </div>
202
+ </div>
203
+ </header>
204
+
205
+ <!-- HERO -->
206
+ <section class="pt-36 pb-20 px-6 max-w-6xl mx-auto">
207
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
208
+ <!-- Left: Copy -->
209
+ <div class="reveal">
210
+ <div class="section-label mb-5">Email infrastructure</div>
211
+ <h1 class="text-[3.25rem] font-bold leading-[1.1] tracking-[-0.03em] text-ink-900 mb-6">
212
+ Send email<br/>from your app.<br/>
213
+ <span class="text-brand-500">Four lines of code.</span>
214
+ </h1>
215
+ <p class="text-[1.05rem] text-ink-500 leading-relaxed max-w-[420px] mb-8">
216
+ A REST API and SDKs that handle deliverability, templating, and analytics.
217
+ Your engineers ship it in an afternoon. Your content team manages it without
218
+ touching the codebase.
219
+ </p>
220
+ <div class="flex flex-wrap items-center gap-3 mb-10">
221
+ <a href="#" class="px-5 py-2.5 bg-brand-500 text-white text-[14px] font-semibold rounded-[4px] hover:bg-brand-600 transition-colors">
222
+ Get your API key
223
+ </a>
224
+ <a href="#" class="px-5 py-2.5 border border-ink-900/15 text-ink-700 text-[14px] font-medium rounded-[4px] hover:border-ink-900/30 transition-colors">
225
+ Read the docs →
226
+ </a>
227
+ </div>
228
+ <!-- Social proof strip -->
229
+ <div class="flex items-center gap-4">
230
+ <div class="flex -space-x-2">
231
+ <div class="w-7 h-7 rounded-full bg-brand-200 border-2 border-cream flex items-center justify-center text-2xs font-semibold text-brand-700">MK</div>
232
+ <div class="w-7 h-7 rounded-full bg-ink-200 border-2 border-cream flex items-center justify-center text-2xs font-semibold text-ink-600">SR</div>
233
+ <div class="w-7 h-7 rounded-full bg-brand-100 border-2 border-cream flex items-center justify-center text-2xs font-semibold text-brand-600">TL</div>
234
+ <div class="w-7 h-7 rounded-full bg-ink-700 border-2 border-cream flex items-center justify-center text-2xs font-semibold text-cream">AD</div>
235
+ </div>
236
+ <p class="text-[13px] text-ink-400">
237
+ Trusted by <span class="text-ink-700 font-medium">4,200+</span> engineering teams
238
+ </p>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Right: Code block -->
243
+ <div class="reveal" style="transition-delay:0.1s">
244
+ <div class="bg-ink-900 rounded-[6px] overflow-hidden shadow-2xl shadow-ink-900/20">
245
+ <!-- Window chrome -->
246
+ <div class="flex items-center gap-1.5 px-4 py-3 border-b border-white/5">
247
+ <div class="w-3 h-3 rounded-full bg-red-400/70"></div>
248
+ <div class="w-3 h-3 rounded-full bg-yellow-400/70"></div>
249
+ <div class="w-3 h-3 rounded-full bg-green-400/70"></div>
250
+ <span class="ml-3 font-mono text-[11px] text-ink-400">send-welcome.ts</span>
251
+ </div>
252
+ <!-- Code -->
253
+ <div class="px-5 py-5 font-mono text-[13px] leading-7">
254
+ <div><span class="tok-keyword">import</span> <span class="tok-const">Cadence</span> <span class="tok-keyword">from</span> <span class="tok-string">'@cadence/sdk'</span><span class="text-ink-400">;</span></div>
255
+ <div class="h-[1.75rem]"></div>
256
+ <div><span class="tok-keyword">const</span> <span class="tok-const">cadence</span> = <span class="tok-keyword">new</span> <span class="tok-fn">Cadence</span><span class="text-ink-400">(</span></div>
257
+ <div class="pl-4"><span class="tok-string">'ck_live_a8f2bc9d3e1047a6b5c8'</span></div>
258
+ <div><span class="text-ink-400">);</span></div>
259
+ <div class="h-[1.75rem]"></div>
260
+ <div><span class="tok-keyword">await</span> cadence.emails.<span class="tok-fn">send</span><span class="text-ink-400">({'{'}</span></div>
261
+ <div class="pl-4"><span class="tok-const">from</span><span class="text-ink-400">:</span> <span class="tok-string">'onboarding@acme.com'</span><span class="text-ink-400">,</span></div>
262
+ <div class="pl-4"><span class="tok-const">to</span><span class="text-ink-400">:</span> <span class="tok-string">'new-user@example.com'</span><span class="text-ink-400">,</span></div>
263
+ <div class="pl-4"><span class="tok-const">template</span><span class="text-ink-400">:</span> <span class="tok-string">'welcome-v3'</span><span class="text-ink-400">,</span></div>
264
+ <div class="pl-4"><span class="tok-const">data</span><span class="text-ink-400">:</span> <span class="text-ink-400">{'{'}</span> <span class="tok-const">firstName</span><span class="text-ink-400">:</span> <span class="tok-string">'Jordan'</span> <span class="text-ink-400">{'}'}</span></div>
265
+ <div><span class="text-ink-400">});</span></div>
266
+ <div class="h-[1.75rem]"></div>
267
+ <div><span class="tok-comment">// → 200 OK messageId: "msg_01hx..."</span> <span class="cursor-blink"></span></div>
268
+ </div>
269
+ <!-- Response strip -->
270
+ <div class="border-t border-white/5 px-5 py-3 flex items-center gap-3">
271
+ <span class="inline-flex items-center gap-1.5 text-[11px] font-mono">
272
+ <span class="w-1.5 h-1.5 rounded-full bg-green-400"></span>
273
+ <span class="text-green-400 font-medium">delivered</span>
274
+ </span>
275
+ <span class="text-ink-500 text-[11px] font-mono">· 94ms</span>
276
+ <span class="ml-auto text-ink-500 text-[11px] font-mono">inbox rate 99.1%</span>
277
+ </div>
278
+ </div>
279
+ <!-- SDK badges -->
280
+ <div class="mt-4 flex flex-wrap gap-2">
281
+ {['TypeScript', 'Python', 'Go', 'Ruby', 'PHP', 'REST'].map ? null : null}
282
+ <span class="px-2.5 py-1 bg-ink-900/6 border border-ink-900/8 rounded-[3px] text-[11px] font-mono text-ink-500">TypeScript</span>
283
+ <span class="px-2.5 py-1 bg-ink-900/6 border border-ink-900/8 rounded-[3px] text-[11px] font-mono text-ink-500">Python</span>
284
+ <span class="px-2.5 py-1 bg-ink-900/6 border border-ink-900/8 rounded-[3px] text-[11px] font-mono text-ink-500">Go</span>
285
+ <span class="px-2.5 py-1 bg-ink-900/6 border border-ink-900/8 rounded-[3px] text-[11px] font-mono text-ink-500">Ruby</span>
286
+ <span class="px-2.5 py-1 bg-ink-900/6 border border-ink-900/8 rounded-[3px] text-[11px] font-mono text-ink-500">PHP</span>
287
+ <span class="px-2.5 py-1 bg-ink-900/6 border border-ink-900/8 rounded-[3px] text-[11px] font-mono text-ink-500">REST</span>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- STATS BAR -->
294
+ <div class="border-y border-ink-900/8 bg-ink-900 text-cream">
295
+ <div class="max-w-6xl mx-auto px-6 py-8 grid grid-cols-2 md:grid-cols-4 gap-8">
296
+ <div class="reveal">
297
+ <div class="stat-num text-[2.25rem] font-bold tracking-tight text-white" data-target="99.4">99.4<span class="text-brand-400">%</span></div>
298
+ <div class="text-[13px] text-ink-300 mt-1">Average inbox rate</div>
299
+ </div>
300
+ <div class="reveal" style="transition-delay:0.05s">
301
+ <div class="stat-num text-[2.25rem] font-bold tracking-tight text-white">4.2<span class="text-brand-400">B</span></div>
302
+ <div class="text-[13px] text-ink-300 mt-1">Emails sent monthly</div>
303
+ </div>
304
+ <div class="reveal" style="transition-delay:0.1s">
305
+ <div class="stat-num text-[2.25rem] font-bold tracking-tight text-white">&lt;80<span class="text-brand-400">ms</span></div>
306
+ <div class="text-[13px] text-ink-300 mt-1">Median send latency</div>
307
+ </div>
308
+ <div class="reveal" style="transition-delay:0.15s">
309
+ <div class="stat-num text-[2.25rem] font-bold tracking-tight text-white">99.99<span class="text-brand-400">%</span></div>
310
+ <div class="text-[13px] text-ink-300 mt-1">API uptime SLA</div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- DUAL-TRACK SECTION (The Seam) -->
316
+ <section class="py-24 px-6">
317
+ <div class="max-w-6xl mx-auto">
318
+ <div class="reveal mb-16">
319
+ <div class="section-label mb-3">Built for both sides of your team</div>
320
+ <h2 class="text-[2.25rem] font-bold tracking-[-0.025em] text-ink-900 max-w-lg">
321
+ Engineers ship it.<br/>Content teams own it.
322
+ </h2>
323
+ </div>
324
+
325
+ <!-- Top: Developer track (dark) -->
326
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-px">
327
+ <div class="track-card bg-ink-900 text-cream p-8 reveal">
328
+ <div class="section-label mb-4" style="color:#E8602C">For engineers</div>
329
+ <h3 class="text-[1.4rem] font-semibold mb-3 text-white leading-snug">
330
+ A REST API you can integrate before lunch
331
+ </h3>
332
+ <p class="text-[14px] text-ink-300 leading-relaxed mb-6">
333
+ Typed SDKs for TypeScript, Python, Go, Ruby, and PHP. Webhooks for
334
+ delivery events. A testing mode that catches template errors before
335
+ they reach your users.
336
+ </p>
337
+ <ul class="space-y-2.5">
338
+ <li class="flex items-start gap-2.5 text-[13px] text-ink-300">
339
+ <span class="mt-0.5 w-4 h-4 rounded-full bg-brand-500/20 border border-brand-500/40 flex items-center justify-center flex-shrink-0">
340
+ <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4L3 5.5L6.5 2" stroke="#E8602C" stroke-width="1.5" stroke-linecap="round"/></svg>
341
+ </span>
342
+ Idempotency keys — duplicate-safe sends
343
+ </li>
344
+ <li class="flex items-start gap-2.5 text-[13px] text-ink-300">
345
+ <span class="mt-0.5 w-4 h-4 rounded-full bg-brand-500/20 border border-brand-500/40 flex items-center justify-center flex-shrink-0">
346
+ <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4L3 5.5L6.5 2" stroke="#E8602C" stroke-width="1.5" stroke-linecap="round"/></svg>
347
+ </span>
348
+ React Email components — version-controlled templates
349
+ </li>
350
+ <li class="flex items-start gap-2.5 text-[13px] text-ink-300">
351
+ <span class="mt-0.5 w-4 h-4 rounded-full bg-brand-500/20 border border-brand-500/40 flex items-center justify-center flex-shrink-0">
352
+ <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4L3 5.5L6.5 2" stroke="#E8602C" stroke-width="1.5" stroke-linecap="round"/></svg>
353
+ </span>
354
+ Webhook delivery events with signature verification
355
+ </li>
356
+ <li class="flex items-start gap-2.5 text-[13px] text-ink-300">
357
+ <span class="mt-0.5 w-4 h-4 rounded-full bg-brand-500/20 border border-brand-500/40 flex items-center justify-center flex-shrink-0">
358
+ <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4L3 5.5L6.5 2" stroke="#E8602C" stroke-width="1.5" stroke-linecap="round"/></svg>
359
+ </span>
360
+ Test mode — preview any template without sending
361
+ </li>
362
+ </ul>
363
+ </div>
364
+ <div class="track-card bg-ink-800 text-cream p-8 flex flex-col justify-between reveal" style="transition-delay:0.08s">
365
+ <div>
366
+ <div class="section-label mb-4" style="color:#c8a96e">Deliverability</div>
367
+ <h3 class="text-[1.4rem] font-semibold mb-3 text-white leading-snug">
368
+ Inbox placement — not just delivery
369
+ </h3>
370
+ <p class="text-[14px] text-ink-300 leading-relaxed mb-6">
371
+ SPF, DKIM, and DMARC configured automatically per sending domain.
372
+ Reputation monitoring alerts you before a spike becomes a block.
373
+ </p>
374
+ </div>
375
+ <!-- Mini reputation UI mockup -->
376
+ <div class="bg-ink-900 rounded-[4px] p-4 border border-white/5">
377
+ <div class="text-[11px] font-mono text-ink-400 mb-3">Domain reputation · acme.com</div>
378
+ <div class="space-y-2">
379
+ <div class="flex items-center gap-3">
380
+ <span class="text-[11px] font-mono text-ink-400 w-12">Gmail</span>
381
+ <div class="flex-1 bg-ink-700 rounded-full h-1.5">
382
+ <div class="bg-green-400 h-1.5 rounded-full" style="width:97%"></div>
383
+ </div>
384
+ <span class="text-[11px] font-mono text-green-400">97%</span>
385
+ </div>
386
+ <div class="flex items-center gap-3">
387
+ <span class="text-[11px] font-mono text-ink-400 w-12">Outlook</span>
388
+ <div class="flex-1 bg-ink-700 rounded-full h-1.5">
389
+ <div class="bg-green-400 h-1.5 rounded-full" style="width:94%"></div>
390
+ </div>
391
+ <span class="text-[11px] font-mono text-green-400">94%</span>
392
+ </div>
393
+ <div class="flex items-center gap-3">
394
+ <span class="text-[11px] font-mono text-ink-400 w-12">Yahoo</span>
395
+ <div class="flex-1 bg-ink-700 rounded-full h-1.5">
396
+ <div class="bg-green-400 h-1.5 rounded-full" style="width:98%"></div>
397
+ </div>
398
+ <span class="text-[11px] font-mono text-green-400">98%</span>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- The Seam -->
406
+ <div class="the-seam my-px"></div>
407
+
408
+ <!-- Bottom: Content team track (light) -->
409
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-px">
410
+ <div class="track-card bg-white p-8 reveal" style="transition-delay:0.04s">
411
+ <div class="section-label mb-4">For content teams</div>
412
+ <h3 class="text-[1.4rem] font-semibold mb-3 text-ink-900 leading-snug">
413
+ Write, schedule, and A/B test — no pull requests
414
+ </h3>
415
+ <p class="text-[14px] text-ink-500 leading-relaxed mb-6">
416
+ A visual editor lets your team manage email copy, subject lines,
417
+ and send schedules without touching the codebase or filing a ticket.
418
+ </p>
419
+ <!-- Editor mockup -->
420
+ <div class="border border-ink-900/10 rounded-[4px] overflow-hidden">
421
+ <div class="bg-ink-50 border-b border-ink-900/8 px-4 py-2.5 flex items-center gap-2">
422
+ <span class="text-[11px] font-medium text-ink-600">Template editor</span>
423
+ <span class="ml-auto text-[11px] text-brand-500 font-medium">welcome-v3 · draft</span>
424
+ </div>
425
+ <div class="p-4">
426
+ <div class="mb-3">
427
+ <div class="text-[10px] text-ink-400 mb-1 font-medium uppercase tracking-wide">Subject line</div>
428
+ <div class="bg-ink-50 border border-ink-200 rounded-[3px] px-3 py-1.5 text-[12px] text-ink-700 font-mono">Welcome to Acme, {'{{firstName}}'}!</div>
429
+ </div>
430
+ <div>
431
+ <div class="text-[10px] text-ink-400 mb-1 font-medium uppercase tracking-wide">Body preview</div>
432
+ <div class="bg-ink-50 border border-ink-200 rounded-[3px] px-3 py-2 text-[11px] text-ink-600 leading-relaxed">
433
+ Hi {'{{firstName}}'}, thanks for joining...<br/>
434
+ <span class="text-brand-500 cursor-pointer">Your account is ready →</span>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ <div class="track-card bg-white p-8 reveal" style="transition-delay:0.12s">
441
+ <div class="section-label mb-4">Analytics</div>
442
+ <h3 class="text-[1.4rem] font-semibold mb-3 text-ink-900 leading-snug">
443
+ Open rates, clicks, unsubscribes — per template
444
+ </h3>
445
+ <p class="text-[14px] text-ink-500 leading-relaxed mb-6">
446
+ Per-template dashboards show what's working. Export to your data
447
+ warehouse when you outgrow the built-in views.
448
+ </p>
449
+ <!-- Analytics mockup -->
450
+ <div class="space-y-3">
451
+ <div class="flex items-center justify-between py-2 border-b border-ink-100">
452
+ <span class="text-[12px] text-ink-600">welcome-v3</span>
453
+ <div class="flex items-center gap-4">
454
+ <span class="text-[12px] text-ink-400">Opens <span class="text-ink-700 font-medium">61%</span></span>
455
+ <span class="text-[12px] text-ink-400">Clicks <span class="text-ink-700 font-medium">24%</span></span>
456
+ </div>
457
+ </div>
458
+ <div class="flex items-center justify-between py-2 border-b border-ink-100">
459
+ <span class="text-[12px] text-ink-600">password-reset</span>
460
+ <div class="flex items-center gap-4">
461
+ <span class="text-[12px] text-ink-400">Opens <span class="text-ink-700 font-medium">88%</span></span>
462
+ <span class="text-[12px] text-ink-400">Clicks <span class="text-ink-700 font-medium">73%</span></span>
463
+ </div>
464
+ </div>
465
+ <div class="flex items-center justify-between py-2">
466
+ <span class="text-[12px] text-ink-600">monthly-digest</span>
467
+ <div class="flex items-center gap-4">
468
+ <span class="text-[12px] text-ink-400">Opens <span class="text-ink-700 font-medium">44%</span></span>
469
+ <span class="text-[12px] text-ink-400">Clicks <span class="text-ink-700 font-medium">18%</span></span>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </section>
477
+
478
+ <!-- TESTIMONIAL — single, weighted -->
479
+ <section class="py-16 px-6 border-t border-ink-900/8">
480
+ <div class="max-w-3xl mx-auto reveal">
481
+ <blockquote class="text-[1.4rem] font-light text-ink-800 leading-relaxed tracking-[-0.01em] mb-6">
482
+ "We migrated from SendGrid in a Friday afternoon. The TypeScript SDK is genuinely
483
+ good — it surfaces errors before they hit production. Our marketing team hasn't
484
+ filed a single ticket about emails since."
485
+ </blockquote>
486
+ <div class="flex items-center gap-3">
487
+ <div class="w-9 h-9 rounded-full bg-brand-100 flex items-center justify-center text-[13px] font-semibold text-brand-700">SR</div>
488
+ <div>
489
+ <div class="text-[13px] font-semibold text-ink-800">Sofia Reyes</div>
490
+ <div class="text-[12px] text-ink-400">Staff Engineer · Notion</div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <!-- CTA -->
497
+ <section class="py-24 px-6 bg-ink-900">
498
+ <div class="max-w-2xl mx-auto text-center reveal">
499
+ <div class="section-label mb-5" style="color:#E8602C">Get started today</div>
500
+ <h2 class="text-[2.5rem] font-bold tracking-[-0.03em] text-white mb-4 leading-tight">
501
+ Your first 10,000 emails are free
502
+ </h2>
503
+ <p class="text-[1rem] text-ink-300 mb-8 leading-relaxed">
504
+ No credit card required. API key in seconds.
505
+ Scale when you're ready.
506
+ </p>
507
+ <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
508
+ <a href="#" class="w-full sm:w-auto px-7 py-3 bg-brand-500 text-white text-[15px] font-semibold rounded-[4px] hover:bg-brand-400 transition-colors">
509
+ Get your API key
510
+ </a>
511
+ <a href="#" class="w-full sm:w-auto px-7 py-3 border border-white/15 text-ink-200 text-[15px] font-medium rounded-[4px] hover:border-white/30 transition-colors">
512
+ Read the docs
513
+ </a>
514
+ </div>
515
+ <div class="mt-8 font-mono text-[12px] text-ink-500">
516
+ npm install @cadence/sdk
517
+ </div>
518
+ </div>
519
+ </section>
520
+
521
+ <!-- FOOTER -->
522
+ <footer class="bg-ink-900 border-t border-white/5 px-6 py-8">
523
+ <div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
524
+ <div class="flex items-center gap-2">
525
+ <svg width="18" height="18" viewBox="0 0 22 22" fill="none">
526
+ <rect x="1" y="1" width="9" height="9" rx="1.5" fill="#E8602C"/>
527
+ <rect x="12" y="1" width="9" height="9" rx="1.5" fill="#E8602C" opacity="0.35"/>
528
+ <rect x="1" y="12" width="9" height="9" rx="1.5" fill="#E8602C" opacity="0.35"/>
529
+ <rect x="12" y="12" width="9" height="9" rx="1.5" fill="#141210"/>
530
+ </svg>
531
+ <span class="text-[13px] text-ink-400 font-medium">Cadence</span>
532
+ </div>
533
+ <div class="flex items-center gap-6 text-[12px] text-ink-500">
534
+ <a href="#" class="hover:text-ink-300 transition-colors">Privacy</a>
535
+ <a href="#" class="hover:text-ink-300 transition-colors">Terms</a>
536
+ <a href="#" class="hover:text-ink-300 transition-colors">Status</a>
537
+ <a href="#" class="hover:text-ink-300 transition-colors">GitHub</a>
538
+ </div>
539
+ </div>
540
+ </footer>
541
+
542
+ <script>
543
+ // Reveal on scroll
544
+ const observer = new IntersectionObserver((entries) => {
545
+ entries.forEach(entry => {
546
+ if (entry.isIntersecting) {
547
+ entry.target.classList.add('visible');
548
+ observer.unobserve(entry.target);
549
+ }
550
+ });
551
+ }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
552
+
553
+ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
554
+
555
+ // Trigger visible for above-fold elements
556
+ document.querySelectorAll('.reveal').forEach(el => {
557
+ const rect = el.getBoundingClientRect();
558
+ if (rect.top < window.innerHeight) el.classList.add('visible');
559
+ });
560
+ </script>
561
+ </body>
562
+ </html>