81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
export default function Services() {
|
|
const services = [
|
|
{
|
|
num: "01",
|
|
name: "2D Fence Drawing Services",
|
|
desc: "CAD-based fence layout drawings for residential and commercial projects. Perfect for permits, planning, and contractor submissions.",
|
|
list: [
|
|
"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 Staining Services",
|
|
desc: "Professional application of Expert Stain & Seal products on fences, decks, pergolas, and outdoor structures.",
|
|
list: [
|
|
"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 & Site Services",
|
|
desc: "Complete temporary fencing solutions for construction sites, events, and emergency situations across Ontario.",
|
|
list: [
|
|
"Temporary fence rental setup",
|
|
"Construction site fence management",
|
|
"Site safety barrier installation",
|
|
"Emergency fence repair service"
|
|
]
|
|
},
|
|
{
|
|
num: "04",
|
|
name: "Delivery & Logistics",
|
|
desc: "Reliable material delivery across our 250km service radius. Same-day local, bulk job site, and scheduled contractor deliveries.",
|
|
list: [
|
|
"Same-day delivery (local KWC)",
|
|
"Bulk job site delivery",
|
|
"Scheduled contractor deliveries",
|
|
"Small order pickup support"
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="services-section" id="services">
|
|
<div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>
|
|
<span style={{ background: 'rgba(255,255,255,.1)', width: '24px', height: '2px', display: 'inline-block', verticalAlign: 'middle', marginRight: '8px' }}></span>
|
|
What we do
|
|
</div>
|
|
<h2 className="section-h2">More than just <span>supply.</span></h2>
|
|
<div className="services-grid">
|
|
{services.map((service, index) => (
|
|
<div key={index} className="service-card">
|
|
<div className="service-num">{service.num}</div>
|
|
<div className="service-name">
|
|
{service.name.split(' ').map((word, wIndex) => (
|
|
wIndex >= 1 ? <span key={wIndex}> {word}</span> : word
|
|
))}
|
|
</div>
|
|
<div className="service-desc">{service.desc}</div>
|
|
<ul className="service-list">
|
|
{service.list.map((item, lIndex) => (
|
|
<li key={lIndex}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|