@gntik-ai/blocks 0.0.0-stage → 0.5.0

package/src/marketing/Hero/Hero.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { Hero } from './Hero';
+
+describe('Hero', () => {
+  it('renders the centered hero with link CTAs', async () => {
+    const { container } = render(<Hero />);
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Ship your product faster');
+    expect(screen.getByRole('link', { name: 'Get started' })).toHaveAttribute('href', '#get-started');
+    expect(screen.getByRole('link', { name: 'Book a demo' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('renders the split variant with button actions and a custom media slot', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Hero
+        variant="split"
+        headingLevel="h2"
+        primaryAction={{ label: 'Start free trial', onClick }}
+        secondaryAction={null}
+        media={<img src="data:," alt="Dashboard screenshot" />}
+      />,
+    );
+    expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'Dashboard screenshot' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Start free trial' }));
+    expect(onClick).toHaveBeenCalledOnce();
+    await expectNoAxeViolations(document.body);
+  });
+});

package/src/marketing/Hero/Hero.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'react';
+import { Badge, cn } from '@gntik-ai/ui';
+import { ArrowRight } from '@gntik-ai/icons';
+import { ActionButton, type MarketingAction } from '../actions';
+
+export interface HeroProps {
+  /** `centered` (copy over the media) or `split` (copy left, media right from `lg`). */
+  variant?: 'centered' | 'split';
+  /** Small label above the title. */
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  primaryAction?: MarketingAction | null;
+  secondaryAction?: MarketingAction | null;
+  /** Screenshot slot. Defaults to a neutral app-window placeholder; null hides it. */
+  media?: ReactNode;
+  /** Heading level of the title. */
+  headingLevel?: 'h1' | 'h2';
+  className?: string;
+}
+
+/** Neutral app-window placeholder for the screenshot slot (decorative). */
+export function HeroScreenshotPlaceholder({ className }: { className?: string }) {
+  return (
+    <div aria-hidden className={cn('overflow-hidden rounded-xl border border-border bg-card shadow-sm', className)}>
+      <div className="flex h-9 items-center gap-1.5 border-b border-border bg-secondary/40 px-3">
+        <span className="size-2.5 rounded-full bg-muted-foreground/30" />
+        <span className="size-2.5 rounded-full bg-muted-foreground/30" />
+        <span className="size-2.5 rounded-full bg-muted-foreground/30" />
+      </div>
+      <div className="flex">
+        <div className="hidden w-36 shrink-0 space-y-2 border-e border-border bg-secondary/30 p-3 sm:block">
+          {[70, 55, 80, 60, 45].map((w, i) => (
+            <div
+              key={i}
+              className={cn('h-2 rounded-full', i === 0 ? 'bg-primary/60' : 'bg-muted-foreground/20')}
+              style={{ width: `${w}%` }}
+            />
+          ))}
+        </div>
+        <div className="min-w-0 flex-1 space-y-4 p-4">
+          <div className="grid grid-cols-3 gap-3">
+            {[0, 1, 2].map((i) => (
+              <div key={i} className="space-y-2 rounded-lg border border-border p-3">
+                <div className="h-1.5 w-1/2 rounded-full bg-muted-foreground/25" />
+                <div className="h-3 w-3/4 rounded-full bg-foreground/20" />
+              </div>
+            ))}
+          </div>
+          <div className="flex h-28 items-end gap-1.5 rounded-lg border border-border p-3">
+            {[40, 55, 35, 70, 60, 85, 65, 90, 75, 95, 80, 100].map((h, i) => (
+              <div key={i} className="flex-1 rounded-t-sm bg-primary/50" style={{ height: `${h}%` }} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Landing hero: eyebrow, title, description, two calls to action and a screenshot slot. */
+export function Hero({
+  variant = 'centered',
+  eyebrow = 'New · Usage-based billing',
+  title = 'Ship your product faster, with less to maintain',
+  description = 'Projects, deployments and team access in one place. Start in minutes, scale without rewriting, and keep every change reviewable.',
+  primaryAction = { label: 'Get started', href: '#get-started', icon: ArrowRight },
+  secondaryAction = { label: 'Book a demo', href: '#demo' },
+  media,
+  headingLevel: Heading = 'h1',
+  className,
+}: HeroProps) {
+  const split = variant === 'split';
+  const slot = media === undefined ? <HeroScreenshotPlaceholder /> : media;
+  return (
+    <section
+      className={cn(
+        'px-4 py-16 sm:px-6 sm:py-24',
+        split ? 'grid items-center gap-12 lg:grid-cols-2 lg:gap-16' : 'flex flex-col items-center text-center',
+        className,
+      )}
+    >
+      <div className={cn('min-w-0', !split && 'flex max-w-3xl flex-col items-center')}>
+        {eyebrow && (
+          <Badge tone="primary" size="lg" shape="pill" dot>
+            {eyebrow}
+          </Badge>
+        )}
+        <Heading className="mt-5 text-[36px] leading-[1.1] font-semibold tracking-tight text-balance text-foreground sm:text-[48px]">
+          {title}
+        </Heading>
+        {description && (
+          <p className="mt-5 max-w-2xl text-[16px] leading-relaxed text-pretty text-muted-foreground sm:text-[17px]">
+            {description}
+          </p>
+        )}
+        {(primaryAction || secondaryAction) && (
+          <div className={cn('mt-8 flex flex-wrap items-center gap-3', !split && 'justify-center')}>
+            {primaryAction && <ActionButton action={primaryAction} variant="primary" />}
+            {secondaryAction && <ActionButton action={secondaryAction} variant="secondary" />}
+          </div>
+        )}
+      </div>
+      {slot && <div className={cn('w-full min-w-0', !split && 'mt-14 max-w-5xl')}>{slot}</div>}
+    </section>
+  );
+}

package/src/marketing/Hero/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Hero',
+  family: 'marketing',
+  status: 'beta',
+  description:
+    'Landing hero in centered or split layout: eyebrow badge, title, description, primary/secondary calls to action and a screenshot slot with a neutral placeholder.',
+  uses: ['Badge', 'Button', 'buttonVariants'],
+};

package/src/marketing/PricingTable/PricingTable.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { PricingTable } from './PricingTable';
+
+describe('PricingTable', () => {
+  it('renders the tiers with monthly prices', async () => {
+    const { container } = render(<PricingTable />);
+    const team = screen.getByRole('listitem', { name: 'Team' });
+    expect(within(team).getByText('$49')).toBeInTheDocument();
+    expect(within(team).getByText('Most popular')).toBeInTheDocument();
+    expect(within(screen.getByRole('listitem', { name: 'Enterprise' })).getByText('Custom')).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('switches to annual pricing and reports the chosen tier', async () => {
+    const user = userEvent.setup();
+    const onSelectTier = vi.fn();
+    render(<PricingTable onSelectTier={onSelectTier} />);
+    await user.click(screen.getByRole('button', { name: /Annual/ }));
+    const team = screen.getByRole('listitem', { name: 'Team' });
+    expect(within(team).getByText('$39')).toBeInTheDocument();
+    expect(within(team).getByText('$468 billed yearly')).toBeInTheDocument();
+    await user.click(within(team).getByRole('button', { name: 'Start free trial' }));
+    expect(onSelectTier).toHaveBeenCalledWith(expect.objectContaining({ id: 'team' }), 'annual');
+  });
+
+  it('marks the current plan with a badge, aria-current and a disabled CTA', async () => {
+    const onSelectTier = vi.fn();
+    const { container } = render(<PricingTable currentTierId="starter" onSelectTier={onSelectTier} />);
+    const starter = screen.getByRole('listitem', { name: 'Starter' });
+    expect(starter).toHaveAttribute('aria-current', 'true');
+    expect(within(starter).getByText('Current plan', { selector: 'span' })).toBeInTheDocument();
+    expect(within(starter).getByRole('button', { name: 'Current plan' })).toBeDisabled();
+    expect(screen.getByRole('listitem', { name: 'Team' })).not.toHaveAttribute('aria-current');
+    await expectNoAxeViolations(container);
+  });
+
+  it('works as a radio group in selectable mode (uncontrolled)', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    const { container } = render(<PricingTable selectable defaultValue="team" onValueChange={onValueChange} />);
+    expect(screen.getByRole('radiogroup', { name: 'Simple pricing that scales with you' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Start free trial' })).not.toBeInTheDocument();
+    const team = screen.getByRole('radio', { name: 'Team' });
+    expect(team).toBeChecked();
+    expect(screen.getAllByTestId('tier-check')).toHaveLength(1);
+    await expectNoAxeViolations(container);
+    await user.click(screen.getByText('For organizations with advanced security needs.'));
+    expect(screen.getByRole('radio', { name: 'Enterprise' })).toBeChecked();
+    expect(onValueChange).toHaveBeenLastCalledWith('enterprise');
+    screen.getByRole('radio', { name: 'Enterprise' }).focus();
+    await user.keyboard('{ArrowLeft}');
+    expect(screen.getByRole('radio', { name: 'Team' })).toBeChecked();
+    expect(onValueChange).toHaveBeenLastCalledWith('team');
+    expect(onValueChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('respects a controlled value', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<PricingTable selectable value="starter" onValueChange={onValueChange} currentTierId="starter" />);
+    await user.click(screen.getByRole('radio', { name: 'Team' }));
+    expect(onValueChange).toHaveBeenCalledWith('team');
+    expect(screen.getByRole('radio', { name: 'Starter' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Starter' }).closest('[aria-current]')).not.toBeNull();
+  });
+
+  it('renders without its own header, labelled from outside, with tier names at headingLevel', async () => {
+    const { container } = render(
+      <>
+        <h1 id="ext">Pick a plan</h1>
+        <PricingTable
+          title={null}
+          eyebrow={null}
+          description={null}
+          aria-labelledby="ext"
+          headingLevel="h2"
+          showCycleToggle={false}
+          columns={1}
+          selectable
+          defaultValue="team"
+        />
+      </>,
+    );
+    expect(screen.getByRole('radiogroup', { name: 'Pick a plan' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 2, name: 'Team' })).toBeInTheDocument();
+    expect(screen.queryByRole('group', { name: 'Billing period' })).toBeNull();
+    expect(screen.queryByRole('button', { name: /Annual/ })).toBeNull();
+    await expectNoAxeViolations(container);
+  });
+});

package/src/marketing/PricingTable/PricingTable.tsx

@@ -0,0 +1,323 @@
+import { useId, useState, type MouseEvent, type ReactNode } from 'react';
+import { Badge, Button, Radio, RadioGroup, Toggle, ToggleGroup, cn } from '@gntik-ai/ui';
+import { Check } from '@gntik-ai/icons';
+import { samplePricingTiers } from './fixtures';
+
+export type PricingCycle = 'monthly' | 'annual';
+
+export interface PricingTier {
+  id: string;
+  name: string;
+  description?: string;
+  /** Price per month on monthly billing; null shows "Custom". */
+  priceMonthly: number | null;
+  /** Price per month on annual billing; null shows "Custom". */
+  priceAnnual: number | null;
+  /** Call-to-action label. */
+  cta: string;
+  features: string[];
+  /** Emphasised with a primary border (no colour fill). */
+  highlighted?: boolean;
+  /** Label on the tier, e.g. "Most popular". */
+  badge?: string;
+}
+
+export interface PricingTableProps {
+  tiers?: PricingTier[];
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  currency?: string;
+  defaultCycle?: PricingCycle;
+  onCycleChange?: (cycle: PricingCycle) => void;
+  /** Called with the tier and the cycle shown when a CTA is activated. */
+  onSelectTier?: (tier: PricingTier, cycle: PricingCycle) => void;
+  /** Note next to the annual option, e.g. "Save 20%". */
+  annualNote?: string;
+  /** Level of the section title; tier names use the next level (or this one when there is no title). */
+  headingLevel?: 'h2' | 'h3';
+  /** Shows the monthly/annual toggle (default true). */
+  showCycleToggle?: boolean;
+  /** Columns at the widest breakpoint (default: one per tier, up to 4). */
+  columns?: 1 | 2 | 3 | 4;
+  /** Names the tier list / radio group when `title` is null (the block then renders no landmark), e.g. inside a wizard step. */
+  'aria-label'?: string;
+  /** Id of an external heading that names the section when `title` is null. */
+  'aria-labelledby'?: string;
+  /**
+   * Id of the tier the account is on: its card gets a "Current plan" badge and
+   * `aria-current`, and its CTA becomes a disabled "Current plan" button.
+   */
+  currentTierId?: string;
+  /** Label of the current tier's badge and disabled CTA. */
+  currentPlanLabel?: string;
+  /**
+   * Turns the tiers into a single-choice radio group (role radiogroup/radio, arrow keys,
+   * selected card with a primary border and a check). CTAs are not rendered in this mode.
+   */
+  selectable?: boolean;
+  /** Selected tier id (controlled, `selectable` only). */
+  value?: string;
+  /** Initially selected tier id (uncontrolled, `selectable` only). */
+  defaultValue?: string;
+  /** Called with the newly selected tier id (`selectable` only). */
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+const CARD = 'relative flex flex-col rounded-xl bg-card p-6 shadow-sm';
+const GRID = { 1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4' } as const;
+
+/** Pricing section: tiers with a monthly/annual toggle, a highlighted tier and a feature checklist. */
+export function PricingTable({
+  tiers = samplePricingTiers,
+  eyebrow = 'Pricing',
+  title = 'Simple pricing that scales with you',
+  description = 'Start free, upgrade when you need more. Every plan includes the core platform.',
+  currency = 'USD',
+  defaultCycle = 'monthly',
+  onCycleChange,
+  onSelectTier,
+  annualNote = 'Save 20%',
+  headingLevel: Heading = 'h2',
+  showCycleToggle = true,
+  columns,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  currentTierId,
+  currentPlanLabel = 'Current plan',
+  selectable = false,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+}: PricingTableProps) {
+  const titleId = useId();
+  const [cycle, setCycle] = useState<PricingCycle>(defaultCycle);
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const selected = value !== undefined ? value : innerValue;
+  const hasTitle = title != null && title !== false && title !== '';
+  const hasHeader = hasTitle || Boolean(eyebrow) || Boolean(description);
+  const TierHeading: 'h2' | 'h3' | 'h4' = !hasTitle ? Heading : Heading === 'h2' ? 'h3' : 'h4';
+  // Without a title the block is not a landmark of its own: the list / radio group carries the name.
+  const Wrapper = hasTitle ? 'section' : 'div';
+  const labelling = hasTitle
+    ? { 'aria-labelledby': titleId }
+    : { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy };
+  const money = new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 });
+  const cols = columns ?? (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
+  const gridClass = cn(
+    'mx-auto grid max-w-6xl gap-6',
+    (hasHeader || showCycleToggle) && 'mt-10',
+    cols > 1 && 'md:grid-cols-2',
+    GRID[cols],
+  );
+  const bodyProps = { cycle, money, TierHeading, currentTierId, currentPlanLabel };
+
+  const select = (id: string) => {
+    if (id === selected) return;
+    if (value === undefined) setInnerValue(id);
+    onValueChange?.(id);
+  };
+
+  const changeCycle = (value: string[]) => {
+    const next = value[0];
+    if (next !== 'monthly' && next !== 'annual') return;
+    setCycle(next);
+    onCycleChange?.(next);
+  };
+
+  return (
+    <Wrapper {...(hasTitle ? labelling : {})} className={cn('px-4 py-16 sm:px-6 sm:py-20', className)}>
+      {hasHeader && (
+        <div className="mx-auto max-w-2xl text-center">
+          {eyebrow && (
+            <p className="font-mono text-[12px] font-semibold tracking-wide text-primary-text uppercase">{eyebrow}</p>
+          )}
+          {hasTitle && (
+            <Heading
+              id={titleId}
+              className="mt-2 text-[28px] leading-tight font-semibold tracking-tight text-balance text-foreground sm:text-[34px]"
+            >
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <p className="mt-4 text-[15.5px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+      {showCycleToggle && (
+        <div className={cn('flex justify-center', hasHeader && 'mt-8')}>
+          <ToggleGroup aria-label="Billing period" value={[cycle]} onValueChange={changeCycle}>
+            <Toggle value="monthly">Monthly</Toggle>
+            <Toggle value="annual">
+              Annual
+              {annualNote && <span className="font-mono text-[10.5px] text-primary-text">{annualNote}</span>}
+            </Toggle>
+          </ToggleGroup>
+        </div>
+      )}
+      {selectable ? (
+        <RadioGroup
+          {...labelling}
+          value={selected ?? ''}
+          onValueChange={(v) => select(String(v))}
+          className={gridClass}
+        >
+          {tiers.map((tier) => {
+            const tierId = `${titleId}-${tier.id}`;
+            const isSelected = selected === tier.id;
+            const onCardClick = (event: MouseEvent<HTMLDivElement>) => {
+              if (!(event.target instanceof Element) || !event.target.closest('[role="radio"]')) select(tier.id);
+            };
+            return (
+              // The radio inside is the keyboard target; the card click is a pointer convenience.
+              <div
+                key={tier.id}
+                data-selected={isSelected || undefined}
+                aria-current={tier.id === currentTierId ? 'true' : undefined}
+                onClick={onCardClick}
+                className={cn(
+                  CARD,
+                  'cursor-pointer has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-focus-ring',
+                  isSelected ? 'border-2 border-primary' : 'border border-border hover:border-muted-foreground/40',
+                )}
+              >
+                <TierBody
+                  tier={tier}
+                  {...bodyProps}
+                  tierId={tierId}
+                  selected={isSelected}
+                  control={<Radio value={tier.id} aria-labelledby={tierId} aria-describedby={`${tierId}-price`} />}
+                />
+              </div>
+            );
+          })}
+        </RadioGroup>
+      ) : (
+        <ul {...(hasTitle ? {} : labelling)} className={gridClass}>
+          {tiers.map((tier) => {
+            const tierId = `${titleId}-${tier.id}`;
+            const isCurrent = tier.id === currentTierId;
+            return (
+              <li
+                key={tier.id}
+                aria-labelledby={tierId}
+                aria-current={isCurrent ? 'true' : undefined}
+                className={cn(CARD, tier.highlighted ? 'border-2 border-primary' : 'border border-border')}
+              >
+                <TierBody
+                  tier={tier}
+                  {...bodyProps}
+                  tierId={tierId}
+                  action={
+                    <Button
+                      variant={tier.highlighted && !isCurrent ? 'primary' : 'secondary'}
+                      className="mt-6 w-full"
+                      aria-describedby={tierId}
+                      disabled={isCurrent}
+                      onClick={() => onSelectTier?.(tier, cycle)}
+                    >
+                      {isCurrent ? currentPlanLabel : tier.cta}
+                    </Button>
+                  }
+                />
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </Wrapper>
+  );
+}
+
+interface TierBodyProps {
+  tier: PricingTier;
+  tierId: string;
+  cycle: PricingCycle;
+  money: Intl.NumberFormat;
+  TierHeading: 'h2' | 'h3' | 'h4';
+  currentTierId?: string;
+  currentPlanLabel: string;
+  /** Radio control (selectable mode). */
+  control?: ReactNode;
+  selected?: boolean;
+  /** CTA (default mode). */
+  action?: ReactNode;
+}
+
+function TierBody({
+  tier,
+  tierId,
+  cycle,
+  money,
+  TierHeading,
+  currentTierId,
+  currentPlanLabel,
+  control,
+  selected,
+  action,
+}: TierBodyProps) {
+  const price = cycle === 'annual' ? tier.priceAnnual : tier.priceMonthly;
+  const isCurrent = tier.id === currentTierId;
+  return (
+    <>
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2.5">
+          {control}
+          <TierHeading id={tierId} className="text-[15px] font-semibold tracking-tight text-foreground">
+            {tier.name}
+          </TierHeading>
+        </div>
+        <div className="flex shrink-0 items-center gap-1.5">
+          {isCurrent && (
+            <Badge tone="neutral" shape="pill">
+              {currentPlanLabel}
+            </Badge>
+          )}
+          {tier.badge && (
+            <Badge tone="primary" shape="pill">
+              {tier.badge}
+            </Badge>
+          )}
+          {selected && (
+            <span
+              data-testid="tier-check"
+              className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground"
+            >
+              <Check size={13} strokeWidth={2.6} aria-hidden />
+            </span>
+          )}
+        </div>
+      </div>
+      {tier.description && <p className="mt-1.5 text-[13px] text-muted-foreground">{tier.description}</p>}
+      <div id={`${tierId}-price`}>
+        <p className="mt-5 flex items-baseline gap-1.5">
+          <span className="text-[34px] font-semibold tracking-tight text-foreground tabular-nums">
+            {price == null ? 'Custom' : money.format(price)}
+          </span>
+          {price != null && <span className="text-[13px] text-muted-foreground">/ month</span>}
+        </p>
+        <p className="mt-1 h-4 text-[12px] text-muted-foreground">
+          {price == null
+            ? 'Tailored to your volume'
+            : price === 0
+              ? 'Free forever'
+              : cycle === 'annual'
+                ? `${money.format(price * 12)} billed yearly`
+                : 'Billed monthly'}
+        </p>
+      </div>
+      {action}
+      <ul aria-label={`${tier.name} features`} className="mt-6 space-y-2.5 border-t border-border pt-6">
+        {tier.features.map((f) => (
+          <li key={f} className="flex items-start gap-2.5 text-[13px] text-foreground">
+            <Check size={15} aria-hidden className="mt-0.5 shrink-0 text-primary-text" />
+            {f}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/src/marketing/PricingTable/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Pricing table',
+  family: 'marketing',
+  status: 'beta',
+  description:
+    'Pricing tiers with a monthly/annual toggle, a highlighted tier (primary border, no fill), price per cycle, CTA and feature checklist.',
+  uses: ['ToggleGroup', 'Toggle', 'Badge', 'Button', 'RadioGroup', 'Radio'],
+};

package/src/marketing/PricingTable/fixtures.ts

@@ -0,0 +1,34 @@
+import type { PricingTier } from './PricingTable';
+
+/** Sample three-tier pricing. Prices are per month; annual is per month billed yearly. */
+export const samplePricingTiers: PricingTier[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: 'For individuals and small side projects.',
+    priceMonthly: 0,
+    priceAnnual: 0,
+    cta: 'Start for free',
+    features: ['1 project', '3 members', '50,000 requests / month', 'Community support'],
+  },
+  {
+    id: 'team',
+    name: 'Team',
+    description: 'For growing teams shipping every day.',
+    priceMonthly: 49,
+    priceAnnual: 39,
+    cta: 'Start free trial',
+    highlighted: true,
+    badge: 'Most popular',
+    features: ['Unlimited projects', '25 members', '500,000 requests / month', 'Preview deployments', 'Email support'],
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: 'For organizations with advanced security needs.',
+    priceMonthly: null,
+    priceAnnual: null,
+    cta: 'Contact sales',
+    features: ['Everything in Team', 'SSO and audit log', 'Custom quotas', 'Data residency', 'Dedicated support'],
+  },
+];

package/src/marketing/actions.tsx

@@ -0,0 +1,40 @@
+import type { ComponentType } from 'react';
+import { Button, buttonVariants, cn } from '@gntik-ai/ui';
+
+type IconComponent = ComponentType<{ size?: number; 'aria-hidden'?: boolean }>;
+
+/** A call to action: a link when `href` is set, otherwise a button. */
+export interface MarketingAction {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+  /** Trailing icon (lucide component). */
+  icon?: IconComponent;
+}
+
+export function ActionButton({
+  action,
+  variant,
+  size = 'lg',
+  className,
+}: {
+  action: MarketingAction;
+  variant: 'primary' | 'secondary' | 'ghost';
+  size?: 'md' | 'lg';
+  className?: string;
+}) {
+  const Trailing = action.icon;
+  if (action.href) {
+    return (
+      <a href={action.href} onClick={action.onClick} className={cn(buttonVariants({ variant, size }), className)}>
+        {action.label}
+        {Trailing && <Trailing size={size === 'lg' ? 17 : 15} aria-hidden />}
+      </a>
+    );
+  }
+  return (
+    <Button variant={variant} size={size} trailingIcon={Trailing} onClick={action.onClick} className={className}>
+      {action.label}
+    </Button>
+  );
+}

package/src/marketing/index.ts

@@ -0,0 +1,15 @@
+export * from './Hero/Hero';
+export { meta as heroMeta } from './Hero/block.meta';
+export * from './FeatureGrid/FeatureGrid';
+export { meta as featureGridMeta } from './FeatureGrid/block.meta';
+export { sampleFeatures } from './FeatureGrid/fixtures';
+export * from './PricingTable/PricingTable';
+export { meta as pricingTableMeta } from './PricingTable/block.meta';
+export { samplePricingTiers } from './PricingTable/fixtures';
+export * from './Faq/Faq';
+export { meta as faqMeta } from './Faq/block.meta';
+export { sampleFaqs } from './Faq/fixtures';
+export type { MarketingAction } from './actions';
+export * from './ComparisonTable/ComparisonTable';
+export { meta as comparisonTableMeta } from './ComparisonTable/block.meta';
+export { sampleComparisonPlans, sampleComparisonSections } from './ComparisonTable/fixtures';