71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
export default function Services() {
|
|
const services = [
|
|
{
|
|
num: "01",
|
|
name: "2D Fence",
|
|
span: "Drawing Services",
|
|
desc: "CAD-based fence layout drawings for residential and commercial projects. Perfect for permits, planning, and contractor submissions.",
|
|
bullets: [
|
|
"Residential & commercial layouts", "Chain link, wood & aluminum drawings",
|
|
"Gate placement & access planning", "Material takeoff & quantity estimation",
|
|
"Permit support drawings", "Property boundary fence design"
|
|
]
|
|
},
|
|
{
|
|
num: "02",
|
|
name: "Wood",
|
|
span: "Staining Services",
|
|
desc: "Professional application of Expert Stain & Seal products on fences, decks, pergolas, and outdoor structures.",
|
|
bullets: [
|
|
"Fence, deck & pergola staining", "New wood preparation & staining",
|
|
"Old wood restoration & re-staining", "Cedar & pressure treated staining",
|
|
"UV & waterproof sealing", "Color matching services"
|
|
]
|
|
},
|
|
{
|
|
num: "03",
|
|
name: "Temporary &",
|
|
span: "Site Services",
|
|
desc: "Complete temporary fencing solutions for construction sites, events, and emergencies across Ontario.",
|
|
bullets: [
|
|
"Temporary fence rental setup", "Construction site fence management",
|
|
"Beer gardens, festivals & events", "Emergency fence same-day KWC"
|
|
]
|
|
},
|
|
{
|
|
num: "04",
|
|
name: "Delivery &",
|
|
span: "Logistics",
|
|
desc: "Reliable material delivery across our 250km service radius with contractor accounts for streamlined ordering.",
|
|
bullets: [
|
|
"Scheduled job site delivery", "Bulk job site delivery",
|
|
"Contractor account ordering", "250km Ontario radius from KWC"
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="services-section" id="services">
|
|
<div className="reveal">
|
|
<div className="section-eyebrow">What we do</div>
|
|
<h2 className="sh white">More than just <span>supply.</span></h2>
|
|
</div>
|
|
|
|
<div className="services-grid reveal">
|
|
{services.map((service, index) => (
|
|
<div key={index} className="service-card">
|
|
<div className="service-num">{service.num}</div>
|
|
<div className="service-name">{service.name} <span>{service.span}</span></div>
|
|
<div className="service-desc">{service.desc}</div>
|
|
<ul className="service-list">
|
|
{service.bullets.map((bullet, bIndex) => (
|
|
<li key={bIndex}>{bullet}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|