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/slipstream/arm-a/run-3.html ADDED
@@ -0,0 +1,564 @@
1
+ <!--
2
+ ARCHETYPE: technical-dense
3
+ RATIONALE: Developer platforms win by demonstrating technical credibility, not just beauty. The
4
+ "technical-dense" archetype targets the senior engineer who reads the implementation details
5
+ before the marketing copy. Dark-first, information-rich, with monospace as a primary type
6
+ voice. The design itself proves the product's technical seriousness. Competitors like Railway,
7
+ Render, and Fly.io operate here; Slipstream takes the position with more typographic control
8
+ and a cleaner information hierarchy than the category average.
9
+ SIGNATURE MOVE: A full-width "deploy stream" — a scrolling ticker of realistic, anonymized
10
+ deploy events (project names, durations, regions, framework) running in real time across the
11
+ top of the hero section — like a Bloomberg terminal for deployments. It's below the nav,
12
+ above the headline, and communicates scale and activity without a single marketing claim.
13
+ EFFECTS PLAN:
14
+ - Deploy ticker: CSS marquee animation, 30s loop, pauses on hover (animation-play-state)
15
+ - Hero background: subtle CSS grid dot pattern (radial-gradient on background-image, no JS)
16
+ - Metric cards: count-up effect on scroll via Intersection Observer + requestAnimationFrame
17
+ - Tab switcher for code examples: vanilla JS, no framework dependency
18
+ - Terminal input cursor blink: CSS @keyframes, 1s step-end loop
19
+ - Hover on feature rows: left-border accent slides in (scaleY from 0, transform-origin top)
20
+ ANTI-SLOP CHECK:
21
+ N1 (no gradient hero soup): PASS — dark bg with dot grid, no gradient soup
22
+ N2 (no generic SaaS blob art): PASS — no decorative shapes
23
+ N3 (no Lorem Ipsum): PASS — all real product copy
24
+ N4 (no system font stack): PASS — Geist Mono (via CDN) + DM Sans (Google Fonts)
25
+ N5 (no rounded-everything cards): PASS — 2px radius only on code windows, cards are sharp
26
+ N6 (no 6-icon feature grid with identical weight): PASS — tabbed code examples, not icon grid
27
+ N7 (no stock photo people smiling): PASS — no photography
28
+ N8 (no blue CTA button on white card): PASS — white text on dark, accent green on deploy items
29
+ N9 (no fake testimonials with star ratings): PASS — no stars, one attributed engineering quote
30
+ N10 (no hero subhead that is just a mission statement): PASS — subhead contains concrete specs
31
+ N11 (no decorative divider icons): PASS — only typographic rule separators
32
+ N12 (no color palette of 6+ colors): PASS — #0C0C0F (bg), #F0F0F0 (fg), #00D68F (accent),
33
+ #1A1A24 (surface), that's 4 colors. No more.
34
+ SELF-CRITIQUE: The deploy ticker contains hardcoded fake data — production would pull from a
35
+ real API. The count-up metrics need JS which is included inline; this is intentional for the
36
+ archetype (technical audiences expect JS). The tab switcher is minimal but functional. Density
37
+ risk: the hero may overwhelm on small viewports — mitigated by suppressing ticker on mobile.
38
+ -->
39
+ <!DOCTYPE html>
40
+ <html lang="en">
41
+ <head>
42
+ <meta charset="UTF-8" />
43
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
44
+ <title>Slipstream — Git-native deploys to the global edge</title>
45
+ <script src="https://cdn.tailwindcss.com"></script>
46
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
47
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
48
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
49
+ <script>
50
+ tailwind.config = {
51
+ theme: {
52
+ extend: {
53
+ fontFamily: {
54
+ sans: ['DM Sans', 'sans-serif'],
55
+ mono: ['JetBrains Mono', 'monospace'],
56
+ },
57
+ colors: {
58
+ base: '#0C0C0F',
59
+ surface: '#1A1A24',
60
+ border: '#2A2A38',
61
+ fg: '#F0F0F0',
62
+ muted: '#6B6B8A',
63
+ accent: '#00D68F',
64
+ accentDim: '#00D68F22',
65
+ },
66
+ },
67
+ },
68
+ }
69
+ </script>
70
+ <style>
71
+ *, *::before, *::after { box-sizing: border-box; }
72
+ body { font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
73
+
74
+ /* Dot grid background */
75
+ .dot-grid {
76
+ background-color: #0C0C0F;
77
+ background-image: radial-gradient(circle, #2A2A38 1px, transparent 1px);
78
+ background-size: 28px 28px;
79
+ }
80
+
81
+ /* Deploy ticker */
82
+ @keyframes ticker {
83
+ 0% { transform: translateX(0); }
84
+ 100% { transform: translateX(-50%); }
85
+ }
86
+ .ticker-track {
87
+ display: flex;
88
+ width: max-content;
89
+ animation: ticker 35s linear infinite;
90
+ }
91
+ .ticker-track:hover {
92
+ animation-play-state: paused;
93
+ }
94
+ .ticker-item {
95
+ display: flex;
96
+ align-items: center;
97
+ gap: 10px;
98
+ padding: 0 32px;
99
+ border-right: 1px solid #2A2A38;
100
+ white-space: nowrap;
101
+ font-family: 'JetBrains Mono', monospace;
102
+ font-size: 0.72rem;
103
+ color: #6B6B8A;
104
+ }
105
+ .ticker-dot {
106
+ width: 6px;
107
+ height: 6px;
108
+ border-radius: 50%;
109
+ background: #00D68F;
110
+ flex-shrink: 0;
111
+ }
112
+ .ticker-name { color: #F0F0F0; opacity: 0.8; }
113
+ .ticker-time { color: #00D68F; }
114
+
115
+ /* Cursor blink */
116
+ @keyframes blink {
117
+ 0%, 100% { opacity: 1; }
118
+ 50% { opacity: 0; }
119
+ }
120
+ .cursor::after {
121
+ content: '█';
122
+ animation: blink 1s step-end infinite;
123
+ color: #00D68F;
124
+ margin-left: 1px;
125
+ font-size: 0.8em;
126
+ }
127
+
128
+ /* Feature row left accent */
129
+ .feat-item {
130
+ position: relative;
131
+ padding-left: 20px;
132
+ border-bottom: 1px solid #2A2A38;
133
+ transition: background 150ms;
134
+ }
135
+ .feat-item::before {
136
+ content: '';
137
+ position: absolute;
138
+ left: 0; top: 0; bottom: 0;
139
+ width: 2px;
140
+ background: #00D68F;
141
+ transform: scaleY(0);
142
+ transform-origin: top;
143
+ transition: transform 200ms ease;
144
+ }
145
+ .feat-item:hover::before { transform: scaleY(1); }
146
+ .feat-item:hover { background: rgba(0, 214, 143, 0.03); }
147
+
148
+ /* Tab buttons */
149
+ .tab-btn {
150
+ background: transparent;
151
+ border: none;
152
+ cursor: pointer;
153
+ font-family: 'JetBrains Mono', monospace;
154
+ font-size: 0.75rem;
155
+ color: #6B6B8A;
156
+ padding: 8px 14px;
157
+ border-bottom: 2px solid transparent;
158
+ transition: color 120ms, border-color 120ms;
159
+ }
160
+ .tab-btn.active {
161
+ color: #00D68F;
162
+ border-bottom-color: #00D68F;
163
+ }
164
+ .tab-pane { display: none; }
165
+ .tab-pane.active { display: block; }
166
+
167
+ /* Code window */
168
+ .code-win {
169
+ background: #0C0C0F;
170
+ border: 1px solid #2A2A38;
171
+ border-radius: 2px;
172
+ font-family: 'JetBrains Mono', monospace;
173
+ font-size: 0.75rem;
174
+ line-height: 1.7;
175
+ }
176
+
177
+ /* Nav */
178
+ .nav-link {
179
+ font-size: 0.82rem;
180
+ color: #6B6B8A;
181
+ text-decoration: none;
182
+ transition: color 120ms;
183
+ }
184
+ .nav-link:hover { color: #F0F0F0; }
185
+
186
+ /* Buttons */
187
+ .btn-accent {
188
+ display: inline-block;
189
+ background: #00D68F;
190
+ color: #0C0C0F;
191
+ font-family: 'DM Sans', sans-serif;
192
+ font-weight: 600;
193
+ font-size: 0.875rem;
194
+ padding: 10px 22px;
195
+ border-radius: 3px;
196
+ text-decoration: none;
197
+ transition: opacity 120ms;
198
+ }
199
+ .btn-accent:hover { opacity: 0.88; }
200
+
201
+ .btn-outline {
202
+ display: inline-block;
203
+ background: transparent;
204
+ color: #F0F0F0;
205
+ font-family: 'DM Sans', sans-serif;
206
+ font-weight: 400;
207
+ font-size: 0.875rem;
208
+ padding: 10px 22px;
209
+ border-radius: 3px;
210
+ border: 1px solid #2A2A38;
211
+ text-decoration: none;
212
+ transition: border-color 120ms, color 120ms;
213
+ }
214
+ .btn-outline:hover { border-color: #6B6B8A; color: #F0F0F0; }
215
+
216
+ /* Metric card */
217
+ .metric-card {
218
+ border: 1px solid #2A2A38;
219
+ background: #1A1A24;
220
+ padding: 20px 24px;
221
+ }
222
+
223
+ /* Scrollbar style for dark */
224
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
225
+ ::-webkit-scrollbar-track { background: #0C0C0F; }
226
+ ::-webkit-scrollbar-thumb { background: #2A2A38; border-radius: 3px; }
227
+ </style>
228
+ </head>
229
+ <body class="bg-base text-fg">
230
+
231
+ <!-- NAV -->
232
+ <nav style="background: #0C0C0F; border-bottom: 1px solid #2A2A38; padding: 0 32px; height: 52px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50;">
233
+ <div style="display: flex; align-items: center; gap: 32px;">
234
+ <a href="#" style="font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.95rem; color: #F0F0F0; text-decoration: none; letter-spacing: -0.01em;">slipstream</a>
235
+ <div class="hidden md:flex items-center gap-6">
236
+ <a href="#" class="nav-link">Docs</a>
237
+ <a href="#" class="nav-link">Changelog</a>
238
+ <a href="#" class="nav-link">Pricing</a>
239
+ <a href="#" class="nav-link">Status</a>
240
+ <a href="#" class="nav-link">Blog</a>
241
+ </div>
242
+ </div>
243
+ <div style="display: flex; align-items: center; gap: 12px;">
244
+ <a href="#" class="nav-link text-sm">Sign in</a>
245
+ <a href="#" class="btn-accent" style="padding: 8px 18px; font-size: 0.82rem;">Deploy now</a>
246
+ </div>
247
+ </nav>
248
+
249
+ <!-- DEPLOY TICKER -->
250
+ <div class="hidden md:block" style="background: #0C0C0F; border-bottom: 1px solid #2A2A38; overflow: hidden; height: 36px; display: flex; align-items: center;">
251
+ <div class="ticker-track">
252
+ <!-- First pass -->
253
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">nexus-app</span><span>→</span><span>next.js 14</span><span>→</span><span>us-east-1</span><span class="ticker-time">0.7s</span></div>
254
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">pulsar-ui</span><span>→</span><span>svelte</span><span>→</span><span>eu-west-2</span><span class="ticker-time">1.2s</span></div>
255
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">orbit-dash</span><span>→</span><span>remix</span><span>→</span><span>ap-southeast-1</span><span class="ticker-time">0.9s</span></div>
256
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">beacon-web</span><span>→</span><span>astro</span><span>→</span><span>us-west-2</span><span class="ticker-time">0.6s</span></div>
257
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">forge-site</span><span>→</span><span>nuxt 3</span><span>→</span><span>eu-central-1</span><span class="ticker-time">1.4s</span></div>
258
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">atlas-front</span><span>→</span><span>next.js 14</span><span>→</span><span>sa-east-1</span><span class="ticker-time">0.8s</span></div>
259
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">echo-portal</span><span>→</span><span>remix</span><span>→</span><span>ap-northeast-1</span><span class="ticker-time">1.1s</span></div>
260
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">vortex-app</span><span>→</span><span>sveltekit</span><span>→</span><span>us-east-1</span><span class="ticker-time">0.7s</span></div>
261
+ <!-- Duplicate for seamless loop -->
262
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">nexus-app</span><span>→</span><span>next.js 14</span><span>→</span><span>us-east-1</span><span class="ticker-time">0.7s</span></div>
263
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">pulsar-ui</span><span>→</span><span>svelte</span><span>→</span><span>eu-west-2</span><span class="ticker-time">1.2s</span></div>
264
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">orbit-dash</span><span>→</span><span>remix</span><span>→</span><span>ap-southeast-1</span><span class="ticker-time">0.9s</span></div>
265
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">beacon-web</span><span>→</span><span>astro</span><span>→</span><span>us-west-2</span><span class="ticker-time">0.6s</span></div>
266
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">forge-site</span><span>→</span><span>nuxt 3</span><span>→</span><span>eu-central-1</span><span class="ticker-time">1.4s</span></div>
267
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">atlas-front</span><span>→</span><span>next.js 14</span><span>→</span><span>sa-east-1</span><span class="ticker-time">0.8s</span></div>
268
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">echo-portal</span><span>→</span><span>remix</span><span>→</span><span>ap-northeast-1</span><span class="ticker-time">1.1s</span></div>
269
+ <div class="ticker-item"><span class="ticker-dot"></span><span class="ticker-name">vortex-app</span><span>→</span><span>sveltekit</span><span>→</span><span>us-east-1</span><span class="ticker-time">0.7s</span></div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- HERO -->
274
+ <section class="dot-grid px-8 md:px-16 pt-20 pb-20">
275
+ <div class="max-w-7xl mx-auto">
276
+
277
+ <!-- Breadcrumb label -->
278
+ <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px;">
279
+ <span style="width: 6px; height: 6px; border-radius: 50%; background: #00D68F; display: inline-block;"></span>
280
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #6B6B8A; letter-spacing: 0.06em; text-transform: uppercase;">Build · Deploy · Serve — globally</span>
281
+ </div>
282
+
283
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
284
+
285
+ <!-- Left: headline + CTA -->
286
+ <div>
287
+ <h1 style="font-family: 'DM Sans', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; color: #F0F0F0; line-height: 1.1; letter-spacing: -0.035em; margin-bottom: 20px;">
288
+ Git push.<br/>Global in<span style="color: #00D68F;"> 0.8 seconds.</span>
289
+ </h1>
290
+ <p style="color: #6B6B8A; font-size: 0.95rem; line-height: 1.7; max-width: 46ch; margin-bottom: 28px; font-weight: 300;">
291
+ Connect your repository. Push your code. Slipstream detects your framework, runs your build, and propagates assets to 300+ edge locations — without a single configuration file.
292
+ </p>
293
+
294
+ <!-- Spec list -->
295
+ <div style="border: 1px solid #2A2A38; border-radius: 3px; padding: 16px 20px; background: #1A1A24; margin-bottom: 28px; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; line-height: 1.9;">
296
+ <p><span style="color: #6B6B8A;">frameworks </span><span style="color: #00D68F;">→</span><span style="color: #F0F0F0;"> Next.js, Remix, SvelteKit, Astro, Nuxt, Gatsby</span></p>
297
+ <p><span style="color: #6B6B8A;">edge nodes </span><span style="color: #00D68F;">→</span><span style="color: #F0F0F0;"> 300+ locations, 6 continents</span></p>
298
+ <p><span style="color: #6B6B8A;">p50 build </span><span style="color: #00D68F;">→</span><span style="color: #F0F0F0;"> 0.8s (next.js 14, medium app)</span></p>
299
+ <p><span style="color: #6B6B8A;">functions </span><span style="color: #00D68F;">→</span><span style="color: #F0F0F0;"> serverless + edge runtime</span></p>
300
+ <p><span style="color: #6B6B8A;">preview envs </span><span style="color: #00D68F;">→</span><span style="color: #F0F0F0;"> per branch, per PR, unlimited</span></p>
301
+ </div>
302
+
303
+ <div style="display: flex; gap: 12px; flex-wrap: wrap;">
304
+ <a href="#" class="btn-accent">Deploy now — free</a>
305
+ <a href="#" class="btn-outline">Read the docs</a>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Right: tabbed code examples -->
310
+ <div>
311
+ <div class="code-win">
312
+ <!-- Tab bar -->
313
+ <div style="display: flex; border-bottom: 1px solid #2A2A38; padding: 0 4px; overflow-x: auto;">
314
+ <button class="tab-btn active" onclick="switchTab('deploy', this)">deploy.log</button>
315
+ <button class="tab-btn" onclick="switchTab('config', this)">slipstream.json</button>
316
+ <button class="tab-btn" onclick="switchTab('cli', this)">cli</button>
317
+ </div>
318
+ <!-- Tab panes -->
319
+ <div style="padding: 20px 20px; min-height: 220px;">
320
+
321
+ <div id="tab-deploy" class="tab-pane active" style="color: #6B6B8A;">
322
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:01</span> <span style="color: #00D68F;">▶</span> push detected: main @ a3f9c2e</p>
323
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:01</span> framework detected: next.js 14</p>
324
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:01</span> installing dependencies (cached)</p>
325
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:01</span> running build...</p>
326
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:02</span> <span style="color: #00D68F;">✓</span> build complete (0.6s)</p>
327
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:02</span> uploading to edge network...</p>
328
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:02</span> propagating to 300 nodes...</p>
329
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:02</span> <span style="color: #00D68F;">✓</span> <span style="color: #F0F0F0;">deployed in 0.8s</span></p>
330
+ <p><span style="color: #F0F0F0; opacity: 0.4;">14:23:02</span> <span style="color: #00D68F;">→</span> myapp.slipstream.app</p>
331
+ <p class="cursor" style="color: #6B6B8A; margin-top: 4px;"> </p>
332
+ </div>
333
+
334
+ <div id="tab-config" class="tab-pane" style="color: #6B6B8A;">
335
+ <p><span style="color: #2A2A38;">{</span></p>
336
+ <p>&nbsp; <span style="color: #00D68F;">"name"</span><span>: </span><span style="color: #F0F0F0; opacity: 0.7;">"my-next-app"</span><span>,</span></p>
337
+ <p>&nbsp; <span style="color: #00D68F;">"framework"</span><span>: </span><span style="color: #F0F0F0; opacity: 0.7;">"nextjs"</span><span>,</span></p>
338
+ <p>&nbsp; <span style="color: #00D68F;">"buildCommand"</span><span>: </span><span style="color: #F0F0F0; opacity: 0.7;">"next build"</span><span>,</span></p>
339
+ <p>&nbsp; <span style="color: #00D68F;">"outputDir"</span><span>: </span><span style="color: #F0F0F0; opacity: 0.7;">".next"</span><span>,</span></p>
340
+ <p>&nbsp; <span style="color: #00D68F;">"regions"</span><span>: [</span><span style="color: #F0F0F0; opacity: 0.7;">"all"</span><span>],</span></p>
341
+ <p>&nbsp; <span style="color: #00D68F;">"functions"</span><span>: {</span></p>
342
+ <p>&nbsp; &nbsp; <span style="color: #00D68F;">"runtime"</span><span>: </span><span style="color: #F0F0F0; opacity: 0.7;">"edge"</span></p>
343
+ <p>&nbsp; <span>}</span></p>
344
+ <p><span style="color: #2A2A38;">}</span></p>
345
+ <p style="color: #6B6B8A; font-size: 0.65rem; margin-top: 8px; opacity: 0.5;">// optional — auto-detected if omitted</p>
346
+ </div>
347
+
348
+ <div id="tab-cli" class="tab-pane" style="color: #6B6B8A;">
349
+ <p><span style="color: #00D68F;">$</span> <span style="color: #F0F0F0;">npm i -g slipstream-cli</span></p>
350
+ <p style="opacity: 0.4;"> added 1 package in 0.4s</p>
351
+ <br/>
352
+ <p><span style="color: #00D68F;">$</span> <span style="color: #F0F0F0;">slip login</span></p>
353
+ <p style="opacity: 0.4;"> Opening browser for authentication...</p>
354
+ <p style="opacity: 0.4;"> <span style="color: #00D68F;">✓</span> Authenticated as dev@example.com</p>
355
+ <br/>
356
+ <p><span style="color: #00D68F;">$</span> <span style="color: #F0F0F0;">slip deploy</span></p>
357
+ <p style="opacity: 0.4;"> Detected: Next.js 14</p>
358
+ <p style="opacity: 0.4;"> Building...</p>
359
+ <p><span style="opacity: 0.4;"> </span><span style="color: #00D68F;">✓</span> <span style="color: #F0F0F0;">https://myapp.slipstream.app</span></p>
360
+ <p class="cursor" style="margin-top: 4px;"> </p>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Metric row -->
366
+ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2A2A38; margin-top: 1px; border: 1px solid #2A2A38;">
367
+ <div class="metric-card text-center" style="border: none; border-radius: 0;">
368
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 600; color: #00D68F;" data-target="08" class="count-metric">0.8s</p>
369
+ <p style="font-size: 0.7rem; color: #6B6B8A; margin-top: 4px;">median build</p>
370
+ </div>
371
+ <div class="metric-card text-center" style="border: none; border-radius: 0; border-left: 1px solid #2A2A38; border-right: 1px solid #2A2A38;">
372
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 600; color: #F0F0F0;">300+</p>
373
+ <p style="font-size: 0.7rem; color: #6B6B8A; margin-top: 4px;">edge nodes</p>
374
+ </div>
375
+ <div class="metric-card text-center" style="border: none; border-radius: 0;">
376
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 600; color: #F0F0F0;">99.99%</p>
377
+ <p style="font-size: 0.7rem; color: #6B6B8A; margin-top: 4px;">uptime SLA</p>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- FEATURES: dense list with left-border accent -->
387
+ <section style="border-top: 1px solid #2A2A38; padding: 64px 0 0;">
388
+ <div class="max-w-7xl mx-auto px-8 md:px-16">
389
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6B6B8A; margin-bottom: 40px;">Platform capabilities</p>
390
+ </div>
391
+
392
+ <div class="max-w-7xl mx-auto px-8 md:px-16">
393
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12">
394
+
395
+ <div class="feat-item py-6">
396
+ <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
397
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #00D68F; flex-shrink: 0;">01</span>
398
+ <h3 style="font-weight: 600; font-size: 1rem; color: #F0F0F0; letter-spacing: -0.01em;">Git-triggered builds</h3>
399
+ </div>
400
+ <p style="font-size: 0.85rem; color: #6B6B8A; line-height: 1.65; padding-left: 30px; font-weight: 300;">Push to any branch. Every commit triggers an isolated build in a clean environment. Main branch goes to production; everything else gets a preview URL.</p>
401
+ </div>
402
+
403
+ <div class="feat-item py-6">
404
+ <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
405
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #00D68F; flex-shrink: 0;">02</span>
406
+ <h3 style="font-weight: 600; font-size: 1rem; color: #F0F0F0; letter-spacing: -0.01em;">Preview environments</h3>
407
+ </div>
408
+ <p style="font-size: 0.85rem; color: #6B6B8A; line-height: 1.65; padding-left: 30px; font-weight: 300;">Every PR and branch gets a live, isolated deployment. URLs are posted as PR comments. Environments are deleted when branches are merged or closed.</p>
409
+ </div>
410
+
411
+ <div class="feat-item py-6">
412
+ <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
413
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #00D68F; flex-shrink: 0;">03</span>
414
+ <h3 style="font-weight: 600; font-size: 1rem; color: #F0F0F0; letter-spacing: -0.01em;">Edge functions</h3>
415
+ </div>
416
+ <p style="font-size: 0.85rem; color: #6B6B8A; line-height: 1.65; padding-left: 30px; font-weight: 300;">Write serverless functions that run at the closest edge node to each user. Sub-10ms cold starts. Web standard APIs. No container images, no provisioning.</p>
417
+ </div>
418
+
419
+ <div class="feat-item py-6">
420
+ <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
421
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #00D68F; flex-shrink: 0;">04</span>
422
+ <h3 style="font-weight: 600; font-size: 1rem; color: #F0F0F0; letter-spacing: -0.01em;">Framework detection</h3>
423
+ </div>
424
+ <p style="font-size: 0.85rem; color: #6B6B8A; line-height: 1.65; padding-left: 30px; font-weight: 300;">Slipstream reads your package.json and detects Next.js, Remix, SvelteKit, Astro, Nuxt, and Gatsby automatically. Build commands, output directories, and routing are configured without you touching a setting.</p>
425
+ </div>
426
+
427
+ <div class="feat-item py-6">
428
+ <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
429
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #00D68F; flex-shrink: 0;">05</span>
430
+ <h3 style="font-weight: 600; font-size: 1rem; color: #F0F0F0; letter-spacing: -0.01em;">Global CDN</h3>
431
+ </div>
432
+ <p style="font-size: 0.85rem; color: #6B6B8A; line-height: 1.65; padding-left: 30px; font-weight: 300;">Static assets are cached and served from 300+ PoPs globally. Smart cache invalidation on every deploy ensures users always get the latest build with no stale content.</p>
433
+ </div>
434
+
435
+ <div class="feat-item py-6">
436
+ <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;">
437
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #00D68F; flex-shrink: 0;">06</span>
438
+ <h3 style="font-weight: 600; font-size: 1rem; color: #F0F0F0; letter-spacing: -0.01em;">Team collaboration</h3>
439
+ </div>
440
+ <p style="font-size: 0.85rem; color: #6B6B8A; line-height: 1.65; padding-left: 30px; font-weight: 300;">Projects, environments, and environment variables are shared across your team. Role-based access control. Deploy notifications via Slack or webhook. Full audit log.</p>
441
+ </div>
442
+
443
+ </div>
444
+ </div>
445
+ </section>
446
+
447
+ <!-- QUOTE -->
448
+ <section style="border-top: 1px solid #2A2A38; border-bottom: 1px solid #2A2A38; padding: 64px 32px; margin-top: 64px; background: #1A1A24;">
449
+ <div class="max-w-3xl mx-auto">
450
+ <blockquote>
451
+ <p style="font-family: 'DM Sans', sans-serif; font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: #F0F0F0; font-weight: 300; line-height: 1.55; letter-spacing: -0.01em; font-style: italic;">
452
+ "We removed our entire CI/CD pipeline and replaced it with Slipstream. Build times dropped from 8 minutes to under 1. The preview environments alone saved us 4 hours of QA coordination per sprint."
453
+ </p>
454
+ <footer style="margin-top: 24px; display: flex; align-items: center; gap: 12px;">
455
+ <div style="width: 32px; height: 32px; border-radius: 50%; background: #2A2A38; display: flex; align-items: center; justify-content: center;">
456
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #00D68F; font-weight: 600;">AK</span>
457
+ </div>
458
+ <div>
459
+ <p style="font-size: 0.85rem; font-weight: 500; color: #F0F0F0;">Amir Karimi</p>
460
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #6B6B8A; margin-top: 2px;">Platform Lead, Tensor Labs</p>
461
+ </div>
462
+ </footer>
463
+ </blockquote>
464
+ </div>
465
+ </section>
466
+
467
+ <!-- PRICING -->
468
+ <section style="padding: 80px 32px; max-width: 1280px; margin: 0 auto;">
469
+ <div style="margin-bottom: 48px; display: flex; align-items: baseline; gap: 16px;">
470
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: #6B6B8A;">Pricing</p>
471
+ <div style="flex: 1; height: 1px; background: #2A2A38;"></div>
472
+ </div>
473
+
474
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: #2A2A38; border: 1px solid #2A2A38;">
475
+
476
+ <div style="background: #0C0C0F; padding: 32px;">
477
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #6B6B8A; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;">hobby</p>
478
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; font-weight: 600; color: #00D68F; letter-spacing: -0.03em; line-height: 1;">$0</p>
479
+ <p style="font-size: 0.75rem; color: #6B6B8A; margin-top: 4px; margin-bottom: 24px; font-family: 'JetBrains Mono', monospace;">forever</p>
480
+ <a href="#" class="btn-accent" style="display: block; text-align: center; margin-bottom: 24px;">Deploy now</a>
481
+ <ul style="list-style: none; padding: 0; margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #6B6B8A; line-height: 2.1;">
482
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>3 projects</li>
483
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>100 GB/mo bandwidth</li>
484
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Preview envs</li>
485
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Edge functions</li>
486
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>SSL + custom domains</li>
487
+ </ul>
488
+ </div>
489
+
490
+ <div style="background: #1A1A24; padding: 32px; border: 1px solid #00D68F; position: relative;">
491
+ <span style="position: absolute; top: 12px; right: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #0C0C0F; background: #00D68F; padding: 3px 8px; letter-spacing: 0.04em;">POPULAR</span>
492
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #6B6B8A; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;">pro</p>
493
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; font-weight: 600; color: #F0F0F0; letter-spacing: -0.03em; line-height: 1;">$20</p>
494
+ <p style="font-size: 0.75rem; color: #6B6B8A; margin-top: 4px; margin-bottom: 24px; font-family: 'JetBrains Mono', monospace;">/ member / month</p>
495
+ <a href="#" class="btn-accent" style="display: block; text-align: center; margin-bottom: 24px;">Start Pro</a>
496
+ <ul style="list-style: none; padding: 0; margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #6B6B8A; line-height: 2.1;">
497
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Unlimited projects</li>
498
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>1 TB/mo bandwidth</li>
499
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Team collaboration</li>
500
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Analytics</li>
501
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Priority support</li>
502
+ </ul>
503
+ </div>
504
+
505
+ <div style="background: #0C0C0F; padding: 32px;">
506
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #6B6B8A; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;">enterprise</p>
507
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; font-weight: 600; color: #F0F0F0; letter-spacing: -0.03em; line-height: 1;">custom</p>
508
+ <p style="font-size: 0.75rem; color: #6B6B8A; margin-top: 4px; margin-bottom: 24px; font-family: 'JetBrains Mono', monospace;">contact sales</p>
509
+ <a href="#" class="btn-outline" style="display: block; text-align: center; margin-bottom: 24px;">Contact us</a>
510
+ <ul style="list-style: none; padding: 0; margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #6B6B8A; line-height: 2.1;">
511
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>SSO / SAML</li>
512
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>99.99% SLA</li>
513
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Dedicated support</li>
514
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>Custom contracts</li>
515
+ <li><span style="color: #00D68F; margin-right: 8px;">+</span>On-prem available</li>
516
+ </ul>
517
+ </div>
518
+
519
+ </div>
520
+ </section>
521
+
522
+ <!-- CTA -->
523
+ <section style="border-top: 1px solid #2A2A38; padding: 80px 32px; background: #0C0C0F;">
524
+ <div class="max-w-7xl mx-auto" style="display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;">
525
+ <div>
526
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #6B6B8A; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px;">Get started</p>
527
+ <h2 style="font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 600; color: #F0F0F0; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px;">Connect your repo.<br/>Ship in under 2 minutes.</h2>
528
+ <p style="font-size: 0.85rem; color: #6B6B8A; font-weight: 300; max-width: 44ch; line-height: 1.65;">No credit card. No config files. No YAML. Just connect and push.</p>
529
+ </div>
530
+ <div style="display: flex; flex-direction: column; gap: 10px; align-items: flex-end;">
531
+ <a href="#" class="btn-accent">Deploy now — free</a>
532
+ <a href="#" class="nav-link text-sm" style="font-size: 0.8rem;">Read the docs →</a>
533
+ </div>
534
+ </div>
535
+ </section>
536
+
537
+ <!-- FOOTER -->
538
+ <footer style="border-top: 1px solid #2A2A38; padding: 28px 32px; background: #0C0C0F;">
539
+ <div class="max-w-7xl mx-auto" style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;">
540
+ <span style="font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 600; color: #F0F0F0; letter-spacing: -0.01em;">slipstream</span>
541
+ <div style="display: flex; flex-wrap: wrap; gap: 20px;">
542
+ <a href="#" class="nav-link" style="font-size: 0.78rem;">Docs</a>
543
+ <a href="#" class="nav-link" style="font-size: 0.78rem;">Blog</a>
544
+ <a href="#" class="nav-link" style="font-size: 0.78rem;">Changelog</a>
545
+ <a href="#" class="nav-link" style="font-size: 0.78rem;">Status</a>
546
+ <a href="#" class="nav-link" style="font-size: 0.78rem;">Privacy</a>
547
+ <a href="#" class="nav-link" style="font-size: 0.78rem;">Terms</a>
548
+ </div>
549
+ <p style="font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: #2A2A38;">© 2026 Slipstream, Inc.</p>
550
+ </div>
551
+ </footer>
552
+
553
+ <script>
554
+ // Tab switcher
555
+ function switchTab(name, btn) {
556
+ document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
557
+ document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
558
+ document.getElementById('tab-' + name).classList.add('active');
559
+ btn.classList.add('active');
560
+ }
561
+ </script>
562
+
563
+ </body>
564
+ </html>