feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,83 @@
+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"
+        />
+
+        {/* Process Steps Timeline */}
+        <div className="relative mt-12">
+          {/* Desktop connecting line (only if few steps, otherwise wrap) */}
+          {steps.length <= 4 && (
+            <div className="hidden lg:block absolute top-10 left-[12%] right-[12%] h-0.5 bg-slate-200 z-0" />
+          )}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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">
+                  {/* Circle Badge with Icon & Number */}
+                  <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 Number */}
+                    <span className="absolute -top-1.5 -right-1.5 size-6 rounded-full bg-cta text-white text-xs font-bold flex items-center justify-center font-heading border-2 border-white shadow-sm">
+                      {step.number}
+                    </span>
+                    <Icon className="size-8 group-hover:scale-110 transition-transform duration-300" />
+                  </div>
+
+                  {/* Title & Description */}
+                  <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>
+  );
+}