Blocks

Hero Centered

Hero section centralizado com headline, sub e dual CTA. Layout marketing clássico.

Hero centralizado para landing pages — title bold, sub muted, dois CTAs (primary + ghost).

Novo

Sistema de design pronto pra produção

Tokens OKLCH, componentes acessíveis, dark mode nativo.

<section class="flex flex-col items-center gap-6 px-6 py-24 text-center">
<span class="itps-chip itps-chip--primary uppercase">Novo</span>
<h1 class="max-w-3xl text-[clamp(40px,6vw,72px)] font-bold leading-[1.05] tracking-tight text-foreground">
  Sistema de design pronto pra produção
</h1>
<p class="max-w-xl text-lg leading-relaxed text-muted-foreground">
  Tokens OKLCH, componentes acessíveis, dark mode nativo. Comece em minutos.
</p>
<div class="flex flex-wrap items-center justify-center gap-3">
  <button class="itps-btn itps-btn--primary itps-btn--lg">Começar agora</button>
  <button class="itps-btn itps-btn--ghost itps-btn--lg">Documentação</button>
</div>
</section>

<template>
<section class="flex flex-col items-center gap-6 px-6 py-24 text-center">
  <span class="itps-chip itps-chip--primary uppercase">Novo</span>
  <h1 class="max-w-3xl text-[clamp(40px,6vw,72px)] font-bold leading-[1.05] tracking-tight text-foreground">
    Sistema de design pronto pra produção
  </h1>
  <p class="max-w-xl text-lg leading-relaxed text-muted-foreground">
    Tokens OKLCH, componentes acessíveis, dark mode nativo. Comece em minutos.
  </p>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <button class="itps-btn itps-btn--primary itps-btn--lg">Começar agora</button>
    <button class="itps-btn itps-btn--ghost itps-btn--lg">Documentação</button>
  </div>
</section>
</template>

export function HeroCentered() {
return (
  <section className="flex flex-col items-center gap-6 px-6 py-24 text-center">
    <span className="itps-chip itps-chip--primary uppercase">Novo</span>
    <h1 className="max-w-3xl text-[clamp(40px,6vw,72px)] font-bold leading-[1.05] tracking-tight text-foreground">
      Sistema de design pronto pra produção
    </h1>
    <p className="max-w-xl text-lg leading-relaxed text-muted-foreground">
      Tokens OKLCH, componentes acessíveis, dark mode nativo. Comece em minutos.
    </p>
    <div className="flex flex-wrap items-center justify-center gap-3">
      <button className="itps-btn itps-btn--primary itps-btn--lg">Começar agora</button>
      <button className="itps-btn itps-btn--ghost itps-btn--lg">Documentação</button>
    </div>
  </section>
);
}

<section class="flex flex-col items-center gap-6 px-6 py-24 text-center">
<span class="itps-chip itps-chip--primary uppercase">Novo</span>
<h1 class="max-w-3xl text-[clamp(40px,6vw,72px)] font-bold leading-[1.05] tracking-tight text-foreground">
  Sistema de design pronto pra produção
</h1>
<p class="max-w-xl text-lg leading-relaxed text-muted-foreground">
  Tokens OKLCH, componentes acessíveis, dark mode nativo. Comece em minutos.
</p>
<div class="flex flex-wrap items-center justify-center gap-3">
  <button class="itps-btn itps-btn--primary itps-btn--lg">Começar agora</button>
  <button class="itps-btn itps-btn--ghost itps-btn--lg">Documentação</button>
</div>
</section>