# Listing Hero (Moonarc)

The first screen of an estate agency: the headline, a line, two actions and a few figures on one side, and on the other the homes on the market now, one large and two small, each its building drawn by HomeArt with the price and the street on a card over it, every one a link to its page. The large one is drawn at dusk with its windows lit. A home can carry a view-transition-name so its card grows into its page. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-listing` (license key required)
- Tier B · category section · trigger load
- Readout: `<HeroListing homes={[{ href, price, title, art }]} facts={[{ value, label }]} />`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 17.7 kB raw)
- Page: https://moonarc.dev/components/hero-listing/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `homes` | `{ href; price; title; meta?; art; transition? }[]` | none | One to three homes: the first large, the others small. art is HomeArt's kind, seed, time and block; transition is a view-transition-name for the picture. |
| `headline` | `string` | none | The headline, split by word. Slot "headline" wins and may hold an <em>. |
| `eyebrow` | `string` | none | A short line above the headline. |
| `copy` | `string` | none | A paragraph under the headline. |
| `primary` | `{ href: string; label: string }` | none | The main action. |
| `secondary` | `{ href: string; label: string }` | none | The second action. |
| `facts` | `{ value: string; label: string }[]` | none | A few figures under the actions. |
| `label` | `string` | `'Homes on the market'` | What the homes are, read before them. |
| `level` | `1 | 2` | `1` | Heading level of the headline. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The hero's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import HeroListing from '@/components/moonarc/pro/HeroListing.astro';
---
<HeroListing
  eyebrow="Estate agents in the city since 2009"
  copy="Homes to buy across six neighbourhoods, each one visited and measured by us."
  primary={{ href: '/homes/', label: 'See every home' }}
  secondary={{ href: '/contact/', label: 'Value my home' }}
  facts={[{ value: '86', label: 'homes for sale' }, { value: '23 days', label: 'to sell, on average' }]}
  homes={[
    { href: '/homes/12-linden-row/', price: '$845,000', title: '12 Linden Row', meta: '4 beds · 2 baths', art: { kind: 'house', seed: '12 Linden Row', block: 2 } },
    { href: '/homes/4-quay-street/', price: '$520,000', title: '4 Quay Street', art: { kind: 'apartment', seed: '4 Quay Street', block: 3 } },
  ]}
>
  <span slot="headline">A home you can <em>picture</em></span>
</HeroListing>
```

## Reduced motion

The headline and the homes are there at once.

## With ClientRouter

CSS and Reveal.

## Craft

- Each home is a link with its price and street on a card of the page's own ground over the drawing, so the words read on any block the drawing sits on.
- The large home is drawn at dusk with its lit windows; the small ones by day, so the first home reads first.
- A home's view-transition-name matches the one its own page gives its gallery, so with cross-document view transitions on, the card grows into the page.

## Replaces

- Real estate template heroes with a search bar over a photograph

## Source

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