# FloatingPricingCard

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

Cartão de preço de campanha: nome do curso (o título do cartão), preço cheio riscado, "Economia de 50%", preço por mês em destaque, benefícios e, com `hrefDaMatricula`, "Matricular Agora". Sem contagem regressiva desde a E76. As outras props têm padrão.

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

<FloatingPricingCard />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/FloatingPricingCard/0)
2. [Sem Promocao](https://phorte-design-system.vercel.app/previa/FloatingPricingCard/1)
3. [Texto Longo](https://phorte-design-system.vercel.app/previa/FloatingPricingCard/2)
4. [Sem destino](https://phorte-design-system.vercel.app/previa/FloatingPricingCard/3)

Ao lado do MarketingHero na variante de conversão, ou sozinho numa página de oferta.

### Quando não usar

Para comparar planos, use o PricingCards. Para o preço de um curso no catálogo, o CourseCard com `preco`.

### Faça

- Passe `courseName`, `originalPrice`, `promoPrice`, `installments` e `features` reais.
- Passe `hrefDaMatricula`: sem ele, "Matricular Agora" não aparece (E74).
- Ajuste `nivelDoTitulo` (padrão `h3`) ao lugar do cartão na página.

### Evite

- Prazo de oferta no cartão: a contagem regressiva saiu (E76, decisão de 2026-09-28) porque recomeçava a cada visita — se o prazo for real, escreva a data.
- Deixar "Economia de 50%" com preços que não dão 50%: o texto é fixo.

### Anatomia

1. **Curso** — O título do cartão (`h3` por padrão, `nivelDoTitulo`), em `tiny`, caixa alta.
2. **Preço** — "De <cheio>" riscado, "Economia de 50%", "R$", o valor em destaque (parágrafo, E76) e "/mês"; as parcelas embaixo.
3. **Benefícios** — Lista com visto verde.
4. **Chamada** — Com `hrefDaMatricula`: Button `lg` com `href` (48px) e a nota da garantia.

### Estados

| Estado | O que muda |
| --- | --- |
| Padrão | Sem estados próprios além do hover do botão: nada no cartão se move sozinho. |
| Sem destino | Sem `hrefDaMatricula`: o cartão só informa, sem "Matricular Agora". |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| "Matricular Agora" | Leva ao `hrefDaMatricula`; sem a prop, não aparece (E74) — testado na ficha. |

### Relacionados

- [MarketingHero](https://phorte-design-system.vercel.app/styleguide/md/MarketingHero.md) — O topo de campanha que o recebe na variante de conversão.
- [PricingCards](https://phorte-design-system.vercel.app/styleguide/md/PricingCards.md) — Comparação de planos.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `courseName` | `string` | `"Pós-Graduação em Tradução"` | não |  |
| `originalPrice` | `string` | `"R$ 792,00"` | não |  |
| `promoPrice` | `string` | `"396,00"` | não |  |
| `installments` | `string` | `"12x"` | não |  |
| `features` | `string[]` | `[ "Acesso vitalício ao conteúdo", "Certificado reconhecido pelo MEC", "Mentoria individual com experts" ]` | não |  |
| `nivelDoTitulo` | `'h2' \| 'h3' \| 'h4'` | `'h3'` | não | Nível do título com o nome do curso (E76). Padrão `h3`: o cartão costuma vir dentro de uma seção. |
| `hrefDaMatricula` | `string` | — | não | Destino de "Matricular Agora" (E74). Sem ele o botão não aparece: era um botão sem ação, o único CTA do cartão. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `bg-primary/10`, `shadow-primary/20`, `text-primary` |
| `--foreground` | #1A1A1A | `text-ink`, `text-ink/70` |
| `--success` | #2E844A | `bg-success/10`, `text-success` |
| `--border` | #E5E5E5 | `border-border` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary-dark` | #A81E1E | `text-primary-dark` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Com a prop, "Matricular Agora" — a única parada (o botão de pausa saiu com o relógio, E76). |
| Enter | Segue o link da matrícula. |

### Leitor de tela

- O nome do curso é o título do cartão; o preço não é título — a lista de títulos do leitor tinha um "396,00" solto até a E76.
- O preço riscado não diz, por escrito, que é o preço original — só o traço mostra (o CourseCard diz).

### O que sustenta o estado

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

### Achados abertos

- **"Economia de 50%" fixo e preço riscado sem texto.** A porcentagem não sai dos preços passados; e o cheio riscado não tem o "Preço original" escrito para o leitor.

## Status e recursos

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