@contractspec/bundle.marketing 1.12.0

package/src/components/marketing/sections/CorePositioningSection.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+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';
+
+export function CorePositioningSection() {
+  return (
+    <MarketingSection
+      tone="gradient"
+      padding="comfortable"
+      align="center"
+      maxWidth="lg"
+    >
+      <VStack gap="md" align="center">
+        <H2 className="text-center text-3xl font-bold md:text-4xl">
+          You keep your app.
+          <br />
+          We stabilize it, one module at a time.
+        </H2>
+        <Lead className="text-center">
+          You own the code. It&apos;s standard tech.
+          <br />
+          <Small className="font-semibold text-violet-400">
+            We&apos;re the compiler, not the prison.
+          </Small>
+        </Lead>
+        <VStack
+          as="div"
+          gap="sm"
+          align="center"
+          className="pt-2 sm:flex sm:flex-row sm:flex-wrap sm:items-center sm:justify-center"
+        >
+          <ButtonLink href="/pricing#waitlist">
+            Join waitlist <ChevronRight size={16} />
+          </ButtonLink>
+          <ButtonLink variant="ghost" href="/contact">
+            Book a call
+          </ButtonLink>
+        </VStack>
+      </VStack>
+    </MarketingSection>
+  );
+}

package/src/components/marketing/sections/CtaSection.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+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';
+
+export function CtaSection() {
+  return (
+    <MarketingSection
+      tone="gradient"
+      padding="comfortable"
+      align="center"
+      maxWidth="lg"
+    >
+      <VStack gap="md" align="center" className="text-center">
+        <H2 className="text-4xl font-bold md:text-5xl">
+          Ready to stabilize your codebase?
+        </H2>
+        <Lead className="text-muted-foreground text-lg">
+          Start with one module. See the difference. Expand at your own pace.
+        </Lead>
+        <VStack
+          as="div"
+          gap="sm"
+          align="center"
+          className="pt-2 sm:flex sm:flex-row sm:flex-wrap sm:items-center sm:justify-center"
+        >
+          <ButtonLink
+            href="/pricing#waitlist"
+            onClick={() =>
+              captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+                surface: 'cta-section',
+              })
+            }
+          >
+            Join waitlist
+          </ButtonLink>
+          <ButtonLink
+            variant="ghost"
+            href="/contact"
+            onClick={() =>
+              captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+                surface: 'cta-section',
+                variant: 'contact',
+              })
+            }
+          >
+            Book a call
+          </ButtonLink>
+        </VStack>
+      </VStack>
+    </MarketingSection>
+  );
+}

package/src/components/marketing/sections/DevelopersSection.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {
+  ButtonLink,
+  MarketingComparisonSection,
+} from '@contractspec/lib.design-system';
+
+const 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',
+];
+
+const noMagic = [
+  'Generated code is readable & modifiable',
+  'No proprietary runtime dependencies',
+  'Eject anytime, keep everything',
+  'Works with your existing CI/CD',
+  'Open spec format',
+];
+
+export function DevelopersSection() {
+  return (
+    <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={
+        <ButtonLink href="/docs">
+          Read the docs <span aria-hidden>→</span>
+        </ButtonLink>
+      }
+    />
+  );
+}

package/src/components/marketing/sections/FearsSection.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { CheckCircle, Code, Unlock, Zap } from 'lucide-react';
+import { IconGridSection } from './IconGridSection';
+
+const 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,
+  },
+];
+
+export function FearsSection() {
+  return (
+    <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',
+      }))}
+    />
+  );
+}

package/src/components/marketing/sections/HeroMarketingSection.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+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';
+
+const heroChips = ['Multi-Surface Sync', 'No Lock-in', 'Standard Tech'];
+
+export function HeroMarketingSection() {
+  return (
+    <MarketingSection tone="gradient" padding="spacious" align="center">
+      <VStack gap="lg" align="center" className="text-center">
+        <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"
+        >
+          Open Source Core
+        </Box>
+        <H1 className="text-4xl leading-tight font-bold text-balance md:text-5xl">
+          Stabilize your AI-generated code
+        </H1>
+        <Lead className="text-muted-foreground text-lg text-balance md:text-xl">
+          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.
+        </Lead>
+
+        <HStack gap="md" justify="center" wrap="wrap">
+          <ButtonLink
+            href="/install"
+            onClick={() =>
+              captureAnalyticsEvent(analyticsEventNames.CTA_INSTALL_CLICK, {
+                surface: 'hero',
+              })
+            }
+          >
+            Install OSS <ChevronRight size={16} />
+          </ButtonLink>
+          <ButtonLink
+            variant="ghost"
+            href="/contact#waitlist"
+            onClick={() =>
+              captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+                surface: 'hero',
+              })
+            }
+          >
+            Join Studio Waitlist
+          </ButtonLink>
+        </HStack>
+
+        <HStack gap="sm" justify="center" wrap="wrap" className="pt-2">
+          {heroChips.map((chip) => (
+            <Box
+              key={chip}
+              as="div"
+              role="presentation"
+              className="border-border text-foreground inline-flex items-center rounded-full border px-3 py-1 text-sm"
+            >
+              <Small className="font-medium">{chip}</Small>
+            </Box>
+          ))}
+        </HStack>
+      </VStack>
+    </MarketingSection>
+  );
+}

package/src/components/marketing/sections/IconGridSection.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  MarketingCardsSection,
+  MarketingIconCard,
+  type MarketingCardTone,
+  type MarketingSectionPadding,
+  type MarketingSectionTone,
+} from '@contractspec/lib.design-system';
+import { Muted } from '@contractspec/lib.ui-kit-web/ui/typography';
+
+type IconComponent = React.ComponentType<{ className?: string; size?: number }>;
+
+export interface IconGridItem {
+  icon: IconComponent;
+  title: string;
+  description: string;
+  iconClassName?: string;
+  tone?: MarketingCardTone;
+}
+
+interface IconGridSectionProps {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  items: IconGridItem[];
+  tone?: MarketingSectionTone;
+  padding?: MarketingSectionPadding;
+  columns?: 2 | 3 | 4;
+  iconRole?: IconGridSectionRole;
+}
+
+const itemVariants = cva('', {
+  variants: {
+    iconRole: {
+      iconFirst: '',
+      listing: 'items-start',
+      support: 'items-start',
+    },
+  },
+  defaultVariants: { iconRole: 'iconFirst' },
+});
+
+export type IconGridSectionRole = VariantProps<typeof itemVariants>['iconRole'];
+
+export function IconGridSection({
+  eyebrow,
+  title,
+  subtitle,
+  items,
+  tone = 'default',
+  padding,
+  columns = 3,
+  iconRole = 'iconFirst',
+}: IconGridSectionProps) {
+  return (
+    <MarketingCardsSection
+      tone={tone}
+      padding={padding}
+      eyebrow={
+        eyebrow ? (
+          <Muted className="text-xs font-semibold tracking-[0.2em] uppercase">
+            {eyebrow}
+          </Muted>
+        ) : null
+      }
+      title={title}
+      subtitle={subtitle ? <Muted className="text-lg">{subtitle}</Muted> : null}
+      columns={columns}
+    >
+      {items.map((card) => (
+        <MarketingIconCard
+          key={card.title}
+          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 })}
+        />
+      ))}
+    </MarketingCardsSection>
+  );
+}

package/src/components/marketing/sections/OutputsSection.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { IconGridSection } from './IconGridSection';
+
+const outputs = [
+  {
+    title: 'REST API',
+    description:
+      'Type-safe endpoints with validation. Standard Express/Hono/Elysia handlers.',
+    icon: '🔌',
+  },
+  {
+    title: 'GraphQL Schema',
+    description:
+      'Automatically generated resolvers. Standard Pothos/Apollo output.',
+    icon: '📊',
+  },
+  {
+    title: 'Database Schema',
+    description: 'Prisma migrations and types. Standard SQL underneath.',
+    icon: '🗄️',
+  },
+  {
+    title: 'MCP Tools',
+    description:
+      'AI agent tool definitions. Works with Claude, GPT, and any MCP client.',
+    icon: '🤖',
+  },
+  {
+    title: 'Client SDKs',
+    description: 'Type-safe API clients. Standard fetch/axios underneath.',
+    icon: '📦',
+  },
+  {
+    title: 'UI Components',
+    description: 'React forms and views from specs. Standard JSX output.',
+    icon: '🎨',
+  },
+];
+
+export function OutputsSection() {
+  return (
+    <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: () => (
+          <span aria-hidden className="text-3xl">
+            {item.icon}
+          </span>
+        ),
+        title: item.title,
+        description: item.description,
+      }))}
+    />
+  );
+}

package/src/components/marketing/sections/ProblemSection.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { IconGridSection, type IconGridItem } from './IconGridSection';
+import { AlertTriangle, Layers, RefreshCw, XCircle } from 'lucide-react';
+
+const problemItems: IconGridItem[] = [
+  {
+    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',
+  },
+];
+
+export function ProblemSection() {
+  return (
+    <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}
+    />
+  );
+}

package/src/components/marketing/sections/SolutionSection.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { IconGridSection, type IconGridItem } from './IconGridSection';
+import { FileCode, Layers, RefreshCw, Shield } from 'lucide-react';
+
+const solutionItems: IconGridItem[] = [
+  {
+    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',
+  },
+];
+
+export function SolutionSection() {
+  return (
+    <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}
+    />
+  );
+}

package/src/components/marketing/sections/StepsSection.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { IconGridSection } from './IconGridSection';
+
+const 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.',
+  },
+];
+
+export function StepsSection() {
+  return (
+    <IconGridSection
+      tone="default"
+      columns={4}
+      title="How incremental adoption works"
+      padding="comfortable"
+      iconRole="listing"
+      items={steps.map((item) => ({
+        icon: ({ className }) => (
+          <div
+            className={`bg-primary/15 flex h-10 w-10 items-center justify-center rounded-lg ${className ?? ''}`}
+          >
+            <span className="text-primary text-sm font-semibold">
+              {item.step}
+            </span>
+          </div>
+        ),
+        title: item.title,
+        description: item.description,
+        tone: 'muted',
+      }))}
+    />
+  );
+}