# Hero Practice (Moonarc)

The first screen of a practice (a dentist, a doctor, a vet, a law or an accounting firm): the headline, a line of what it does, the two things a visitor comes to do (book and call) and a line for the register it is on; beside them the place as one card on a colour block, its front drawn by HomeArt, a line from OpenStatus that says whether it is open now in the place's own time zone, the address, the phone and a few rows a patient or a client asks first. Calm on purpose: the words arrive once and nothing loops.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-practice` (license key required)
- Tier B · category section · trigger load
- Readout: `<HeroPractice headline primary secondary place={{ hours, timezone, address, phone }} />`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 0 B JS of its own · uses OpenStatus + runtime + Reveal (with dependencies 3.9 kB raw; CSS 16.4 kB raw)
- Page: https://moonarc.dev/components/hero-practice/

## 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. |
| `primary` | `{ href; label }` | none | The first action: book. |
| `secondary` | `{ href; label }` | none | The second: a tel: link, say. |
| `note` | `string` | none | A small line under the actions: the register and the number. |
| `place` | `{ name?; art?; address?; phone?; directions?; hours; timezone; openText?; closedText?; todayWord?; tomorrowWord?; fallback?; rows?; block? }` | none | The card: its heading, its front drawn (HomeArt kind, seed and time), the address lines, the links, the week OpenStatus reads with its words, a few { label, value } rows and its colour block. |
| `level` | `1 | 2` | `1` | Heading level of the headline; the card's heading is one below. |
| `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 HeroPractice from '@/components/moonarc/pro/HeroPractice.astro';
---
<HeroPractice
  eyebrow="A dental practice in the old town"
  headline="Unhurried dentistry, explained before we start"
  copy="Check-ups, hygiene and treatment for adults and children, with the price agreed before any work."
  primary={{ href: '/book/', label: 'Request an appointment' }}
  secondary={{ href: 'tel:+15550100', label: 'Call 555 0100' }}
  note="Registered with the dental council, practice no. 12345"
  place={{
    name: 'Harbour Street Dental',
    art: { kind: 'shop', seed: 'harbour street' },
    address: ['14 Harbour Street', 'Old Town'],
    phone: { label: '555 0100', href: 'tel:+15550100' },
    timezone: 'Europe/London',
    hours: [{ day: 'mon', label: 'Monday', open: '08:00', close: '18:00' }],
    rows: [{ label: 'New patients', value: 'Welcome' }],
  }}
/>
```

## Reduced motion

The words and the card arrive at once; the open dot does not pulse.

## With ClientRouter

CSS and Reveal.

## Craft

- The open line is OpenStatus, read in the place's time zone, so a reader abroad sees the hours of the place and not of their own clock.
- The card is a colour block: its text takes the block's pair, the same on every tone of the section.
- The front is drawn, so a practice without a photograph of its door still has a first screen; the README of a template says how to put a photograph there.

## Replaces

- Practice landing heroes with a booking button

## Source

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