# Static Page Recipe

Use for marketing, launch, onboarding, auth, and error pages.

## Structure

```html
<main class="page-shell">
  <section class="hero">
    <hf-badge>Product launch</hf-badge>
    <h1>Meridian AI - Embed intelligence everywhere</h1>
    <p>Explain the product, audience, and outcome clearly in the first viewport.</p>
    <div class="actions">
      <hf-button>Start free</hf-button>
      <hf-button appearance="outline">View pricing</hf-button>
    </div>
  </section>

  <section class="feature-grid" aria-label="Feature highlights">
    <hf-card>
      <div data-hf-slot="card-content" class="hf-card-content">
        <h2>Plan</h2>
        <p>Clarify the workflow, audience, and success criteria.</p>
      </div>
    </hf-card>
  </section>
</main>
```

## Required CSS Pattern

```css
.page-shell {
  display: grid;
  gap: var(--spacing-12);
  padding: var(--spacing-10) var(--spacing-6);
}

.hero {
  display: grid;
  gap: var(--spacing-5);
  min-height: 420px;
  align-content: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4);
}

.hf-card-content {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
}
```

## Rules

- Static pages should not use `hf-app-shell` unless the user asks for an authenticated product app.
- First viewport must contain product identity, audience, outcome, and primary action.
- Do not leave large empty areas with generic placeholder copy.
- Use `hf-card` only with the approved content wrapper.
- Use `hf-button`, `hf-badge`, and semantic tokens for action and hierarchy.