67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
|
|
const ChainLinkQuote = () => {
|
|
return (
|
|
<section className="quote-cta">
|
|
<div className="quote-inner">
|
|
<div className="quote-left">
|
|
<h2>Get chain link fence materials pricing.</h2>
|
|
<p>Fill in the quick form and we'll come back to you with contractor pricing within 2 business hours. Bulk orders welcome — we supply fence contractors, builders, and property managers across Ontario.</p>
|
|
</div>
|
|
<div className="quote-form-card">
|
|
<div className="q-form-title">Request a quote</div>
|
|
<div className="q-form-sub">Response within 2 business hours</div>
|
|
<div className="qrow">
|
|
<div>
|
|
<label className="ql">Company name</label>
|
|
<input className="qi" type="text" placeholder="ABC Fence Co." />
|
|
</div>
|
|
<div>
|
|
<label className="ql">Your name</label>
|
|
<input className="qi" type="text" placeholder="John Smith" />
|
|
</div>
|
|
</div>
|
|
<div className="qrow">
|
|
<div>
|
|
<label className="ql">Phone</label>
|
|
<input className="qi" type="tel" placeholder="519-xxx-xxxx" />
|
|
</div>
|
|
<div>
|
|
<label className="ql">Email</label>
|
|
<input className="qi" type="email" placeholder="you@company.com" />
|
|
</div>
|
|
</div>
|
|
<label className="ql">Material needed</label>
|
|
<select className="qi">
|
|
<option value="">Select material type...</option>
|
|
<option>Chain link mesh — galvanized</option>
|
|
<option>Chain link mesh — vinyl coated black</option>
|
|
<option>Posts (terminal & line)</option>
|
|
<option>Top rail</option>
|
|
<option>Gates & gate hardware</option>
|
|
<option>Hardware & fittings pack</option>
|
|
<option>Privacy slats</option>
|
|
<option>Barbed wire</option>
|
|
<option>Complete material package</option>
|
|
</select>
|
|
<div className="qrow">
|
|
<div>
|
|
<label className="ql">Job site city</label>
|
|
<input className="qi" type="text" placeholder="Kitchener, Guelph..." />
|
|
</div>
|
|
<div>
|
|
<label className="ql">Linear footage</label>
|
|
<input className="qi" type="text" placeholder="e.g. 300 linear ft" />
|
|
</div>
|
|
</div>
|
|
<button className="qbtn">Send quote request →</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ChainLinkQuote;
|