100 lines
3.5 KiB
TypeScript
100 lines
3.5 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() {
|
||
const items: QA[] = [
|
||
{
|
||
q: "Do I need to sign a long contract?",
|
||
a: "No. Plans are month-to-month with a 30-day cancel policy. You’ll also receive an exit plan and full documentation for a smooth handover if you ever switch providers.",
|
||
},
|
||
{
|
||
q: "Do you migrate from my current host?",
|
||
a: "Yes. We schedule a zero-downtime migration window, pre-configure backups and monitoring, and verify stability after cutover.",
|
||
},
|
||
{
|
||
q: "What happens if you miss an SLA?",
|
||
a: "You receive incident credits on your next invoice. The credit amount scales with severity and plan level — our uptime and response guarantees are real.",
|
||
},
|
||
{
|
||
q: "Do you host WordPress and Next.js?",
|
||
a: "Yes. We manage WordPress and modern Next.js hosting, including updates, uptime monitoring, and restore-tested backups.",
|
||
},
|
||
{
|
||
q: "Are you GDPR compliant?",
|
||
a: "Yes. We sign a DPA, follow least-privilege access, and maintain audit logs. Privacy and cookie templates are available on request.",
|
||
},
|
||
{
|
||
q: "Can you help outside business hours?",
|
||
a: "Mission-Critical includes 24/7 paging. Ad-hoc after-hours support is also available for Essential and Growth clients on request.",
|
||
},
|
||
];
|
||
|
||
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>
|
||
);
|
||
}
|