106 lines
4.5 KiB
TypeScript
106 lines
4.5 KiB
TypeScript
"use client";
|
||
import Link from 'next/link';
|
||
|
||
export default function Hero() {
|
||
return (
|
||
<section className="hero">
|
||
<div className="hero-pattern"></div>
|
||
<div className="hero-accent"></div>
|
||
<div className="hero-accent2"></div>
|
||
|
||
<div className="hero-left">
|
||
<div className="hero-eyebrow">Kitchener–Waterloo Region · Ontario</div>
|
||
<h1 className="hero-h1">
|
||
Ontario's B2B<br />
|
||
<em>Fence Supply</em><br />
|
||
Partner
|
||
</h1>
|
||
<p className="hero-sub">
|
||
Supplying contractors, builders, and property managers across Ontario with{' '}
|
||
<strong>chain link, ornamental, composite, glass railing, and stain products</strong> —
|
||
with same-day job site delivery across a 250km radius from KWC.
|
||
</p>
|
||
<div className="hero-btns">
|
||
<Link href="#quote" className="btn-primary">Request contractor pricing</Link>
|
||
<Link href="/products" className="btn-secondary">View all products</Link>
|
||
</div>
|
||
<div className="hero-stats">
|
||
<div>
|
||
<div className="stat-val">3+</div>
|
||
<div className="stat-label">Years serving KWC</div>
|
||
</div>
|
||
<div>
|
||
<div className="stat-val">250km</div>
|
||
<div className="stat-label">Delivery radius</div>
|
||
</div>
|
||
<div>
|
||
<div className="stat-val">9+</div>
|
||
<div className="stat-label">Product lines</div>
|
||
</div>
|
||
<div>
|
||
<div className="stat-val">B2B</div>
|
||
<div className="stat-label">Contractor focus</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-right" id="quote">
|
||
<div className="quote-card">
|
||
<div className="quote-card-title">Request a quote</div>
|
||
<div className="quote-card-sub">Response within 2 business hours · Contractor pricing available</div>
|
||
<form className="quote-form">
|
||
<div className="form-row">
|
||
<div className="form-group">
|
||
<label className="form-label">Company name</label>
|
||
<input className="form-input" type="text" placeholder="ABC Fence Co." />
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Your name</label>
|
||
<input className="form-input" type="text" placeholder="John Smith" />
|
||
</div>
|
||
</div>
|
||
<div className="form-row">
|
||
<div className="form-group">
|
||
<label className="form-label">Phone</label>
|
||
<input className="form-input" type="tel" placeholder="519-xxx-xxxx" />
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Email</label>
|
||
<input className="form-input" type="email" placeholder="you@company.com" />
|
||
</div>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Product needed</label>
|
||
<select className="form-select">
|
||
<option value="">Select a product...</option>
|
||
<option>Aluminum railing</option>
|
||
<option>Chain link fence — commercial</option>
|
||
<option>Chain link fence — residential</option>
|
||
<option>Composite fence</option>
|
||
<option>Expert Stain & Seal products</option>
|
||
<option>Fence armor (post caps / guards)</option>
|
||
<option>Glass railing</option>
|
||
<option>Ornamental / iron fence</option>
|
||
<option>Temporary fence rental</option>
|
||
<option>Multiple products</option>
|
||
</select>
|
||
</div>
|
||
<div className="form-row">
|
||
<div className="form-group">
|
||
<label className="form-label">Job site city</label>
|
||
<input className="form-input" type="text" placeholder="Kitchener, Guelph..." />
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Approximate quantity</label>
|
||
<input className="form-input" type="text" placeholder="e.g. 200 linear ft" />
|
||
</div>
|
||
</div>
|
||
<button type="submit" className="form-submit" onClick={(e) => e.preventDefault()}>Send quote request →</button>
|
||
<div className="form-note">Or call us directly · info@vgfenceproducts.com</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|