# Footer

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

O rodapé do site, no vermelho escuro: logotipo e redes sociais, as navegações "Institucional" e "Links Rápidos", contato com o botão do WhatsApp, o selo do e-MEC e as políticas. O conteúdo mora em dados (`footerLinks.ts` e `navbarSocialLinks.ts`, E71).

- Função: Navegação e estrutura
- Também chamado de: rodapé, footer
- Mora em: `app/components/organisms/Footer.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Footer](https://phorte-design-system.vercel.app/styleguide/peca/Footer)
- Ficha no Storybook: [components-complex-footer](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-footer--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Footer/0](https://phorte-design-system.vercel.app/previa/Footer/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 Footer from '@/app/components/organisms/Footer';

<Footer>…</Footer>
```

## Uso

### Variantes na ficha

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

Uma vez, no fim de toda página do site — o PageLayout já o inclui.

### Quando não usar

Numa página de campanha isolada, que não leva o site junto: `rodape={null}` no PageLayout, e os blocos de campanha (NewsletterStrip, por exemplo) fecham a página.

### Faça

- Use pelo PageLayout, que já o põe depois do `<main>`.
- Edite os links e o contato em `footerLinks.ts`, e as redes em `navbarSocialLinks.ts` — a mesma fonte da Navbar (E71).

### Evite

- Copiar o verde do WhatsApp para outra peça: é a única exceção de cor de terceiro do sistema, e vale só aqui.
- Dois rodapés na página.
- Escrever o e-mail em dois lugares: o texto e o `mailto` saem do mesmo campo.

### Nota de uso

Carrega a única exceção de cor de terceiro do sistema: o verde do WhatsApp (`#25D366` / `#128C7E`), registrado em `docs/token-contract.md`. Não copie o hexadecimal para outra peça — a exceção vale para esta. O anel de foco do rodapé é o inverso (`anel-de-foco-inverso`), em todo link desde a E71 — o `--ring` media 1,40:1 sobre o vermelho escuro. **O conteúdo mora em dados (E71):** `footerLinks.ts` (grupos, contato, e-mail) e `navbarSocialLinks.ts` (as redes, a mesma fonte da Navbar). Todo link externo diz que abre em outra aba, pelo `AvisoDeNovaAba`.

### Anatomia

1. **Marca** — Logotipo sobre fundo branco, frase da missão e as três redes sociais, cada uma em 44×44 (E71).
2. **Institucional** — Uma `<nav>` com o nome do `h2`, sete links.
3. **Links Rápidos** — Uma `<nav>` com o nome do `h2`, seis links.
4. **Contato** — Endereço, telefone, o e-mail (graduacao@faculdadephorte.edu.br, texto e link iguais), o botão do WhatsApp e o selo do e-MEC.
5. **Base** — Direitos com o ano de hoje e a `<nav>` "Informações legais" (privacidade, cookies, termos).

### Estados

| Estado | O que muda |
| --- | --- |
| Link | Branco a 80%; no hover, branco pleno. |
| Foco | O anel claro (`anel-de-foco-inverso`) em todos os links (E71); o WhatsApp mantém o seu. |
| Link externo | O ícone de nova aba ao lado, e "(abre em nova aba)" para o leitor (E71). |
| Selo do e-MEC | No hover, cresce para 105%, só com movimento liberado. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Links para fora do site | Abrem em outra aba (`rel="noopener noreferrer"`) e dizem isso no nome — conferido no teste da ficha. |
| Largura | Uma coluna no celular, duas a partir de 768px e quatro a partir de 1024px. |
| Ano | O do copyright é o de hoje (era 2022, fixo). |
| Selo do e-MEC | Leva à consulta da Faculdade Phorte no cadastro do MEC (código 21940), o mesmo endereço do QR code do selo — era a página inicial do e-MEC (E134). O endereço mora em `footerLinks.ts` (`FOOTER_CREDENCIAMENTO`) — testado na ficha. |

### Relacionados

- [PageLayout](https://phorte-design-system.vercel.app/styleguide/md/PageLayout.md) — O molde que já inclui o rodapé.
- [Navbar](https://phorte-design-system.vercel.app/styleguide/md/Navbar.md) — A navegação do topo, que divide com ele as redes sociais.
- [Link](https://phorte-design-system.vercel.app/styleguide/md/Link.md) — O `AvisoDeNovaAba`, que o rodapé usa nos externos.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |

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

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--card` | #FFFFFF | `bg-card` |
| `--destructive` | #BA0517 | `border-destructive` |
| `--footer-red` | — | `bg-footer-red` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--ink-inverse-muted` | #C7C7C7 | `text-ink-inverse-muted` |
| `--ring-inverse` | #FAFAFA | `ring-ring-inverse` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pelas três redes, pelos sete links institucionais, pelos seis rápidos, pelo e-mail, pelo WhatsApp, pelo selo do e-MEC e pelos três links de política — 22 paradas, nessa ordem, cada uma com o anel claro. |
| Enter | Segue o link em foco. |

### Leitor de tela

- É o `<footer>` da página (marco `contentinfo`), com três `<nav>` nomeadas: "Institucional", "Links Rápidos" e "Informações legais" — conferido no teste da ficha.
- As redes sociais são nomeadas por `aria-label` com o aviso: "Siga a Faculdade Phorte no Instagram (abre em nova aba)".

### O que sustenta o estado

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

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/Footer.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-footer--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

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/Footer.tsx