Blocks
FAQ Accordion
Lista de perguntas frequentes em accordion nativo HTML (details/summary). Zero JS.
FAQ usando <details>/<summary> nativos — chevron rotation via [open] selector.
Posso cancelar quando quiser?
Sim. Cancele com 1 clique no painel — sem fidelidade nem multa.
Tem trial grátis?
14 dias grátis no plano Pro, sem cartão. Depois você decide.
Os dados ficam onde?
Brasil (São Paulo) ou EUA (Virginia) — você escolhe na hora de criar workspace.
<section class="flex flex-col gap-3">
<details class="group rounded-xl border border-border bg-card p-5 [&[open]>summary>i]:rotate-180">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Posso cancelar quando quiser?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform" style="font-size:20px"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Sim. Cancele com 1 clique no painel — sem fidelidade nem multa.</p>
</details>
<details class="group rounded-xl border border-border bg-card p-5 [&[open]>summary>i]:rotate-180">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Tem trial grátis?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform" style="font-size:20px"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">14 dias grátis no plano Pro, sem cartão. Depois você decide.</p>
</details>
<details class="group rounded-xl border border-border bg-card p-5 [&[open]>summary>i]:rotate-180">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Os dados ficam onde?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform" style="font-size:20px"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Brasil (São Paulo) ou EUA (Virginia) — você escolhe na hora de criar workspace.</p>
</details>
</section>
<section class="flex flex-col gap-3">
<details class="group rounded-xl border border-border bg-card p-5 [&[open]>summary>i]:rotate-180">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Posso cancelar quando quiser?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform" style="font-size:20px"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Sim. Cancele com 1 clique no painel — sem fidelidade nem multa.</p>
</details>
<details class="group rounded-xl border border-border bg-card p-5 [&[open]>summary>i]:rotate-180">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Tem trial grátis?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform" style="font-size:20px"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">14 dias grátis no plano Pro, sem cartão. Depois você decide.</p>
</details>
<details class="group rounded-xl border border-border bg-card p-5 [&[open]>summary>i]:rotate-180">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Os dados ficam onde?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform" style="font-size:20px"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Brasil (São Paulo) ou EUA (Virginia) — você escolhe na hora de criar workspace.</p>
</details>
</section><details class="group rounded-xl border border-border bg-card p-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Posso cancelar quando quiser?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Sim. Cancele com 1 clique.</p>
</details>
<details class="group rounded-xl border border-border bg-card p-5">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
<span class="text-base font-medium text-foreground">Posso cancelar quando quiser?</span>
<i class="ti ti-chevron-down text-muted-foreground transition-transform"></i>
</summary>
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">Sim. Cancele com 1 clique.</p>
</details>