Spaces:
Running
Running
deepsite
/
Website-Generation-Request (1)
/src
/components
/blocks
/process
/installation-process.tsx
"use client" | |
import { ClipboardCheck, Ruler, Wrench, CheckCircle } from 'lucide-react' | |
const steps = [ | |
{ | |
id: 1, | |
title: "Consultation & Assessment", | |
description: "Free on-site evaluation and product recommendation", | |
icon: ClipboardCheck | |
}, | |
{ | |
id: 2, | |
title: "Precision Measurement", | |
description: "Accurate templating for perfect fit and coverage", | |
icon: Ruler | |
}, | |
{ | |
id: 3, | |
title: "Expert Installation", | |
description: "Professional application using specialized tools and techniques", | |
icon: Wrench | |
}, | |
{ | |
id: 4, | |
title: "Quality Inspection", | |
description: "Thorough check to ensure flawless finish and performance", | |
icon: CheckCircle | |
} | |
] | |
export default function InstallationProcess() { | |
return ( | |
<section className="bg-white py-16 px-4 sm:px-6 lg:px-8"> | |
<div className="max-w-7xl mx-auto"> | |
{/* Header */} | |
<div className="text-center mb-12"> | |
<h2 className="text-3xl font-bold text-gray-900 mb-4 font-[var(--font-inter)]"> | |
Professional Installation Process | |
</h2> | |
<p className="text-lg text-gray-600 max-w-2xl mx-auto font-[var(--font-inter)]"> | |
Our certified technicians ensure perfect installation every time. | |
</p> | |
</div> | |
{/* Steps */} | |
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
{steps.map((step) => ( | |
<div key={step.id} className="text-center"> | |
{/* Step Number Circle */} | |
<div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<span className="text-white font-bold text-xl font-[var(--font-inter)]"> | |
{step.id} | |
</span> | |
</div> | |
{/* Icon */} | |
<div className="mb-4"> | |
<step.icon className="w-8 h-8 text-red-600 mx-auto" /> | |
</div> | |
{/* Content */} | |
<div> | |
<h3 className="text-xl font-semibold text-gray-900 mb-3 font-[var(--font-inter)]"> | |
{step.title} | |
</h3> | |
<p className="text-gray-600 leading-relaxed font-[var(--font-inter)]"> | |
{step.description} | |
</p> | |
</div> | |
</div> | |
))} | |
</div> | |
</div> | |
</section> | |
) | |
} |