45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
export default function StainingProcess() {
|
|
const steps = [
|
|
{
|
|
num: "01",
|
|
title: "Quote & assess",
|
|
desc: "We review your fence, deck, or structure — in person or from photos — and provide a clear quote covering prep, product, labour, and timeline. No hidden steps added later."
|
|
},
|
|
{
|
|
num: "02",
|
|
title: "Clean & prep",
|
|
desc: "Every surface is cleaned and brightened with Expert Stain & Seal Clean & Bright before any stain is applied. Surrounding plants, surfaces, and structures are masked. The wood dries fully before we continue."
|
|
},
|
|
{
|
|
num: "03",
|
|
title: "Stain application",
|
|
desc: "Expert Stain & Seal is applied to the clean, open wood grain — one or two coats depending on wood age, condition, and absorption. We work methodically by section to ensure even coverage and no lap marks."
|
|
},
|
|
{
|
|
num: "04",
|
|
title: "Walkthrough & done",
|
|
desc: "We walk the finished project with you before we leave — checking coverage, any areas of concern, and reviewing care instructions. You only sign off when you're satisfied with the result."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="process-section" id="process">
|
|
<div className="reveal">
|
|
<div className="section-eyebrow text-white-50">How every job runs</div>
|
|
<h2 className="sh sh-white">Our staining process —<br /><span>no shortcuts.</span></h2>
|
|
</div>
|
|
<div className="process-grid reveal">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="process-step">
|
|
<div className="step-num">{step.num}</div>
|
|
<div className="step-title">{step.title}</div>
|
|
<div className="step-desc">{step.desc}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|