# Page Layout

Canonical: https://socra.design/landing/page-layout

One marketing page with shared navigation, content, closing action, and footer.

Compose a complete marketing page while keeping its identity, destinations, and content owned by the consumer.

Status: ready. MarketingShell owns the page regions. The specimen renders the public shell, optional MarketingAnnouncement, one main BandStack, a closing action, and the shared footer. Site Header remains the separate navigation-only home; application headers remain in Composed Components → Headers.

Library: @socra/ui-web-landing

## Anatomy

- The shared header leads, followed by an optional consequential announcement that scrolls with the page.
- One main landmark contains the content stack and optional closing action; the footer follows it.
- A surrounding host may supply its own SiteHeader and set header={null} on MarketingShell to avoid duplicate navigation.

## States

- **Rest:** Render the consumer’s content in one continuous page. The optional announcement and closing action do not create additional main landmarks.
- **Focus:** Nested navigation and actions retain their shared visible keyboard focus, reading order, and dismissal behavior. The page frame itself is not a control.

## Motion

The page layout adds no motion. The header and nested controls retain their own reduced-motion contracts.

## Usage

- Use the owning platform implementation first. Each renderer improves once and every product on that platform inherits the fix.
- Name the user job before the component. A component earns a place only when it helps the user decide, act, recover, or understand.
- Promote missing behavior into the owning platform domain. Product-local UI creates drift; platform contracts preserve shared meaning and native quality.
- Raise luminance to bring a surface forward. Depth reads as light. A surface that comes toward the reader catches more of it, so a raised panel, a selected tab, a menu, a popover resolves LIGHTER than what it sits on — in dark mode away from the canvas, in light mode toward the white it cannot exceed. The ladder runs page, resting card, elevated, and never doubles back.

## Avoid

- Do not build a product-local replacement. A local implementation splits behavior, access requirements, and future migrations.
- Do not copy theme values. Semantic values are shared system roles and are consumed by meaning.
- Do not add decoration as a substitute for structure. If the hierarchy is weak, fix the hierarchy.
- Do not darken a surface to lift it. Darkening in a dark theme pushes a surface INTO the page — it reads as a hole cut in the canvas rather than a panel resting on it. Sinking a surface to make it stand out is the most common way a dark interface loses its depth.

## Tokens

- `designTokens.color[mode].color.brand.primary`: Primary action role.
- `designTokens.color[mode].color.surface.secondary`: Working surface role.
- `designTokens.color[mode].color.content.primary`: Primary content role.
- `designTokens.spacing.role.contentGap`: Spacing relationship.
- `designTokens.shape.role.control`: Shape relationship.

## Example

```tsx
import { Band, BandIntro, BandStack, MarketingAnnouncement, MarketingShell } from '@socra/ui-web-landing';

<MarketingShell
  brandLabel="Product"
  brandHref="#overview"
  secondaryAction={{ href: 'https://product.example/login' }}
  items={[{ id: 'overview', label: 'Overview', href: '#overview' }]}
  announcement={
    <MarketingAnnouncement href="https://product.example" action="Go to Product">
      Product has moved to product.example.
    </MarketingAnnouncement>
  }
  closingCta={{ title: 'Take the next step', description: 'Explore how Product fits the work you want to do.', headingTreatment: 'solid', action: { label: 'Explore the overview', href: '#overview' } }}
  footerGroups={[{ id: 'product', heading: 'Product', links: [{ label: 'Overview', href: '#overview' }] }]}
>
  <BandStack>
    <Band id="overview" ariaLabelledby="product-overview">
      <BandIntro id="product-overview" level="h1" title="A clear place to begin" description="Bring your plans and the next useful step into one view." headingTreatment="solid" />
    </Band>
  </BandStack>
</MarketingShell>
```