MarketingLayout is the arrangement a marketing page is built in: the navigation at the top, a
`main` region holding the sections, and the footer at the bottom. It paints the page background and
takes the height of the window; it states no width and no rhythm of its own, because those belong
to the `Section`, `Container` and `Grid` inside it.

Which sections exist, in what order and whether they appear at all stays the page's decision,
because they are children. What the shell guarantees is the structure around them: the landmarks,
the skip link past the navigation, and one background behind the whole page.

```tsx demo="layouts/marketing-layout-preview"
```

## Usage

```tsx
import { CTA, Footer, Hero, MarketingLayout, Navbar } from "@asheeui/web";

<MarketingLayout
  navigation={<Navbar brand="Ashee" links={links} />}
  footer={<Footer brand="Ashee" groups={groups} copyright="Ashee Softworks" />}
>
  <Hero
    title="A complete UI system"
    primaryAction={{ label: "Start free", href: "/signup" }}
  />
  <CTA
    title="Start building"
    primaryAction={{ label: "Read the docs", href: "/docs" }}
  />
</MarketingLayout>;
```

Two slots and a list of sections. The bands are not props: `Hero`, `FeatureGrid`, `CTA` and any
other section are children, in the order the page reads them, and each one states its own alignment,
background and spacing.

## The navigation and footer slots

`navigation` and `footer` are **slots, not components**. There are no `Navbar` or `Footer` props
here, no `links`, no `brand`, no `groups`, and nothing to look for: the shell places the node you
give it above and below the main region and paints nothing behind it. That is what lets a page run
its own header without giving up the composition.

```tsx demo="layouts/marketing-layout-slots"
```

The landmark comes from the element you pass. The framework's `Navbar` renders a `header`, the
`banner` landmark at the top of a page, and `Footer` renders a `footer`, which is `contentinfo`.
Plain `<header>` and `<footer>` elements behave the same, and a `div` gives the page neither, so
the slot is also where that decision is made.

## The background it paints

`background` is the one thing the composition paints behind the sections: `default` is the theme
background, for a page whose bands carry their own surfaces, and `muted` is a recessed ground, for a
page built out of cards that need to sit on something.

```tsx demo="layouts/marketing-layout-background"
```

It is a background, not a band. A `Section` inside the page still paints its own
`background`, so a muted page and a tinted band can sit together without the composition knowing
anything about either.

## Props

```props MarketingLayout
```

Three options are registered by the component, so each resolves from the instance, then from
`components.marketinglayout`, then from the registration: `skipLink` `true`, `skipLinkLabel`
`Skip to content` and `background` `default`. The two slots, `children`, `as` and `mainId` are
instance-only; `mainId` defaults to `main-content` and exists so that a page holding more than one
composition can name each main region separately.

## Accessibility

- The sections are a `main` landmark with the identifier in `mainId` and `tabIndex={-1}`, which is
  what makes the skip link land *in* the content rather than beside it.
- The skip link is rendered as the first focusable element and is visually hidden until it is
  focused, so a pointer reader never sees it and a keyboard reader reaches it with the first
  <kbd>Tab</kbd>. `skipLink={false}` removes it, and the navigation becomes the first thing reached.
- The composition renders no `header` or `footer` landmark itself: both come from the slots, so
  `Navbar` and `Footer` are what make the page a `banner` and a `contentinfo`.
- It renders no heading either. Each section supplies its own, so the page's outline is the sections'
  outline, keep a single `<h1>` among them.

The spacing and the widths the sections use are the
[Layout and spacing](/concepts/layout-and-spacing) vocabulary; which shell a product should start
from is the argument in [Page compositions](/guides/page-compositions).

## Native

`@asheeui/native` ships the same contract as the platform's screen arrangement: the composition is
a scrolling region that fills the screen it is given, the regions keep their order, `mainId` becomes
the identifier the platform's own reader can be pointed at, and the skip link renders nothing,
because a platform screen has no focus order to skip through. See
[React Native](/platforms/native).

## Related

```related navbar, footer, card
```