DESIGN SYSTEM

<h2 className="text-4xl font-black uppercase text-black dark:text-white underline decoration-[10px] underline-offset-[10px]"
    style={{ textDecorationColor: "#ff00ff" }}>TÍTULO</h2>

<PageLayout title="PORTFÓLIO" sections={navSections}>   {/* h1 */}
  <PageSection id="livros" title="LIVROS">               {/* h2 */}
    <SubHeading>Coleção</SubHeading>                     {/* h3 */}
  </PageSection>
</PageLayout>

import { layoutTokens } from "@/components/page-section"

<div className={layoutTokens.cardGrid}>…</div>   // 1 / 2 (≥768px da coluna) / 3 (≥1152px)
<div className={layoutTokens.splitGrid}>…</div>  // texto + imagem
<div className={layoutTokens.photoGrid}>…</div>  // 2 / 3 / 4 colunas

className="border-4 border-black shadow-brutal dark:border-white"

import { Mail } from "lucide-react"

<Mail className="h-6 w-6" aria-hidden="true" />          {/* decorativo */}
<button aria-label="Fechar"><X className="h-6 w-6" aria-hidden="true" /></button>

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6 }}
/>

<PageLayout
  title="PORTFÓLIO DE PROJETOS"          // h1 (também vira o nome da página no schema.org)
  subtitle="Projetos e performances…"
  headerColor="#ff00ff"
  sections={navSections}                  // ativa a sidebar (2+ seções)
  breadcrumbLabel="Nome do item"          // só em páginas de detalhe
  structuredData={false}                  // só em páginas de erro
>
  <PageSection id="livros" title="LIVROS">…</PageSection>
</PageLayout>

<PageSection id="trajetoria" title="TRAJETÓRIA" color="#ff00ff" description="Texto de apoio.">
  <SubHeading>Subtítulo (h3)</SubHeading>
  …
</PageSection>

const navSections = [
  { id: "trajetoria", title: "Trajetória", color: "#ff00ff" },
  { id: "formacao", title: "Formação", color: "#ffff00" },
]
<PageLayout sections={navSections}>…</PageLayout>

<SectionDivider color="#ffff00" text="FORMAÇÃO E EXPERIÊNCIA" />

<Button variant="primary-yellow" size="lg">Ação principal</Button>
<Button asChild variant="secondary"><Link href="/contato">Contato</Link></Button>

<CTAButton href="/metodo" variant="primary">Explorar Método</CTAButton>

<button type="button" aria-pressed={active} onClick={…}
  className="border-4 border-black px-4 py-2 text-sm font-black uppercase …">
  Exposição (2)
</button>

<div className={layoutTokens.featureCard}>…</div>
<div className={layoutTokens.card}>…</div>

<LandingSection id="modulos" tone="inverted" art={[{ src: "/decorative/…svg", tone: "inverted" }]}>
  <LandingHeader id="modulos" title="4 Módulos" tagline="Sensassom /// Palavrimagem …" />
  …conteúdo (use <Reveal> nos blocos)…
  <LandingCta><CTAButton href="/metodo" variant="secondary" icon={<ArrowRight />}>Conhecer o método</CTAButton></LandingCta>
</LandingSection>

<Book3D
  format="box"                       // book | booklet | box | panel | video
  title="Palavrimagens" subtitle="Material de estudo"
  description="Material didático complementar ao guia" meta="39 palavrimagens"
  color="var(--accent-cyan)" ink="black" href="/acervo/palavrimagens"
/>

<section className="relative bg-black dark:bg-white">
  <DecorativeArt src="/decorative/eu-nao-tenho-mais-a-cara.svg" tone="inverted" position="right" opacity={0.35} />
  <div className="relative z-10">…</div>
</section>

<Label htmlFor="name" className="text-base font-black uppercase">Nome*</Label>
<Input id="name" name="name" required className="h-14 border-4 border-foreground" />

<PhotoGrid photos={galleryAlbums[0].photos} columns="grid-cols-2 @3xl:grid-cols-4" />

<YouTubeEmbed id="71iOoAsbeUo" title="Módulo 1 – Sensassom" />

// app/equipe/layout.tsx
export const metadata = pageMetadata({
  title: "Equipe",
  description: "Conheça as pessoas que fazem O Movimento da Palavra…",
  path: "/equipe",
})

// páginas [slug]
export async function generateMetadata({ params }) {
  const item = …
  return pageMetadata({ title: item.title, description: …, path: `/portfolio/${slug}` })
}

pnpm dev                                   # ou pnpm build && pnpm start
pnpm audit:site                            # http://localhost:3000, tema claro
pnpm audit:site http://localhost:3000 --scheme=dark
pnpm audit:site --only=/portfolio,/sobre   # só algumas rotas
pnpm audit:site --json=relatorio.json