83 lines
3.5 KiB
TypeScript
83 lines
3.5 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { ChevronDown } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/cn';
|
||
|
|
|
||
|
|
const ITEMS = [
|
||
|
|
{
|
||
|
|
q: 'What makes eLegal Software different from other legal software?',
|
||
|
|
a: 'eLegal Software is built exclusively for legal professionals and bundles case management, billable-hours tracking, document storage, and invoicing into a single, secure platform — no jumping between tools, no per-feature add-ons.',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: 'Can I try eLegal Software before committing?',
|
||
|
|
a: 'Yes. The Starter plan is free forever and lets you manage one active case and two clients so you can experience the workflow end-to-end before upgrading.',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: 'How does client billing and payment processing work?',
|
||
|
|
a: 'You can convert any unbilled time entry into a polished invoice in seconds, send it to your client, and track its status from sent to paid. Payment processing is wired through Stripe.',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: 'Can I import my existing cases and client data?',
|
||
|
|
a: 'Yes. eLegal Software supports CSV imports for clients and cases. For larger migrations our team will assist directly during onboarding.',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: 'Is my client data secure and compliant?',
|
||
|
|
a: 'All data is encrypted at rest and in transit, hosted on enterprise-grade infrastructure with daily backups and audit logging. Access is gated by role-based permissions.',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
q: 'What happens if I need to cancel?',
|
||
|
|
a: 'You can cancel anytime from your billing settings. Your data remains accessible during the current billing period and can be exported in standard formats.',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
}
|