Spaces:
Running
Running
File size: 2,405 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
"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>
)
} |