# PricingCards

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

Seção "Planos Transparentes": três planos lado a lado — Básico, Pro (em destaque, "Mais Popular") e Empresarial —, cada um com preço, período, benefícios e, com `href`, "Assinar Agora". Os planos vêm por `planos` (E74).

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

<PricingCards />
```

## Uso

### Variantes na ficha

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

Em página de campanha com mais de um plano para comparar.

### Quando não usar

Para uma oferta só, com contagem regressiva, use o FloatingPricingCard. Para o preço de um curso, o CourseCard com `preco`.

### Faça

- Passe `planos`, cada um com o `href` da assinatura; sem `href`, o plano fica sem botão.

### Evite

- Publicar com os planos de exemplo (os que vêm sem prop).

### Anatomia

1. **Título** — Typography `h2` e a frase.
2. **Plano** — Um Card: nome (`CardTitle`, `h3`), preço (Typography `h2` como `<p>`, E74) e período, benefícios com visto e, com `href`, o Button.
3. **Destaque** — No plano popular: Card `elevated`, borda vermelha e o Badge "Mais Popular" no topo.

### Estados

| Estado | O que muda |
| --- | --- |
| Plano popular | Maior (avança sobre os vizinhos), borda vermelha, Badge e Button `primary`. |
| Outros planos | Card padrão e Button `outline`. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| "Assinar Agora" | Leva ao `href` do plano; sem ele, não aparece (E74) — testado na ficha. |

### Relacionados

- [FloatingPricingCard](https://phorte-design-system.vercel.app/styleguide/md/FloatingPricingCard.md) — Uma oferta só.
- [Card](https://phorte-design-system.vercel.app/styleguide/md/Card.md) — A superfície dos planos.
- [Badge](https://phorte-design-system.vercel.app/styleguide/md/Badge.md) — O "Mais Popular".

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `planos` | `PlanoDePreco[]` | `PLANOS_PADRAO` | não | Os planos por prop (E74): eram fixos no arquivo. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `bg-primary`, `border-primary`, `ring-primary/20`, `text-primary` |
| `--background` | #FAFAFA | `bg-background` |
| `--border` | #E5E5E5 | `border-border` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | O "Assinar Agora" de cada plano com `href` — medido. |
| Enter | Segue o link da assinatura. |

### Leitor de tela

- O nome de cada plano é `h3` (`CardTitle`); o preço tem a aparência de `h2`, mas é parágrafo (E74) — o mapa de títulos ficava "Pro" (h3) > "R$ 99" (h2).
- Cada "Assinar Agora" diz o plano no nome ("Assinar Agora: plano Pro", `sr-only`).

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