57 lines
1.9 KiB
TypeScript
Executable File
57 lines
1.9 KiB
TypeScript
Executable File
import { Calendar, Upload, CheckCircle } from 'lucide-react';
|
|
|
|
const steps = [
|
|
{
|
|
id: 1,
|
|
name: 'Book',
|
|
description: 'Schedule your consultation with our tax experts',
|
|
icon: Calendar,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Prepare',
|
|
description: 'Securely upload your documents and we prepare your returns',
|
|
icon: Upload,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Delivered',
|
|
description: 'Receive your completed returns with detailed explanations',
|
|
icon: CheckCircle,
|
|
},
|
|
];
|
|
|
|
export function ProcessSteps() {
|
|
return (
|
|
<div className="bg-cloud py-16 sm:py-20">
|
|
<div className="mx-auto max-w-7xl px-4 lg:px-6">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-ink sm:text-4xl">
|
|
Simple 3-Step Process
|
|
</h2>
|
|
<p className="mt-6 text-lg leading-8 text-slate">
|
|
We make tax preparation straightforward and stress-free. Here's how we work together to get your taxes done right.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto mt-12 max-w-2xl sm:mt-16 lg:mt-20 lg:max-w-none">
|
|
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
|
{steps.map((step) => (
|
|
<div key={step.id} className="flex flex-col">
|
|
<dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-ink">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-navy">
|
|
<step.icon className="h-6 w-6 text-cloud" aria-hidden="true" />
|
|
</div>
|
|
Step {step.id}: {step.name}
|
|
</dt>
|
|
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-slate">
|
|
<p className="flex-auto">{step.description}</p>
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|