@contractspec/bundle.marketing 1.12.0

package/src/components/marketing/ProductClientPage.tsx

@@ -0,0 +1,391 @@
+'use client';
+
+import Link from '@contractspec/lib.ui-link';
+import {
+  analyticsEventNames,
+  captureAnalyticsEvent,
+} from '@contractspec/bundle.library/libs/posthog/client';
+import {
+  CheckCircle,
+  ChevronRight,
+  Database,
+  FileCode,
+  GitBranch,
+  Layers,
+  RefreshCw,
+  Shield,
+  Unlock,
+  Zap,
+} from 'lucide-react';
+
+export const ProductClientPage = () => (
+  <main className="">
+    {/* Hero */}
+    <section className="section-padding hero-gradient relative">
+      <div className="mx-auto max-w-4xl space-y-6 text-center">
+        <h1 className="text-5xl leading-tight font-bold md:text-6xl">
+          Compiler for AI-coded systems
+        </h1>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
+          Define contracts once. Generate consistent code across API, DB, UI,
+          and events. Regenerate safely anytime. No lock-in.
+        </p>
+        <div className="flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row">
+          <Link
+            href="/install"
+            onClick={() =>
+              captureAnalyticsEvent(analyticsEventNames.CTA_INSTALL_CLICK, {
+                surface: 'product-hero',
+              })
+            }
+            className="btn-primary inline-flex items-center gap-2"
+          >
+            Install OSS Core <ChevronRight size={16} />
+          </Link>
+          <Link href="/pricing" className="btn-ghost">
+            View pricing
+          </Link>
+        </div>
+      </div>
+    </section>
+
+    {/* Multi-Surface Consistency */}
+    <section className="section-padding border-border border-b">
+      <div className="mx-auto max-w-4xl space-y-8">
+        <div className="space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1">
+            <Layers size={16} className="text-blue-400" />
+            <span className="text-sm font-medium text-blue-300">
+              Multi-Surface Consistency
+            </span>
+          </div>
+          <h2 className="text-3xl font-bold md:text-4xl">
+            One contract, all surfaces in sync
+          </h2>
+          <p className="text-muted-foreground text-lg">
+            Stop chasing drift between your API, database, UI, and events. One
+            spec generates all outputs, guaranteed to stay consistent.
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2">
+          {[
+            {
+              title: 'REST & GraphQL API',
+              description:
+                'Type-safe endpoints with validation. Standard Express, Hono, Elysia, or Apollo handlers.',
+              icon: Zap,
+            },
+            {
+              title: 'Database Schema',
+              description:
+                'Prisma migrations and types generated from the same spec. Always in sync with your API.',
+              icon: Database,
+            },
+            {
+              title: 'UI Components',
+              description:
+                'React forms and views derived from specs. Validation and types flow through automatically.',
+              icon: FileCode,
+            },
+            {
+              title: 'MCP Tools & Events',
+              description:
+                'AI agent tool definitions and event schemas. Same contract, different surfaces.',
+              icon: GitBranch,
+            },
+          ].map((item, i) => (
+            <div key={i} className="card-subtle space-y-4 p-6">
+              <item.icon className="text-blue-400" size={24} />
+              <h3 className="text-lg font-bold">{item.title}</h3>
+              <p className="text-muted-foreground text-sm">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    {/* Safe Regeneration */}
+    <section className="section-padding border-border bg-muted/20 border-b">
+      <div className="mx-auto max-w-4xl space-y-8">
+        <div className="space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1">
+            <RefreshCw size={16} className="text-emerald-400" />
+            <span className="text-sm font-medium text-emerald-300">
+              Safe Regeneration
+            </span>
+          </div>
+          <h2 className="text-3xl font-bold md:text-4xl">
+            Regenerate anytime without fear
+          </h2>
+          <p className="text-muted-foreground text-lg">
+            Contracts enforce invariants. Breaking changes are caught at compile
+            time, not production. Regenerate with confidence.
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2">
+          <div className="card-subtle space-y-4 p-6">
+            <h3 className="font-bold">Spec-First Safety</h3>
+            <p className="text-muted-foreground text-sm">
+              AI agents read specs, not implementations. Generated code that
+              violates contracts gets flagged automatically.
+            </p>
+            <ul className="text-muted-foreground space-y-2 text-sm">
+              <li className="flex gap-3">
+                <CheckCircle
+                  size={16}
+                  className="mt-0.5 flex-shrink-0 text-emerald-400"
+                />
+                Type-safe from spec to runtime
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle
+                  size={16}
+                  className="mt-0.5 flex-shrink-0 text-emerald-400"
+                />
+                Invariants enforced at compile time
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle
+                  size={16}
+                  className="mt-0.5 flex-shrink-0 text-emerald-400"
+                />
+                Breaking changes detected early
+              </li>
+            </ul>
+          </div>
+          <div className="card-subtle space-y-4 p-6">
+            <h3 className="font-bold">Version Control Built-in</h3>
+            <p className="text-muted-foreground text-sm">
+              Every spec change is tracked. Roll back to any previous version.
+              Migrations are explicit and reversible.
+            </p>
+            <ul className="text-muted-foreground space-y-2 text-sm">
+              <li className="flex gap-3">
+                <CheckCircle
+                  size={16}
+                  className="mt-0.5 flex-shrink-0 text-emerald-400"
+                />
+                Git-native spec history
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle
+                  size={16}
+                  className="mt-0.5 flex-shrink-0 text-emerald-400"
+                />
+                Explicit migration paths
+              </li>
+              <li className="flex gap-3">
+                <CheckCircle
+                  size={16}
+                  className="mt-0.5 flex-shrink-0 text-emerald-400"
+                />
+                One-click rollback
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    {/* Contract Enforcement */}
+    <section className="section-padding border-border border-b">
+      <div className="mx-auto max-w-4xl space-y-8">
+        <div className="space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/10 px-3 py-1">
+            <Shield size={16} className="text-violet-400" />
+            <span className="text-sm font-medium text-violet-300">
+              Contract Enforcement
+            </span>
+          </div>
+          <h2 className="text-3xl font-bold md:text-4xl">
+            AI governance that actually works
+          </h2>
+          <p className="text-muted-foreground text-lg">
+            Constrain what AI agents can change. Enforce contracts they must
+            respect. No more hallucinated refactors breaking your system.
+          </p>
+        </div>
+        <div className="card-subtle space-y-6 p-6">
+          <div className="space-y-4">
+            <h3 className="font-bold">How contract enforcement works</h3>
+            <p className="text-muted-foreground text-sm">
+              Contracts define what the system should do. AI-generated code that
+              violates these contracts is automatically flagged and rejected
+              before it can cause damage.
+            </p>
+          </div>
+          <div className="grid gap-4 md:grid-cols-3">
+            {[
+              {
+                title: 'Define',
+                description:
+                  'Write specs in TypeScript. Define inputs, outputs, and invariants.',
+              },
+              {
+                title: 'Generate',
+                description:
+                  'ContractSpec generates code across all surfaces from your specs.',
+              },
+              {
+                title: 'Enforce',
+                description:
+                  "Any code that violates specs is flagged. AI agents can't break contracts.",
+              },
+            ].map((step, i) => (
+              <div key={i} className="space-y-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500/20">
+                  <div className="text-sm font-bold text-violet-400">
+                    {i + 1}
+                  </div>
+                </div>
+                <h4 className="text-sm font-bold">{step.title}</h4>
+                <p className="text-muted-foreground text-xs">
+                  {step.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    {/* No Lock-in */}
+    <section className="section-padding border-border border-b bg-gradient-to-br from-violet-500/10 via-indigo-500/5 to-blue-500/5">
+      <div className="mx-auto max-w-4xl space-y-8">
+        <div className="space-y-4">
+          <div className="inline-flex items-center gap-2 rounded-full border border-pink-500/20 bg-pink-500/10 px-3 py-1">
+            <Unlock size={16} className="text-pink-400" />
+            <span className="text-sm font-medium text-pink-300">
+              No Lock-in
+            </span>
+          </div>
+          <h2 className="text-3xl font-bold md:text-4xl">
+            You own everything. Eject anytime.
+          </h2>
+          <p className="text-muted-foreground text-lg">
+            ContractSpec is a compiler, not a prison. The generated code is
+            yours: standard TypeScript, standard SQL, standard GraphQL.
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2">
+          <div className="card-subtle space-y-4 p-6">
+            <h3 className="text-lg font-bold">Standard Tech Output</h3>
+            <ul className="text-muted-foreground space-y-3 text-sm">
+              {[
+                'TypeScript you can read and modify',
+                'Prisma migrations you can run manually',
+                'GraphQL schemas you can serve anywhere',
+                'React components with no magic',
+                'REST handlers that work with any framework',
+              ].map((item, i) => (
+                <li key={i} className="flex gap-3">
+                  <CheckCircle
+                    size={16}
+                    className="mt-0.5 flex-shrink-0 text-pink-400"
+                  />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="card-subtle space-y-4 p-6">
+            <h3 className="text-lg font-bold">No Proprietary Dependencies</h3>
+            <ul className="text-muted-foreground space-y-3 text-sm">
+              {[
+                'No runtime library required',
+                'No vendor-specific abstractions',
+                'Works with your existing CI/CD',
+                'Eject anytime, keep everything',
+                'Open spec format',
+              ].map((item, i) => (
+                <li key={i} className="flex gap-3">
+                  <CheckCircle
+                    size={16}
+                    className="mt-0.5 flex-shrink-0 text-pink-400"
+                  />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className="pt-4 text-center">
+          <p className="text-muted-foreground mb-4 text-sm">
+            Like TypeScript compiles to JavaScript, ContractSpec compiles to
+            standard code.
+            <br />
+            <span className="font-medium text-violet-400">
+              We're the compiler, not the prison.
+            </span>
+          </p>
+        </div>
+      </div>
+    </section>
+
+    {/* Incremental Adoption */}
+    <section className="section-padding border-border border-b">
+      <div className="mx-auto max-w-4xl space-y-8">
+        <h2 className="text-center text-3xl font-bold md:text-4xl">
+          Start small. Expand gradually.
+        </h2>
+        <p className="text-muted-foreground mx-auto max-w-2xl text-center text-lg">
+          You don't rewrite your app. You stabilize one module at a time. Start
+          with one endpoint, prove value, then expand.
+        </p>
+        <div className="grid gap-6 md:grid-cols-3">
+          {[
+            {
+              title: 'Day 1',
+              description:
+                'Pick one API endpoint. Write a spec. See what gets generated.',
+            },
+            {
+              title: 'Week 1',
+              description:
+                'Add a few more specs. Compare generated code to existing code.',
+            },
+            {
+              title: 'Month 1',
+              description:
+                'Migrate a full module. Enjoy multi-surface consistency.',
+            },
+          ].map((item, i) => (
+            <div key={i} className="card-subtle space-y-4 p-6 text-center">
+              <div className="text-2xl font-bold text-violet-400">
+                {item.title}
+              </div>
+              <p className="text-muted-foreground text-sm">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    {/* CTA */}
+    <section className="section-padding hero-gradient">
+      <div className="mx-auto max-w-4xl space-y-6 text-center">
+        <h2 className="text-3xl font-bold md:text-4xl">
+          Ready to stabilize your AI-generated code?
+        </h2>
+        <p className="text-muted-foreground text-lg">
+          Start with one module. No big-bang migration. No lock-in.
+        </p>
+        <div className="flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row">
+          <Link
+            href="/install"
+            className="btn-primary inline-flex items-center gap-2"
+          >
+            Install OSS Core <ChevronRight size={16} />
+          </Link>
+          <Link href="/contact#waitlist" className="btn-ghost">
+            Join Studio Waitlist
+          </Link>
+        </div>
+      </div>
+    </section>
+  </main>
+);

package/src/components/marketing/index.ts

@@ -0,0 +1,10 @@
+export { LandingPage } from './LandingPage';
+export { ProductClientPage } from './ProductClientPage';
+export { PricingClient } from './PricingClient';
+export { ContactClient } from './ContactClient';
+export { ChangelogPage } from './ChangelogPage';
+export { CofounderPage } from './CofounderPage';
+export { ContributePage } from './ContributePage';
+export { DesignPartnerPage } from './DesignPartnerPage';
+export { WaitlistSection } from './waitlist-section';
+export { PricingThinkingModal } from './pricing-thinking-modal';

package/src/components/marketing/pricing-thinking-modal.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+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 { PRICING_EXAMPLES } from '../../libs/pricing-examples';
+
+interface PricingTier {
+  tag: string;
+  title: string;
+  priceLine: string;
+  bullets: string[];
+  note: string;
+}
+
+interface UsageMetric {
+  name: string;
+  freeTier: string;
+  beyond: string;
+}
+
+const pricingTiers: PricingTier[] = [
+  {
+    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.',
+  },
+];
+
+const usageMetrics: UsageMetric[] = [
+  {
+    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.',
+  },
+];
+
+interface PricingThinkingModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApplyClick?: () => void;
+}
+
+export function PricingThinkingModal({
+  open,
+  onOpenChange,
+  onApplyClick,
+}: PricingThinkingModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] w-full overflow-y-auto md:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>Tentative pricing (work in progress)</DialogTitle>
+          <DialogDescription>
+            We're still in design-partner mode. This is a draft of how we expect
+            pricing to look once we open public access.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-8">
+          {/* High-level tiers */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-xs font-medium">
+                Draft
+              </span>
+              <span className="text-muted-foreground text-xs">•</span>
+              <span className="text-muted-foreground text-xs">
+                Subject to change
+              </span>
+            </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              {pricingTiers.map((tier) => (
+                <div
+                  key={tier.title}
+                  className="card-subtle relative space-y-4 p-6"
+                >
+                  <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">
+                    {tier.tag}
+                  </div>
+                  <div className="space-y-2 pt-2">
+                    <h3 className="text-xl font-bold">{tier.title}</h3>
+                    <p className="text-muted-foreground text-sm">
+                      {tier.priceLine}
+                    </p>
+                  </div>
+                  <ul className="space-y-2">
+                    {tier.bullets.map((bullet, i) => (
+                      <li
+                        key={i}
+                        className="text-muted-foreground flex gap-2 text-sm"
+                      >
+                        <CheckCircle
+                          size={14}
+                          className="mt-0.5 shrink-0 text-violet-400"
+                        />
+                        {bullet}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="text-muted-foreground text-xs italic">
+                    {tier.note}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Usage-based detail */}
+          <div className="border-border space-y-4 border-t pt-6">
+            <div>
+              <h3 className="text-lg font-bold">
+                Usage-based, with a generous free tier
+              </h3>
+              <p className="text-muted-foreground mt-2 text-sm">
+                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.
+              </p>
+              <p className="text-muted-foreground mt-3 text-xs italic">
+                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.
+              </p>
+            </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              {usageMetrics.map((metric) => (
+                <div key={metric.name} className="card-subtle space-y-2 p-4">
+                  <h4 className="text-sm font-semibold">{metric.name}</h4>
+                  <p className="text-muted-foreground text-xs">
+                    {metric.freeTier}
+                  </p>
+                  <p className="text-muted-foreground text-xs">
+                    {metric.beyond}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Footer / Disclaimer */}
+          <div className="border-border space-y-4 border-t pt-6">
+            <p className="text-muted-foreground text-xs">
+              These numbers are examples only. Final pricing and limits will
+              evolve as we learn from design partners.
+            </p>
+            <p className="text-muted-foreground text-xs">
+              This is a tentative pricing model. We're pre-PMF and pricing is
+              still in draft, subject to change based on what we learn.
+            </p>
+            <p className="text-muted-foreground text-xs">
+              Design partners get early access and a founding discount when paid
+              plans launch.
+            </p>
+            {onApplyClick && (
+              <Button
+                onClick={() => {
+                  onOpenChange(false);
+                  onApplyClick();
+                }}
+                className="w-full"
+                variant="outline"
+              >
+                Apply as a design partner
+              </Button>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+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';
+
+const 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.',
+  },
+];
+
+export function AudienceSection() {
+  return (
+    <MarketingCardsSection
+      tone="default"
+      columns={2}
+      eyebrow="Who It's For"
+      title="Built for teams drowning in AI-generated code"
+      maxWidth="xl"
+    >
+      {audiences.map((item) => (
+        <MarketingCard key={item.title} tone="muted">
+          <MarketingCardHeader className="space-y-2">
+            <Small className="font-semibold text-blue-400">{item.tier}</Small>
+            <MarketingCardTitle className="text-xl">
+              {item.title}
+            </MarketingCardTitle>
+          </MarketingCardHeader>
+          <MarketingCardContent>
+            <VStack gap="sm">
+              <Muted className="text-sm leading-relaxed">{item.body}</Muted>
+              <Small className="font-medium text-violet-400">{item.need}</Small>
+            </VStack>
+          </MarketingCardContent>
+        </MarketingCard>
+      ))}
+    </MarketingCardsSection>
+  );
+}