CtaBand

Full-width call-to-action band with headline, description, and up to two buttons.

The CtaBand component from @publier/shell renders a prominent call-to-action strip — typically placed near the bottom of a landing or marketing page to drive the reader toward sign-up, docs, or a demo.

Usage

import { CtaBand } from '@publier/shell/components';

<CtaBand
  title="Ship docs your team actually uses"
  description="Publier scaffolds, themes, and signs your docs site in minutes."
  primaryCta={{ label: 'Get started', href: '/docs/getting-started' }}
  secondaryCta={{ label: 'Learn more', href: 'https://example.com' }}
  variant="primary"
/>

Use variant="muted" for a quieter band that doesn’t compete with a surrounding hero.

Props

Prop	Type	Default	Description
`title`	`string`	required	Headline of the band.
`primaryCta`	`{ label: string; href: string }`	required	Primary button.
`description`	`string`	`undefined`	Supporting copy below the title.
`secondaryCta`	`{ label: string; href: string }`	`undefined`	Optional secondary button.
`variant`	`'primary' \| 'muted'`	`'primary'`	`primary` uses the brand color; `muted` uses a neutral surface.

Behaviour

Renders as a full-width <section>.
Both CTAs are plain <a> anchors — no JavaScript needed.
Secondary CTA is only rendered when supplied.