Sistema visual do LitePic

Toda rota nova encaixa em uma destas três categorias. Escolha a categoria antes de codar — o restante (shell, hero, cards) segue padrão.

1. 1Ferramenta — home, estimativa, otimizar-via-sitemap, comprimir-png. Shell wide + hero variant="tool" (centralizado).
2. 2Conteúdo — guias, comparativos, sobre, manifesto, histórico. Shell narrow + hero variant="content" + breadcrumbs.
3. 3Documentação — /integracoes/* e esta página. Mesmo shell/hero da categoria conteúdo, com StepList em passo-a-passo.

• PageHero — único responsável pelo <h1>, chip eyebrow, badge (Beta/Novo/default) e descrição.
• ContentShell — <main> com padding e space-y-14. Aceita width="narrow" (padrão) ou wide.
• SectionCard — card branco padrão, ou tone="primary" para destaques.
• StepList — lista numerada com bolinha primary.
• GuideBreadcrumbs — breadcrumb no topo de páginas de conteúdo/documentação.

Shell narrow, hero com variant="content", breadcrumbs no topo e um ou mais SectionCard com StepList.

<Header />
<ContentShell>
  <GuideBreadcrumbs
    items={[
      { label: "Guias", to: "/guias" },
      { label: "Como comprimir imagem sem perder qualidade" },
    ]}
  />
  <PageHero
    variant="content"
    eyebrow="Guia prático · Objetivo"
    eyebrowIcon={ImageIcon}
    title="Como comprimir imagem sem perder qualidade"
    description="Passo a passo com o modo Otimizar web do LitePic."
  />
  <SectionCard icon={Settings} title="O que é o modo Otimizar web?">
    <p className="text-sm text-dim leading-relaxed">
      Combina AVIF/WebP com um ajuste de qualidade …
    </p>
    <StepList
      items={[
        "Suba a imagem original (JPG, PNG ou HEIC).",
        "Escolha o preset Otimizar web.",
        "Baixe o resultado em AVIF ou WebP.",
      ]}
    />
  </SectionCard>
</ContentShell>
<Footer />

Mesmo shell/hero do guia; use SectionCard tone="primary" para o veredito ou CTA final.

<Header />
<ContentShell>
  <GuideBreadcrumbs
    items={[
      { label: "Comparativos", to: "/guias" },
      { label: "LitePic vs TinyPNG" },
    ]}
  />
  <PageHero
    variant="content"
    eyebrow="Comparativo · Ferramentas"
    eyebrowIcon={Scale}
    badge={{ label: "Novo", tone: "novo" }}
    title="LitePic vs TinyPNG"
    description="Quando escolher cada um em 2026."
  />
  <SectionCard icon={Layers} title="Resumo">
    <p className="text-sm text-dim leading-relaxed">
      LitePic roda 100% no navegador; TinyPNG envia ao servidor …
    </p>
  </SectionCard>
  <SectionCard tone="primary">
    <p className="text-sm leading-relaxed">
      Precisa de privacidade máxima? LitePic nunca sobe seus arquivos.
    </p>
  </SectionCard>
</ContentShell>
<Footer />

Igual ao guia, com badge Beta enquanto a integração estabiliza e StepList para o passo-a-passo de setup.

<Header />
<ContentShell>
  <GuideBreadcrumbs
    items={[
      { label: "Integrações", to: "/integracoes/mcp" },
      { label: "MCP" },
    ]}
  />
  <PageHero
    variant="content"
    eyebrow="Integração · MCP"
    eyebrowIcon={Plug}
    badge={{ label: "Beta", tone: "beta" }}
    title="Integrar com Claude e ChatGPT"
    description="Configure o servidor MCP do LitePic em minutos."
  />
  <SectionCard icon={Settings} title="Instalação">
    <StepList
      items={[
        "Abra as configurações do seu cliente MCP.",
        "Adicione o endpoint https://litepic.app/mcp.",
        "Reinicie o cliente e verifique as tools disponíveis.",
      ]}
    />
  </SectionCard>
</ContentShell>
<Footer />

Fora do escopo pedido, mas útil comparar: hero centralizado, shell largo, sem breadcrumbs.

<Header />
<ContentShell width="wide">
  <PageHero
    variant="tool"
    eyebrow="Análise via sitemap"
    eyebrowIcon={FileSearch}
    badge={{ label: "Beta", tone: "beta" }}
    title={<>Otimizar via <span className="text-primary">sitemap.xml</span></>}
    description="Cole a URL do seu sitemap e receba um plano de compressão."
  />
  {/* formulário / uploader / resultados */}
</ContentShell>
<Footer />