Fora do catálogo
Peça de produto do fluxo de cursos livres. Não é uma das 81 peças do kit, não tem estado de promoção e não foi feita para reuso em outras páginas. Segue as mesmas regras de cor e acessibilidade que o resto do repositório.
Phorte
A página inteira do catálogo, com busca e filtros.
- Grupo
- Cursos Livres (E-commerce) — fora do catálogo
- Mora em
- app/components/organisms/cursos-phorte/PhorteCourseCatalogClient.tsx
- Última mudança
- 2026-10-01
Prévia
A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.
1280px, em tamanho real
Variantes na ficha
Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import { PhorteCourseCatalogClient } from '@/app/components/organisms/cursos-phorte/PhorteCourseCatalogClient';
<PhorteCourseCatalogClient courses={…} lpContent={…} />Propriedades
Lidas do código da peça no build — não escritas à mão.
| Prop | Tipo | Padrão | Obrigatória | Descrição |
|---|---|---|---|---|
courses | PhorteCourse[] | — | sim | — |
lpContent | PhorteLpContent | — | sim | — |
hrefDaMatricula | string | — | não | Destino do CTA final (lpContent.finalCtaLabel). Sem ele o botão não aparece (E74): era um botão sem ação. |
hrefDoConsultor | string | — | não | Destino de "Falar com consultor". Sem ele, o botão não aparece. |
Tokens de cor
Os tokens semânticos que o código da peça usa, com o valor de hoje em app/globals.css.
| Token | Valor | Usado como |
|---|---|---|
--primary | #D42B2B | bg-primary/10bg-primary/20border-primaryborder-primary/25text-primary |
--foreground | #1A1A1A | bg-inktext-inktext-ink/85 |
--secondary | #0B8434 | bg-secondary/25text-secondary |
--border | #E5E5E5 | border-border |
--card | #FFFFFF | bg-card |
--ink-inverse | #FAFAFA | text-ink-inverse |
--ink-inverse-muted | #C7C7C7 | text-ink-inverse-muted |
--muted-foreground | #595959 | text-muted-foreground |
--primary-dark | #A81E1E | text-primary-dark |
Sem estado de promoção
A peça está fora do catálogo e não passa pela promoção de estado. O axe roda nas variantes da ficha em npm run test; contraste abaixo de AA vira exceção declarada na própria ficha, com a conta — pendência registrada, não aprovação.
Status e recursos
| Tipo | Recurso | Status |
|---|---|---|
| Código | app/components/organisms/cursos-phorte/PhorteCourseCatalogClient.tsx | Disponível |
| Ficha | stories/cursos-livres/phorte-course-catalog-client.stories.tsx | Storybook local |
| Teste de acessibilidade | axe em npm run test | No gate de todo commit |
| Design | Figma | Desativado até a Fase 2 |
Histórico
Os últimos commits que tocaram o arquivo, lidos do git no build.
251416b2026-10-01E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
O histórico completo está no GitHub (abre em outra aba).