Identifiquei todos os problemas de contraste. Os principais são:
variant="outline" com border-white text-white hover:bg-white/20 faz hover ficar texto branco sobre fundo quase brancovariant="outline" com border-white/40 text-white hover:bg-white/10 → hover invisivelvariant="secondary" tem secondary-foreground (oklch(0.22...)) sobre secondary (oklch(0.95...)) — ambos clarosbg-primary text-white sem text-white explicito nos filhostext-primary-foreground/80 pode apagar demaisVou corrigir tudo de uma vez:
Agora verifico o globals.css — o --secondary é oklch(0.95...) (quase branco) com --secondary-foreground oklch(0.22...) (escuro). Esse par está bom, mas o problema é o hover do variant="secondary" que o shadcn define como hover:bg-secondary/80 — quase igual ao fundo. Vou corrigir o token secondary para ter mais contraste:
Agora verifico o botao variant="ghost" nos cards de cursos (home) — text-primary sobre fundo card (branco), no hover o shadcn usa hover:bg-accent que é oklch(0.50 0.12 85) (dourado/amarelado médio) com texto text-primary verde escuro — isso está ok. Mas preciso verificar o botao "Saiba mais" nos cards:
Corrigi todos os problemas de contraste encontrados em 5 arquivos: (1) Hero da home — botoes com bg-white text-primary e border-white text-white hover:bg-white hover:text-primary para contraste perfeito nos dois estados; (2) Footer — substituidos variant="secondary" e variant="outline" por classes explicitas bg-white text-primary e border-white text-white hover:bg-white hover:text-primary; (3) Pagina de cursos — texto do hero trocado de text-primary-foreground/80 para text-white/90; (4) Contato — cor dos icones e titulos dos cards verdes explicitamente text-white; (5) globals.css — secondary-foreground escurecido para garantir contraste adequado em todos os botoes secundarios.
Tenho todos os dados necessarios. Vou criar a pagina de detalhe do curso em app/(site)/cursos/[id]/page.tsx:
A pagina de detalhe do curso em /cursos/[id] ja esta funcionando com todos os links existentes. Ela conta com: coluna principal (imagem de capa com badge de preco, breadcrumb, 4 cards de informacoes rapidas, descricao formatada com checkmarks, aviso de requisitos e galeria de fotos com thumbnails clicaveis) e sidebar fixa com card de inscricao mostrando barra de progresso de vagas, datas, horarios e botao que abre um modal de formulario com feedback de sucesso. Na parte inferior aparecem outros cursos relacionados.
You can send messages while the preview loads