# TeamGrid

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

Seção "Conheça Nossa Equipe": quatro pessoas em grade — foto redonda, nome, cargo, uma frase e os links de LinkedIn e Twitter de quem os tiver. A equipe vem por `equipe` (E74).

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

<TeamGrid />
```

## Uso

### Variantes na ficha

1. [Padrao](https://phorte-design-system.vercel.app/previa/TeamGrid/0)
2. [Sem redes](https://phorte-design-system.vercel.app/previa/TeamGrid/1)

Numa página institucional, como vitrine da equipe.

### Quando não usar

Para professores de um curso, use o InstructorCards. Para palestrantes, o EventSpeaker.

### Faça

- Passe `equipe`, com `linkedin` e `twitter` só de quem tiver a rede.

### Evite

- Publicar com a equipe de exemplo (a que vem sem prop, sem rede nenhuma).

### Anatomia

1. **Título** — Typography `h2` e a frase.
2. **Pessoa** — Foto redonda de 192px, nome (`h3`), cargo em vermelho, frase e os links de rede que ela tiver (44px, E74).

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Uma coluna no celular, duas a partir de 768px, quatro a partir de 1024px. |
| Hover | A foto aproxima; o ícone da rede fica vermelho. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Links de rede | Levam ao endereço da prop; rede sem endereço não aparece (E74 — eram oito links para `#`). |

### Relacionados

- [InstructorCards](https://phorte-design-system.vercel.app/styleguide/md/InstructorCards.md) — Os professores de um curso.
- [Avatar](https://phorte-design-system.vercel.app/styleguide/md/Avatar.md) — A foto de uma pessoa, com tratamento de imagem quebrada.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `equipe` | `PessoaDaEquipe[]` | `EQUIPE_PADRAO` | não | A equipe por prop (E74): era fixa no arquivo. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--background` | #FAFAFA | `border-background` |
| `--muted` | #F4F6F9 | `bg-muted` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary` | #D42B2B | `text-primary` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | As redes de cada pessoa, em ordem, com anel de foco (E74) — medido. |
| Enter | Segue o link. |

### Leitor de tela

- Os links são nomeados por `aria-label` ("LinkedIn de Ana Silva").

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