# Landing pages

`Landing` bounds its content to the shared landing width and separates sections.
Product pages own their headings, links, and composition. This centered example
uses `palette="neutral"` for its action and `size="compact"` for its heading.

Centered compact hero

[Explore surface controls](https://ambiqai.github.io/helia-ui/landing/#surface-controls)

Default hero

Band content keeps the same inline edges as the bounded hero above it.

Muted sections share the same content edges.
Contrast sections share the same content edges.
Tinted sections share the same content edges.

`eyebrowStyle="brand"` uses the shared responsive product-name scale and a 32px icon. Labels keep the compact default. Custom hero compositions can use the `helia-hero__brand` class on their identity row; `--helia-hero-brand-ink` sets its foreground when outside a shared contrast surface.

The `eyebrowIcon` URL replaces the decorative accent dot with a product mark. The eyebrow text supplies its accessible name.

## Surface controls

Switch the outer page between light and dark. The ink card retains readable
text, links, actions, and keyboard focus in either theme.

A complete dark surface

Body text and [a prose link](https://ambiqai.github.io/helia-ui/landing/#surface-controls) use this surface's
foreground.

A nested ink card has a visible boundary.

[Primary action](https://ambiqai.github.io/helia-ui/landing/#surface-controls)
[Secondary action](https://ambiqai.github.io/helia-ui/landing/#surface-controls)
[Ghost action](https://ambiqai.github.io/helia-ui/landing/#surface-controls)

## Window transcript

The optional `frame="window"` keeps transcript and commands-only copy behavior.
The dots are decorative; the title belongs to the product using the terminal.

```text
$ tool build model
Inspect the generated files before integrating them.
```

```text
$ tool inspect results
```

## Contrast band controls

Keep control surfaces readable

A dark band supplies its own text, card and button colors in either page
theme. Compare surface choices.

A nested card remains readable.
Read the surface examples

A nested ink card has a visible boundary.

[Primary action](https://ambiqai.github.io/helia-ui/landing/#surface-controls)
[Secondary action](https://ambiqai.github.io/helia-ui/landing/#surface-controls)

## Neutral product hero

Build with clear choices
[Get started](https://ambiqai.github.io/helia-ui/landing/#surface-controls)
[Explore examples](https://ambiqai.github.io/helia-ui/landing/#surface-controls)

## Section-sized quickstart with fixed terminal tone

`size="section"` keeps supporting content on the section heading scale. The
`media` slot lets a window terminal retain its own frame.

Keep the command readable

Read the setup guide before running the
command.

```text
$ tool build model
```