Blocks
Feature Grid
Grid 3 colunas de features com ícone, título e descrição. Marketing classic.
3-up feature grid — ícone tinted, título, descrição muted.
Por que Sinapse
Tudo que time de produto precisa, sem o ruído.
Setup em 1 minuto
Um comando, zero config. Comece a shipar imediatamente.
A11y por padrão
Componentes WCAG AA out-of-the-box. Não precisa pensar.
Dark mode nativo
Tokens state-aware. Light/dark sem refactor.
<section class="flex flex-col gap-10 py-16">
<header class="flex max-w-2xl flex-col gap-3 text-center mx-auto">
<h2 class="text-4xl font-bold tracking-tight text-foreground">Por que Sinapse</h2>
<p class="text-lg text-muted-foreground">Tudo que time de produto precisa, sem o ruído.</p>
</header>
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-bolt flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">Setup em 1 minuto</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Um comando, zero config. Comece a shipar imediatamente.</p>
</div>
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-accessible flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">A11y por padrão</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Componentes WCAG AA out-of-the-box. Não precisa pensar.</p>
</div>
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-moon flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">Dark mode nativo</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Tokens state-aware. Light/dark sem refactor.</p>
</div>
</div>
</section>
<section class="flex flex-col gap-10 py-16">
<header class="flex max-w-2xl flex-col gap-3 text-center mx-auto">
<h2 class="text-4xl font-bold tracking-tight text-foreground">Por que Sinapse</h2>
<p class="text-lg text-muted-foreground">Tudo que time de produto precisa, sem o ruído.</p>
</header>
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-bolt flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">Setup em 1 minuto</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Um comando, zero config. Comece a shipar imediatamente.</p>
</div>
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-accessible flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">A11y por padrão</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Componentes WCAG AA out-of-the-box. Não precisa pensar.</p>
</div>
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-moon flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">Dark mode nativo</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Tokens state-aware. Light/dark sem refactor.</p>
</div>
</div>
</section><section class="flex flex-col gap-10 py-16">
<header class="flex max-w-2xl flex-col gap-3 text-center mx-auto">
<h2 class="text-4xl font-bold tracking-tight text-foreground">Por que Sinapse</h2>
<p class="text-lg text-muted-foreground">Tudo que time de produto precisa, sem o ruído.</p>
</header>
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-bolt flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">Setup em 1 minuto</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Um comando, zero config.</p>
</div>
</div>
</section>
<section class="flex flex-col gap-10 py-16">
<header class="flex max-w-2xl flex-col gap-3 text-center mx-auto">
<h2 class="text-4xl font-bold tracking-tight text-foreground">Por que Sinapse</h2>
<p class="text-lg text-muted-foreground">Tudo que time de produto precisa, sem o ruído.</p>
</header>
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<div class="flex flex-col gap-3 rounded-2xl border border-border bg-card p-6">
<i class="ti ti-bolt flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-default text-secondary-default"></i>
<h3 class="text-lg font-semibold text-foreground">Setup em 1 minuto</h3>
<p class="text-sm leading-relaxed text-muted-foreground">Um comando, zero config.</p>
</div>
</div>
</section>