forgedock 1.0.16 → 1.0.18

package/docs/design/fixtures/briefs/README.md

@@ -0,0 +1,47 @@
+# Seed Briefs — Fixtures
+
+> Reproducible fixtures for the [ABC benchmark](../../abc-benchmark.md) (#878, milestone #13).
+> Each brief is **design-blind** (describes only what the product *does*) and uses an **anonymized**
+> product name. These are the fixed inputs re-run as the harness evolves.
+
+## What a brief is
+
+A brief is the single input shared by all three arms (A = ForgeDock `/design`, B = raw one-shot model,
+C = the real reference). It is derived from a real reference page by **stripping every visual cue** —
+no colors, no typefaces, no layout, no "make it like X" — and keeping only a factual description of what
+the product does, who it is for, and what the page must communicate.
+
+## Anonymization is load-bearing — do not leak the real brand
+
+Each brief maps to a real reference page (arm C), but the brief **must never name the real product or brand**.
+
+A real brand name lets the generation model recall that brand's actual page from training. That measures
+**brand recall, not taste**, and it unfairly inflates arm B (the raw model would reproduce a page it has
+memorized). Treat any real-brand reference inside a brief file as a fixture bug.
+
+The mapping below is kept in this README — **separate from the brief files** — so the generator, which is only
+ever handed a single `*.md` brief, never sees which real page it is being compared against.
+
+## Brief → reference (C) mapping
+
+| Anonymized brief | Real reference (arm C) | Archetype it exemplifies | Category |
+|------------------|------------------------|--------------------------|----------|
+| **Cadence**   | resend.com  | Clean / warm-minimal       | Email API / developer tooling |
+| **Tender**    | stripe.com  | Polished / enterprise-dev  | Payments API |
+| **Slipstream**| vercel.com  | Stark monochrome / brutalist-minimal | Deploy platform |
+| **Voltage**   | modal.com   | Technical / playful        | Serverless compute |
+| **Plume**     | linear.app  | Refined minimal / dark technical-luxury | Issue tracking |
+
+The references and archetypes are drawn from the [reference corpus](../../reference-corpus.md) (#880). The
+mapping is an internal record for scoring and the C-as-calibration check — it is **not** part of the brief
+input handed to any arm.
+
+## Adding a brief
+
+1. Pick a corpus reference (#880) not already represented, or one that adds a distinct archetype.
+2. Strip it to a design-blind, factual product description. Remove every visual cue.
+3. Choose an **anonymized** product name (no resemblance to the real brand).
+4. Save as `fixtures/briefs/<name>.md` following the structure of the existing briefs.
+5. Add the `<name> → real reference` row to the mapping table above.
+6. Keep n high enough: the benchmark runs 3–5 generations per arm across 3–5 products — adding a sixth brief
+   is fine, but never run fewer than three.

package/docs/design/fixtures/briefs/cadence.md

@@ -0,0 +1,39 @@
+# Brief — Cadence
+
+> Design-blind seed brief. Describes only what the product does. No visual direction.
+> Anonymized name — do not infer or reproduce any real brand.
+
+## Product
+
+**Cadence** is an email-sending API for developers and product teams. It lets engineers send
+transactional and marketing email from their applications with a few lines of code, and gives
+non-engineers a way to write, manage, and schedule those emails without touching the codebase.
+
+## Who it's for
+
+Developers integrating email into a product, plus the marketing and product people on the same team
+who own the content of those emails.
+
+## What it does
+
+- A simple REST API and SDKs to send email from application code.
+- Deliverability tooling: domain authentication, suppression handling, and bounce/complaint tracking.
+- A way to author emails as reusable templates, including from React-style components.
+- Analytics on opens, clicks, deliveries, and bounces.
+- A test/preview mode so teams can see an email before it ships.
+
+## What the landing page must communicate
+
+- That sending email from code is genuinely simple here (show, don't claim).
+- That deliverability is handled — the hard, invisible part of email is taken care of.
+- That both engineers and content owners have a place in the workflow.
+- Credibility: this is production infrastructure, not a toy.
+
+## Primary call to action
+
+Get started / sign up with an API key.
+
+## Constraints
+
+- Honest, concrete copy about what the product does — no vague promises.
+- The page should read as current, well-resourced SaaS for a technical audience.

package/docs/design/fixtures/briefs/plume.md

@@ -0,0 +1,39 @@
+# Brief — Plume
+
+> Design-blind seed brief. Describes only what the product does. No visual direction.
+> Anonymized name — do not infer or reproduce any real brand.
+
+## Product
+
+**Plume** is an issue tracking and project management tool for software teams. It is built to be fast and
+keyboard-driven, and it organizes work into issues, cycles, and projects so a team can plan, prioritize,
+and ship without ceremony.
+
+## Who it's for
+
+Software engineering teams and the product and design people who plan alongside them — small, fast-moving
+teams that find traditional project tools heavy.
+
+## What it does
+
+- Issues with statuses, priorities, labels, and assignees, navigable almost entirely by keyboard.
+- Cycles (time-boxed sprints) and longer-running projects to organize work.
+- Roadmap and progress views so leads can see where things stand.
+- Tight integrations with code hosting so issues track real development.
+- A fast, responsive interface that stays out of the way.
+
+## What the landing page must communicate
+
+- Speed and focus: the tool is fast and respects the user's attention.
+- It is opinionated and designed for teams who care about craft.
+- Planning and shipping live in one place, without bureaucracy.
+- A premium, considered product for discerning technical teams.
+
+## Primary call to action
+
+Get started / sign up.
+
+## Constraints
+
+- Crisp, confident copy; minimal and precise.
+- Reads as a refined, premium, well-funded product for technical teams.

package/docs/design/fixtures/briefs/slipstream.md

@@ -0,0 +1,39 @@
+# Brief — Slipstream
+
+> Design-blind seed brief. Describes only what the product does. No visual direction.
+> Anonymized name — do not infer or reproduce any real brand.
+
+## Product
+
+**Slipstream** is a platform for building and deploying web applications. Developers connect a git
+repository and every push is built and deployed automatically to a global edge network, with preview
+environments for each change and zero server management.
+
+## Who it's for
+
+Frontend and full-stack developers and the teams shipping web apps who want to deploy without operating
+infrastructure.
+
+## What it does
+
+- Git-connected deploys: push to a branch, get a live URL.
+- Preview deployments for every pull request, so changes can be reviewed running, not just as a diff.
+- A global edge network and CDN so apps are fast everywhere by default.
+- Serverless and edge functions for backend logic without managing servers.
+- Collaboration features so a whole team can see and comment on deploys.
+
+## What the landing page must communicate
+
+- Speed and immediacy: from push to production is effortless and fast.
+- Zero infrastructure burden — no servers, no ops.
+- It is the obvious home for modern frontend frameworks.
+- Confidence and restraint: this is a serious, opinionated platform.
+
+## Primary call to action
+
+Deploy now / start for free.
+
+## Constraints
+
+- Concrete and direct copy; let the capability speak.
+- Reads as a stark, confident, well-funded developer platform.

package/docs/design/fixtures/briefs/tender.md

@@ -0,0 +1,39 @@
+# Brief — Tender
+
+> Design-blind seed brief. Describes only what the product does. No visual direction.
+> Anonymized name — do not infer or reproduce any real brand.
+
+## Product
+
+**Tender** is a payments platform and API for internet businesses. It lets companies accept payments,
+send payouts, and run subscription billing through a single integration, and handles the regulatory and
+financial plumbing — fraud screening, currency conversion, compliance — on their behalf.
+
+## Who it's for
+
+Engineers building checkout, billing, or marketplace flows, plus finance and operations teams at the
+companies that run on top of those flows.
+
+## What it does
+
+- A unified API to accept cards and local payment methods across many countries and currencies.
+- Subscription and usage-based billing with proration and invoicing.
+- Payouts and money movement for marketplaces and platforms.
+- Fraud detection and risk scoring built in.
+- A dashboard for finance teams to see revenue, disputes, and payouts.
+
+## What the landing page must communicate
+
+- Breadth and reliability: this handles serious money at scale, globally.
+- Developer-first: integration is clean and well-documented.
+- Trust and compliance are handled — the regulated, scary parts are someone else's problem now.
+- It serves both the engineers who integrate and the finance teams who reconcile.
+
+## Primary call to action
+
+Start integrating / view the docs.
+
+## Constraints
+
+- Enterprise-credible but not stuffy; concrete about capabilities.
+- Reads as a high-stakes, well-funded developer platform.

package/docs/design/fixtures/briefs/voltage.md

@@ -0,0 +1,39 @@
+# Brief — Voltage
+
+> Design-blind seed brief. Describes only what the product does. No visual direction.
+> Anonymized name — do not infer or reproduce any real brand.
+
+## Product
+
+**Voltage** is a serverless platform for running compute-heavy and AI workloads. Developers write
+ordinary Python, attach the resources they need — including GPUs — and Voltage runs it in the cloud on
+demand, scaling from zero to thousands of containers and back without provisioning anything.
+
+## Who it's for
+
+Machine-learning engineers, data scientists, and backend developers who need heavy or bursty compute
+(model inference, batch jobs, training) but do not want to manage clusters.
+
+## What it does
+
+- Run Python functions in the cloud by adding a decorator — no Dockerfiles or YAML required.
+- On-demand GPUs and large CPU/memory, billed only while running.
+- Scale to thousands of parallel containers and back to zero automatically.
+- Schedule jobs, serve inference endpoints, and run long batch pipelines.
+- Fast cold starts and a local-feeling developer loop.
+
+## What the landing page must communicate
+
+- Power made simple: serious compute, but the developer experience feels like writing local code.
+- Pay-for-what-you-use economics — idle costs nothing.
+- It is built for the AI/ML era specifically.
+- Technical credibility: the audience is engineers who will read the code sample closely.
+
+## Primary call to action
+
+Run your first function / get started.
+
+## Constraints
+
+- Technical, code-forward copy; show a real usage example in spirit.
+- Reads as a capable, modern, well-funded compute platform.

package/docs/design/fixtures/runs/b-vs-c-baseline/cadence/arm-b/run-1.html

@@ -0,0 +1,364 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Cadence — Email API for developers</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            mono: ['JetBrains Mono', 'Fira Code', 'Cascadia Code', 'monospace'],
+            sans: ['Inter', 'system-ui', 'sans-serif'],
+          },
+          colors: {
+            brand: {
+              50:  '#f0fdf4',
+              100: '#dcfce7',
+              400: '#4ade80',
+              500: '#22c55e',
+              600: '#16a34a',
+              700: '#15803d',
+              900: '#14532d',
+            }
+          }
+        }
+      }
+    }
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+  <style>
+    .code-block { background: #0d1117; }
+    .token-keyword { color: #ff7b72; }
+    .token-string  { color: #a5d6ff; }
+    .token-func    { color: #d2a8ff; }
+    .token-prop    { color: #79c0ff; }
+    .token-comment { color: #8b949e; }
+    .token-number  { color: #f2cc60; }
+    .token-plain   { color: #e6edf3; }
+    .gradient-hero {
+      background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(34,197,94,0.15) 0%, transparent 60%),
+                  #09090b;
+    }
+    .glow-green {
+      box-shadow: 0 0 0 1px rgba(34,197,94,0.3), 0 0 40px rgba(34,197,94,0.08);
+    }
+    .stat-card {
+      background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
+    }
+  </style>
+</head>
+<body class="bg-zinc-950 text-zinc-100 font-sans antialiased">
+
+  <!-- Nav -->
+  <nav class="border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-sm sticky top-0 z-50">
+    <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
+      <div class="flex items-center gap-8">
+        <span class="font-mono font-semibold text-lg tracking-tight text-white">cadence<span class="text-brand-500">.</span></span>
+        <div class="hidden md:flex items-center gap-6 text-sm text-zinc-400">
+          <a href="#" class="hover:text-zinc-100 transition-colors">Docs</a>
+          <a href="#" class="hover:text-zinc-100 transition-colors">API Reference</a>
+          <a href="#" class="hover:text-zinc-100 transition-colors">Pricing</a>
+          <a href="#" class="hover:text-zinc-100 transition-colors">Blog</a>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <a href="#" class="text-sm text-zinc-400 hover:text-zinc-100 transition-colors">Log in</a>
+        <a href="#" class="text-sm bg-brand-500 hover:bg-brand-400 text-black font-semibold px-4 py-1.5 rounded-md transition-colors">Get API key</a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <section class="gradient-hero pt-24 pb-20 px-6">
+    <div class="max-w-6xl mx-auto">
+      <div class="inline-flex items-center gap-2 bg-zinc-900 border border-zinc-800 rounded-full px-3 py-1 text-xs text-zinc-400 mb-8">
+        <span class="w-1.5 h-1.5 rounded-full bg-brand-500 inline-block"></span>
+        99.97% deliverability rate across production senders
+      </div>
+
+      <div class="grid lg:grid-cols-2 gap-16 items-center">
+        <div>
+          <h1 class="text-5xl font-extrabold tracking-tight leading-tight mb-6">
+            Email infrastructure<br />
+            that <span class="text-brand-400">actually delivers.</span>
+          </h1>
+          <p class="text-lg text-zinc-400 leading-relaxed mb-8">
+            A REST API and SDKs for sending transactional and marketing email. Cadence handles domain authentication, bounce tracking, and deliverability — so you ship the feature, not the plumbing.
+          </p>
+          <div class="flex flex-wrap gap-3 mb-10">
+            <a href="#" class="bg-brand-500 hover:bg-brand-400 text-black font-semibold px-6 py-3 rounded-lg text-sm transition-colors">Get started free</a>
+            <a href="#" class="bg-zinc-800 hover:bg-zinc-700 text-zinc-100 font-medium px-6 py-3 rounded-lg text-sm transition-colors">Read the docs →</a>
+          </div>
+          <p class="text-xs text-zinc-600">Free tier: 5,000 emails/month. No credit card required.</p>
+        </div>
+
+        <!-- Code panel -->
+        <div class="glow-green rounded-xl overflow-hidden border border-zinc-800">
+          <div class="code-block px-4 py-3 flex items-center gap-2 border-b border-zinc-800">
+            <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
+            <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
+            <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
+            <span class="ml-3 text-xs text-zinc-500 font-mono">send-welcome-email.ts</span>
+          </div>
+          <pre class="code-block px-5 py-5 text-sm font-mono leading-relaxed overflow-x-auto"><code><span class="token-keyword">import</span> <span class="token-plain">{ Cadence } </span><span class="token-keyword">from</span> <span class="token-string">'@cadence/sdk'</span><span class="token-plain">;</span>
+
+<span class="token-keyword">const</span> <span class="token-plain">client = </span><span class="token-keyword">new</span> <span class="token-func">Cadence</span><span class="token-plain">({</span>
+  <span class="token-prop">apiKey</span><span class="token-plain">: process.env.</span><span class="token-prop">CADENCE_API_KEY</span><span class="token-plain">,</span>
+<span class="token-plain">});</span>
+
+<span class="token-keyword">await</span> <span class="token-plain">client.email.</span><span class="token-func">send</span><span class="token-plain">({</span>
+  <span class="token-prop">to</span><span class="token-plain">:       </span><span class="token-string">'maya@example.com'</span><span class="token-plain">,</span>
+  <span class="token-prop">from</span><span class="token-plain">:     </span><span class="token-string">'hello@yourapp.com'</span><span class="token-plain">,</span>
+  <span class="token-prop">template</span><span class="token-plain">: </span><span class="token-string">'welcome-v2'</span><span class="token-plain">,</span>
+  <span class="token-prop">data</span><span class="token-plain">: {</span>
+    <span class="token-prop">name</span><span class="token-plain">:      </span><span class="token-string">'Maya'</span><span class="token-plain">,</span>
+    <span class="token-prop">plan</span><span class="token-plain">:      </span><span class="token-string">'pro'</span><span class="token-plain">,</span>
+    <span class="token-prop">loginUrl</span><span class="token-plain">:  </span><span class="token-string">'https://app.yourapp.com/login'</span><span class="token-plain">,</span>
+  <span class="token-plain">},</span>
+<span class="token-plain">});</span>
+
+<span class="token-comment">// { id: 'msg_01HXYZ...', status: 'queued' }</span></code></pre>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Stats bar -->
+  <section class="border-y border-zinc-800 py-10 bg-zinc-900/30">
+    <div class="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+      <div>
+        <div class="text-3xl font-bold text-white mb-1">4.2B+</div>
+        <div class="text-sm text-zinc-500">Emails delivered / year</div>
+      </div>
+      <div>
+        <div class="text-3xl font-bold text-white mb-1">99.97%</div>
+        <div class="text-sm text-zinc-500">Deliverability rate</div>
+      </div>
+      <div>
+        <div class="text-3xl font-bold text-white mb-1">&lt;120ms</div>
+        <div class="text-sm text-zinc-500">Median send latency</div>
+      </div>
+      <div>
+        <div class="text-3xl font-bold text-white mb-1">11 SDKs</div>
+        <div class="text-sm text-zinc-500">Node, Python, Go, Ruby…</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- The hard part is handled -->
+  <section class="py-24 px-6">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl font-bold mb-4">The invisible work is done for you</h2>
+        <p class="text-zinc-400 max-w-xl mx-auto">Deliverability is a full-time job. We've already done it. Every account gets production-grade email infrastructure from day one.</p>
+      </div>
+      <div class="grid md:grid-cols-3 gap-6">
+
+        <div class="stat-card border border-zinc-800 rounded-xl p-6">
+          <div class="w-10 h-10 bg-brand-500/10 border border-brand-500/20 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-5 h-5 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
+          </div>
+          <h3 class="font-semibold text-white mb-2">Domain authentication</h3>
+          <p class="text-sm text-zinc-400 leading-relaxed">SPF, DKIM, and DMARC configured in minutes with guided DNS setup. We verify and monitor your records continuously.</p>
+        </div>
+
+        <div class="stat-card border border-zinc-800 rounded-xl p-6">
+          <div class="w-10 h-10 bg-brand-500/10 border border-brand-500/20 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-5 h-5 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
+          </div>
+          <h3 class="font-semibold text-white mb-2">Suppression management</h3>
+          <p class="text-sm text-zinc-400 leading-relaxed">Bounces, unsubscribes, and spam complaints are captured and suppressed automatically. No manual list hygiene.</p>
+        </div>
+
+        <div class="stat-card border border-zinc-800 rounded-xl p-6">
+          <div class="w-10 h-10 bg-brand-500/10 border border-brand-500/20 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-5 h-5 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+          </div>
+          <h3 class="font-semibold text-white mb-2">Reputation monitoring</h3>
+          <p class="text-sm text-zinc-400 leading-relaxed">Real-time visibility into your sender reputation, bounce rates, and spam complaint rates — with alerts before they become problems.</p>
+        </div>
+
+        <div class="stat-card border border-zinc-800 rounded-xl p-6">
+          <div class="w-10 h-10 bg-brand-500/10 border border-brand-500/20 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-5 h-5 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
+          </div>
+          <h3 class="font-semibold text-white mb-2">Preview &amp; test mode</h3>
+          <p class="text-sm text-zinc-400 leading-relaxed">Send to your test environment without touching production inboxes. See exactly how an email renders before it ships to users.</p>
+        </div>
+
+        <div class="stat-card border border-zinc-800 rounded-xl p-6">
+          <div class="w-10 h-10 bg-brand-500/10 border border-brand-500/20 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-5 h-5 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.486M7 17h.01" /></svg>
+          </div>
+          <h3 class="font-semibold text-white mb-2">React component templates</h3>
+          <p class="text-sm text-zinc-400 leading-relaxed">Write emails as React components. Compile to battle-tested HTML. Version control your templates like the rest of your code.</p>
+        </div>
+
+        <div class="stat-card border border-zinc-800 rounded-xl p-6">
+          <div class="w-10 h-10 bg-brand-500/10 border border-brand-500/20 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-5 h-5 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
+          </div>
+          <h3 class="font-semibold text-white mb-2">Analytics dashboard</h3>
+          <p class="text-sm text-zinc-400 leading-relaxed">Opens, clicks, deliveries, and bounces per campaign and per message. Exportable via webhook or the Events API.</p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- For both engineers and content owners -->
+  <section class="py-24 px-6 bg-zinc-900/30 border-y border-zinc-800">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl font-bold mb-4">One tool for your whole team</h2>
+        <p class="text-zinc-400 max-w-xl mx-auto">Engineers control the plumbing. Everyone else controls the content. No PRs required to update copy.</p>
+      </div>
+      <div class="grid md:grid-cols-2 gap-8">
+
+        <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-8">
+          <div class="text-xs font-mono text-brand-400 uppercase tracking-widest mb-4">For engineers</div>
+          <h3 class="text-xl font-semibold mb-4">An API that fits your stack</h3>
+          <ul class="space-y-3 text-sm text-zinc-400">
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> REST API + SDKs for Node, Python, Go, Ruby, PHP, Elixir, and more</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Idempotency keys — safe to retry without duplicate sends</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Webhook delivery for open/click/bounce events</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Scheduled sends via API — no cron job needed</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> React Email support — templates are code, not config</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Staging environment with real send simulation</li>
+          </ul>
+        </div>
+
+        <div class="bg-zinc-900 border border-zinc-800 rounded-xl p-8">
+          <div class="text-xs font-mono text-brand-400 uppercase tracking-widest mb-4">For content &amp; product</div>
+          <h3 class="text-xl font-semibold mb-4">Edit emails without a deploy</h3>
+          <ul class="space-y-3 text-sm text-zinc-400">
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Visual template editor — update subject, copy, and layout directly</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Preview any template with real data before publishing</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Schedule campaigns and one-time sends from the dashboard</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Per-template analytics: open rate, click rate, unsubscribes</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Role-based access — content editors can't touch API credentials</li>
+            <li class="flex gap-3"><span class="text-brand-500 mt-0.5">✓</span> Version history — revert any template to a previous state</li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- API snippet section -->
+  <section class="py-24 px-6">
+    <div class="max-w-6xl mx-auto">
+      <div class="grid lg:grid-cols-2 gap-16 items-start">
+        <div>
+          <h2 class="text-3xl font-bold mb-4">From zero to sending in under five minutes</h2>
+          <p class="text-zinc-400 mb-8 leading-relaxed">Install the SDK, set your API key, call <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded text-sm font-mono">email.send()</code>. That's the whole integration for most use cases. No SMTP config, no relay setup, no warm-up spreadsheet.</p>
+          <div class="space-y-4">
+            <div class="flex gap-4 items-start">
+              <div class="w-8 h-8 rounded-full bg-brand-500/20 border border-brand-500/30 text-brand-400 text-sm font-mono font-semibold flex items-center justify-center shrink-0 mt-0.5">1</div>
+              <div>
+                <div class="font-medium text-white mb-1">Install the SDK</div>
+                <div class="text-sm text-zinc-400">npm, pip, go get, gem — whichever fits your stack</div>
+              </div>
+            </div>
+            <div class="flex gap-4 items-start">
+              <div class="w-8 h-8 rounded-full bg-brand-500/20 border border-brand-500/30 text-brand-400 text-sm font-mono font-semibold flex items-center justify-center shrink-0 mt-0.5">2</div>
+              <div>
+                <div class="font-medium text-white mb-1">Add your API key</div>
+                <div class="text-sm text-zinc-400">One environment variable. No SMTP credentials to juggle.</div>
+              </div>
+            </div>
+            <div class="flex gap-4 items-start">
+              <div class="w-8 h-8 rounded-full bg-brand-500/20 border border-brand-500/30 text-brand-400 text-sm font-mono font-semibold flex items-center justify-center shrink-0 mt-0.5">3</div>
+              <div>
+                <div class="font-medium text-white mb-1">Send your first email</div>
+                <div class="text-sm text-zinc-400">Hit the API. Check the dashboard. It's there.</div>
+              </div>
+            </div>
+            <div class="flex gap-4 items-start">
+              <div class="w-8 h-8 rounded-full bg-brand-500/20 border border-brand-500/30 text-brand-400 text-sm font-mono font-semibold flex items-center justify-center shrink-0 mt-0.5">4</div>
+              <div>
+                <div class="font-medium text-white mb-1">Authenticate your domain</div>
+                <div class="text-sm text-zinc-400">Follow the DNS guide to unlock full deliverability and custom from addresses.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div class="glow-green rounded-xl overflow-hidden border border-zinc-800">
+            <div class="code-block px-4 py-3 flex items-center gap-2 border-b border-zinc-800">
+              <span class="text-xs text-zinc-500 font-mono">Shell</span>
+            </div>
+            <pre class="code-block px-5 py-4 text-sm font-mono leading-relaxed overflow-x-auto"><code><span class="token-comment"># Install</span>
+<span class="token-plain">npm install @cadence/sdk</span>
+
+<span class="token-comment"># Set your key</span>
+<span class="token-plain">export CADENCE_API_KEY=</span><span class="token-string">sk_live_...</span></code></pre>
+          </div>
+
+          <div class="glow-green rounded-xl overflow-hidden border border-zinc-800 mt-4">
+            <div class="code-block px-4 py-3 flex items-center gap-2 border-b border-zinc-800">
+              <span class="text-xs text-zinc-500 font-mono">Python</span>
+            </div>
+            <pre class="code-block px-5 py-4 text-sm font-mono leading-relaxed overflow-x-auto"><code><span class="token-keyword">from</span> <span class="token-plain">cadence </span><span class="token-keyword">import</span> <span class="token-plain">Cadence</span>
+
+<span class="token-plain">client = </span><span class="token-func">Cadence</span><span class="token-plain">(api_key=</span><span class="token-string">"sk_live_..."</span><span class="token-plain">)</span>
+
+<span class="token-plain">client.email.</span><span class="token-func">send</span><span class="token-plain">(</span>
+  <span class="token-prop">to</span><span class="token-plain">=</span><span class="token-string">"user@example.com"</span><span class="token-plain">,</span>
+  <span class="token-prop">from_</span><span class="token-plain">=</span><span class="token-string">"you@yourapp.com"</span><span class="token-plain">,</span>
+  <span class="token-prop">template</span><span class="token-plain">=</span><span class="token-string">"password-reset"</span><span class="token-plain">,</span>
+  <span class="token-prop">data</span><span class="token-plain">={</span><span class="token-string">"reset_url"</span><span class="token-plain">: reset_link}</span>
+<span class="token-plain">)</span></code></pre>
+          </div>
+
+          <div class="glow-green rounded-xl overflow-hidden border border-zinc-800 mt-4">
+            <div class="code-block px-4 py-3 flex items-center gap-2 border-b border-zinc-800">
+              <span class="text-xs text-zinc-500 font-mono">Go</span>
+            </div>
+            <pre class="code-block px-5 py-4 text-sm font-mono leading-relaxed overflow-x-auto"><code><span class="token-plain">client := cadence.</span><span class="token-func">New</span><span class="token-plain">(</span><span class="token-string">"sk_live_..."</span><span class="token-plain">)</span>
+
+<span class="token-plain">_, err := client.Email.</span><span class="token-func">Send</span><span class="token-plain">(ctx, &cadence.SendParams{</span>
+  <span class="token-prop">To</span><span class="token-plain">:       </span><span class="token-string">"user@example.com"</span><span class="token-plain">,</span>
+  <span class="token-prop">From</span><span class="token-plain">:     </span><span class="token-string">"you@yourapp.com"</span><span class="token-plain">,</span>
+  <span class="token-prop">Template</span><span class="token-plain">: </span><span class="token-string">"order-confirmed"</span><span class="token-plain">,</span>
+<span class="token-plain">})</span></code></pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA -->
+  <section class="py-24 px-6">
+    <div class="max-w-2xl mx-auto text-center">
+      <h2 class="text-4xl font-bold mb-4">Start sending in minutes</h2>
+      <p class="text-zinc-400 mb-8 text-lg">Free tier includes 5,000 emails per month. No credit card required. Full API access from day one.</p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="#" class="bg-brand-500 hover:bg-brand-400 text-black font-bold px-8 py-4 rounded-lg text-base transition-colors">Get your API key →</a>
+        <a href="#" class="bg-zinc-800 hover:bg-zinc-700 text-zinc-100 font-medium px-8 py-4 rounded-lg text-base transition-colors">Read the quickstart</a>
+      </div>
+      <p class="text-xs text-zinc-600 mt-6">Used in production by 3,000+ engineering teams</p>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="border-t border-zinc-800 py-10 px-6">
+    <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+      <span class="font-mono font-semibold text-zinc-400">cadence<span class="text-brand-500">.</span></span>
+      <div class="flex gap-6 text-sm text-zinc-600">
+        <a href="#" class="hover:text-zinc-400">Privacy</a>
+        <a href="#" class="hover:text-zinc-400">Terms</a>
+        <a href="#" class="hover:text-zinc-400">Status</a>
+        <a href="#" class="hover:text-zinc-400">Security</a>
+        <a href="#" class="hover:text-zinc-400">Contact</a>
+      </div>
+    </div>
+  </footer>
+
+</body>
+</html>