# Hero Stay (Moonarc)

The first screen of a place to stay: the headline and a line of what the place is, a few facts, and the place by day and by night in one frame: light falling over the day picture (LightRays), the windows lit in the night one, and a pair of radios under them that picks which shows, with no script. The pictures are drawn by HomeArt unless the slots day and night hold photographs; the one not shown is hidden from a screen reader. The slot booking holds the dates and the guests (BookingBar), under the picture and its radios.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-stay` (license key required)
- Tier B · category section · trigger load, click
- Readout: `<HeroStay headline art={{ kind: 'villa', seed }}><BookingBar slot="booking" … /></HeroStay>`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 0 B JS (CSS 17.2 kB raw)
- Page: https://moonarc.dev/components/hero-stay/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `facts` | `{ value; label }[]` | none | A few figures under the line. |
| `primary` | `{ href; label }` | none | The first action. |
| `secondary` | `{ href; label }` | none | The second. |
| `art` | `{ kind?; seed?; block?; colour?; accent? }` | `{ kind: 'villa' }` | The place drawn by HomeArt when the slots hold no photograph. |
| `dayLabel` | `string` | none | What the day picture shows, for a screen reader. |
| `nightLabel` | `string` | none | What the night picture shows. |
| `words` | `{ day?; night?; pick? }` | `By day, By night, The place` | The radios' words and their group's name. |
| `level` | `1 | 2` | `1` | Heading level of the headline. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import HeroStay from '@/components/moonarc/pro/HeroStay.astro';
---
<HeroStay
  eyebrow="A villa above the bay"
  copy="Four bedrooms, a pool and the sea ten minutes down the path."
  facts={[{ value: '4', label: 'bedrooms' }, { value: '10 min', label: 'to the sea' }]}
  art={{ kind: 'villa', seed: 'casa alta', block: 2 }}
  dayLabel="The villa at noon, its pool in the sun"
  nightLabel="The villa at night, its windows lit"
>
  <span slot="headline">A house for the <em>long</em> evenings</span>
  <BookingBar slot="booking" engine="https://book.example.com/casa-alta" />
</HeroStay>
```

## Reduced motion

The rays stand still and the pictures change at once.

## With ClientRouter

CSS and Reveal.

## Craft

- The day and the night are two pictures in one grid cell, the night one shown by :has() on its radio, so the switch is CSS and a keyboard reaches it as a radio group.
- The picture not shown is visibility: hidden after its fade, so a screen reader reads the one in view and the frame holds its size.
- The light is LightRays over the day picture only: the night is lit from its windows.

## Replaces

- Hotel landing heroes with a booking widget

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/hero-stay` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: home-art, light-rays, reveal.