# InstructorCards

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

Seção do corpo docente: chapéu, título e descrição (o SectionTitle) e um cartão por professor — foto, nome, titulação, cargo, uma trajetória curta e as credenciais. Os professores vêm por prop; sem ela, entram dois de exemplo. Estrutura refeita na revisão 3 (E129).

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

<InstructorCards />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/InstructorCards/0)
2. [Três professores](https://phorte-design-system.vercel.app/previa/InstructorCards/1)

Em página de curso ou de campanha, para apresentar quem ensina.

### Quando não usar

Para a equipe da instituição, use o TeamGrid. Para palestrantes de um evento, o EventSpeaker.

### Faça

- Passe os `professores` reais: nome, titulação, cargo, bio de duas ou três linhas, foto de rosto e credenciais curtas.
- Escreva as credenciais em pt-BR e coerentes com a titulação ("Mestrado USP" para quem é mestre).
- Use fotos de rosto no mesmo enquadramento: o cartão corta em quadrado.

### Evite

- Biografia longa: três linhas bastam; o resto vai para a página do professor.
- Mais de seis professores numa seção: vire uma página de corpo docente.

### Anatomia

1. **Cabeçalho** — SectionTitle centrado: chapéu, título (h2) e descrição.
2. **Cartão** — Card em pé (`article`), da altura da linha: foto quadrada no alto (CardMedia 1/1), o texto com o espaço do CardContent.
3. **Nome, titulação e cargo** — Nome no `h3` (20px, negrito), titulação em `--primary-dark`, cargo em `--muted-foreground`.
4. **Bio** — 14px, `--muted-foreground`, sem aspas (não é citação).
5. **Credenciais** — Lista de Badge `outline` com o ícone de prêmio, no pé do cartão.

### Estados

| Estado | O que muda |
| --- | --- |
| Dois professores | Duas colunas centradas a partir de 768px (tablet), até 768px de largura. |
| Três ou mais | Duas colunas a partir de 768px (tablet) e três a partir de 1024px. |
| Celular | Uma coluna, o cartão inteiro. |
| Hover | Nada: o cartão não é clicável (E129). Até a revisão 3 ele subia 8px e a foto aproximava. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Entrada na tela | Abaixo da dobra, os cartões sobem 20px e aparecem em cascata 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. |
| Bio de tamanhos diferentes | Os cartões da mesma linha ficam da mesma altura, com as credenciais no pé — testado na ficha. |

### Relacionados

- [TeamGrid](https://phorte-design-system.vercel.app/styleguide/md/TeamGrid.md) — A equipe da instituição.
- [EventSpeaker](https://phorte-design-system.vercel.app/styleguide/md/EventSpeaker.md) — Palestrantes de evento.
- [Badge](https://phorte-design-system.vercel.app/styleguide/md/Badge.md) — As credenciais.
- [SectionTitle](https://phorte-design-system.vercel.app/styleguide/md/SectionTitle.md) — O cabeçalho da seção.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `chapeu` | `string` | `'Corpo docente'` | não |  |
| `titulo` | `string` | `'Estude com quem domina o mercado real'` | não |  |
| `descricao` | `string` | `'Nosso corpo docente é formado por profissionais que atuam no topo da carreira e trazem os desafios reais do dia a dia para a sala de aula.'` | não |  |
| `professores` | `Professor[]` | `PROFESSORES_DE_EXEMPLO` | não |  |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--card` | #FFFFFF | `bg-card` |
| `--muted` | #F4F6F9 | `bg-muted` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary-dark` | #A81E1E | `text-primary-dark` |

## Acessibilidade

### Leitor de tela

- Cada professor é um `article` com o nome no `h3`; a foto é decorativa (`alt=""`), porque o nome está escrito.
- As credenciais são uma lista com nome ("Credenciais de …").

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

- `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/marketing/InstructorCards.tsx