michal.cukrowski/thermcool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement compare functionality, checkout flow, and add 30 blog posts

Browse Source
This commit is contained in:
MichalC
2026-06-27 18:09:22 +02:00
parent 6bdfe18e18
commit 0c59086a6b
63 changed files with 9766 additions and 1874 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/sections/ProcessSteps.tsx
+10 -8
View File
@@ -47,11 +47,8 @@ export function ProcessSteps({
{/* 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">
<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 (
@@ -59,10 +56,15 @@ export function ProcessSteps({
{/* 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" />
{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>
{/* Title & Description */}