# `intro_hero`

## Use when / do not use when

Use for the opening promise or a low-friction entry screen. Do not use for a questionnaire, reveal, offer, or checkout.

## Exact metadata contract

<!-- funnelsgrove:generated:start contract-v3/step/intro_hero -->
### Generated contract facts — do not edit

- Step contract version: `3`
- Contract hash: `d761e91d5ac6ff9e72c6d49c5bcd014270912473a66f99c49d726c65998085cf`
- Type: `intro_hero`
- Family: `content`
- Description: Opening promise or low-friction entry screen.
- Action owner: `shared-shell`
- Analytics role: _none_
- Terminal: `false`
- Required kind: _none_
- Allowed kinds: _None_
- Allowed semantic events: _None_
- Forbidden capabilities: `choice-write`, `email-capture`, `checkout`, `subscription-management`, `subscription-handoff`, `hardcoded-navigation`, `provider-direct-analytics`, `browser-registration-completed`

#### Choice contract

_Not a choice type._

#### Automatic lifecycle events

`first_step_clicked`, `first_step_viewed`, `funnel_started`, `step_completed`, `step_exited`, `step_started`

#### Approved capability owners

_No special capability is allowed._

#### Reserved identities

_No reserved identity for this type._

#### Golden fixture source

```ts
import type { FunnelManifestStep, FunnelStepMeta } from '@funnelsgrove/runtime';

const manifestStep = {
  id: 'welcome',
  name: 'welcome',
  path: '/welcome',
  filePath: 'src/steps/step-welcome.tsx',
  componentKey: 'stepWelcome',
  type: 'intro_hero',
  title: 'Welcome',
} as const satisfies FunnelManifestStep;

const componentMeta = {
  id: 'welcome',
  name: 'welcome',
  type: 'intro_hero',
  figmaNodeId: 'golden:intro-hero',
  title: 'Welcome',
  description: 'Opening promise and low-friction entry.',
} as const satisfies FunnelStepMeta;

export const goldenFixture = {
  stepType: 'intro_hero',
  manifestStep,
  componentMeta,
  actionOwner: 'shared-shell',
} as const;
```
<!-- funnelsgrove:generated:end contract-v3/step/intro_hero -->

## Interaction and persisted answer shape

This content screen does not persist an answer. Put its primary progression action in the shared shell.

## Automatic lifecycle events

The flow controller owns the applicable automatic view, start, completion, and exit events. `step_engaged` is registered as non-automatic and is not emitted by default. Only an explicit, centralized, tested engagement policy may emit it through the approved controller/helper boundary; step components never emit it manually. Preview suppresses lifecycle delivery.

## Required semantic conversions

None. A hero CTA is navigation, not a conversion event.

## Approved shared helpers

Use `useFunnel()` only when the view needs controller state; use the shared action bar for normal Continue behavior.

## MUST rules

- Keep the component and manifest metadata identical.
- Keep the opening action low-friction and let the manifest choose the next step.

## NEVER rules

- Never write answers or call an analytics provider.
- Never hard-code the next route.

## Golden template or fixture

See the [embedded canonical fixture](#golden-fixture-source) generated from `intro_hero.fixture.ts`.

## Validation command

Run `fgrove validate`.

## Manual QA and completion criteria

Confirm the screen starts the funnel once, the CTA advances through manifest routing, and back/exit behavior records the correct lifecycle outcome.