@contractspec/bundle.marketing 1.12.0 → 1.14.0

package/dist/browser/components/marketing/pricing-thinking-modal.js

@@ -0,0 +1,258 @@
+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/libs/pricing-examples.ts
+var PRICING_EXAMPLES = {
+  free: {
+    regenerationsPerMonth: 200,
+    aiActionsPerMonth: 100,
+    projects: 1
+  },
+  builder: {
+    regenerationsPerMonthHint: "1,000–2,000+",
+    aiActionsPerMonthHint: "1,000+"
+  },
+  team: {
+    description: "Higher limits + cheaper per-regen at scale"
+  }
+};
+
+// src/components/marketing/pricing-thinking-modal.tsx
+import { CheckCircle } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "@contractspec/lib.ui-kit-web/ui/dialog";
+import { Button } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var pricingTiers = [
+  {
+    tag: "Planned",
+    title: "Free",
+    priceLine: "For hobbyists and pre-PMF teams",
+    bullets: [
+      "1 active project",
+      "Small spec size",
+      `Example: ~${PRICING_EXAMPLES.free.regenerationsPerMonth} free regenerations per month`,
+      `Example: ~${PRICING_EXAMPLES.free.aiActionsPerMonth} free AI agent actions per month`,
+      "Unlimited collaborators"
+    ],
+    note: "Good enough to build and launch a real product before paying."
+  },
+  {
+    tag: "Planned",
+    title: "Builder",
+    priceLine: "Usage-based, for solo builders and small teams",
+    bullets: [
+      "More projects",
+      `More monthly regenerations included (e.g. ${PRICING_EXAMPLES.builder.regenerationsPerMonthHint})`,
+      `More AI agent actions included (e.g. ${PRICING_EXAMPLES.builder.aiActionsPerMonthHint})`,
+      "Pay-as-you-go for extra regenerations and AI",
+      "Basic environments (dev / prod)"
+    ],
+    note: "Pay for how fast and how often you evolve your system, not for seats."
+  },
+  {
+    tag: "Planned",
+    title: "Team & Platform",
+    priceLine: "For teams standardizing on ContractSpec",
+    bullets: [
+      "Multiple projects and environments",
+      "Higher regeneration and AI action limits",
+      "Cheaper overages as you scale",
+      "Advanced RBAC and governance",
+      "SSO, audit trails, and longer retention"
+    ],
+    note: "For platform teams using ContractSpec as infra for multiple apps."
+  }
+];
+var usageMetrics = [
+  {
+    name: "Regenerations",
+    freeTier: `Free tier: e.g. ~${PRICING_EXAMPLES.free.regenerationsPerMonth} regenerations / month`,
+    beyond: "Beyond: pay per additional regeneration, with volume discounts."
+  },
+  {
+    name: "AI agent actions",
+    freeTier: `Free tier: e.g. ~${PRICING_EXAMPLES.free.aiActionsPerMonth} AI agent actions / month`,
+    beyond: "Beyond: pay-as-you-go for extra AI usage."
+  },
+  {
+    name: "Projects",
+    freeTier: `Free tier: ${PRICING_EXAMPLES.free.projects} project`,
+    beyond: "Builder / Team: more projects included; extra projects available as you scale."
+  }
+];
+function PricingThinkingModal({
+  open,
+  onOpenChange,
+  onApplyClick
+}) {
+  return /* @__PURE__ */ jsxDEV(Dialog, {
+    open,
+    onOpenChange,
+    children: /* @__PURE__ */ jsxDEV(DialogContent, {
+      className: "max-h-[90vh] w-full overflow-y-auto md:max-w-5xl",
+      children: [
+        /* @__PURE__ */ jsxDEV(DialogHeader, {
+          children: [
+            /* @__PURE__ */ jsxDEV(DialogTitle, {
+              children: "Tentative pricing (work in progress)"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(DialogDescription, {
+              children: "We're still in design-partner mode. This is a draft of how we expect pricing to look once we open public access."
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV("div", {
+          className: "space-y-8",
+          children: [
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "space-y-4",
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "flex items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-muted-foreground text-xs font-medium",
+                      children: "Draft"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-muted-foreground text-xs",
+                      children: "•"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("span", {
+                      className: "text-muted-foreground text-xs",
+                      children: "Subject to change"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "grid gap-4 md:grid-cols-3",
+                  children: pricingTiers.map((tier) => /* @__PURE__ */ jsxDEV("div", {
+                    className: "card-subtle relative space-y-4 p-6",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "bg-muted border-border absolute -top-2 left-1/2 -translate-x-1/2 rounded-full border px-2 py-0.5 text-xs font-medium",
+                        children: tier.tag
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("div", {
+                        className: "space-y-2 pt-2",
+                        children: [
+                          /* @__PURE__ */ jsxDEV("h3", {
+                            className: "text-xl font-bold",
+                            children: tier.title
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV("p", {
+                            className: "text-muted-foreground text-sm",
+                            children: tier.priceLine
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("ul", {
+                        className: "space-y-2",
+                        children: tier.bullets.map((bullet, i) => /* @__PURE__ */ jsxDEV("li", {
+                          className: "text-muted-foreground flex gap-2 text-sm",
+                          children: [
+                            /* @__PURE__ */ jsxDEV(CheckCircle, {
+                              size: 14,
+                              className: "mt-0.5 shrink-0 text-violet-400"
+                            }, undefined, false, undefined, this),
+                            bullet
+                          ]
+                        }, i, true, undefined, this))
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-xs italic",
+                        children: tier.note
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, tier.title, true, undefined, this))
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "border-border space-y-4 border-t pt-6",
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  children: [
+                    /* @__PURE__ */ jsxDEV("h3", {
+                      className: "text-lg font-bold",
+                      children: "Usage-based, with a generous free tier"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("p", {
+                      className: "text-muted-foreground mt-2 text-sm",
+                      children: "Inspired by products like PostHog, we plan to keep a generous free tier on all plans, then charge based on actual usage: regenerations, AI agent actions, and the number of projects you run on ContractSpec."
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("p", {
+                      className: "text-muted-foreground mt-3 text-xs italic",
+                      children: "Free tier limits are intentionally small but useful: enough to try the agent and regenerate a real project, not enough to run a full team's workload for free."
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "grid gap-4 md:grid-cols-3",
+                  children: usageMetrics.map((metric) => /* @__PURE__ */ jsxDEV("div", {
+                    className: "card-subtle space-y-2 p-4",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("h4", {
+                        className: "text-sm font-semibold",
+                        children: metric.name
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: metric.freeTier
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV("p", {
+                        className: "text-muted-foreground text-xs",
+                        children: metric.beyond
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, metric.name, true, undefined, this))
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV("div", {
+              className: "border-border space-y-4 border-t pt-6",
+              children: [
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "text-muted-foreground text-xs",
+                  children: "These numbers are examples only. Final pricing and limits will evolve as we learn from design partners."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "text-muted-foreground text-xs",
+                  children: "This is a tentative pricing model. We're pre-PMF and pricing is still in draft, subject to change based on what we learn."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "text-muted-foreground text-xs",
+                  children: "Design partners get early access and a founding discount when paid plans launch."
+                }, undefined, false, undefined, this),
+                onApplyClick && /* @__PURE__ */ jsxDEV(Button, {
+                  onClick: () => {
+                    onOpenChange(false);
+                    onApplyClick();
+                  },
+                  className: "w-full",
+                  variant: "outline",
+                  children: "Apply as a design partner"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  PricingThinkingModal
+};

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

@@ -0,0 +1,90 @@
+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/AudienceSection.tsx
+import {
+  MarketingCard,
+  MarketingCardContent,
+  MarketingCardHeader,
+  MarketingCardTitle,
+  MarketingCardsSection
+} from "@contractspec/lib.design-system";
+import { VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Muted, Small } from "@contractspec/lib.ui-kit-web/ui/typography";
+import { jsxDEV } 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__ */ jsxDEV(MarketingCardsSection, {
+    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__ */ jsxDEV(MarketingCard, {
+      tone: "muted",
+      children: [
+        /* @__PURE__ */ jsxDEV(MarketingCardHeader, {
+          className: "space-y-2",
+          children: [
+            /* @__PURE__ */ jsxDEV(Small, {
+              className: "font-semibold text-blue-400",
+              children: item.tier
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(MarketingCardTitle, {
+              className: "text-xl",
+              children: item.title
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV(MarketingCardContent, {
+          children: /* @__PURE__ */ jsxDEV(VStack, {
+            gap: "sm",
+            children: [
+              /* @__PURE__ */ jsxDEV(Muted, {
+                className: "text-sm leading-relaxed",
+                children: item.body
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV(Small, {
+                className: "font-medium text-violet-400",
+                children: item.need
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, item.title, true, undefined, this))
+  }, undefined, false, undefined, this);
+}
+export {
+  AudienceSection
+};

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

@@ -0,0 +1,72 @@
+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/CorePositioningSection.tsx
+import { MarketingSection, ButtonLink } from "@contractspec/lib.design-system";
+import { VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { H2, Lead, Small } from "@contractspec/lib.ui-kit-web/ui/typography";
+import { ChevronRight } from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function CorePositioningSection() {
+  return /* @__PURE__ */ jsxDEV(MarketingSection, {
+    tone: "gradient",
+    padding: "comfortable",
+    align: "center",
+    maxWidth: "lg",
+    children: /* @__PURE__ */ jsxDEV(VStack, {
+      gap: "md",
+      align: "center",
+      children: [
+        /* @__PURE__ */ jsxDEV(H2, {
+          className: "text-center text-3xl font-bold md:text-4xl",
+          children: [
+            "You keep your app.",
+            /* @__PURE__ */ jsxDEV("br", {}, undefined, false, undefined, this),
+            "We stabilize it, one module at a time."
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV(Lead, {
+          className: "text-center",
+          children: [
+            "You own the code. It's standard tech.",
+            /* @__PURE__ */ jsxDEV("br", {}, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Small, {
+              className: "font-semibold text-violet-400",
+              children: "We're the compiler, not the prison."
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV(VStack, {
+          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__ */ jsxDEV(ButtonLink, {
+              href: "/pricing#waitlist",
+              children: [
+                "Join waitlist ",
+                /* @__PURE__ */ jsxDEV(ChevronRight, {
+                  size: 16
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV(ButtonLink, {
+              variant: "ghost",
+              href: "/contact",
+              children: "Book a call"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  CorePositioningSection
+};

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

@@ -0,0 +1,67 @@
+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/CtaSection.tsx
+import { MarketingSection, ButtonLink } from "@contractspec/lib.design-system";
+import {
+  analyticsEventNames,
+  captureAnalyticsEvent
+} from "@contractspec/bundle.library/libs/posthog/client";
+import { VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { H2, Lead } from "@contractspec/lib.ui-kit-web/ui/typography";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function CtaSection() {
+  return /* @__PURE__ */ jsxDEV(MarketingSection, {
+    tone: "gradient",
+    padding: "comfortable",
+    align: "center",
+    maxWidth: "lg",
+    children: /* @__PURE__ */ jsxDEV(VStack, {
+      gap: "md",
+      align: "center",
+      className: "text-center",
+      children: [
+        /* @__PURE__ */ jsxDEV(H2, {
+          className: "text-4xl font-bold md:text-5xl",
+          children: "Ready to stabilize your codebase?"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(Lead, {
+          className: "text-muted-foreground text-lg",
+          children: "Start with one module. See the difference. Expand at your own pace."
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV(VStack, {
+          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__ */ jsxDEV(ButtonLink, {
+              href: "/pricing#waitlist",
+              onClick: () => captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+                surface: "cta-section"
+              }),
+              children: "Join waitlist"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(ButtonLink, {
+              variant: "ghost",
+              href: "/contact",
+              onClick: () => captureAnalyticsEvent(analyticsEventNames.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);
+}
+export {
+  CtaSection
+};

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

@@ -0,0 +1,50 @@
+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/DevelopersSection.tsx
+import {
+  ButtonLink,
+  MarketingComparisonSection
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var standardTech = [
+  "TypeScript & Zod — schemas you already know",
+  "Prisma — standard database access",
+  "GraphQL or REST — your choice",
+  "React or any UI framework",
+  "Bun, Node, Deno — 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__ */ jsxDEV(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__ */ jsxDEV(ButtonLink, {
+      href: "/docs",
+      children: [
+        "Read the docs ",
+        /* @__PURE__ */ jsxDEV("span", {
+          "aria-hidden": true,
+          children: "→"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  DevelopersSection
+};

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

@@ -0,0 +1,105 @@
+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/FearsSection.tsx
+import { CheckCircle, Code, Unlock, Zap } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var fears = [
+  {
+    title: '"I already have an app"',
+    body: "ContractSpec works with existing codebases. You don't start over — you stabilize incrementally, one module at a time. Start with one API endpoint, one data model, one contract.",
+    icon: CheckCircle
+  },
+  {
+    title: '"Vendor lock-in / losing ownership"',
+    body: "You own the generated code. It's standard TypeScript, standard SQL, standard GraphQL. ContractSpec is a compiler — like TypeScript itself. You can eject anytime.",
+    icon: Unlock
+  },
+  {
+    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: '"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
+  }
+];
+function FearsSection() {
+  return /* @__PURE__ */ jsxDEV2(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);
+}
+export {
+  FearsSection
+};