Hero

Landing-page hero section with eyebrow, title, subtitle, CTAs, and trailing slot.

The Hero component from @publier/shell renders the top-of-page hero for landing, product, or marketing pages. It supports an eyebrow label, a large title, a subtitle, up to two CTAs, and a trailing slot for visual content (e.g. a product screenshot or illustration).

Usage

import { Frame, Hero } from '@publier/shell/components';

<Hero
  eyebrow="What's new"
  title="Publier v1"
  subtitle="A complete content toolkit for technical companies."
  primaryCta={{ label: 'Get started', href: '/docs/getting-started' }}
  secondaryCta={{ label: 'Read the blog', href: '/blog' }}
  align="center"
>
  <Frame>
    <img src="/hero-screenshot.png" alt="Publier docs site preview" />
  </Frame>
</Hero>

Props

Prop	Type	Default	Description
`title`	`string`	required	Main page title — rendered as `<h1>`.
`eyebrow`	`string`	`undefined`	Small, muted label shown above the title.
`subtitle`	`string`	`undefined`	Supporting copy shown below the title.
`primaryCta`	`{ label: string; href: string }`	`undefined`	Primary button.
`secondaryCta`	`{ label: string; href: string }`	`undefined`	Secondary button.
`align`	`'center' \| 'left'`	`'center'`	Horizontal alignment of the headline block.

Any children passed to <Hero> are rendered in a trailing slot — use this for a screenshot, illustration, or embedded widget.

Behaviour

Renders as a <section>.
The CTA row is only rendered when at least one CTA is supplied.
Both CTAs are plain <a> anchors.