Add complete project files
This commit is contained in:
56
components/process-steps.tsx
Executable file
56
components/process-steps.tsx
Executable file
@@ -0,0 +1,56 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user