Blocks
Pricing Cards
3 tiers de pricing — free, pro highlighted, enterprise. Inclui feature list com check icons.
3-tier pricing — middle card destacado com border primary.
Free
Pra começar
R$ 0/mês
- 1 projeto
- Comunidade
Pro
Pra time crescendo
R$ 89/mês
- Projetos ilimitados
- Suporte priority
- Integrações avançadas
Enterprise
Pra organizações
Custom
- SSO/SAML
- SLA dedicado
- CSM
<section class="grid grid-cols-1 gap-6 md:grid-cols-3">
<article class="flex flex-col gap-5 rounded-2xl border border-border bg-card p-7">
<header class="flex flex-col gap-1">
<h3 class="text-lg font-semibold text-foreground">Free</h3>
<p class="text-sm text-muted-foreground">Pra começar</p>
</header>
<p class="flex items-baseline gap-1"><span class="text-4xl font-bold text-foreground">R$ 0</span><span class="text-sm text-muted-foreground">/mês</span></p>
<ul class="flex flex-col gap-2 text-sm text-foreground">
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> 1 projeto</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Comunidade</li>
</ul>
<button class="itps-btn itps-btn--ghost mt-auto">Começar</button>
</article>
<article class="flex flex-col gap-5 rounded-2xl border-2 border-brand bg-card p-7 shadow-medium">
<header class="flex items-start justify-between">
<div class="flex flex-col gap-1">
<h3 class="text-lg font-semibold text-foreground">Pro</h3>
<p class="text-sm text-muted-foreground">Pra time crescendo</p>
</div>
<span class="itps-chip itps-chip--primary uppercase">Popular</span>
</header>
<p class="flex items-baseline gap-1"><span class="text-4xl font-bold text-foreground">R$ 89</span><span class="text-sm text-muted-foreground">/mês</span></p>
<ul class="flex flex-col gap-2 text-sm text-foreground">
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Projetos ilimitados</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Suporte priority</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Integrações avançadas</li>
</ul>
<button class="itps-btn itps-btn--primary mt-auto">Assinar Pro</button>
</article>
<article class="flex flex-col gap-5 rounded-2xl border border-border bg-card p-7">
<header class="flex flex-col gap-1">
<h3 class="text-lg font-semibold text-foreground">Enterprise</h3>
<p class="text-sm text-muted-foreground">Pra organizações</p>
</header>
<p class="flex items-baseline gap-1"><span class="text-4xl font-bold text-foreground">Custom</span></p>
<ul class="flex flex-col gap-2 text-sm text-foreground">
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> SSO/SAML</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> SLA dedicado</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> CSM</li>
</ul>
<button class="itps-btn itps-btn--ghost mt-auto">Falar com vendas</button>
</article>
</section>
<section class="grid grid-cols-1 gap-6 md:grid-cols-3">
<article class="flex flex-col gap-5 rounded-2xl border border-border bg-card p-7">
<header class="flex flex-col gap-1">
<h3 class="text-lg font-semibold text-foreground">Free</h3>
<p class="text-sm text-muted-foreground">Pra começar</p>
</header>
<p class="flex items-baseline gap-1"><span class="text-4xl font-bold text-foreground">R$ 0</span><span class="text-sm text-muted-foreground">/mês</span></p>
<ul class="flex flex-col gap-2 text-sm text-foreground">
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> 1 projeto</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Comunidade</li>
</ul>
<button class="itps-btn itps-btn--ghost mt-auto">Começar</button>
</article>
<article class="flex flex-col gap-5 rounded-2xl border-2 border-brand bg-card p-7 shadow-medium">
<header class="flex items-start justify-between">
<div class="flex flex-col gap-1">
<h3 class="text-lg font-semibold text-foreground">Pro</h3>
<p class="text-sm text-muted-foreground">Pra time crescendo</p>
</div>
<span class="itps-chip itps-chip--primary uppercase">Popular</span>
</header>
<p class="flex items-baseline gap-1"><span class="text-4xl font-bold text-foreground">R$ 89</span><span class="text-sm text-muted-foreground">/mês</span></p>
<ul class="flex flex-col gap-2 text-sm text-foreground">
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Projetos ilimitados</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Suporte priority</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> Integrações avançadas</li>
</ul>
<button class="itps-btn itps-btn--primary mt-auto">Assinar Pro</button>
</article>
<article class="flex flex-col gap-5 rounded-2xl border border-border bg-card p-7">
<header class="flex flex-col gap-1">
<h3 class="text-lg font-semibold text-foreground">Enterprise</h3>
<p class="text-sm text-muted-foreground">Pra organizações</p>
</header>
<p class="flex items-baseline gap-1"><span class="text-4xl font-bold text-foreground">Custom</span></p>
<ul class="flex flex-col gap-2 text-sm text-foreground">
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> SSO/SAML</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> SLA dedicado</li>
<li class="flex items-center gap-2"><i class="ti ti-circle-check text-success-default" style="font-size:18px"></i> CSM</li>
</ul>
<button class="itps-btn itps-btn--ghost mt-auto">Falar com vendas</button>
</article>
</section><section class="grid grid-cols-1 gap-6 md:grid-cols-3">…</section>
<section class="grid grid-cols-1 gap-6 md:grid-cols-3">…</section>