@contractspec/bundle.marketing 3.7.6 → 3.7.7

package/dist/components/marketing/ProductClientPage.js

@@ -2,268 +2,184 @@
 var __require = import.meta.require;
 
 // src/components/marketing/ProductClientPage.tsx
-import Link from "@contractspec/lib.ui-link";
 import {
   analyticsEventNames,
   captureAnalyticsEvent
 } from "@contractspec/bundle.library/libs/posthog/client";
 import {
-  CheckCircle,
-  ChevronRight,
-  Database,
-  FileCode,
-  GitBranch,
-  Layers,
-  RefreshCw,
-  Shield,
-  Unlock,
-  Zap
+  ArrowRight,
+  Blocks,
+  Bot,
+  Braces,
+  Captions,
+  CheckCircle2,
+  ClipboardCheck,
+  Layers3,
+  ShieldCheck,
+  Sparkles
 } from "lucide-react";
+import Link from "next/link";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
+var layers = [
+  {
+    name: "Contracts and specs",
+    copy: "The canonical product rules your team wants the system to keep respecting over time.",
+    icon: Braces
+  },
+  {
+    name: "Generation and runtime bridges",
+    copy: "The adapters that turn those rules into API, UI, data, event, MCP, and client-facing surfaces.",
+    icon: Layers3
+  },
+  {
+    name: "Harness and proof workflows",
+    copy: "The inspection, replay, evaluation, and evidence surfaces that tell you whether automation is safe.",
+    icon: ClipboardCheck
+  },
+  {
+    name: "Studio operating product",
+    copy: "The opinionated team workflow for running evidence, drafts, review, exports, and checks on top of the same foundation.",
+    icon: Sparkles
+  }
+];
+var comparison = [
+  {
+    label: "OSS/Core",
+    points: [
+      "You want explicit contracts, safe regeneration, and standards-first outputs.",
+      "You need to stabilize an existing product incrementally.",
+      "You want the foundation without being forced into a hosted product loop."
+    ]
+  },
+  {
+    label: "Studio",
+    points: [
+      "You want the operating surface for evidence, drafts, review, exports, and follow-up.",
+      "You want packaged workflows and coordination on top of the same contract system.",
+      "You want the product that absorbs more operational complexity for the team."
+    ]
+  }
+];
+var proofs = [
+  {
+    label: "Explicit contracts, not inferred conventions",
+    icon: ShieldCheck
+  },
+  {
+    label: "Standard outputs the team can own and change",
+    icon: Bot
+  },
+  {
+    label: "Multi-surface consistency across API, UI, data, and tools",
+    icon: Blocks
+  },
+  {
+    label: "Incremental adoption instead of rewrite-only adoption",
+    icon: Captions
+  }
+];
+function trackInstall() {
+  captureAnalyticsEvent(analyticsEventNames.CTA_INSTALL_CLICK, {
+    surface: "product-hero"
+  });
+}
+function trackStudio() {
+  captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+    surface: "product-hero"
+  });
+}
 var ProductClientPage = () => /* @__PURE__ */ jsxDEV("main", {
-  className: "",
   children: [
     /* @__PURE__ */ jsxDEV("section", {
-      className: "section-padding hero-gradient relative",
+      className: "section-padding hero-gradient border-border/70 border-b",
       children: /* @__PURE__ */ jsxDEV("div", {
-        className: "mx-auto max-w-4xl space-y-6 text-center",
+        className: "editorial-shell grid gap-10 lg:grid-cols-[1.05fr_0.95fr]",
         children: [
-          /* @__PURE__ */ jsxDEV("h1", {
-            className: "text-5xl leading-tight font-bold md:text-6xl",
-            children: "Compiler for AI-coded systems"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground mx-auto max-w-2xl text-lg",
-            children: "Define contracts once. Generate consistent code across API, DB, UI, and events. Regenerate safely anytime. No lock-in."
-          }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("div", {
-            className: "flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row",
-            children: [
-              /* @__PURE__ */ jsxDEV(Link, {
-                href: "/install",
-                onClick: () => captureAnalyticsEvent(analyticsEventNames.CTA_INSTALL_CLICK, {
-                  surface: "product-hero"
-                }),
-                className: "btn-primary inline-flex items-center gap-2",
-                children: [
-                  "Install OSS Core ",
-                  /* @__PURE__ */ jsxDEV(ChevronRight, {
-                    size: 16
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(Link, {
-                href: "/pricing",
-                className: "btn-ghost",
-                children: "View pricing"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV("section", {
-      className: "section-padding border-border border-b",
-      children: /* @__PURE__ */ jsxDEV("div", {
-        className: "mx-auto max-w-4xl space-y-8",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-4",
+            className: "space-y-6",
             children: [
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "editorial-kicker",
+                children: "Product overview"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("h1", {
+                className: "editorial-title max-w-4xl",
+                children: "An open system for keeping AI-native products coherent."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "editorial-subtitle",
+                children: "ContractSpec is not one narrow generator. It is the explicit layer that lets teams define system behavior, keep multiple surfaces aligned, regenerate safely, and move into Studio when they want the operating product."
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("div", {
-                className: "inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1",
+                className: "flex flex-col gap-3 sm:flex-row",
                 children: [
-                  /* @__PURE__ */ jsxDEV(Layers, {
-                    size: 16,
-                    className: "text-blue-400"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-sm font-medium text-blue-300",
-                    children: "Multi-Surface Consistency"
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "/install",
+                    className: "btn-primary",
+                    onClick: trackInstall,
+                    children: [
+                      "Start with OSS ",
+                      /* @__PURE__ */ jsxDEV(ArrowRight, {
+                        className: "ml-2 h-4 w-4"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "https://www.contractspec.studio",
+                    className: "btn-ghost",
+                    onClick: trackStudio,
+                    children: "Explore Studio"
                   }, undefined, false, undefined, this)
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("h2", {
-                className: "text-3xl font-bold md:text-4xl",
-                children: "One contract, all surfaces in sync"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-lg",
-                children: "Stop chasing drift between your API, database, UI, and events. One spec generates all outputs, guaranteed to stay consistent."
-              }, undefined, false, undefined, this)
+              }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV("div", {
-            className: "grid gap-6 md:grid-cols-2",
+            className: "editorial-panel space-y-5",
             children: [
-              {
-                title: "REST & GraphQL API",
-                description: "Type-safe endpoints with validation. Standard Express, Hono, Elysia, or Apollo handlers.",
-                icon: Zap
-              },
-              {
-                title: "Database Schema",
-                description: "Prisma migrations and types generated from the same spec. Always in sync with your API.",
-                icon: Database
-              },
-              {
-                title: "UI Components",
-                description: "React forms and views derived from specs. Validation and types flow through automatically.",
-                icon: FileCode
-              },
-              {
-                title: "MCP Tools & Events",
-                description: "AI agent tool definitions and event schemas. Same contract, different surfaces.",
-                icon: GitBranch
-              }
-            ].map((item, i) => /* @__PURE__ */ jsxDEV("div", {
-              className: "card-subtle space-y-4 p-6",
-              children: [
-                /* @__PURE__ */ jsxDEV(item.icon, {
-                  className: "text-blue-400",
-                  size: 24
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("h3", {
-                  className: "text-lg font-bold",
-                  children: item.title
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("p", {
-                  className: "text-muted-foreground text-sm",
-                  children: item.description
-                }, undefined, false, undefined, this)
-              ]
-            }, i, true, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV("section", {
-      className: "section-padding border-border bg-muted/20 border-b",
-      children: /* @__PURE__ */ jsxDEV("div", {
-        className: "mx-auto max-w-4xl space-y-8",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-4",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "inline-flex items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1",
-                children: [
-                  /* @__PURE__ */ jsxDEV(RefreshCw, {
-                    size: 16,
-                    className: "text-emerald-400"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-sm font-medium text-emerald-300",
-                    children: "Safe Regeneration"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "editorial-kicker",
+                children: "What the category really is"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("h2", {
-                className: "text-3xl font-bold md:text-4xl",
-                children: "Regenerate anytime without fear"
+                className: "editorial-panel-title",
+                children: "Lead with the system, not just the generation step."
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-lg",
-                children: "Contracts enforce invariants. Breaking changes are caught at compile time, not production. Regenerate with confidence."
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "grid gap-6 md:grid-cols-2",
-            children: [
+                className: "text-muted-foreground text-sm leading-7",
+                children: "Generation matters, but it is not the whole story. The real value is that contracts, runtime adapters, proof surfaces, and the Studio operating loop all remain legible as parts of the same product system."
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("div", {
-                className: "card-subtle space-y-4 p-6",
+                className: "editorial-divider"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4 md:grid-cols-2",
                 children: [
-                  /* @__PURE__ */ jsxDEV("h3", {
-                    className: "font-bold",
-                    children: "Spec-First Safety"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: "AI agents read specs, not implementations. Generated code that violates contracts gets flagged automatically."
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("ul", {
-                    className: "text-muted-foreground space-y-2 text-sm",
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "rounded-[24px] border border-border/70 bg-muted/45 p-4",
                     children: [
-                      /* @__PURE__ */ jsxDEV("li", {
-                        className: "flex gap-3",
-                        children: [
-                          /* @__PURE__ */ jsxDEV(CheckCircle, {
-                            size: 16,
-                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
-                          }, undefined, false, undefined, this),
-                          "Type-safe from spec to runtime"
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV("li", {
-                        className: "flex gap-3",
-                        children: [
-                          /* @__PURE__ */ jsxDEV(CheckCircle, {
-                            size: 16,
-                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
-                          }, undefined, false, undefined, this),
-                          "Invariants enforced at compile time"
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV("li", {
-                        className: "flex gap-3",
-                        children: [
-                          /* @__PURE__ */ jsxDEV(CheckCircle, {
-                            size: 16,
-                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
-                          }, undefined, false, undefined, this),
-                          "Breaking changes detected early"
-                        ]
-                      }, undefined, true, undefined, this)
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "editorial-label",
+                        children: "Better umbrella"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "mt-2 font-medium text-sm",
+                        children: "Open spec system for AI-native software"
+                      }, undefined, false, undefined, this)
                     ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "card-subtle space-y-4 p-6",
-                children: [
-                  /* @__PURE__ */ jsxDEV("h3", {
-                    className: "font-bold",
-                    children: "Version Control Built-in"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: "Every spec change is tracked. Roll back to any previous version. Migrations are explicit and reversible."
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("ul", {
-                    className: "text-muted-foreground space-y-2 text-sm",
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "rounded-[24px] border border-border/70 bg-muted/45 p-4",
                     children: [
-                      /* @__PURE__ */ jsxDEV("li", {
-                        className: "flex gap-3",
-                        children: [
-                          /* @__PURE__ */ jsxDEV(CheckCircle, {
-                            size: 16,
-                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
-                          }, undefined, false, undefined, this),
-                          "Git-native spec history"
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV("li", {
-                        className: "flex gap-3",
-                        children: [
-                          /* @__PURE__ */ jsxDEV(CheckCircle, {
-                            size: 16,
-                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
-                          }, undefined, false, undefined, this),
-                          "Explicit migration paths"
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV("li", {
-                        className: "flex gap-3",
-                        children: [
-                          /* @__PURE__ */ jsxDEV(CheckCircle, {
-                            size: 16,
-                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
-                          }, undefined, false, undefined, this),
-                          "One-click rollback"
-                        ]
-                      }, undefined, true, undefined, this)
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "editorial-label",
+                        children: "Where \u201Ccompiler\u201D belongs"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "mt-2 font-medium text-sm",
+                        children: "Inside the technical proof, not as the whole company category"
+                      }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
                 ]
@@ -274,282 +190,168 @@ var ProductClientPage = () => /* @__PURE__ */ jsxDEV("main", {
       }, undefined, true, undefined, this)
     }, undefined, false, undefined, this),
     /* @__PURE__ */ jsxDEV("section", {
-      className: "section-padding border-border border-b",
+      className: "editorial-section",
       children: /* @__PURE__ */ jsxDEV("div", {
-        className: "mx-auto max-w-4xl space-y-8",
+        className: "editorial-shell space-y-8",
         children: [
           /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-4",
+            className: "max-w-3xl space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/10 px-3 py-1",
-                children: [
-                  /* @__PURE__ */ jsxDEV(Shield, {
-                    size: 16,
-                    className: "text-violet-400"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-sm font-medium text-violet-300",
-                    children: "Contract Enforcement"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "editorial-kicker",
+                children: "Architecture by layer"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("h2", {
-                className: "text-3xl font-bold md:text-4xl",
-                children: "AI governance that actually works"
+                className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+                children: "Each layer exists to keep the next one from drifting."
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-lg",
-                children: "Constrain what AI agents can change. Enforce contracts they must respect. No more hallucinated refactors breaking your system."
+                className: "editorial-copy",
+                children: "The repo structure already tells the right story: lower layers define explicit behavior, higher layers compose that behavior into working surfaces, and apps stay thin."
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV("div", {
-            className: "card-subtle space-y-6 p-6",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "space-y-4",
+            className: "grid gap-5 md:grid-cols-2 xl:grid-cols-4",
+            children: layers.map((layer) => /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-panel",
+              children: [
+                /* @__PURE__ */ jsxDEV(layer.icon, {
+                  className: "h-5 w-5 text-[color:var(--rust)]"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h3", {
+                  className: "mt-5 font-serif text-2xl tracking-[-0.03em]",
+                  children: layer.name
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "mt-3 text-muted-foreground text-sm leading-7",
+                  children: layer.copy
+                }, undefined, false, undefined, this)
+              ]
+            }, layer.name, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "editorial-section bg-striped",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "editorial-shell grid gap-8 lg:grid-cols-2",
+        children: comparison.map((column) => /* @__PURE__ */ jsxDEV("div", {
+          className: "editorial-panel",
+          children: [
+            /* @__PURE__ */ jsxDEV("p", {
+              className: "editorial-kicker",
+              children: column.label
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("h2", {
+              className: "mt-3 font-serif text-3xl tracking-[-0.04em]",
+              children: column.label === "OSS/Core" ? "Adopt the open foundation first" : "Add the operating product when the team is ready"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("ul", {
+              className: "editorial-list mt-6",
+              children: column.points.map((point) => /* @__PURE__ */ jsxDEV("li", {
                 children: [
-                  /* @__PURE__ */ jsxDEV("h3", {
-                    className: "font-bold",
-                    children: "How contract enforcement works"
+                  /* @__PURE__ */ jsxDEV(CheckCircle2, {
+                    className: "mt-1.5 h-4 w-4 shrink-0 text-[color:var(--success)]"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-muted-foreground text-sm",
-                    children: "Contracts define what the system should do. AI-generated code that violates these contracts is automatically flagged and rejected before it can cause damage."
+                  /* @__PURE__ */ jsxDEV("span", {
+                    children: point
                   }, undefined, false, undefined, this)
                 ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "grid gap-4 md:grid-cols-3",
-                children: [
-                  {
-                    title: "Define",
-                    description: "Write specs in TypeScript. Define inputs, outputs, and invariants."
-                  },
-                  {
-                    title: "Generate",
-                    description: "ContractSpec generates code across all surfaces from your specs."
-                  },
-                  {
-                    title: "Enforce",
-                    description: "Any code that violates specs is flagged. AI agents can't break contracts."
-                  }
-                ].map((step, i) => /* @__PURE__ */ jsxDEV("div", {
-                  className: "space-y-2",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500/20",
-                      children: /* @__PURE__ */ jsxDEV("div", {
-                        className: "text-sm font-bold text-violet-400",
-                        children: i + 1
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("h4", {
-                      className: "text-sm font-bold",
-                      children: step.title
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("p", {
-                      className: "text-muted-foreground text-xs",
-                      children: step.description
-                    }, undefined, false, undefined, this)
-                  ]
-                }, i, true, undefined, this))
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
+              }, point, true, undefined, this))
+            }, undefined, false, undefined, this)
+          ]
+        }, column.label, true, undefined, this))
+      }, undefined, false, undefined, this)
     }, undefined, false, undefined, this),
     /* @__PURE__ */ jsxDEV("section", {
-      className: "section-padding border-border border-b bg-gradient-to-br from-violet-500/10 via-indigo-500/5 to-blue-500/5",
+      className: "editorial-section",
       children: /* @__PURE__ */ jsxDEV("div", {
-        className: "mx-auto max-w-4xl space-y-8",
+        className: "editorial-shell grid gap-10 lg:grid-cols-[0.9fr_1.1fr]",
         children: [
           /* @__PURE__ */ jsxDEV("div", {
             className: "space-y-4",
             children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "inline-flex items-center gap-2 rounded-full border border-pink-500/20 bg-pink-500/10 px-3 py-1",
-                children: [
-                  /* @__PURE__ */ jsxDEV(Unlock, {
-                    size: 16,
-                    className: "text-pink-400"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-sm font-medium text-pink-300",
-                    children: "No Lock-in"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "editorial-kicker",
+                children: "Proof points"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("h2", {
-                className: "text-3xl font-bold md:text-4xl",
-                children: "You own everything. Eject anytime."
+                className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+                children: "What should feel different after adoption."
               }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-lg",
-                children: "ContractSpec is a compiler, not a prison. The generated code is yours: standard TypeScript, standard SQL, standard GraphQL."
+                className: "editorial-copy",
+                children: "The point is not just faster output. The point is that regeneration, refactoring, and agent behavior stop feeling opaque because the team has an explicit layer it can inspect and trust."
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV("div", {
-            className: "grid gap-6 md:grid-cols-2",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "card-subtle space-y-4 p-6",
+            className: "grid gap-5 md:grid-cols-2",
+            children: proofs.map((proof) => {
+              const Icon = proof.icon;
+              return /* @__PURE__ */ jsxDEV("div", {
+                className: "editorial-panel",
                 children: [
-                  /* @__PURE__ */ jsxDEV("h3", {
-                    className: "text-lg font-bold",
-                    children: "Standard Tech Output"
+                  /* @__PURE__ */ jsxDEV(Icon, {
+                    className: "h-5 w-5 text-[color:var(--blue)]"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("ul", {
-                    className: "text-muted-foreground space-y-3 text-sm",
-                    children: [
-                      "TypeScript you can read and modify",
-                      "Prisma migrations you can run manually",
-                      "GraphQL schemas you can serve anywhere",
-                      "React components with no magic",
-                      "REST handlers that work with any framework"
-                    ].map((item, i) => /* @__PURE__ */ jsxDEV("li", {
-                      className: "flex gap-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV(CheckCircle, {
-                          size: 16,
-                          className: "mt-0.5 flex-shrink-0 text-pink-400"
-                        }, undefined, false, undefined, this),
-                        item
-                      ]
-                    }, i, true, undefined, this))
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "card-subtle space-y-4 p-6",
-                children: [
-                  /* @__PURE__ */ jsxDEV("h3", {
-                    className: "text-lg font-bold",
-                    children: "No Proprietary Dependencies"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("ul", {
-                    className: "text-muted-foreground space-y-3 text-sm",
-                    children: [
-                      "No runtime library required",
-                      "No vendor-specific abstractions",
-                      "Works with your existing CI/CD",
-                      "Eject anytime, keep everything",
-                      "Open spec format"
-                    ].map((item, i) => /* @__PURE__ */ jsxDEV("li", {
-                      className: "flex gap-3",
-                      children: [
-                        /* @__PURE__ */ jsxDEV(CheckCircle, {
-                          size: 16,
-                          className: "mt-0.5 flex-shrink-0 text-pink-400"
-                        }, undefined, false, undefined, this),
-                        item
-                      ]
-                    }, i, true, undefined, this))
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "mt-5 font-medium text-lg",
+                    children: proof.label
                   }, undefined, false, undefined, this)
                 ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "pt-4 text-center",
-            children: /* @__PURE__ */ jsxDEV("p", {
-              className: "text-muted-foreground mb-4 text-sm",
-              children: [
-                "Like TypeScript compiles to JavaScript, ContractSpec compiles to standard code.",
-                /* @__PURE__ */ jsxDEV("br", {}, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  className: "font-medium text-violet-400",
-                  children: "We're the compiler, not the prison."
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
+              }, proof.label, true, undefined, this);
+            })
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
     }, undefined, false, undefined, this),
     /* @__PURE__ */ jsxDEV("section", {
-      className: "section-padding border-border border-b",
+      className: "section-padding",
       children: /* @__PURE__ */ jsxDEV("div", {
-        className: "mx-auto max-w-4xl space-y-8",
-        children: [
-          /* @__PURE__ */ jsxDEV("h2", {
-            className: "text-center text-3xl font-bold md:text-4xl",
-            children: "Start small. Expand gradually."
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground mx-auto max-w-2xl text-center text-lg",
-            children: "You don't rewrite your app. You stabilize one module at a time. Start with one endpoint, prove value, then expand."
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "grid gap-6 md:grid-cols-3",
-            children: [
-              {
-                title: "Day 1",
-                description: "Pick one API endpoint. Write a spec. See what gets generated."
-              },
-              {
-                title: "Week 1",
-                description: "Add a few more specs. Compare generated code to existing code."
-              },
-              {
-                title: "Month 1",
-                description: "Migrate a full module. Enjoy multi-surface consistency."
-              }
-            ].map((item, i) => /* @__PURE__ */ jsxDEV("div", {
-              className: "card-subtle space-y-4 p-6 text-center",
+        className: "editorial-shell",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "editorial-panel flex flex-col gap-8 rounded-[38px] border-dashed md:flex-row md:items-end md:justify-between",
+          children: [
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "max-w-3xl space-y-4",
               children: [
-                /* @__PURE__ */ jsxDEV("div", {
-                  className: "text-2xl font-bold text-violet-400",
-                  children: item.title
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-kicker",
+                  children: "Next step"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h2", {
+                  className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+                  children: "Use the OSS layer when you want control. Use Studio when you want the operating loop."
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV("p", {
-                  className: "text-muted-foreground text-sm",
-                  children: item.description
+                  className: "editorial-copy",
+                  children: "That is the cleanest product split for both technical adopters and teams buying the packaged surface later."
                 }, undefined, false, undefined, this)
               ]
-            }, i, true, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV("section", {
-      className: "section-padding hero-gradient",
-      children: /* @__PURE__ */ jsxDEV("div", {
-        className: "mx-auto max-w-4xl space-y-6 text-center",
-        children: [
-          /* @__PURE__ */ jsxDEV("h2", {
-            className: "text-3xl font-bold md:text-4xl",
-            children: "Ready to stabilize your AI-generated code?"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground text-lg",
-            children: "Start with one module. No big-bang migration. No lock-in."
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row",
-            children: [
-              /* @__PURE__ */ jsxDEV(Link, {
-                href: "/install",
-                className: "btn-primary inline-flex items-center gap-2",
-                children: [
-                  "Install OSS Core ",
-                  /* @__PURE__ */ jsxDEV(ChevronRight, {
-                    size: 16
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(Link, {
-                href: "https://www.contractspec.studio",
-                className: "btn-ghost",
-                children: "Try Studio"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "flex flex-col gap-3 sm:flex-row md:flex-col",
+              children: [
+                /* @__PURE__ */ jsxDEV(Link, {
+                  href: "/install",
+                  className: "btn-primary",
+                  onClick: trackInstall,
+                  children: "Start with OSS"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV(Link, {
+                  href: "https://www.contractspec.studio",
+                  className: "btn-ghost",
+                  onClick: trackStudio,
+                  children: "Explore Studio"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   ]
 }, undefined, true, undefined, this);