# Testimonials

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

Seção de depoimentos: três cartões escuros de foto, citação, nome e cargo — com o play quando o depoimento tem `videoUrl`, e o vídeo tocando dentro do cartão (E159) —, setas no celular, e embaixo três depoimentos em texto. Os cartões vêm por `depoimentos` (E75); os de texto estão no arquivo.

- Função: Institucional
- Também chamado de: depoimentos, avaliações, prova social, o que dizem
- Mora em: `app/components/organisms/Testimonials.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Testimonials](https://phorte-design-system.vercel.app/styleguide/peca/Testimonials)
- Ficha no Storybook: [components-complex-testimonials](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-testimonials--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Testimonials/0](https://phorte-design-system.vercel.app/previa/Testimonials/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 Testimonials from '@/app/components/organisms/Testimonials';

<Testimonials />
```

## Uso

### Variantes na ficha

1. [Padrao](https://phorte-design-system.vercel.app/previa/Testimonials/0)
2. [Sem vídeo](https://phorte-design-system.vercel.app/previa/Testimonials/1)

Na página inicial ou de um curso, como vitrine do bloco de depoimentos.

### Quando não usar

Para depoimentos em vídeo de campanha, use o VideoTestimonialCarousel. Para uma grade só de texto, em campanha, o TestimonialCarousel (que, apesar do nome, não é carrossel).

### Faça

- Passe `depoimentos`, com `videoUrl` em quem tiver vídeo: só esses ganham o play. YouTube e Vimeo tocam no cartão; o vertical do Vimeo precisa de `formato: "vertical"` (o Shorts é reconhecido pelo endereço).

### Evite

- Publicar os depoimentos em texto como estão: nomes e cargos são de exemplo.

### Anatomia

1. **Título** — Um SectionTitle: "Assista os depoimentos:" quando há vídeo, "Depoimentos" quando não há (E75).
2. **Setas** — Só abaixo de 768px: dois CarouselNavButton `tonal` (E65), "Depoimento anterior" e "Próximo depoimento", com `aria-controls` na fileira, que rolam 300px.
3. **Cartão com foto** — `figure`: foto escurecida (`alt=""`), o play (só com `videoUrl`, botão de 64px; o vídeo ocupa o cartão, E159b), a citação em `blockquote` e, na `figcaption`, o autor pelo PessoaResumo no escuro (nome em `h3` e cargo). A citação inteira, sem corte: o cartão tem 384px no mínimo (420px a partir de 768px) e cresce com o texto (E139, testado a 320px com o espaçamento do SC 1.4.12).
4. **Depoimentos em texto** — Três `figure` escuras: citação em `blockquote`, nome (`h4`) e cargo na `figcaption`.

### Estados

| Estado | O que muda |
| --- | --- |
| Celular | Os cartões rolam na horizontal, com encaixe, e as setas aparecem. |
| Computador | Os três cartões em grade; sem setas. |
| Hover no cartão | A foto aproxima e clareia; o play, quando há, cresce no hover dele. |
| Tocando | O player do YouTube ou do Vimeo ocupa o cartão inteiro, sobre o fundo escuro (E159b, como o depoimento da home da EBAC): o provedor encaixa o vertical e o horizontal. A foto, a citação e o nome saem da tela, sem mudar o tamanho do cartão; o "×" (Fechar vídeo), numa faixa própria em cima, sem cobrir os controles do player. |
| Sem vídeo | Sem play, sem `cursor-pointer` e sem o ícone de link que ficava junto do autor (E75). |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Play | O vídeo toca dentro do cartão (E159, o mesmo mecanismo do VideoTestimonialCarousel): nada do provedor carrega antes do clique, o player sai pelo `youtube-nocookie.com` ou com o `dnt=1` do Vimeo, e o foco vai para ele — testado na ficha. |
| Fechar vídeo | O player sai, a capa, a citação e o nome voltam, e o foco volta ao play — testado na ficha. |
| Vídeo de outro lugar | Sem player para incorporar: o play vira link em nova aba, e diz isso no nome. |
| Clique no resto do cartão | Nada, e o cartão não finge o contrário: o `cursor-pointer` saiu. |
| Setas (celular) | Rolam a fileira 300px para cada lado. |

### Relacionados

- [VideoTestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/md/VideoTestimonialCarousel.md) — Depoimentos em vídeo, que tocam.
- [TestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/md/TestimonialCarousel.md) — Carrossel de depoimentos em texto.
- [CarouselNavButton](https://phorte-design-system.vercel.app/styleguide/md/CarouselNavButton.md) — As setas do celular.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `depoimentos` | `DepoimentoEmVideo[]` | `DEPOIMENTOS_PADRAO` | não | Os depoimentos por prop (E75): eram fixos no arquivo. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--card` | #FFFFFF | `bg-card`, `shadow-card` |
| `--foreground` | #1A1A1A | `bg-ink`, `from-ink` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--ink-inverse-muted` | #C7C7C7 | `text-ink-inverse-muted` |
| `--primary` | #D42B2B | `bg-primary` |
| `--primary-dark` | #A81E1E | `bg-primary-dark` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | O play de cada depoimento com vídeo (E75). No celular, também as duas setas e a própria fileira, que rola por teclado — medido em 375px. |
| Enter / Espaço | Nas setas, rolam a fileira; no play, tocam o vídeo no cartão, e o foco vai para o player; no "×", fecham o vídeo, e o foco volta ao play. |

### Leitor de tela

- Os nomes são títulos (`h3` nos cartões, `h4` nos depoimentos em texto).

### O que sustenta o estado

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

### Achados abertos

- **Conteúdo de exemplo e em inglês.** Cargos como "Design Head @ Dune" e "Product Lead @ Google" são de exemplo; "Assista os depoimentos" pede a regência "Assista aos".
- **Níveis de título misturados.** `h3` nos cartões e `h4` nos depoimentos em texto, sem um `h3` entre eles.

## Status e recursos

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

- `25a8284` 2026-10-01 — E159b: Testimonials — o vídeo ocupa o cartão inteiro, como o da EBAC
- `251416b` 2026-10-01 — E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/Testimonials.tsx