Blocks
CTA Banner
Banner full-width com headline + ação primária. Use em fim de seção pra conversão.
CTA banner com surface tinted e botão primary à direita.
Pronto pra começar?
Setup em menos de um minuto. Sem dependências obscuras, sem lock-in.
<section class="flex flex-col items-center justify-between gap-6 rounded-3xl border border-border bg-card p-10 md:flex-row md:p-14">
<div class="flex max-w-xl flex-col gap-3">
<h2 class="text-3xl font-bold tracking-tight text-foreground">Pronto pra começar?</h2>
<p class="text-base leading-relaxed text-muted-foreground">
Setup em menos de um minuto. Sem dependências obscuras, sem lock-in.
</p>
</div>
<div class="flex shrink-0 items-center gap-3">
<button class="itps-btn itps-btn--primary itps-btn--lg">Começar grátis</button>
<button class="itps-btn itps-btn--ghost itps-btn--lg">Falar com vendas</button>
</div>
</section>
<section class="flex flex-col items-center justify-between gap-6 rounded-3xl border border-border bg-card p-10 md:flex-row md:p-14">
<div class="flex max-w-xl flex-col gap-3">
<h2 class="text-3xl font-bold tracking-tight text-foreground">Pronto pra começar?</h2>
<p class="text-base leading-relaxed text-muted-foreground">
Setup em menos de um minuto. Sem dependências obscuras, sem lock-in.
</p>
</div>
<div class="flex shrink-0 items-center gap-3">
<button class="itps-btn itps-btn--primary itps-btn--lg">Começar grátis</button>
<button class="itps-btn itps-btn--ghost itps-btn--lg">Falar com vendas</button>
</div>
</section><section class="flex flex-col items-center justify-between gap-6 rounded-3xl border border-border bg-card p-10 md:flex-row md:p-14">
<div class="flex max-w-xl flex-col gap-3">
<h2 class="text-3xl font-bold tracking-tight text-foreground">Pronto pra começar?</h2>
<p class="text-base leading-relaxed text-muted-foreground">
Setup em menos de um minuto. Sem dependências obscuras, sem lock-in.
</p>
</div>
<div class="flex shrink-0 items-center gap-3">
<button class="itps-btn itps-btn--primary itps-btn--lg">Começar grátis</button>
<button class="itps-btn itps-btn--ghost itps-btn--lg">Falar com vendas</button>
</div>
</section>
<section class="flex flex-col items-center justify-between gap-6 rounded-3xl border border-border bg-card p-10 md:flex-row md:p-14">
<div class="flex max-w-xl flex-col gap-3">
<h2 class="text-3xl font-bold tracking-tight text-foreground">Pronto pra começar?</h2>
<p class="text-base leading-relaxed text-muted-foreground">
Setup em menos de um minuto. Sem dependências obscuras, sem lock-in.
</p>
</div>
<div class="flex shrink-0 items-center gap-3">
<button class="itps-btn itps-btn--primary itps-btn--lg">Começar grátis</button>
<button class="itps-btn itps-btn--ghost itps-btn--lg">Falar com vendas</button>
</div>
</section>