@contractspec/bundle.marketing 3.7.6 → 3.7.7

package/dist/components/marketing/LandingPage.js

@@ -1,621 +1,517 @@
 // @bun
 var __require = import.meta.require;
 
-// src/components/marketing/sections/HeroMarketingSection.tsx
-import { ButtonLink, MarketingSection } from "@contractspec/lib.design-system";
+// src/components/marketing/LandingPage.tsx
 import {
-  analyticsEventNames,
-  captureAnalyticsEvent
-} from "@contractspec/bundle.library/libs/posthog/client";
-import { Box, HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { H1, Lead, Small } from "@contractspec/lib.ui-kit-web/ui/typography";
-import { ChevronRight } from "lucide-react";
+  ArrowRight,
+  Blocks,
+  Bot,
+  Braces,
+  ChartColumn,
+  Database,
+  GitBranch,
+  ShieldCheck,
+  Sparkles,
+  Workflow
+} from "lucide-react";
+import Link from "next/link";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
-var heroChips = ["Multi-Surface Sync", "No Lock-in", "Standard Tech"];
-function HeroMarketingSection() {
-  return /* @__PURE__ */ jsxDEV(MarketingSection, {
-    tone: "gradient",
-    padding: "spacious",
-    align: "center",
-    children: /* @__PURE__ */ jsxDEV(VStack, {
-      gap: "lg",
-      align: "center",
-      className: "text-center",
-      children: [
-        /* @__PURE__ */ jsxDEV(Box, {
-          as: "div",
-          role: "presentation",
-          className: "bg-muted text-muted-foreground inline-flex items-center rounded-full px-3 py-1 text-xs font-medium tracking-wider uppercase",
-          children: "Open Source Core"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV(H1, {
-          className: "text-4xl leading-tight font-bold text-balance md:text-5xl",
-          children: "Stabilize your AI-generated code"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV(Lead, {
-          className: "text-muted-foreground text-lg text-balance md:text-xl",
-          children: "ContractSpec is the compiler that keeps AI-written software coherent, safe, and regenerable. You keep your app. You own the code. One module at a time."
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV(HStack, {
-          gap: "md",
-          justify: "center",
-          wrap: "wrap",
-          children: [
-            /* @__PURE__ */ jsxDEV(ButtonLink, {
-              href: "/install",
-              onClick: () => captureAnalyticsEvent(analyticsEventNames.CTA_INSTALL_CLICK, {
-                surface: "hero"
-              }),
-              children: [
-                "Install OSS ",
-                /* @__PURE__ */ jsxDEV(ChevronRight, {
-                  size: 16
-                }, undefined, false, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV(ButtonLink, {
-              variant: "ghost",
-              href: "https://www.contractspec.studio",
-              onClick: () => captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
-                surface: "hero"
-              }),
-              children: "Try Studio"
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV(HStack, {
-          gap: "sm",
-          justify: "center",
-          wrap: "wrap",
-          className: "pt-2",
-          children: heroChips.map((chip) => /* @__PURE__ */ jsxDEV(Box, {
-            as: "div",
-            role: "presentation",
-            className: "border-border text-foreground inline-flex items-center rounded-full border px-3 py-1 text-sm",
-            children: /* @__PURE__ */ jsxDEV(Small, {
-              className: "font-medium",
-              children: chip
-            }, undefined, false, undefined, this)
-          }, chip, false, undefined, this))
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/IconGridSection.tsx
-import { cva } from "class-variance-authority";
-import {
-  MarketingCardsSection,
-  MarketingIconCard
-} from "@contractspec/lib.design-system";
-import { Muted } from "@contractspec/lib.ui-kit-web/ui/typography";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var itemVariants = cva("", {
-  variants: {
-    iconRole: {
-      iconFirst: "",
-      listing: "items-start",
-      support: "items-start"
-    }
-  },
-  defaultVariants: { iconRole: "iconFirst" }
-});
-function IconGridSection({
-  eyebrow,
-  title,
-  subtitle,
-  items,
-  tone = "default",
-  padding,
-  columns = 3,
-  iconRole = "iconFirst"
-}) {
-  return /* @__PURE__ */ jsxDEV2(MarketingCardsSection, {
-    tone,
-    padding,
-    eyebrow: eyebrow ? /* @__PURE__ */ jsxDEV2(Muted, {
-      className: "text-xs font-semibold tracking-[0.2em] uppercase",
-      children: eyebrow
-    }, undefined, false, undefined, this) : null,
-    title,
-    subtitle: subtitle ? /* @__PURE__ */ jsxDEV2(Muted, {
-      className: "text-lg",
-      children: subtitle
-    }, undefined, false, undefined, this) : null,
-    columns,
-    children: items.map((card) => /* @__PURE__ */ jsxDEV2(MarketingIconCard, {
-      icon: card.icon,
-      title: card.title,
-      description: card.description,
-      tone: card.tone,
-      iconClassName: card.iconClassName,
-      variant: iconRole === "listing" ? "listing" : iconRole === "support" ? "support" : "iconFirst",
-      className: itemVariants({ iconRole })
-    }, card.title, false, undefined, this))
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/ProblemSection.tsx
-import { AlertTriangle, Layers, RefreshCw, XCircle } from "lucide-react";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-var problemItems = [
-  {
-    icon: AlertTriangle,
-    title: "Can't enforce invariants",
-    description: "AI-generated code drifts from business rules over time. No source of truth means no safety.",
-    iconClassName: "text-red-400"
-  },
+var failureModes = [
   {
-    icon: Layers,
-    title: "Multi-surface chaos",
-    description: "API, DB, UI, and events get out of sync. One change breaks three surfaces.",
-    iconClassName: "text-orange-400"
+    title: "Implicit rules drift first",
+    description: "Prompt chains and AI edits move faster than the product rules they are supposed to respect."
   },
   {
-    icon: RefreshCw,
-    title: "Hallucinated refactors",
-    description: 'AI "improvements" introduce subtle bugs and break contracts you didn\u2019t know existed.',
-    iconClassName: "text-amber-400"
+    title: "Surfaces stop agreeing",
+    description: "API, UI, database, events, and MCP tools evolve independently unless something explicit keeps them aligned."
   },
   {
-    icon: XCircle,
-    title: "Unmaintainable spaghetti",
-    description: "Teams ship fast initially, then spend months untangling AI-generated chaos.",
-    iconClassName: "text-red-400"
+    title: "Teams lose safe regeneration",
+    description: "Without a stable contract layer, every regeneration feels like rewriting production in the dark."
   }
 ];
-function ProblemSection() {
-  return /* @__PURE__ */ jsxDEV3(IconGridSection, {
-    tone: "muted",
-    columns: 4,
-    eyebrow: "The Problem",
-    title: "AI agents write code fast. Then the chaos begins.",
-    subtitle: 'In 2025, "vibe coding" and AI agents generate enormous amounts of code. But they have critical limitations that destroy long-term maintainability.',
-    items: problemItems
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/SolutionSection.tsx
-import { FileCode, Layers as Layers2, RefreshCw as RefreshCw2, Shield } from "lucide-react";
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-var solutionItems = [
+var systemSurfaces = [
   {
-    icon: FileCode,
-    title: "Canonical Source of Truth",
-    description: "Contracts define what the system should do, not just what it does. AI agents read specs, not implementations.",
-    iconClassName: "text-emerald-400"
+    label: "Contracts and generation",
+    description: "Define the canonical behavior once and derive the implementation surfaces from it.",
+    icon: Braces
   },
   {
-    icon: Layers2,
-    title: "Multi-Surface Consistency",
-    description: "One spec generates API, DB, UI, events, and MCP tools. All surfaces stay in sync because they share the same source.",
-    iconClassName: "text-blue-400"
+    label: "Runtime adapters",
+    description: "Bind the same source of truth to REST, GraphQL, React, MCP, and operational flows.",
+    icon: Workflow
   },
   {
-    icon: RefreshCw2,
-    title: "Safe Regeneration",
-    description: "Regenerate code anytime without fear. Specs enforce invariants. Breaking changes caught at compile time.",
-    iconClassName: "text-violet-400"
+    label: "Harness and proof",
+    description: "Replay, evaluate, inspect, and verify how the system behaves before you trust automation with more.",
+    icon: ChartColumn
   },
   {
-    icon: Shield,
-    title: "AI Governance",
-    description: "Constrain what AI agents can change. Enforce contracts they must respect. Flag violations automatically.",
-    iconClassName: "text-pink-400"
+    label: "Studio operating layer",
+    description: "Run the opinionated product loop when you want coordination, governance, and a packaged operating surface.",
+    icon: Sparkles
   }
 ];
-function SolutionSection() {
-  return /* @__PURE__ */ jsxDEV4(IconGridSection, {
-    tone: "default",
-    columns: 4,
-    eyebrow: "The Solution",
-    title: "ContractSpec: The safety layer for AI-coded systems",
-    subtitle: "Define contracts once. Generate consistent code across all surfaces. Regenerate safely anytime. No lock-in.",
-    items: solutionItems
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/FearsSection.tsx
-import { CheckCircle, Code, Unlock, Zap } from "lucide-react";
-import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
-var fears = [
+var outputs = [
   {
-    title: '"I already have an app"',
-    body: "ContractSpec works with existing codebases. You don't start over \u2014 you stabilize incrementally, one module at a time. Start with one API endpoint, one data model, one contract.",
-    icon: CheckCircle
+    title: "APIs",
+    copy: "Typed endpoints and schemas stay aligned with the same contract language the team edits.",
+    icon: GitBranch
   },
   {
-    title: '"Vendor lock-in / losing ownership"',
-    body: "You own the generated code. It's standard TypeScript, standard SQL, standard GraphQL. ContractSpec is a compiler \u2014 like TypeScript itself. You can eject anytime.",
-    icon: Unlock
+    title: "Data",
+    copy: "Schema, validation, and migrations are shaped by the same product rules instead of scattered implementations.",
+    icon: Database
   },
   {
-    title: '"Adoption cost / learning curve"',
-    body: "Specs are just TypeScript. If you can write z.object({ name: z.string() }), you can write a ContractSpec. No new language, no magic DSL, no YAML.",
-    icon: Code
+    title: "Interfaces",
+    copy: "Forms, presentations, and client types inherit the same system boundaries instead of drifting from the backend.",
+    icon: Blocks
   },
   {
-    title: '"Forced migrations / magical runtime"',
-    body: "ContractSpec generates plain code you can read, debug, and modify. There's no proprietary runtime. Migrations are explicit, reversible, and in your control.",
-    icon: Zap
+    title: "Agents and tools",
+    copy: "MCP tools and agent-facing surfaces are generated from explicit contracts rather than guessed from code.",
+    icon: Bot
   }
 ];
-function FearsSection() {
-  return /* @__PURE__ */ jsxDEV5(IconGridSection, {
-    tone: "muted",
-    columns: 2,
-    eyebrow: "We Get It",
-    title: "Your fears, addressed",
-    subtitle: "We know what you're thinking. Here's why those concerns don't apply to ContractSpec.",
-    iconRole: "support",
-    items: fears.map((item) => ({
-      icon: item.icon,
-      title: item.title,
-      description: item.body,
-      iconClassName: "text-violet-400"
-    }))
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/CorePositioningSection.tsx
-import { ButtonLink as ButtonLink2, MarketingSection as MarketingSection2 } from "@contractspec/lib.design-system";
-import { VStack as VStack2 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { H2, Lead as Lead2, Small as Small2 } from "@contractspec/lib.ui-kit-web/ui/typography";
-import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
-function CorePositioningSection() {
-  return /* @__PURE__ */ jsxDEV6(MarketingSection2, {
-    tone: "gradient",
-    padding: "comfortable",
-    align: "center",
-    maxWidth: "lg",
-    children: /* @__PURE__ */ jsxDEV6(VStack2, {
-      gap: "md",
-      align: "center",
-      children: [
-        /* @__PURE__ */ jsxDEV6(H2, {
-          className: "text-center text-3xl font-bold md:text-4xl",
+var adoptionSteps = [
+  "Start with one module that is already drifting or feels unsafe to regenerate.",
+  "Define explicit contracts, then bring API, UI, data, and tools back into alignment.",
+  "Adopt Studio when the team wants an operating surface on top of the open system."
+];
+function LandingPage() {
+  return /* @__PURE__ */ jsxDEV("main", {
+    children: [
+      /* @__PURE__ */ jsxDEV("section", {
+        className: "section-padding hero-gradient border-border/70 border-b",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "editorial-shell",
+          children: /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-10 lg:grid-cols-[1.15fr_0.85fr] lg:items-end",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-7",
+                children: [
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "badge",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(ShieldCheck, {
+                        size: 14
+                      }, undefined, false, undefined, this),
+                      "Open system, explicit control"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-5",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "editorial-kicker",
+                        children: "ContractSpec for AI-native teams"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("h1", {
+                        className: "editorial-title max-w-5xl",
+                        children: "Build and run AI-native systems on explicit contracts."
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "editorial-subtitle",
+                        children: "ContractSpec gives teams an open spec system for defining behavior, aligning every surface, and regenerating safely. The OSS foundation stays yours. Studio is the operating layer when you want a product on top."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "flex flex-col gap-3 sm:flex-row",
+                    children: [
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/install",
+                        className: "btn-primary",
+                        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",
+                        children: "Explore Studio"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV(Link, {
+                        href: "/product",
+                        className: "btn-ghost",
+                        children: "See the architecture"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "editorial-proof-strip",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "editorial-stat",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-stat-value",
+                            children: "1"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-label",
+                            children: "explicit system source"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "editorial-stat",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-stat-value",
+                            children: "4+"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-label",
+                            children: "aligned surface families"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "editorial-stat",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-stat-value",
+                            children: "0"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-label",
+                            children: "required lock-in"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "editorial-panel space-y-6",
+                children: [
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "editorial-kicker",
+                    children: "What the site should make clear"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "space-y-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("h2", {
+                        className: "editorial-panel-title",
+                        children: "This is not \u201Cyet another AI builder.\u201D"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "editorial-copy text-sm",
+                        children: "ContractSpec exists for teams that already know AI can write a lot of software, but need explicit control over what that software is allowed to become over time."
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV("ul", {
+                    className: "editorial-list",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-list-marker"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("span", {
+                            children: "Keep the code and the standards you already use."
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-list-marker"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("span", {
+                            children: "Stabilize one module at a time instead of rewriting your app."
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("li", {
+                        children: [
+                          /* @__PURE__ */ jsxDEV("span", {
+                            className: "editorial-list-marker"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("span", {
+                            children: "Move into Studio only when you want the operating product."
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("section", {
+        className: "editorial-section",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "editorial-shell space-y-10",
           children: [
-            "You keep your app.",
-            /* @__PURE__ */ jsxDEV6("br", {}, undefined, false, undefined, this),
-            "We stabilize it, one module at a time."
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "max-w-3xl space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-kicker",
+                  children: "Why teams end up here"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h2", {
+                  className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+                  children: "AI speed is not the problem. Implicit systems are."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-copy",
+                  children: "Once a team depends on prompts, AI edits, and generated code across multiple surfaces, the real failure mode is not \u201CAI wrote bad code.\u201D It is that nobody can state the system rules precisely enough to keep regeneration safe."
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-grid xl:grid-cols-3",
+              children: failureModes.map((item) => /* @__PURE__ */ jsxDEV("div", {
+                className: "editorial-panel",
+                children: [
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "editorial-kicker",
+                    children: item.title
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "mt-4 text-base text-muted-foreground leading-8",
+                    children: item.description
+                  }, undefined, false, undefined, this)
+                ]
+              }, item.title, true, undefined, this))
+            }, undefined, false, undefined, this)
           ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV6(Lead2, {
-          className: "text-center",
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("section", {
+        className: "editorial-section bg-striped",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "editorial-shell space-y-10",
           children: [
-            "You own the code. It's standard tech.",
-            /* @__PURE__ */ jsxDEV6("br", {}, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV6(Small2, {
-              className: "font-semibold text-violet-400",
-              children: "We're the compiler, not the prison."
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "max-w-3xl space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-kicker",
+                  children: "The open system"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h2", {
+                  className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+                  children: "One explicit layer that keeps the whole stack honest."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-copy",
+                  children: "ContractSpec is broader than generation. It is the contract layer, the runtime bridges, the proof surfaces, and the adoption path that lets teams move from OSS control to an operating product without pretending they are different systems."
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-grid",
+              children: systemSurfaces.map((surface) => /* @__PURE__ */ jsxDEV("div", {
+                className: "editorial-panel",
+                children: [
+                  /* @__PURE__ */ jsxDEV(surface.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: surface.label
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "mt-3 text-muted-foreground text-sm leading-7",
+                    children: surface.description
+                  }, undefined, false, undefined, this)
+                ]
+              }, surface.label, true, undefined, this))
             }, undefined, false, undefined, this)
           ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV6(VStack2, {
-          as: "div",
-          gap: "sm",
-          align: "center",
-          className: "pt-2 sm:flex sm:flex-row sm:flex-wrap sm:items-center sm:justify-center",
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("section", {
+        className: "editorial-section",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "editorial-shell grid gap-10 lg:grid-cols-[0.9fr_1.1fr]",
           children: [
-            /* @__PURE__ */ jsxDEV6(ButtonLink2, {
-              href: "https://www.contractspec.studio",
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "space-y-4",
               children: [
-                "Try Studio ",
-                /* @__PURE__ */ jsxDEV6(ChevronRight2, {
-                  size: 16
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-kicker",
+                  children: "What the OSS layer actually gives you"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h2", {
+                  className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+                  children: "Explicit contracts show up where teams usually lose control."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-copy",
+                  children: "The promise is not magic generation. The promise is that the same product rules can shape APIs, data, interfaces, and agent tools without each surface inventing its own truth."
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV6(ButtonLink2, {
-              variant: "ghost",
-              href: "/contact",
-              children: "Book a call"
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "grid gap-5 md:grid-cols-2",
+              children: outputs.map((output) => /* @__PURE__ */ jsxDEV("div", {
+                className: "editorial-panel",
+                children: [
+                  /* @__PURE__ */ jsxDEV(output.icon, {
+                    className: "h-5 w-5 text-[color:var(--blue)]"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "mt-5 font-serif text-2xl tracking-[-0.03em]",
+                    children: output.title
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "mt-3 text-muted-foreground text-sm leading-7",
+                    children: output.copy
+                  }, undefined, false, undefined, this)
+                ]
+              }, output.title, true, undefined, this))
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/AudienceSection.tsx
-import {
-  MarketingCard,
-  MarketingCardContent,
-  MarketingCardHeader,
-  MarketingCardTitle,
-  MarketingCardsSection as MarketingCardsSection2
-} from "@contractspec/lib.design-system";
-import { VStack as VStack3 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { Muted as Muted2, Small as Small3 } from "@contractspec/lib.ui-kit-web/ui/typography";
-import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
-var audiences = [
-  {
-    tier: "Tier 1: Priority",
-    title: "AI-Native Startups & Technical Founders",
-    body: "Solo founders or small teams using Cursor, Copilot, Claude, or AI agents heavily. Messy AI-generated backends and frontends, inconsistent APIs, code that is hard to refactor.",
-    need: "Need: A way to stabilize AI-generated code without rewriting it."
-  },
-  {
-    tier: "Tier 1: Priority",
-    title: "Small Teams with AI-Generated Chaos",
-    body: "2-10 person teams that shipped fast with AI and now have tech debt. Multiple surfaces out of sync, no source of truth, afraid to touch AI-generated code.",
-    need: "Need: Incremental stabilization, safe regeneration, contracts as guardrails."
-  },
-  {
-    tier: "Tier 2: Growth",
-    title: "AI Dev Agencies",
-    body: "Agencies building many projects for clients using AI-assisted development. Repeating the same patterns, inconsistent quality across projects, handoff nightmares.",
-    need: "Need: Reusable templates, consistent contracts, professional handoff artifacts."
-  },
-  {
-    tier: "Tier 2: Growth",
-    title: "Scaleups with Compliance Needs",
-    body: "Growing companies that need audit trails, API governance, or regulatory compliance. AI-generated code doesn't meet compliance requirements.",
-    need: "Need: Governance layer, change tracking, contract enforcement."
-  }
-];
-function AudienceSection() {
-  return /* @__PURE__ */ jsxDEV7(MarketingCardsSection2, {
-    tone: "default",
-    columns: 2,
-    eyebrow: "Who It's For",
-    title: "Built for teams drowning in AI-generated code",
-    maxWidth: "xl",
-    children: audiences.map((item) => /* @__PURE__ */ jsxDEV7(MarketingCard, {
-      tone: "muted",
-      children: [
-        /* @__PURE__ */ jsxDEV7(MarketingCardHeader, {
-          className: "space-y-2",
+      }, 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-[1.1fr_0.9fr]",
           children: [
-            /* @__PURE__ */ jsxDEV7(Small3, {
-              className: "font-semibold text-blue-400",
-              children: item.tier
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV7(MarketingCardTitle, {
-              className: "text-xl",
-              children: item.title
-            }, undefined, false, undefined, this)
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-panel space-y-6",
+              children: [
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-kicker",
+                  children: "Adoption path"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h2", {
+                  className: "editorial-panel-title",
+                  children: "Start where the risk is highest, not where the marketing says to start."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("ol", {
+                  className: "space-y-4",
+                  children: adoptionSteps.map((step, index) => /* @__PURE__ */ jsxDEV("li", {
+                    className: "flex gap-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[rgb(162_79_42_/_0.12)] font-mono text-[color:var(--rust)] text-xs",
+                        children: [
+                          "0",
+                          index + 1
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-sm leading-7",
+                        children: step
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, step, true, undefined, this))
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "editorial-panel space-y-6",
+              children: [
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "editorial-kicker",
+                  children: "Studio on top"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h2", {
+                  className: "editorial-panel-title",
+                  children: "Studio is the operating surface, not a replacement identity."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "text-muted-foreground text-sm leading-7",
+                  children: "Use Studio when your team wants a packaged loop for evidence, drafting, review, export, and follow-up. The relationship should feel like the best application built on top of the same open system, not a bait-and-switch away from it."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "editorial-divider"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "grid gap-4 text-muted-foreground text-sm",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("p", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("span", {
+                          className: "font-medium text-foreground",
+                          children: "OSS/Core:"
+                        }, undefined, false, undefined, this),
+                        " ",
+                        "contracts, generation, runtimes, harnesses, agent tooling."
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV("p", {
+                      children: [
+                        /* @__PURE__ */ jsxDEV("span", {
+                          className: "font-medium text-foreground",
+                          children: "Studio:"
+                        }, undefined, false, undefined, this),
+                        " the opinionated operating loop when a team wants the product."
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
           ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV7(MarketingCardContent, {
-          children: /* @__PURE__ */ jsxDEV7(VStack3, {
-            gap: "sm",
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("section", {
+        className: "section-padding",
+        children: /* @__PURE__ */ jsxDEV("div", {
+          className: "editorial-shell",
+          children: /* @__PURE__ */ jsxDEV("div", {
+            className: "editorial-panel flex flex-col gap-8 rounded-[40px] border-dashed px-6 py-8 md:px-10 md:py-10 lg:flex-row lg:items-end lg:justify-between",
             children: [
-              /* @__PURE__ */ jsxDEV7(Muted2, {
-                className: "text-sm leading-relaxed",
-                children: item.body
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV7(Small3, {
-                className: "font-medium text-violet-400",
-                children: item.need
-              }, undefined, false, undefined, this)
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "max-w-3xl space-y-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "editorial-kicker",
+                    children: "Choose your path"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("h2", {
+                    className: "font-serif text-4xl tracking-[-0.04em] md:text-5xl",
+                    children: "Adopt the open system first. Evaluate Studio when the team is ready for the operating layer."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "editorial-copy",
+                    children: "That is the product story the site should tell everywhere: open foundation, explicit contracts, safe regeneration, then an opinionated surface on top for teams that want it."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex flex-col gap-3 sm:flex-row lg:flex-col",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "/install",
+                    className: "btn-primary",
+                    children: "Start with OSS"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "https://www.contractspec.studio",
+                    className: "btn-ghost",
+                    children: "Explore Studio"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Link, {
+                    href: "/pricing",
+                    className: "btn-ghost",
+                    children: "See packaging"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this)
         }, undefined, false, undefined, this)
-      ]
-    }, item.title, true, undefined, this))
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/OutputsSection.tsx
-import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
-var outputs = [
-  {
-    title: "REST API",
-    description: "Type-safe endpoints with validation. Standard Express/Hono/Elysia handlers.",
-    icon: "\uD83D\uDD0C"
-  },
-  {
-    title: "GraphQL Schema",
-    description: "Automatically generated resolvers. Standard Pothos/Apollo output.",
-    icon: "\uD83D\uDCCA"
-  },
-  {
-    title: "Database Schema",
-    description: "Prisma migrations and types. Standard SQL underneath.",
-    icon: "\uD83D\uDDC4\uFE0F"
-  },
-  {
-    title: "MCP Tools",
-    description: "AI agent tool definitions. Works with Claude, GPT, and any MCP client.",
-    icon: "\uD83E\uDD16"
-  },
-  {
-    title: "Client SDKs",
-    description: "Type-safe API clients. Standard fetch/axios underneath.",
-    icon: "\uD83D\uDCE6"
-  },
-  {
-    title: "UI Components",
-    description: "React forms and views from specs. Standard JSX output.",
-    icon: "\uD83C\uDFA8"
-  }
-];
-function OutputsSection() {
-  return /* @__PURE__ */ jsxDEV8(IconGridSection, {
-    tone: "muted",
-    columns: 3,
-    title: "What ContractSpec generates",
-    subtitle: "One contract, multiple outputs. All in sync. All standard tech.",
-    iconRole: "iconFirst",
-    items: outputs.map((item) => ({
-      icon: () => /* @__PURE__ */ jsxDEV8("span", {
-        "aria-hidden": true,
-        className: "text-3xl",
-        children: item.icon
-      }, undefined, false, undefined, this),
-      title: item.title,
-      description: item.description
-    }))
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/StepsSection.tsx
-import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
-var steps = [
-  {
-    step: 1,
-    title: "Pick one module",
-    description: "Start with one API endpoint, one entity, one surface. No big-bang migration."
-  },
-  {
-    step: 2,
-    title: "Define the contract",
-    description: "Write a spec in TypeScript. Just types and Zod schemas you already know."
-  },
-  {
-    step: 3,
-    title: "Generate & compare",
-    description: "See what ContractSpec generates. Compare to your existing code. Keep what works."
-  },
-  {
-    step: 4,
-    title: "Expand gradually",
-    description: "Add more contracts as you see value. No pressure. No lock-in. Your pace."
-  }
-];
-function StepsSection() {
-  return /* @__PURE__ */ jsxDEV9(IconGridSection, {
-    tone: "default",
-    columns: 4,
-    title: "How incremental adoption works",
-    padding: "comfortable",
-    iconRole: "listing",
-    items: steps.map((item) => ({
-      icon: ({ className }) => /* @__PURE__ */ jsxDEV9("div", {
-        className: `bg-primary/15 flex h-10 w-10 items-center justify-center rounded-lg ${className ?? ""}`,
-        children: /* @__PURE__ */ jsxDEV9("span", {
-          className: "text-primary text-sm font-semibold",
-          children: item.step
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      title: item.title,
-      description: item.description,
-      tone: "muted"
-    }))
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/DevelopersSection.tsx
-import {
-  ButtonLink as ButtonLink3,
-  MarketingComparisonSection
-} from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
-var standardTech = [
-  "TypeScript & Zod \u2014 schemas you already know",
-  "Prisma \u2014 standard database access",
-  "GraphQL or REST \u2014 your choice",
-  "React or any UI framework",
-  "Bun, Node, Deno \u2014 all supported"
-];
-var noMagic = [
-  "Generated code is readable & modifiable",
-  "No proprietary runtime dependencies",
-  "Eject anytime, keep everything",
-  "Works with your existing CI/CD",
-  "Open spec format"
-];
-function DevelopersSection() {
-  return /* @__PURE__ */ jsxDEV10(MarketingComparisonSection, {
-    tone: "muted",
-    title: "Built for developers",
-    padding: "comfortable",
-    left: { title: "Standard Tech Stack", items: standardTech },
-    right: { title: "No Magic, No Lock-in", items: noMagic },
-    subtitle: /* @__PURE__ */ jsxDEV10(ButtonLink3, {
-      href: "/docs",
-      children: [
-        "Read the docs ",
-        /* @__PURE__ */ jsxDEV10("span", {
-          "aria-hidden": true,
-          children: "\u2192"
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/sections/CtaSection.tsx
-import { ButtonLink as ButtonLink4, MarketingSection as MarketingSection3 } from "@contractspec/lib.design-system";
-import {
-  analyticsEventNames as analyticsEventNames2,
-  captureAnalyticsEvent as captureAnalyticsEvent2
-} from "@contractspec/bundle.library/libs/posthog/client";
-import { VStack as VStack4 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { H2 as H22, Lead as Lead3 } from "@contractspec/lib.ui-kit-web/ui/typography";
-import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
-function CtaSection() {
-  return /* @__PURE__ */ jsxDEV11(MarketingSection3, {
-    tone: "gradient",
-    padding: "comfortable",
-    align: "center",
-    maxWidth: "lg",
-    children: /* @__PURE__ */ jsxDEV11(VStack4, {
-      gap: "md",
-      align: "center",
-      className: "text-center",
-      children: [
-        /* @__PURE__ */ jsxDEV11(H22, {
-          className: "text-4xl font-bold md:text-5xl",
-          children: "Ready to stabilize your codebase?"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV11(Lead3, {
-          className: "text-muted-foreground text-lg",
-          children: "Start with one module. See the difference. Expand at your own pace."
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV11(VStack4, {
-          as: "div",
-          gap: "sm",
-          align: "center",
-          className: "pt-2 sm:flex sm:flex-row sm:flex-wrap sm:items-center sm:justify-center",
-          children: [
-            /* @__PURE__ */ jsxDEV11(ButtonLink4, {
-              href: "https://www.contractspec.studio",
-              onClick: () => captureAnalyticsEvent2(analyticsEventNames2.CTA_STUDIO_CLICK, {
-                surface: "cta-section"
-              }),
-              children: "Try Studio"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV11(ButtonLink4, {
-              variant: "ghost",
-              href: "/contact",
-              onClick: () => captureAnalyticsEvent2(analyticsEventNames2.CTA_STUDIO_CLICK, {
-                surface: "cta-section",
-                variant: "contact"
-              }),
-              children: "Book a call"
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/components/marketing/LandingPage.tsx
-import { VStack as VStack5 } from "@contractspec/lib.ui-kit-web/ui/stack";
-import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
-"use client";
-function LandingPage() {
-  return /* @__PURE__ */ jsxDEV12(VStack5, {
-    as: "main",
-    gap: "none",
-    children: [
-      /* @__PURE__ */ jsxDEV12(HeroMarketingSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(ProblemSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(SolutionSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(FearsSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(CorePositioningSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(AudienceSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(OutputsSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(StepsSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(DevelopersSection, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(CtaSection, {}, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }