57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
interface ProcessStep {
|
|
num: string;
|
|
title: string;
|
|
desc: string;
|
|
}
|
|
|
|
interface ProcessSectionProps {
|
|
title: string;
|
|
steps: ProcessStep[];
|
|
}
|
|
|
|
export default function ProcessSection({ title, steps }: ProcessSectionProps) {
|
|
return (
|
|
<section className="py-8 sm:py-12 md:py-16 bg-gray-50">
|
|
<div className="max-w-6xl mx-auto px-4">
|
|
<div className="relative">
|
|
<div className="text-center mb-6 sm:mb-8">
|
|
<div className="inline-block bg-orange-500 text-white px-4 sm:px-6 md:px-8 py-2 sm:py-3 md:py-4 rounded-full text-lg sm:text-xl font-bold">
|
|
{title}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
className={`p-4 sm:p-6 rounded-lg border-2 ${
|
|
index % 2 === 0
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'bg-white text-gray-800 border-gray-300'
|
|
}`}
|
|
>
|
|
<div className="flex items-center mb-3 sm:mb-4">
|
|
<div
|
|
className={`w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center font-bold mr-2 sm:mr-3 text-sm sm:text-base ${
|
|
index % 2 === 0
|
|
? 'bg-white text-blue-600'
|
|
: 'bg-blue-600 text-white'
|
|
}`}
|
|
>
|
|
{step.num}
|
|
</div>
|
|
<h3 className="text-base sm:text-lg font-bold">
|
|
{step.title}
|
|
</h3>
|
|
</div>
|
|
<p className="text-xs sm:text-sm leading-relaxed">
|
|
{step.desc}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|