Lucas Rayan GuerraandClaude Sonnet 5.5
bc9ae5c036
* feat(design): redesign das páginas internas no novo design system Padroniza todas as páginas e componentes internos nos tokens e primitivos de app/globals.css, com contraste AAA (7:1) nos dois temas e alvos de toque de 44px. - Páginas reescritas: glossário, séries, série, seletor, comparador, diagnóstico, catálogo, component registry, frameworks, framework, sobre e a nova 404. - Componentes: PageHero e SectionHead novos; BoardCard, CodeExample, PinRestrictions, SeriesTabMenu e ConnectionsDiagram refeitos, com abas e diálogo acessíveis. - Remove emojis, cores avulsas por série, caixa alta com tracking, texto menor que 12px e os pares slate-*/dark:*. - Comparador: "mostrar só as diferenças" e leitura de ?chips=. - Corrige overflow em 320/390px e ajusta accent/copper do tema claro para fechar 7:1. - scripts/auditar-temas.mjs passa a travar paleta crua, dark:, texto pequeno, emoji e contraste dos tokens. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc * ci: roda lint, auditorias de design e build em cada PR Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc --------- Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
48 lines
1.8 KiB
React
48 lines
1.8 KiB
React
import Link from "next/link";
|
|
|
|
/**
|
|
* Abertura padrão das páginas internas: trilha, rótulo, título, frase de apoio
|
|
* e ações. Mesma voz da /livro e da home, para que nenhuma página pareça
|
|
* de outro produto.
|
|
*/
|
|
export default function PageHero({ trail = [], icon: Icon, label, title, lede, align = "left", children }) {
|
|
const center = align === "center";
|
|
return (
|
|
<section className="shell pt-8 sm:pt-12">
|
|
{trail.length > 0 && (
|
|
<nav aria-label="Trilha de navegação" className="flex flex-wrap items-center gap-2 text-sm text-muted">
|
|
<Link href="/" className="inline-flex min-h-11 min-w-11 items-center justify-center transition-colors hover:text-accent">
|
|
Início
|
|
</Link>
|
|
{trail.map((item, i) => (
|
|
<span key={item.label} className="flex min-h-11 items-center gap-2">
|
|
<span aria-hidden="true" className="text-line-strong">/</span>
|
|
{item.href && i < trail.length - 1 ? (
|
|
<Link href={item.href} className="inline-flex min-h-11 min-w-11 items-center justify-center transition-colors hover:text-accent">
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span aria-current="page" className="text-ink">
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
</span>
|
|
))}
|
|
</nav>
|
|
)}
|
|
|
|
<div className={`${trail.length ? "mt-8 sm:mt-10" : ""} max-w-3xl ${center ? "mx-auto text-center" : ""}`}>
|
|
{label && (
|
|
<span className="chip chip-accent">
|
|
{Icon && <Icon className="h-3.5 w-3.5" aria-hidden="true" />}
|
|
{label}
|
|
</span>
|
|
)}
|
|
<h1 className={`page-title ${label ? "mt-5" : ""}`}>{title}</h1>
|
|
{lede && <p className={`lede mt-5 max-w-2xl ${center ? "mx-auto" : ""}`}>{lede}</p>}
|
|
{children && <div className={`mt-7 flex flex-wrap gap-3 ${center ? "justify-center" : ""}`}>{children}</div>}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|