# PageLayout

> Componentes / Navegação e estrutura · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

O molde de toda página do site: link "Pular para o conteúdo", Navbar, o `<main>` que recebe o conteúdo e o Footer — e, em volta de tudo, a configuração que faz as animações respeitarem o movimento reduzido.

- Função: Navegação e estrutura
- Também chamado de: molde de página, template, layout, casca
- Mora em: `app/components/templates/PageLayout.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/PageLayout](https://phorte-design-system.vercel.app/styleguide/peca/PageLayout)
- Ficha no Storybook: [components-complex-pagelayout](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-pagelayout--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/PageLayout/0](https://phorte-design-system.vercel.app/previa/PageLayout/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { PageLayout } from '@/app/components/templates/PageLayout';

<PageLayout>…</PageLayout>
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/PageLayout/0)
2. [Sem menu](https://phorte-design-system.vercel.app/previa/PageLayout/1)

Em volta de toda página do site: é ele que garante o link de pular, os marcos e o movimento reduzido.

### Quando não usar

Numa página de campanha que não leva o menu nem o rodapé do site; nesse caso, marque o `<main id={ID_DO_CONTEUDO}>` à mão. Dentro de outra página, nunca: são dois `<main>`.

### Faça

- Passe só o conteúdo da página como filho; menu e rodapé já estão.
- Numa landing de campanha ou numa inscrição sem menu, `cabecalho={null}` (e, se for o caso, `rodape={null}`): o link de pular e o `<main>` continuam (E70). Ou passe outro cabeçalho no lugar.
- Deixe o primeiro título da página (`h1`) no começo do conteúdo, logo depois do salto.
- Importe `ID_DO_CONTEUDO` se precisar apontar para o início do conteúdo.

### Evite

- Encaixar dentro de um contêiner com `transform` sem saber: a Navbar é `fixed` e passa a se prender a ele.
- Tirar o link de pular: com a Navbar, são mais de quinze paradas antes do conteúdo.

### Nota de uso

Traz o link de pular para o conteúdo e o `<main tabIndex={-1}>` que o recebe, além do `MotionConfig reducedMotion="user"` que faz o sistema inteiro respeitar a preferência. Monta uma Navbar `fixed`: ao encaixá-lo dentro de outro contêiner, lembre que `fixed` só se prende a um ancestral com `transform`.

### Anatomia

1. **Pular para o conteúdo** — Primeiro elemento focável; invisível até receber foco.
2. **Cabeçalho** — `cabecalho`: a Navbar, por padrão — ou o que for passado, ou nada.
3. **Conteúdo** — `<main id="conteudo" tabIndex={-1}>`, que ocupa o espaço que sobra.
4. **Rodapé** — `rodape`: o Footer, por padrão.

### Estados

| Estado | O que muda |
| --- | --- |
| Link de pular escondido | `sr-only`: fora da tela, mas na ordem de Tab. |
| Link de pular com foco | Aparece no canto superior esquerdo, com fundo `--card`, sombra e anel de foco. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Enter no link de pular | O foco vai ao `<main>` — medido — e o próximo Tab é o primeiro link do conteúdo. |
| Movimento reduzido no sistema | `MotionConfig reducedMotion="user"` faz as animações da biblioteca `motion` pularem o deslocamento, em toda a árvore. |
| Sem menu (`cabecalho={null}`) | Sem `banner`; o link de pular e o `main` continuam — conferido no teste da ficha. |

### Relacionados

- [PularParaOConteudo](https://phorte-design-system.vercel.app/styleguide/md/PularParaOConteudo.md) — O primeiro foco da página, que ele já inclui (E114).
- [Navbar](https://phorte-design-system.vercel.app/styleguide/md/Navbar.md) — O cabeçalho que ele inclui.
- [Footer](https://phorte-design-system.vercel.app/styleguide/md/Footer.md) — O rodapé que ele inclui.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `children` | `React.ReactNode` | — | sim |  |
| `cabecalho` | `React.ReactNode` | `<Navbar />` | não | O topo da página (E70). Padrão: a Navbar. Passe `null` numa landing de campanha ou numa inscrição sem menu — o link de pular e o `<main>` continuam, e a página não precisa recriar a estrutura. |
| `rodape` | `React.ReactNode` | `<Footer />` | não | O pé da página (E70). Padrão: o Footer; `null` para tirar. |

Aceita também: `React.HTMLAttributes<HTMLDivElement>`.

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--muted` | #F4F6F9 | `bg-muted` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | A primeira parada é "Pular para o conteúdo" — medido; depois vêm a Navbar, o conteúdo e o Footer. |
| Enter | No link de pular, leva o foco ao início do conteúdo — medido. |

### Leitor de tela

- A página ganha os três marcos: `banner` (Navbar), `main` e `contentinfo` (Footer) — os de fora somem quando o cabeçalho ou o rodapé são `null`.
- Aceita `ref` e os atributos de `<div>` na raiz (E70).
- O `<main>` tem `tabIndex={-1}` para receber o foco do salto sem entrar na ordem de Tab.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/templates/PageLayout.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-pagelayout--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `b226180` 2026-09-29 — E115: LinkDeNavegacao — o link da barra sai de dentro da Navbar
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/templates/PageLayout.tsx