80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
import {
|
|
PhoneCall, ClipboardCheck, Cpu, HeartHandshake, HelpCircle,
|
|
ShieldAlert, Construction, Layers, MonitorDown, Server, Gauge, Zap, BookOpen
|
|
} from "lucide-react";
|
|
import { SectionHeading } from "../common/SectionHeading";
|
|
import { mainProcessSteps } from "@/content/process";
|
|
import { ProcessStep } from "@/types/types";
|
|
|
|
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
|
PhoneCall,
|
|
ClipboardCheck,
|
|
Cpu,
|
|
HeartHandshake,
|
|
ShieldAlert,
|
|
Construction,
|
|
Layers,
|
|
MonitorDown,
|
|
Server,
|
|
Gauge,
|
|
Zap,
|
|
BookOpen,
|
|
};
|
|
|
|
interface ProcessStepsProps {
|
|
steps?: ProcessStep[];
|
|
title?: string;
|
|
subtitle?: string;
|
|
eyebrow?: string;
|
|
}
|
|
|
|
export function ProcessSteps({
|
|
steps = mainProcessSteps,
|
|
title = "Prosty proces współpracy w 4 krokach",
|
|
subtitle = "Od momentu kontaktu do pełnego uruchomienia i serwisu — dbamy o każdy detal na każdym etapie.",
|
|
eyebrow = "Jak Działamy"
|
|
}: ProcessStepsProps) {
|
|
return (
|
|
<section className="py-16 md:py-24 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<SectionHeading
|
|
eyebrow={eyebrow}
|
|
title={title}
|
|
subtitle={subtitle}
|
|
align="center"
|
|
/>
|
|
<div className="relative mt-12">
|
|
{/* Desktop connecting line (only if few steps, otherwise wrap) */}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-12 gap-x-8 relative z-10">
|
|
{steps.map((step, idx) => {
|
|
const Icon = iconMap[step.icon || ""] || HelpCircle;
|
|
return (
|
|
<div key={idx} className="flex flex-col items-center text-center group">
|
|
<div className="relative size-20 rounded-full bg-slate-50 border-2 border-slate-200 flex items-center justify-center text-primary group-hover:border-accent group-hover:bg-accent-light group-hover:text-accent transition-all duration-300 shadow-sm z-10">
|
|
{step.icon && iconMap[step.icon] && (
|
|
<span className="absolute -top-1.5 -right-1.5 size-6 rounded-full bg-accent text-white text-xs font-bold flex items-center justify-center font-heading border-2 border-white shadow-sm">
|
|
{step.number}
|
|
</span>
|
|
)}
|
|
{step.icon && iconMap[step.icon]
|
|
? <Icon className="size-8 group-hover:scale-110 transition-transform duration-300" />
|
|
: <span className="text-2xl font-extrabold font-heading text-accent">{step.number}</span>
|
|
}
|
|
</div>
|
|
<h3 className="text-lg font-bold text-primary font-heading mt-6 mb-2">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-sm text-text-muted leading-relaxed max-w-[240px]">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|