@contractspec/bundle.marketing 3.7.5 → 3.7.7

package/src/components/marketing/index.ts

@@ -1,10 +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 { ContactClient } from './ContactClient';
 export { ContributePage } from './ContributePage';
 export { DesignPartnerPage } from './DesignPartnerPage';
-export { StudioSignupSection } from './studio-signup-section';
+export { LandingPage } from './LandingPage';
+export { PricingClient } from './PricingClient';
+export { ProductClientPage } from './ProductClientPage';
 export { PricingThinkingModal } from './pricing-thinking-modal';
+export { StudioSignupSection } from './studio-signup-section';

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

@@ -1,224 +1,224 @@
 'use client';
 
-import { CheckCircle } from 'lucide-react';
+import { Button } from '@contractspec/lib.design-system';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
 } from '@contractspec/lib.ui-kit-web/ui/dialog';
-import { Button } from '@contractspec/lib.design-system';
+import { CheckCircle } from 'lucide-react';
 import { PRICING_EXAMPLES } from '../../libs/pricing-examples';
 
 interface PricingTier {
-  tag: string;
-  title: string;
-  priceLine: string;
-  bullets: string[];
-  note: string;
+	tag: string;
+	title: string;
+	priceLine: string;
+	bullets: string[];
+	note: string;
 }
 
 interface UsageMetric {
-  name: string;
-  freeTier: string;
-  beyond: string;
+	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.',
-  },
+	{
+		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.',
-  },
+	{
+		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;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onApplyClick?: () => void;
 }
 
 export function PricingThinkingModal({
-  open,
-  onOpenChange,
-  onApplyClick,
+	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>
-            ContractSpec Studio is live. This is a draft of how paid plans are
-            expected to evolve as usage grows.
-          </DialogDescription>
-        </DialogHeader>
+	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>
+						ContractSpec Studio is live. This is a draft of how paid plans are
+						expected to evolve as usage grows.
+					</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>
+				<div className="space-y-8">
+					{/* High-level tiers */}
+					<div className="space-y-4">
+						<div className="flex items-center gap-2">
+							<span className="font-medium text-muted-foreground text-xs">
+								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="absolute -top-2 left-1/2 -translate-x-1/2 rounded-full border border-border bg-muted px-2 py-0.5 font-medium text-xs">
+										{tier.tag}
+									</div>
+									<div className="space-y-2 pt-2">
+										<h3 className="font-bold text-xl">{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="flex gap-2 text-muted-foreground 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>
+					{/* Usage-based detail */}
+					<div className="space-y-4 border-border border-t pt-6">
+						<div>
+							<h3 className="font-bold text-lg">
+								Usage-based, with a generous free tier
+							</h3>
+							<p className="mt-2 text-muted-foreground 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="mt-3 text-muted-foreground 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="font-semibold text-sm">{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 priority onboarding and partner incentives as
-              paid plans launch.
-            </p>
-            {onApplyClick && (
-              <Button
-                onClick={() => {
-                  onOpenChange(false);
-                  onApplyClick();
-                }}
-                className="w-full"
-                variant="outline"
-              >
-                Try Studio
-              </Button>
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
+					{/* Footer / Disclaimer */}
+					<div className="space-y-4 border-border 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 priority onboarding and partner incentives as
+							paid plans launch.
+						</p>
+						{onApplyClick && (
+							<Button
+								onClick={() => {
+									onOpenChange(false);
+									onApplyClick();
+								}}
+								className="w-full"
+								variant="outline"
+							>
+								Try Studio
+							</Button>
+						)}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
 }

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

@@ -1,66 +1,65 @@
-import * as React from 'react';
 import {
-  MarketingCard,
-  MarketingCardContent,
-  MarketingCardHeader,
-  MarketingCardTitle,
-  MarketingCardsSection,
+	MarketingCard,
+	MarketingCardContent,
+	MarketingCardHeader,
+	MarketingCardsSection,
+	MarketingCardTitle,
 } 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.',
-  },
+	{
+		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>
-  );
+	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>
+	);
 }

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

@@ -1,44 +1,44 @@
-import * as React from 'react';
 import { ButtonLink, MarketingSection } 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="https://www.contractspec.studio">
-            Try Studio <ChevronRight size={16} />
-          </ButtonLink>
-          <ButtonLink variant="ghost" href="/contact">
-            Book a call
-          </ButtonLink>
-        </VStack>
-      </VStack>
-    </MarketingSection>
-  );
+	return (
+		<MarketingSection
+			tone="gradient"
+			padding="comfortable"
+			align="center"
+			maxWidth="lg"
+		>
+			<VStack gap="md" align="center">
+				<H2 className="text-center font-bold text-3xl 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">
+						Start with the open foundation. Adopt the operating layer when it
+						helps.
+					</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="https://www.contractspec.studio">
+						Try Studio <ChevronRight size={16} />
+					</ButtonLink>
+					<ButtonLink variant="ghost" href="/contact">
+						Book a call
+					</ButtonLink>
+				</VStack>
+			</VStack>
+		</MarketingSection>
+	);
 }