70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
type QA = { q: string; a: string };
|
|
|
|
function slugify(input: string) {
|
|
return input
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9\s-]/g, "")
|
|
.trim()
|
|
.replace(/\s+/g, "-")
|
|
.slice(0, 80);
|
|
}
|
|
|
|
export default function FAQ({ items }: { items: QA[] }) {
|
|
return (
|
|
<section
|
|
aria-labelledby="faq-heading"
|
|
className="relative py-24 bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950"
|
|
>
|
|
<div className="container mx-auto max-w-4xl px-4">
|
|
<h2
|
|
id="faq-heading"
|
|
className="text-3xl sm:text-4xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent text-center"
|
|
>
|
|
Frequently Asked Questions
|
|
</h2>
|
|
|
|
<div className="mt-10 space-y-4">
|
|
{items.map((x, i) => {
|
|
const id = slugify(x.q) || `faq-${i}`;
|
|
return (
|
|
<details
|
|
key={id}
|
|
id={id}
|
|
className="group rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-5 shadow-sm hover:shadow-md transition"
|
|
>
|
|
<summary className="cursor-pointer text-lg font-medium text-neutral-900 dark:text-white flex items-center justify-between">
|
|
<span>{x.q}</span>
|
|
<span className="ml-4 select-none transition-transform group-open:rotate-180" aria-hidden="true">
|
|
⌄
|
|
</span>
|
|
</summary>
|
|
<div className="mt-3 text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">
|
|
{x.a}
|
|
</div>
|
|
</details>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<p className="mt-10 text-center text-sm text-neutral-600 dark:text-neutral-400">
|
|
Still have questions?{" "}
|
|
<a
|
|
href="/contact"
|
|
className="font-medium text-blue-600 hover:underline"
|
|
>
|
|
Contact us
|
|
</a>{" "}
|
|
or{" "}
|
|
<a
|
|
href="/pricing"
|
|
className="font-medium text-blue-600 hover:underline"
|
|
>
|
|
see Pricing & SLA
|
|
</a>
|
|
.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|