# TestimonialCarousel

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

Seção "Experiências Reais": três depoimentos em cartões lado a lado — aspas, citação, nome e cargo. Apesar do nome, não é carrossel: é uma grade parada (o nome ficou, E78 — renomear quebraria quem já importa). Os depoimentos vêm por `depoimentos`.

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

<TestimonialCarousel />
```

## Uso

### Variantes na ficha

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

Em página de campanha, como vitrine de depoimentos em texto.

### Quando não usar

Para depoimentos em vídeo, o VideoTestimonialCarousel. Para a seção de depoimentos da página inicial, com fotos e vídeo, o Testimonials — as duas continuam separadas (decisão de 2026-09-28), e as duas usam `figure` e `blockquote`.

### Faça

- Passe `depoimentos` (`name`, `role`, `quote`) reais.

### Evite

- Contar com o comportamento de carrossel: não há setas nem rolagem.

### Anatomia

1. **Título** — Typography `h2` e a frase.
2. **Depoimento** — Um Card com uma `figure` (E78): ícone de aspas (decorativo), a citação em `blockquote` e, na `figcaption`, o nome (`h3`) e o cargo.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Uma coluna no celular, três a partir de 768px. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Entrada na tela | Abaixo da dobra, sobe 20px e aparece ao entrar na tela, uma vez. O HTML do servidor já sai visível, e o que está à vista ao abrir não é escondido — sem JavaScript, nada some (E138, testado). Com movimento reduzido, não anima. |

### Relacionados

- [VideoTestimonialCarousel](https://phorte-design-system.vercel.app/styleguide/md/VideoTestimonialCarousel.md) — Depoimentos em vídeo.
- [Testimonials](https://phorte-design-system.vercel.app/styleguide/md/Testimonials.md) — Os depoimentos da página inicial.

## Especificação

### Propriedades

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

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `border-border` |
| `--foreground` | #1A1A1A | `text-ink/90` |
| `--muted` | #F4F6F9 | `bg-muted/40` |
| `--primary` | #D42B2B | `text-primary` |

## Acessibilidade

### Leitor de tela

- A citação e quem a disse ficam ligadas pela `figure`; o nome é `h3`, na `figcaption`.

### O que sustenta o estado

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

### Achados abertos

- **O nome promete um carrossel.** "TestimonialCarousel" é uma grade parada, sem setas nem rolagem.

## Status e recursos

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