@contractspec/bundle.marketing 3.7.6 → 3.8.2

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

@@ -1,59 +1,58 @@
-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: '🎨',
-  },
+	{
+		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,
-      }))}
-    />
-  );
+	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

@@ -1,47 +1,46 @@
-import * as React from 'react';
-import { IconGridSection, type IconGridItem } from './IconGridSection';
 import { AlertTriangle, Layers, RefreshCw, XCircle } from 'lucide-react';
+import { type IconGridItem, IconGridSection } from './IconGridSection';
 
 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',
-  },
+	{
+		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}
-    />
-  );
+	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

@@ -1,47 +1,46 @@
-import * as React from 'react';
-import { IconGridSection, type IconGridItem } from './IconGridSection';
 import { FileCode, Layers, RefreshCw, Shield } from 'lucide-react';
+import { type IconGridItem, IconGridSection } from './IconGridSection';
 
 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',
-  },
+	{
+		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}
-    />
-  );
+	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

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

package/src/components/marketing/studio-signup-section.tsx

@@ -1,56 +1,54 @@
 'use client';
 
+import { ArrowRight, Sparkles } from 'lucide-react';
 import Link from 'next/link';
-import { ArrowRight, Rocket } from 'lucide-react';
-import { Button } from '@contractspec/lib.design-system';
 
 interface StudioSignupSectionProps {
-  variant?: 'default' | 'compact';
+	variant?: 'default' | 'compact';
 }
 
 const studioUrl = 'https://www.contractspec.studio';
 const studioDocsUrl = 'https://www.contractspec.studio/docs';
 
 export function StudioSignupSection({
-  variant = 'default',
+	variant = 'default',
 }: StudioSignupSectionProps) {
-  const isCompact = variant === 'compact';
+	const isCompact = variant === 'compact';
 
-  return (
-    <div
-      id="studio-signup"
-      className={isCompact ? 'space-y-4' : 'card-subtle space-y-6 p-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">
-          <Rocket size={14} className="text-violet-300" />
-          <span className="text-sm font-medium text-violet-300">
-            ContractSpec Studio
-          </span>
-        </div>
-        <h2 className={isCompact ? 'text-xl font-bold' : 'text-2xl font-bold'}>
-          Try ContractSpec Studio
-        </h2>
-        <p className="text-muted-foreground text-sm">
-          The AI-powered product decision engine that turns product signals into
-          spec-first deliverables.
-        </p>
-        <p className="text-muted-foreground text-xs">
-          Evidence -&gt; Correlation -&gt; Decision -&gt; Change -&gt; Export
-          -&gt; Check -&gt; Notify -&gt; Autopilot
-        </p>
-      </div>
+	return (
+		<div
+			id="studio-signup"
+			className={`${isCompact ? 'space-y-5 rounded-[28px] border border-border bg-card p-6' : 'editorial-panel space-y-6'}`}
+		>
+			<div className="space-y-4">
+				<div className="badge">
+					<Sparkles size={14} />
+					Studio on top
+				</div>
+				<h2
+					className={
+						isCompact
+							? 'font-serif text-3xl tracking-[-0.04em]'
+							: 'font-serif text-4xl tracking-[-0.04em]'
+					}
+				>
+					See the operating layer built on top of the open system.
+				</h2>
+				<p className="text-muted-foreground text-sm leading-7">
+					Studio packages the workflow for evidence, drafting, review, export,
+					and follow-up. It should feel like the best product built on top of
+					ContractSpec, not a different story.
+				</p>
+			</div>
 
-      <div className="flex flex-col gap-3 sm:flex-row">
-        <Button asChild className="w-full sm:w-auto">
-          <Link href={studioUrl}>
-            Get Started Free <ArrowRight className="ml-2 h-4 w-4" />
-          </Link>
-        </Button>
-        <Button asChild variant="outline" className="w-full sm:w-auto">
-          <Link href={studioDocsUrl}>Read Studio Docs</Link>
-        </Button>
-      </div>
-    </div>
-  );
+			<div className="grid gap-3 sm:grid-cols-2">
+				<Link href={studioUrl} className="btn-primary">
+					Explore Studio <ArrowRight className="ml-2 h-4 w-4" />
+				</Link>
+				<Link href={studioDocsUrl} className="btn-ghost">
+					Read Studio docs
+				</Link>
+			</div>
+		</div>
+	);
 }