# LogoMarquee

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

Faixa de logotipos que rola sozinha, em laço, com título em cima e um botão de pausa; a segunda cópia da faixa (que faz o laço) fica fora da árvore de acessibilidade.

- Função: Campanha (marketing)
- Também chamado de: faixa de logos, marcas, parceiros, logos rolando
- Mora em: `app/components/organisms/marketing/LogoMarquee.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/LogoMarquee](https://phorte-design-system.vercel.app/styleguide/peca/LogoMarquee)
- Ficha no Storybook: [marketing-logomarquee](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-logomarquee--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/LogoMarquee/0](https://phorte-design-system.vercel.app/previa/LogoMarquee/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 { LogoMarquee } from '@/app/components/organisms/marketing/LogoMarquee';

<LogoMarquee />
```

## Uso

### Variantes na ficha

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

Para mostrar marcas, parceiros ou selos numa faixa, em página de campanha ou institucional.

### Quando não usar

Para uma frase promocional rolando, use o PromoMarquee. Para logos parados, uma lista comum de imagens.

### Faça

- Passe `marcas` com `nome` e `logo`: o nome é o `alt` do logotipo.
- Mantenha o botão de pausa: a faixa se move sozinha por mais de cinco segundos (WCAG 2.2.2).

### Evite

- Marca sem `logo` na lista padrão sem avisar: a faixa mostra só o nome em texto, e o desenho fica desigual.

### Anatomia

1. **Título** — `tiny` centrado ("Faculdade Phorte" por padrão).
2. **Faixa** — Duas cópias da lista de logotipos (48px de altura), em laço de 40s.
3. **Pausa** — Botão redondo de 44px no canto.

### Estados

| Estado | O que muda |
| --- | --- |
| Rolando | A faixa corre em laço; o botão diz "Pausar a rolagem das marcas". |
| Pausada | A faixa para; o botão vira "Retomar…" com `aria-pressed="true"` — medido. |
| Movimento reduzido | A faixa não corre e o botão some; os itens quebram linha, cada um uma vez (E145). Era uma rolagem manual sem nada focável dentro — o teclado não chegava ao que ficava fora da largura. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Marca sem logotipo | Mostra o nome da marca em texto. |

### Relacionados

- [PromoMarquee](https://phorte-design-system.vercel.app/styleguide/md/PromoMarquee.md) — Frase promocional rolando.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `titulo` | `string` | `'Faculdade Phorte'` | não |  |
| `marcas` | `MarcaDaFaixa[]` | `MARCAS_PADRAO` | não |  |
| `className` | `string` | — | não |  |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `border-border` |
| `--border-interactive` | #8C8C8C | `border-border-interactive` |
| `--card` | #FFFFFF | `bg-card` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--ring` | var(--footer-red)), decisão da revisão 2. Se outra peça precisar
   * dele como superfície, o nome vira de papel (ex.: --surface-brand-strong). */
  --footer-red: #7D1B1B | `ring-ring` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Só o botão de pausa — medido. |
| Enter / Espaço | Pausa ou retoma a faixa — medido. |

### Leitor de tela

- A faixa é uma região nomeada pelo título dela (E76).
- A cópia do laço é `aria-hidden`, com `alt=""`: o leitor lê cada marca uma vez.

### 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/organisms/marketing/LogoMarquee.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-logomarquee--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/marketing/LogoMarquee.tsx