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/tender/arm-a/run-1.html ADDED
@@ -0,0 +1,622 @@
1
+ <!--
2
+ ARCHETYPE: technical-dense
3
+ SIGNATURE MOVE: The "live request log" — a persistent left-rail terminal feed showing real API calls
4
+ scrolling in real time, making the integration feel alive before a user writes a line of code.
5
+ Paired with a floating "latency badge" (e.g. "p99: 47ms") that pulses on each new entry.
6
+ EFFECTS PLAN:
7
+ - Typewriter cursor blink on terminal lines (CSS animation, no JS heavy lifting)
8
+ - Subtle scan-line overlay on the terminal panel (CSS repeating-gradient)
9
+ - Number counter animation on stats (Intersection Observer + JS)
10
+ - Horizontal rule hover-reveals on nav links (transform: scaleX)
11
+ - Code block syntax highlighting via inline spans (no library)
12
+ NEGATIVES CHECKED:
13
+ N1: No purple/blue gradient hero — dark slate + amber accent
14
+ N2: No Inter defaults — JetBrains Mono + IBM Plex Sans
15
+ N3: Not everything centered — left-aligned copy, ragged right, terminal rail left
16
+ N4: No 3 identical icon cards — feature rows with varying density and layout
17
+ N5: Mixed radius: 0px on terminal, 4px on cards, 2px on inputs, 12px on CTA pill
18
+ N6: No Tailwind palette as brand — custom amber #E8A020 + slate #0C1117
19
+ N7: Not hero→3cards→testimonial→CTA — hero split, log rail, prose specs, table, footer
20
+ N8: No blobs
21
+ N9: No glassmorphism
22
+ N10: Strong hierarchy throughout
23
+ N11: Concrete numbers and specifics, not abstract promises
24
+ N12: Motion only on terminal feed + counter — no gratuitous effects
25
+ -->
26
+ <!DOCTYPE html>
27
+ <html lang="en" class="bg-[#0C1117] text-[#E2E8F0]">
28
+ <head>
29
+ <meta charset="UTF-8" />
30
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
31
+ <title>Tender — Payments API for Internet Businesses</title>
32
+ <script src="https://cdn.tailwindcss.com"></script>
33
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
34
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
35
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
36
+ <script>
37
+ tailwind.config = {
38
+ theme: {
39
+ extend: {
40
+ fontFamily: {
41
+ sans: ['IBM Plex Sans', 'sans-serif'],
42
+ mono: ['JetBrains Mono', 'monospace'],
43
+ },
44
+ colors: {
45
+ brand: {
46
+ amber: '#E8A020',
47
+ amberDim: '#A06B0E',
48
+ bg: '#0C1117',
49
+ surface: '#111820',
50
+ border: '#1E2A38',
51
+ muted: '#3A4A5C',
52
+ text: '#E2E8F0',
53
+ subtle: '#8A9BAD',
54
+ }
55
+ }
56
+ }
57
+ }
58
+ }
59
+ </script>
60
+ <style>
61
+ body { font-family: 'IBM Plex Sans', sans-serif; }
62
+ code, .mono { font-family: 'JetBrains Mono', monospace; }
63
+
64
+ /* Scan-line effect on terminal */
65
+ .scanlines::after {
66
+ content: '';
67
+ position: absolute;
68
+ inset: 0;
69
+ background: repeating-linear-gradient(
70
+ 0deg,
71
+ transparent,
72
+ transparent 2px,
73
+ rgba(0,0,0,0.06) 2px,
74
+ rgba(0,0,0,0.06) 4px
75
+ );
76
+ pointer-events: none;
77
+ z-index: 1;
78
+ }
79
+
80
+ /* Blinking cursor */
81
+ .cursor::after {
82
+ content: '▋';
83
+ color: #E8A020;
84
+ animation: blink 1.1s step-end infinite;
85
+ }
86
+ @keyframes blink {
87
+ 0%, 100% { opacity: 1; }
88
+ 50% { opacity: 0; }
89
+ }
90
+
91
+ /* Terminal scroll animation */
92
+ @keyframes slideUp {
93
+ from { transform: translateY(100%); opacity: 0; }
94
+ to { transform: translateY(0); opacity: 1; }
95
+ }
96
+ .log-line {
97
+ animation: slideUp 0.3s ease-out forwards;
98
+ }
99
+
100
+ /* Latency pulse */
101
+ @keyframes pulse-amber {
102
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(232,160,32,0.4); }
103
+ 50% { box-shadow: 0 0 0 6px rgba(232,160,32,0); }
104
+ }
105
+ .latency-badge { animation: pulse-amber 2s ease-in-out infinite; }
106
+
107
+ /* Nav underline hover */
108
+ .nav-link {
109
+ position: relative;
110
+ }
111
+ .nav-link::after {
112
+ content: '';
113
+ position: absolute;
114
+ bottom: -2px;
115
+ left: 0;
116
+ width: 100%;
117
+ height: 1px;
118
+ background: #E8A020;
119
+ transform: scaleX(0);
120
+ transform-origin: left;
121
+ transition: transform 0.2s ease;
122
+ }
123
+ .nav-link:hover::after { transform: scaleX(1); }
124
+
125
+ /* Counter animation */
126
+ .counter { transition: all 0.1s; }
127
+
128
+ /* Grid background for hero */
129
+ .grid-bg {
130
+ background-image:
131
+ linear-gradient(rgba(30,42,56,0.5) 1px, transparent 1px),
132
+ linear-gradient(90deg, rgba(30,42,56,0.5) 1px, transparent 1px);
133
+ background-size: 40px 40px;
134
+ }
135
+
136
+ /* Horizontal rules */
137
+ hr.tender { border-color: #1E2A38; }
138
+ </style>
139
+ </head>
140
+ <body class="bg-[#0C1117] font-sans antialiased">
141
+
142
+ <!-- NAV -->
143
+ <nav class="sticky top-0 z-50 border-b border-[#1E2A38] bg-[#0C1117]/95 backdrop-blur-sm">
144
+ <div class="max-w-7xl mx-auto px-6 h-14 flex items-center justify-between">
145
+ <div class="flex items-center gap-8">
146
+ <a href="#" class="flex items-center gap-2.5">
147
+ <div class="w-6 h-6 rounded-[3px] bg-[#E8A020] flex items-center justify-center">
148
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
149
+ <path d="M2 4h10M2 7h7M2 10h10" stroke="#0C1117" stroke-width="1.5" stroke-linecap="round"/>
150
+ </svg>
151
+ </div>
152
+ <span class="font-semibold text-[15px] tracking-tight text-[#E2E8F0]">Tender</span>
153
+ </a>
154
+ <div class="hidden md:flex items-center gap-6">
155
+ <a href="#" class="nav-link text-[13px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Products</a>
156
+ <a href="#" class="nav-link text-[13px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Pricing</a>
157
+ <a href="#" class="nav-link text-[13px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Docs</a>
158
+ <a href="#" class="nav-link text-[13px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Changelog</a>
159
+ <a href="#" class="nav-link text-[13px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Status</a>
160
+ </div>
161
+ </div>
162
+ <div class="flex items-center gap-3">
163
+ <a href="#" class="text-[13px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Sign in</a>
164
+ <a href="#" class="mono text-[12px] font-medium bg-[#E8A020] text-[#0C1117] px-4 py-1.5 rounded-sm hover:bg-[#F0B030] transition-colors">Start building →</a>
165
+ </div>
166
+ </div>
167
+ </nav>
168
+
169
+ <!-- HERO — SPLIT LAYOUT -->
170
+ <section class="grid-bg border-b border-[#1E2A38] relative overflow-hidden">
171
+ <div class="max-w-7xl mx-auto px-6 py-20 grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
172
+
173
+ <!-- Left: Copy -->
174
+ <div class="pt-4">
175
+ <div class="inline-flex items-center gap-2 border border-[#1E2A38] rounded-sm px-3 py-1 mb-8">
176
+ <span class="w-1.5 h-1.5 rounded-full bg-[#E8A020]"></span>
177
+ <span class="mono text-[11px] text-[#8A9BAD] tracking-widest uppercase">v3.4 · Now with Usage Billing</span>
178
+ </div>
179
+
180
+ <h1 class="text-[42px] leading-[1.1] font-semibold tracking-[-0.02em] text-[#E2E8F0] mb-6">
181
+ One API.<br/>
182
+ Every payment<br/>
183
+ <span class="text-[#E8A020]">your business takes.</span>
184
+ </h1>
185
+
186
+ <p class="text-[16px] leading-[1.7] text-[#8A9BAD] max-w-[420px] mb-8">
187
+ Cards, local methods, subscriptions, usage billing, marketplace payouts — unified under a single integration. Fraud screening and compliance included. Deployed in 47 countries.
188
+ </p>
189
+
190
+ <div class="flex flex-col sm:flex-row gap-3 mb-12">
191
+ <a href="#" class="mono text-[13px] font-medium bg-[#E8A020] text-[#0C1117] px-6 py-3 rounded-sm hover:bg-[#F0B030] transition-colors inline-flex items-center gap-2">
192
+ Start integrating
193
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M8 4l3 3-3 3" stroke="#0C1117" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
194
+ </a>
195
+ <a href="#" class="mono text-[13px] font-medium border border-[#1E2A38] text-[#E2E8F0] px-6 py-3 rounded-sm hover:border-[#3A4A5C] transition-colors inline-flex items-center gap-2">
196
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="2" width="10" height="10" rx="1" stroke="#8A9BAD" stroke-width="1.2"/><path d="M5 5h4M5 7h2" stroke="#8A9BAD" stroke-width="1.2" stroke-linecap="round"/></svg>
197
+ View the docs
198
+ </a>
199
+ </div>
200
+
201
+ <!-- Stats row -->
202
+ <div class="grid grid-cols-3 gap-0 border border-[#1E2A38] rounded-sm overflow-hidden">
203
+ <div class="px-5 py-4 border-r border-[#1E2A38]">
204
+ <div class="mono text-[22px] font-bold text-[#E2E8F0] counter" data-target="47">$0</div>
205
+ <div class="text-[11px] text-[#8A9BAD] mt-0.5">Countries</div>
206
+ </div>
207
+ <div class="px-5 py-4 border-r border-[#1E2A38]">
208
+ <div class="mono text-[22px] font-bold text-[#E8A020] counter" data-target="99.99">0</div>
209
+ <div class="text-[11px] text-[#8A9BAD] mt-0.5">Uptime SLA</div>
210
+ </div>
211
+ <div class="px-5 py-4">
212
+ <div class="mono text-[22px] font-bold text-[#E2E8F0] counter" data-target="47">—</div>
213
+ <div class="text-[11px] text-[#8A9BAD] mt-0.5">p99 latency ms</div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Right: Live terminal log -->
219
+ <div class="relative">
220
+ <!-- Latency badge -->
221
+ <div class="latency-badge absolute top-4 right-4 z-10 mono text-[11px] bg-[#111820] border border-[#E8A020]/40 text-[#E8A020] px-3 py-1 rounded-full flex items-center gap-2">
222
+ <span class="w-1.5 h-1.5 rounded-full bg-[#E8A020] inline-block"></span>
223
+ p99: 47ms
224
+ </div>
225
+
226
+ <div class="scanlines relative border border-[#1E2A38] rounded-sm overflow-hidden bg-[#080D12]">
227
+ <!-- Terminal header -->
228
+ <div class="flex items-center justify-between px-4 py-2.5 border-b border-[#1E2A38] bg-[#0C1117]">
229
+ <div class="flex items-center gap-2">
230
+ <div class="w-2.5 h-2.5 rounded-full bg-[#3A4A5C]"></div>
231
+ <div class="w-2.5 h-2.5 rounded-full bg-[#3A4A5C]"></div>
232
+ <div class="w-2.5 h-2.5 rounded-full bg-[#3A4A5C]"></div>
233
+ </div>
234
+ <span class="mono text-[11px] text-[#3A4A5C]">tender · request log · live</span>
235
+ <span class="mono text-[11px] text-[#E8A020]">● LIVE</span>
236
+ </div>
237
+
238
+ <!-- Log lines -->
239
+ <div class="p-4 space-y-2 font-mono text-[12px] leading-relaxed" id="log-container" style="min-height:420px;">
240
+ <div class="flex gap-3 text-[#3A4A5C]">
241
+ <span>09:14:22.003</span>
242
+ <span class="text-[#5A9B6A]">POST</span>
243
+ <span class="text-[#8A9BAD]">/v1/payment_intents</span>
244
+ <span class="text-[#5A9B6A] ml-auto">201</span>
245
+ </div>
246
+ <div class="flex gap-3 text-[#3A4A5C]">
247
+ <span>09:14:22.419</span>
248
+ <span class="text-[#5A9B6A]">GET&nbsp;</span>
249
+ <span class="text-[#8A9BAD]">/v1/customers/cus_9xK2...</span>
250
+ <span class="text-[#5A9B6A] ml-auto">200</span>
251
+ </div>
252
+ <div class="flex gap-3 text-[#3A4A5C]">
253
+ <span>09:14:23.118</span>
254
+ <span class="text-[#5A9B6A]">POST</span>
255
+ <span class="text-[#8A9BAD]">/v1/subscriptions</span>
256
+ <span class="text-[#5A9B6A] ml-auto">201</span>
257
+ </div>
258
+ <div class="flex gap-3 text-[#3A4A5C]">
259
+ <span>09:14:24.002</span>
260
+ <span class="text-[#9B7B5A]">POST</span>
261
+ <span class="text-[#8A9BAD]">/v1/payouts</span>
262
+ <span class="text-[#9B7B5A] ml-auto">202</span>
263
+ </div>
264
+ <div class="flex gap-3 text-[#3A4A5C]">
265
+ <span>09:14:24.551</span>
266
+ <span class="text-[#5A9B6A]">GET&nbsp;</span>
267
+ <span class="text-[#8A9BAD]">/v1/fraud/signals/pi_...</span>
268
+ <span class="text-[#5A9B6A] ml-auto">200</span>
269
+ </div>
270
+ <div class="flex gap-3 text-[#3A4A5C]">
271
+ <span>09:14:25.009</span>
272
+ <span class="text-[#5A9B6A]">POST</span>
273
+ <span class="text-[#8A9BAD]">/v1/fx/convert</span>
274
+ <span class="text-[#5A9B6A] ml-auto">200</span>
275
+ </div>
276
+ <div class="flex gap-3 text-[#3A4A5C]">
277
+ <span>09:14:25.781</span>
278
+ <span class="text-[#9B5A5A]">POST</span>
279
+ <span class="text-[#8A9BAD]">/v1/payment_intents</span>
280
+ <span class="text-[#9B5A5A] ml-auto">402</span>
281
+ </div>
282
+ <div class="mt-2 px-3 py-2 border border-[#9B5A5A]/30 bg-[#9B5A5A]/5 rounded-sm">
283
+ <div class="mono text-[11px] text-[#9B5A5A]">fraud_score: 94 · blocked · card_fingerprint: fp_7Xq...</div>
284
+ </div>
285
+ <div class="flex gap-3 text-[#3A4A5C] mt-2">
286
+ <span>09:14:26.120</span>
287
+ <span class="text-[#5A9B6A]">GET&nbsp;</span>
288
+ <span class="text-[#8A9BAD]">/v1/invoices?status=open</span>
289
+ <span class="text-[#5A9B6A] ml-auto">200</span>
290
+ </div>
291
+ <div class="flex gap-3 text-[#3A4A5C]">
292
+ <span>09:14:26.884</span>
293
+ <span class="text-[#5A9B6A]">POST</span>
294
+ <span class="text-[#8A9BAD]">/v1/meters/usage</span>
295
+ <span class="text-[#5A9B6A] ml-auto">200</span>
296
+ </div>
297
+ <div class="flex gap-3 text-[#3A4A5C]">
298
+ <span>09:14:27.201</span>
299
+ <span class="text-[#5A9B6A]">POST</span>
300
+ <span class="text-[#8A9BAD]">/v1/payment_intents</span>
301
+ <span class="text-[#5A9B6A] ml-auto">201</span>
302
+ </div>
303
+ <div class="flex gap-3 text-[#3A4A5C]">
304
+ <span>09:14:27.902</span>
305
+ <span class="text-[#5A9B6A]">GET&nbsp;</span>
306
+ <span class="text-[#8A9BAD]">/v1/balance</span>
307
+ <span class="text-[#5A9B6A] ml-auto">200</span>
308
+ </div>
309
+ <!-- Active line with cursor -->
310
+ <div class="flex gap-3 text-[#8A9BAD]">
311
+ <span>09:14:28.441</span>
312
+ <span class="text-[#5A9B6A]">POST</span>
313
+ <span>/v1/transfer_groups</span>
314
+ <span class="cursor ml-auto"></span>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Code snippet below terminal -->
320
+ <div class="mt-4 border border-[#1E2A38] rounded-sm bg-[#080D12] p-4">
321
+ <div class="mono text-[11px] text-[#3A4A5C] mb-3">Quick start · Node.js</div>
322
+ <pre class="mono text-[12px] leading-relaxed overflow-x-auto"><code><span class="text-[#8A9BAD]">const</span> <span class="text-[#E2E8F0]">tender</span> <span class="text-[#8A9BAD]">=</span> <span class="text-[#E2E8F0]">require</span><span class="text-[#E8A020]">(</span><span class="text-[#5A9B6A]">'@tender/node'</span><span class="text-[#E8A020]">)</span><span class="text-[#8A9BAD]">(</span><span class="text-[#5A9B6A]">'sk_live_...'</span><span class="text-[#8A9BAD]">)</span><span class="text-[#3A4A5C]">;</span>
323
+
324
+ <span class="text-[#8A9BAD]">const</span> <span class="text-[#E2E8F0]">intent</span> <span class="text-[#8A9BAD]">=</span> <span class="text-[#8A9BAD]">await</span> <span class="text-[#E2E8F0]">tender</span><span class="text-[#3A4A5C]">.</span><span class="text-[#9B7B5A]">paymentIntents</span><span class="text-[#3A4A5C]">.</span><span class="text-[#E8A020]">create</span><span class="text-[#3A4A5C]">({</span>
325
+ <span class="text-[#8A9BAD]">amount</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#9B7B5A]">2400</span><span class="text-[#3A4A5C]">,</span>
326
+ <span class="text-[#8A9BAD]">currency</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#5A9B6A]">'usd'</span><span class="text-[#3A4A5C]">,</span>
327
+ <span class="text-[#8A9BAD]">fraud_screen</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#9B7B5A]">true</span><span class="text-[#3A4A5C]">,</span>
328
+ <span class="text-[#3A4A5C]">});</span></code></pre>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- FEATURE TABLE — CAPABILITY MATRIX -->
335
+ <section class="border-b border-[#1E2A38]">
336
+ <div class="max-w-7xl mx-auto px-6 py-16">
337
+ <div class="flex items-end justify-between mb-10">
338
+ <div>
339
+ <div class="mono text-[11px] text-[#E8A020] tracking-widest uppercase mb-3">Platform capabilities</div>
340
+ <h2 class="text-[28px] font-semibold tracking-tight text-[#E2E8F0]">Everything under one integration</h2>
341
+ </div>
342
+ <a href="#" class="mono text-[12px] text-[#8A9BAD] hover:text-[#E8A020] transition-colors">Full API reference →</a>
343
+ </div>
344
+
345
+ <!-- Dense feature rows -->
346
+ <div class="space-y-0 border border-[#1E2A38] rounded-sm overflow-hidden">
347
+
348
+ <!-- Payments -->
349
+ <div class="grid grid-cols-12 border-b border-[#1E2A38] hover:bg-[#111820] transition-colors">
350
+ <div class="col-span-1 p-5 flex items-start pt-5">
351
+ <div class="w-8 h-8 rounded-sm bg-[#E8A020]/10 border border-[#E8A020]/20 flex items-center justify-center flex-shrink-0">
352
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="8" rx="1" stroke="#E8A020" stroke-width="1.2"/><path d="M2 7h12" stroke="#E8A020" stroke-width="1.2"/></svg>
353
+ </div>
354
+ </div>
355
+ <div class="col-span-3 p-5 border-l border-[#1E2A38]">
356
+ <div class="font-semibold text-[14px] text-[#E2E8F0] mb-1">Global Payments</div>
357
+ <div class="mono text-[11px] text-[#3A4A5C]">payments · fx · methods</div>
358
+ </div>
359
+ <div class="col-span-8 p-5 border-l border-[#1E2A38]">
360
+ <p class="text-[13px] text-[#8A9BAD] leading-relaxed mb-3">Cards (Visa, Mastercard, Amex), 80+ local payment methods (SEPA, UPI, PIX, GrabPay), automatic currency conversion at mid-market rates with transparent 0.5% FX spread.</p>
361
+ <div class="flex flex-wrap gap-2">
362
+ <span class="mono text-[10px] border border-[#1E2A38] text-[#3A4A5C] px-2 py-0.5 rounded-sm">SEPA</span>
363
+ <span class="mono text-[10px] border border-[#1E2A38] text-[#3A4A5C] px-2 py-0.5 rounded-sm">UPI</span>
364
+ <span class="mono text-[10px] border border-[#1E2A38] text-[#3A4A5C] px-2 py-0.5 rounded-sm">PIX</span>
365
+ <span class="mono text-[10px] border border-[#1E2A38] text-[#3A4A5C] px-2 py-0.5 rounded-sm">GrabPay</span>
366
+ <span class="mono text-[10px] border border-[#1E2A38] text-[#3A4A5C] px-2 py-0.5 rounded-sm">BACS</span>
367
+ <span class="mono text-[10px] border border-[#1E2A38] text-[#3A4A5C] px-2 py-0.5 rounded-sm">+75 more</span>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Billing -->
373
+ <div class="grid grid-cols-12 border-b border-[#1E2A38] hover:bg-[#111820] transition-colors">
374
+ <div class="col-span-1 p-5 flex items-start pt-5">
375
+ <div class="w-8 h-8 rounded-sm bg-[#5A9B6A]/10 border border-[#5A9B6A]/20 flex items-center justify-center flex-shrink-0">
376
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 2v12M4 8h8M12 5v6" stroke="#5A9B6A" stroke-width="1.2" stroke-linecap="round"/></svg>
377
+ </div>
378
+ </div>
379
+ <div class="col-span-3 p-5 border-l border-[#1E2A38]">
380
+ <div class="font-semibold text-[14px] text-[#E2E8F0] mb-1">Subscription & Usage Billing</div>
381
+ <div class="mono text-[11px] text-[#3A4A5C]">billing · meters · invoices</div>
382
+ </div>
383
+ <div class="col-span-8 p-5 border-l border-[#1E2A38]">
384
+ <p class="text-[13px] text-[#8A9BAD] leading-relaxed mb-3">Flat-rate, tiered, per-seat, and metered usage billing. Real-time usage meters with sub-second ingestion. Automated invoice generation, dunning, and retry logic with configurable schedules.</p>
385
+ <div class="mono text-[12px] bg-[#080D12] border border-[#1E2A38] rounded-sm px-3 py-2 text-[#5A9B6A] inline-block">
386
+ tender.meters.ingest({ event: 'api_call', quantity: 1 })
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Payouts -->
392
+ <div class="grid grid-cols-12 border-b border-[#1E2A38] hover:bg-[#111820] transition-colors">
393
+ <div class="col-span-1 p-5 flex items-start pt-5">
394
+ <div class="w-8 h-8 rounded-sm bg-[#9B7B5A]/10 border border-[#9B7B5A]/20 flex items-center justify-center flex-shrink-0">
395
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2v12M5 11l3 3 3-3M3 6h10" stroke="#9B7B5A" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
396
+ </div>
397
+ </div>
398
+ <div class="col-span-3 p-5 border-l border-[#1E2A38]">
399
+ <div class="font-semibold text-[14px] text-[#E2E8F0] mb-1">Marketplace Payouts</div>
400
+ <div class="mono text-[11px] text-[#3A4A5C]">connect · transfers · splits</div>
401
+ </div>
402
+ <div class="col-span-8 p-5 border-l border-[#1E2A38]">
403
+ <p class="text-[13px] text-[#8A9BAD] leading-relaxed">Connect accounts to onboard sellers/vendors. Configurable split rules (percentage, fixed, tiered). Same-day payouts in USD/EUR/GBP. Automatic 1099/W-9 collection and tax reporting.</p>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Fraud -->
408
+ <div class="grid grid-cols-12 hover:bg-[#111820] transition-colors">
409
+ <div class="col-span-1 p-5 flex items-start pt-5">
410
+ <div class="w-8 h-8 rounded-sm bg-[#9B5A5A]/10 border border-[#9B5A5A]/20 flex items-center justify-center flex-shrink-0">
411
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2L3 5v4c0 3 2.5 5 5 6 2.5-1 5-3 5-6V5L8 2z" stroke="#9B5A5A" stroke-width="1.2" stroke-linejoin="round"/></svg>
412
+ </div>
413
+ </div>
414
+ <div class="col-span-3 p-5 border-l border-[#1E2A38]">
415
+ <div class="font-semibold text-[14px] text-[#E2E8F0] mb-1">Fraud & Compliance</div>
416
+ <div class="mono text-[11px] text-[#3A4A5C]">ml-screening · kyc · pci</div>
417
+ </div>
418
+ <div class="col-span-8 p-5 border-l border-[#1E2A38]">
419
+ <p class="text-[13px] text-[#8A9BAD] leading-relaxed mb-3">ML fraud scoring on every transaction. 3DS2 adaptive authentication. Built-in KYC/AML checks for regulated markets. PCI DSS Level 1 certified — card data never touches your servers.</p>
420
+ <div class="flex gap-4">
421
+ <div class="text-[12px]"><span class="text-[#E2E8F0] font-medium">0.03%</span><span class="text-[#8A9BAD]"> fraud rate avg</span></div>
422
+ <div class="text-[12px]"><span class="text-[#E2E8F0] font-medium">PCI DSS L1</span><span class="text-[#8A9BAD]"> certified</span></div>
423
+ <div class="text-[12px]"><span class="text-[#E2E8F0] font-medium">SOC 2 Type II</span><span class="text-[#8A9BAD]"> audit</span></div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ </div>
429
+ </div>
430
+ </section>
431
+
432
+ <!-- ENTERPRISE TRUST BAR -->
433
+ <section class="border-b border-[#1E2A38] bg-[#111820]">
434
+ <div class="max-w-7xl mx-auto px-6 py-8">
435
+ <div class="flex flex-col md:flex-row items-center justify-between gap-6">
436
+ <div class="mono text-[11px] text-[#3A4A5C] tracking-widest uppercase">Trusted in production by</div>
437
+ <div class="flex items-center gap-10 flex-wrap justify-center">
438
+ <span class="mono text-[13px] text-[#3A4A5C] font-medium">Cartlane</span>
439
+ <span class="mono text-[13px] text-[#3A4A5C] font-medium">Vesper</span>
440
+ <span class="mono text-[13px] text-[#3A4A5C] font-medium">Quorum</span>
441
+ <span class="mono text-[13px] text-[#3A4A5C] font-medium">Archway</span>
442
+ <span class="mono text-[13px] text-[#3A4A5C] font-medium">Northloop</span>
443
+ <span class="mono text-[13px] text-[#3A4A5C] font-medium">Fulcrum</span>
444
+ </div>
445
+ <div class="flex items-center gap-3">
446
+ <div class="w-1.5 h-1.5 rounded-full bg-[#5A9B6A]"></div>
447
+ <span class="mono text-[11px] text-[#5A9B6A]">All systems operational</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </section>
452
+
453
+ <!-- DEVELOPER EXPERIENCE SECTION -->
454
+ <section class="border-b border-[#1E2A38]">
455
+ <div class="max-w-7xl mx-auto px-6 py-16 grid grid-cols-1 lg:grid-cols-2 gap-16">
456
+ <div>
457
+ <div class="mono text-[11px] text-[#E8A020] tracking-widest uppercase mb-3">Developer experience</div>
458
+ <h2 class="text-[28px] font-semibold tracking-tight text-[#E2E8F0] mb-5">
459
+ Built for the<br/>engineers who<br/>ship the checkout.
460
+ </h2>
461
+ <p class="text-[14px] text-[#8A9BAD] leading-relaxed mb-8">
462
+ Idiomatic SDKs in Node, Python, Ruby, Go, Java, and PHP. Webhooks with automatic retries. Test mode with simulated card numbers for every failure case. A dashboard that surfaces the same data your code sees.
463
+ </p>
464
+ <div class="space-y-4">
465
+ <div class="flex gap-4 items-start">
466
+ <div class="mono text-[11px] text-[#E8A020] mt-0.5 w-16 flex-shrink-0">SDK</div>
467
+ <div class="text-[13px] text-[#8A9BAD]">Node · Python · Ruby · Go · Java · PHP</div>
468
+ </div>
469
+ <div class="flex gap-4 items-start border-t border-[#1E2A38] pt-4">
470
+ <div class="mono text-[11px] text-[#E8A020] mt-0.5 w-16 flex-shrink-0">WEBHOOK</div>
471
+ <div class="text-[13px] text-[#8A9BAD]">250+ event types · automatic retry · signed payloads</div>
472
+ </div>
473
+ <div class="flex gap-4 items-start border-t border-[#1E2A38] pt-4">
474
+ <div class="mono text-[11px] text-[#E8A020] mt-0.5 w-16 flex-shrink-0">TEST</div>
475
+ <div class="text-[13px] text-[#8A9BAD]">Sandbox with card number fixtures, fraud simulation, clock control</div>
476
+ </div>
477
+ <div class="flex gap-4 items-start border-t border-[#1E2A38] pt-4">
478
+ <div class="mono text-[11px] text-[#E8A020] mt-0.5 w-16 flex-shrink-0">CLI</div>
479
+ <div class="text-[13px] text-[#8A9BAD]">tender listen · tender trigger · tender logs tail</div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <div class="space-y-4">
485
+ <!-- Webhook payload example -->
486
+ <div class="border border-[#1E2A38] rounded-sm bg-[#080D12]">
487
+ <div class="flex items-center justify-between px-4 py-2.5 border-b border-[#1E2A38]">
488
+ <span class="mono text-[11px] text-[#3A4A5C]">Webhook · payment_intent.succeeded</span>
489
+ <span class="mono text-[10px] bg-[#5A9B6A]/10 text-[#5A9B6A] border border-[#5A9B6A]/20 px-2 py-0.5 rounded-sm">DELIVERED</span>
490
+ </div>
491
+ <pre class="p-4 mono text-[12px] leading-relaxed overflow-x-auto"><code><span class="text-[#3A4A5C]">{</span>
492
+ <span class="text-[#9B7B5A]">"id"</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#5A9B6A]">"pi_3PkX9..."</span><span class="text-[#3A4A5C]">,</span>
493
+ <span class="text-[#9B7B5A]">"type"</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#5A9B6A]">"payment_intent.succeeded"</span><span class="text-[#3A4A5C]">,</span>
494
+ <span class="text-[#9B7B5A]">"data"</span><span class="text-[#3A4A5C]">: {</span>
495
+ <span class="text-[#9B7B5A]">"amount"</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#E8A020]">2400</span><span class="text-[#3A4A5C]">,</span>
496
+ <span class="text-[#9B7B5A]">"currency"</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#5A9B6A]">"usd"</span><span class="text-[#3A4A5C]">,</span>
497
+ <span class="text-[#9B7B5A]">"fraud_score"</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#E8A020]">12</span><span class="text-[#3A4A5C]">,</span>
498
+ <span class="text-[#9B7B5A]">"status"</span><span class="text-[#3A4A5C]">:</span> <span class="text-[#5A9B6A]">"succeeded"</span>
499
+ <span class="text-[#3A4A5C]">}</span>
500
+ <span class="text-[#3A4A5C]">}</span></code></pre>
501
+ </div>
502
+
503
+ <!-- CLI example -->
504
+ <div class="border border-[#1E2A38] rounded-sm bg-[#080D12] p-4">
505
+ <div class="mono text-[11px] text-[#3A4A5C] mb-3">CLI · listen mode</div>
506
+ <div class="space-y-1.5 mono text-[12px]">
507
+ <div><span class="text-[#E8A020]">$</span> <span class="text-[#E2E8F0]">tender listen --forward-to localhost:3000/webhooks</span></div>
508
+ <div class="text-[#3A4A5C] pl-4">Ready! Forwarding to http://localhost:3000...</div>
509
+ <div class="text-[#5A9B6A] pl-4">→ payment_intent.created <span class="text-[#3A4A5C]">pi_3PkX9...</span></div>
510
+ <div class="text-[#5A9B6A] pl-4">→ charge.succeeded <span class="text-[#3A4A5C]">ch_3PkX9...</span></div>
511
+ <div class="text-[#5A9B6A] pl-4">→ payment_intent.succeeded <span class="text-[#3A4A5C]">pi_3PkX9...</span></div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </section>
517
+
518
+ <!-- FOOTER -->
519
+ <footer class="border-t border-[#1E2A38]">
520
+ <div class="max-w-7xl mx-auto px-6 py-12 grid grid-cols-2 md:grid-cols-5 gap-8">
521
+ <div class="col-span-2 md:col-span-1">
522
+ <div class="flex items-center gap-2.5 mb-4">
523
+ <div class="w-6 h-6 rounded-[3px] bg-[#E8A020] flex items-center justify-center">
524
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
525
+ <path d="M2 4h10M2 7h7M2 10h10" stroke="#0C1117" stroke-width="1.5" stroke-linecap="round"/>
526
+ </svg>
527
+ </div>
528
+ <span class="font-semibold text-[14px] text-[#E2E8F0]">Tender</span>
529
+ </div>
530
+ <p class="text-[12px] text-[#3A4A5C] leading-relaxed">Payments API for internet businesses.</p>
531
+ </div>
532
+ <div>
533
+ <div class="mono text-[10px] text-[#3A4A5C] uppercase tracking-widest mb-3">Products</div>
534
+ <div class="space-y-2">
535
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Payments</a>
536
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Billing</a>
537
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Connect</a>
538
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Radar (Fraud)</a>
539
+ </div>
540
+ </div>
541
+ <div>
542
+ <div class="mono text-[10px] text-[#3A4A5C] uppercase tracking-widest mb-3">Developers</div>
543
+ <div class="space-y-2">
544
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">API Reference</a>
545
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">SDKs</a>
546
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Webhooks</a>
547
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Changelog</a>
548
+ </div>
549
+ </div>
550
+ <div>
551
+ <div class="mono text-[10px] text-[#3A4A5C] uppercase tracking-widest mb-3">Company</div>
552
+ <div class="space-y-2">
553
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">About</a>
554
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Blog</a>
555
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Careers</a>
556
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Status</a>
557
+ </div>
558
+ </div>
559
+ <div>
560
+ <div class="mono text-[10px] text-[#3A4A5C] uppercase tracking-widest mb-3">Legal</div>
561
+ <div class="space-y-2">
562
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Privacy</a>
563
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">Terms</a>
564
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">PCI DSS</a>
565
+ <a href="#" class="block text-[12px] text-[#8A9BAD] hover:text-[#E2E8F0] transition-colors">SOC 2</a>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ <div class="border-t border-[#1E2A38]">
570
+ <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
571
+ <span class="mono text-[11px] text-[#3A4A5C]">© 2026 Tender Payments Inc.</span>
572
+ <span class="mono text-[11px] text-[#3A4A5C]">PCI DSS L1 · SOC 2 Type II · ISO 27001</span>
573
+ </div>
574
+ </div>
575
+ </footer>
576
+
577
+ <script>
578
+ // Live terminal feed — new lines every few seconds
579
+ const logContainer = document.getElementById('log-container');
580
+ const entries = [
581
+ { method: 'POST', path: '/v1/payment_intents', status: '201', color: '5A9B6A' },
582
+ { method: 'GET ', path: '/v1/balance/history', status: '200', color: '5A9B6A' },
583
+ { method: 'POST', path: '/v1/refunds', status: '200', color: '5A9B6A' },
584
+ { method: 'GET ', path: '/v1/disputes?status=needs_response', status: '200', color: '5A9B6A' },
585
+ { method: 'POST', path: '/v1/subscriptions/sub_.../cancel', status: '200', color: '9B7B5A' },
586
+ { method: 'POST', path: '/v1/meters/usage', status: '200', color: '5A9B6A' },
587
+ ];
588
+ let ei = 0;
589
+
590
+ function pad(n) { return n < 10 ? '0' + n : n; }
591
+ function getTime() {
592
+ const now = new Date();
593
+ return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}.${String(now.getMilliseconds()).padStart(3,'0')}`;
594
+ }
595
+
596
+ setInterval(() => {
597
+ const e = entries[ei % entries.length];
598
+ ei++;
599
+ // Remove cursor line, add new real line, re-add cursor
600
+ const cursorLine = logContainer.querySelector('.cursor')?.parentElement;
601
+ if (cursorLine) cursorLine.remove();
602
+
603
+ const line = document.createElement('div');
604
+ line.className = 'flex gap-3 text-[#3A4A5C] log-line';
605
+ line.innerHTML = `<span>${getTime()}</span><span class="text-[#${e.color}]">${e.method}</span><span class="text-[#8A9BAD]">${e.path}</span><span class="text-[#${e.color}] ml-auto">${e.status}</span>`;
606
+ logContainer.appendChild(line);
607
+
608
+ const cursor = document.createElement('div');
609
+ cursor.className = 'flex gap-3 text-[#8A9BAD]';
610
+ cursor.innerHTML = `<span>${getTime()}</span><span class="text-[#5A9B6A]">POST</span><span>/v1/...</span><span class="cursor ml-auto"></span>`;
611
+ logContainer.appendChild(cursor);
612
+
613
+ // Keep scrolled
614
+ logContainer.scrollTop = logContainer.scrollHeight;
615
+
616
+ // Trim old lines
617
+ const lines = logContainer.querySelectorAll('div');
618
+ if (lines.length > 20) lines[0].remove();
619
+ }, 1800);
620
+ </script>
621
+ </body>
622
+ </html>