@contractspec/bundle.marketing 1.12.0 → 1.13.0

package/dist/browser/components/marketing/sections/HeroMarketingSection.js

@@ -0,0 +1,93 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/marketing/sections/HeroMarketingSection.tsx
+import { ButtonLink, MarketingSection } from "@contractspec/lib.design-system";
+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";
+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: "/contact#waitlist",
+              onClick: () => captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+                surface: "hero"
+              }),
+              children: "Join Studio Waitlist"
+            }, 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);
+}
+export {
+  HeroMarketingSection
+};

package/dist/browser/components/marketing/sections/IconGridSection.js

@@ -0,0 +1,63 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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 } 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__ */ jsxDEV(MarketingCardsSection, {
+    tone,
+    padding,
+    eyebrow: eyebrow ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-xs font-semibold tracking-[0.2em] uppercase",
+      children: eyebrow
+    }, undefined, false, undefined, this) : null,
+    title,
+    subtitle: subtitle ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-lg",
+      children: subtitle
+    }, undefined, false, undefined, this) : null,
+    columns,
+    children: items.map((card) => /* @__PURE__ */ jsxDEV(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);
+}
+export {
+  IconGridSection
+};

package/dist/browser/components/marketing/sections/OutputsSection.js

@@ -0,0 +1,116 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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 } 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__ */ jsxDEV(MarketingCardsSection, {
+    tone,
+    padding,
+    eyebrow: eyebrow ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-xs font-semibold tracking-[0.2em] uppercase",
+      children: eyebrow
+    }, undefined, false, undefined, this) : null,
+    title,
+    subtitle: subtitle ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-lg",
+      children: subtitle
+    }, undefined, false, undefined, this) : null,
+    columns,
+    children: items.map((card) => /* @__PURE__ */ jsxDEV(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/OutputsSection.tsx
+import { jsxDEV as jsxDEV2 } 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️"
+  },
+  {
+    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__ */ jsxDEV2(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__ */ jsxDEV2("span", {
+        "aria-hidden": true,
+        className: "text-3xl",
+        children: item.icon
+      }, undefined, false, undefined, this),
+      title: item.title,
+      description: item.description
+    }))
+  }, undefined, false, undefined, this);
+}
+export {
+  OutputsSection
+};

package/dist/browser/components/marketing/sections/ProblemSection.js

@@ -0,0 +1,103 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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 } 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__ */ jsxDEV(MarketingCardsSection, {
+    tone,
+    padding,
+    eyebrow: eyebrow ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-xs font-semibold tracking-[0.2em] uppercase",
+      children: eyebrow
+    }, undefined, false, undefined, this) : null,
+    title,
+    subtitle: subtitle ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-lg",
+      children: subtitle
+    }, undefined, false, undefined, this) : null,
+    columns,
+    children: items.map((card) => /* @__PURE__ */ jsxDEV(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 jsxDEV2 } 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"
+  },
+  {
+    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"
+  },
+  {
+    icon: RefreshCw,
+    title: "Hallucinated refactors",
+    description: 'AI "improvements" introduce subtle bugs and break contracts you didn’t know existed.',
+    iconClassName: "text-amber-400"
+  },
+  {
+    icon: XCircle,
+    title: "Unmaintainable spaghetti",
+    description: "Teams ship fast initially, then spend months untangling AI-generated chaos.",
+    iconClassName: "text-red-400"
+  }
+];
+function ProblemSection() {
+  return /* @__PURE__ */ jsxDEV2(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);
+}
+export {
+  ProblemSection
+};

package/dist/browser/components/marketing/sections/SolutionSection.js

@@ -0,0 +1,103 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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 } 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__ */ jsxDEV(MarketingCardsSection, {
+    tone,
+    padding,
+    eyebrow: eyebrow ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-xs font-semibold tracking-[0.2em] uppercase",
+      children: eyebrow
+    }, undefined, false, undefined, this) : null,
+    title,
+    subtitle: subtitle ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-lg",
+      children: subtitle
+    }, undefined, false, undefined, this) : null,
+    columns,
+    children: items.map((card) => /* @__PURE__ */ jsxDEV(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/SolutionSection.tsx
+import { FileCode, Layers, RefreshCw, Shield } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var solutionItems = [
+  {
+    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"
+  },
+  {
+    icon: Layers,
+    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"
+  },
+  {
+    icon: RefreshCw,
+    title: "Safe Regeneration",
+    description: "Regenerate code anytime without fear. Specs enforce invariants. Breaking changes caught at compile time.",
+    iconClassName: "text-violet-400"
+  },
+  {
+    icon: Shield,
+    title: "AI Governance",
+    description: "Constrain what AI agents can change. Enforce contracts they must respect. Flag violations automatically.",
+    iconClassName: "text-pink-400"
+  }
+];
+function SolutionSection() {
+  return /* @__PURE__ */ jsxDEV2(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);
+}
+export {
+  SolutionSection
+};

package/dist/browser/components/marketing/sections/StepsSection.js

@@ -0,0 +1,109 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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 } 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__ */ jsxDEV(MarketingCardsSection, {
+    tone,
+    padding,
+    eyebrow: eyebrow ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-xs font-semibold tracking-[0.2em] uppercase",
+      children: eyebrow
+    }, undefined, false, undefined, this) : null,
+    title,
+    subtitle: subtitle ? /* @__PURE__ */ jsxDEV(Muted, {
+      className: "text-lg",
+      children: subtitle
+    }, undefined, false, undefined, this) : null,
+    columns,
+    children: items.map((card) => /* @__PURE__ */ jsxDEV(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/StepsSection.tsx
+import { jsxDEV as jsxDEV2 } 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__ */ jsxDEV2(IconGridSection, {
+    tone: "default",
+    columns: 4,
+    title: "How incremental adoption works",
+    padding: "comfortable",
+    iconRole: "listing",
+    items: steps.map((item) => ({
+      icon: ({ className }) => /* @__PURE__ */ jsxDEV2("div", {
+        className: `bg-primary/15 flex h-10 w-10 items-center justify-center rounded-lg ${className ?? ""}`,
+        children: /* @__PURE__ */ jsxDEV2("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);
+}
+export {
+  StepsSection
+};