Leon SerfatyandClaude Fable 5
1f249dc126
CI / build-and-test (push) Has been cancelled
- Static prerender + sitemap/robots for marketing, blog, and tool pages (entry-server, Seo component, prerender/sitemap scripts, NotFoundPage) - Register aiRoutes and extend CSP for Turnstile + Spaces image hosts Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { cn } from '@/lib/cn';
|
|
// FAQ content lives in routes-meta so the FAQPage JSON-LD stays in lockstep with the UI.
|
|
import { FAQ_ITEMS as ITEMS } from '@/seo/routes-meta';
|
|
|
|
export function Faq() {
|
|
const [open, setOpen] = useState<number | null>(0);
|
|
|
|
return (
|
|
<section id="faq" className="section">
|
|
<div className="container">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<span className="eyebrow">FAQ</span>
|
|
<h2 className="mt-4 text-3xl md:text-5xl font-bold text-ink-950">
|
|
Frequently asked questions
|
|
</h2>
|
|
<p className="mt-4 text-lg text-ink-600">Everything you need to know about eLegal Software.</p>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-12 max-w-3xl divide-y divide-ink-100 rounded-2xl border border-ink-100 bg-white">
|
|
{ITEMS.map((item, i) => {
|
|
const isOpen = open === i;
|
|
return (
|
|
<div key={item.q}>
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center justify-between gap-4 px-6 py-5 text-left"
|
|
onClick={() => setOpen(isOpen ? null : i)}
|
|
aria-expanded={isOpen}
|
|
>
|
|
<span className="text-sm md:text-base font-semibold text-ink-900">{item.q}</span>
|
|
<ChevronDown
|
|
className={cn(
|
|
'h-4 w-4 flex-none text-ink-500 transition-transform',
|
|
isOpen && 'rotate-180 text-brand-500',
|
|
)}
|
|
/>
|
|
</button>
|
|
<div
|
|
className={cn(
|
|
'grid overflow-hidden transition-all duration-300 ease-out',
|
|
isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
|
|
)}
|
|
>
|
|
<div className="min-h-0">
|
|
<p className="px-6 pb-5 text-sm text-ink-600 leading-relaxed">{item.a}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|