@contractspec/bundle.marketing 3.7.6 → 3.7.7

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

@@ -1,57 +1,56 @@
-import * as React from 'react';
-import { ButtonLink, MarketingSection } from '@contractspec/lib.design-system';
 import {
-  analyticsEventNames,
-  captureAnalyticsEvent,
+	analyticsEventNames,
+	captureAnalyticsEvent,
 } from '@contractspec/bundle.library/libs/posthog/client';
+import { ButtonLink, MarketingSection } from '@contractspec/lib.design-system';
 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="https://www.contractspec.studio"
-            onClick={() =>
-              captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
-                surface: 'cta-section',
-              })
-            }
-          >
-            Try Studio
-          </ButtonLink>
-          <ButtonLink
-            variant="ghost"
-            href="/contact"
-            onClick={() =>
-              captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
-                surface: 'cta-section',
-                variant: 'contact',
-              })
-            }
-          >
-            Book a call
-          </ButtonLink>
-        </VStack>
-      </VStack>
-    </MarketingSection>
-  );
+	return (
+		<MarketingSection
+			tone="gradient"
+			padding="comfortable"
+			align="center"
+			maxWidth="lg"
+		>
+			<VStack gap="md" align="center" className="text-center">
+				<H2 className="font-bold text-4xl md:text-5xl">
+					Ready to stabilize your codebase?
+				</H2>
+				<Lead className="text-lg text-muted-foreground">
+					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="https://www.contractspec.studio"
+						onClick={() =>
+							captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+								surface: 'cta-section',
+							})
+						}
+					>
+						Try Studio
+					</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

@@ -1,38 +1,37 @@
-import * as React from 'react';
 import {
-  ButtonLink,
-  MarketingComparisonSection,
+	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',
+	'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',
+	'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>
-      }
-    />
-  );
+	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

@@ -1,45 +1,44 @@
-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,
-  },
+	{
+		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 stays open and ejectable, so you can leave with the parts you adopted 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',
-      }))}
-    />
-  );
+	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

@@ -1,10 +1,10 @@
 'use client';
 
-import { ButtonLink, MarketingSection } from '@contractspec/lib.design-system';
 import {
-  analyticsEventNames,
-  captureAnalyticsEvent,
+	analyticsEventNames,
+	captureAnalyticsEvent,
 } from '@contractspec/bundle.library/libs/posthog/client';
+import { ButtonLink, MarketingSection } from '@contractspec/lib.design-system';
 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';
@@ -12,62 +12,62 @@ 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>
+	return (
+		<MarketingSection tone="gradient" padding="spacious" align="center">
+			<VStack gap="lg" align="center" className="text-center">
+				<Box
+					as="div"
+					role="presentation"
+					className="inline-flex items-center rounded-full bg-muted px-3 py-1 font-medium text-muted-foreground text-xs uppercase tracking-wider"
+				>
+					Open Source Core
+				</Box>
+				<H1 className="text-balance font-bold text-4xl leading-tight md:text-5xl">
+					Stabilize your AI-generated code
+				</H1>
+				<Lead className="text-balance text-lg text-muted-foreground md:text-xl">
+					ContractSpec is the open spec system 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="https://www.contractspec.studio"
-            onClick={() =>
-              captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
-                surface: 'hero',
-              })
-            }
-          >
-            Try Studio
-          </ButtonLink>
-        </HStack>
+				<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="https://www.contractspec.studio"
+						onClick={() =>
+							captureAnalyticsEvent(analyticsEventNames.CTA_STUDIO_CLICK, {
+								surface: 'hero',
+							})
+						}
+					>
+						Try Studio
+					</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>
-  );
+				<HStack gap="sm" justify="center" wrap="wrap" className="pt-2">
+					{heroChips.map((chip) => (
+						<Box
+							key={chip}
+							as="div"
+							role="presentation"
+							className="inline-flex items-center rounded-full border border-border px-3 py-1 text-foreground text-sm"
+						>
+							<Small className="font-medium">{chip}</Small>
+						</Box>
+					))}
+				</HStack>
+			</VStack>
+		</MarketingSection>
+	);
 }

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

@@ -1,91 +1,91 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
 import {
-  MarketingCardsSection,
-  MarketingIconCard,
-  type MarketingCardTone,
-  type MarketingSectionPadding,
-  type MarketingSectionTone,
+	MarketingCardsSection,
+	type MarketingCardTone,
+	MarketingIconCard,
+	type MarketingSectionPadding,
+	type MarketingSectionTone,
 } from '@contractspec/lib.design-system';
 import { Muted } from '@contractspec/lib.ui-kit-web/ui/typography';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 type IconComponent = React.ComponentType<{ className?: string; size?: number }>;
 
 export interface IconGridItem {
-  icon: IconComponent;
-  title: string;
-  description: string;
-  iconClassName?: string;
-  tone?: MarketingCardTone;
+	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;
+	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' },
+	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',
+	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>
-  );
+	return (
+		<MarketingCardsSection
+			tone={tone}
+			padding={padding}
+			eyebrow={
+				eyebrow ? (
+					<Muted className="font-semibold text-xs uppercase tracking-[0.2em]">
+						{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>
+	);
 }