243 lines
12 KiB
TypeScript
243 lines
12 KiB
TypeScript
import Link from 'next/link';
|
||
|
||
export default function Home() {
|
||
return (
|
||
<>
|
||
{/* HERO */}
|
||
<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>
|
||
<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 className="form-submit">Send quote request →</button>
|
||
<div className="form-note">Or call us directly · info@vgfenceproducts.com</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* TRUST BAR */}
|
||
<div className="trust-bar">
|
||
<div className="trust-item"><span className="trust-icon">🚚</span> Same-day job site delivery</div>
|
||
<div className="trust-item"><span className="trust-icon">📐</span> 2D fence drawing services</div>
|
||
<div className="trust-item"><span className="trust-icon">🏗️</span> Contractor accounts available</div>
|
||
<div className="trust-item"><span className="trust-icon">📍</span> Serving 250km across Ontario</div>
|
||
<div className="trust-item"><span className="trust-icon">⭐</span> 3+ years serving KWC</div>
|
||
</div>
|
||
|
||
{/* PRODUCTS PREVIEW */}
|
||
<section className="products-section" id="products">
|
||
<div className="products-header">
|
||
<div>
|
||
<div className="section-eyebrow">Our products</div>
|
||
<h2 className="section-h2">Everything you<br />need to <span>build.</span></h2>
|
||
</div>
|
||
<p style={{ fontSize: '15px', color: 'var(--gray-600)', maxWidth: '340px', lineHeight: '1.7' }}>
|
||
Nine product lines in stock, ready for same-day or scheduled delivery to your job site anywhere in our 250km radius.
|
||
</p>
|
||
</div>
|
||
<div className="products-grid">
|
||
{/* Card 1 */}
|
||
<Link href="/products" className="product-card">
|
||
<div className="product-icon">
|
||
<svg viewBox="0 0 22 22" fill="none"><rect x="1" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="9" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="1" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="1" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /></svg>
|
||
</div>
|
||
<div className="product-name">Aluminum railing</div>
|
||
<div className="product-desc">Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.</div>
|
||
<div className="product-tags"><span className="product-tag">Residential</span><span className="product-tag">Commercial</span></div>
|
||
<div className="product-arrow">→</div>
|
||
</Link>
|
||
|
||
{/* Card 2 */}
|
||
<Link href="/products" className="product-card">
|
||
<div className="product-icon">
|
||
<svg viewBox="0 0 22 22" fill="none"><rect x="2" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="2" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="2" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /><line x1="8" y1="3" x2="8" y2="19" stroke="white" strokeWidth="1.5" /><line x1="14" y1="3" x2="14" y2="19" stroke="white" strokeWidth="1.5" /></svg>
|
||
</div>
|
||
<div className="product-name">Chain link fence</div>
|
||
<div className="product-desc">Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.</div>
|
||
<div className="product-tags"><span className="product-tag">Black</span><span className="product-tag">Galvanized</span><span className="product-tag">Commercial</span></div>
|
||
<div className="product-arrow">→</div>
|
||
</Link>
|
||
|
||
{/* Card 3 */}
|
||
<div className="product-card" style={{ background: 'var(--navy)' }}>
|
||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
|
||
<div>
|
||
<div style={{ fontFamily: 'var(--font-display)', fontSize: '13px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '16px' }}>Need a custom quote?</div>
|
||
<div style={{ fontFamily: 'var(--font-display)', fontSize: '26px', fontWeight: 800, textTransform: 'uppercase', color: 'var(--white)', lineHeight: 1.1, marginBottom: '12px' }}>Talk to our<br />supply team.</div>
|
||
<div style={{ fontSize: '13px', color: 'rgba(255,255,255,.55)', lineHeight: 1.6 }}>Bulk orders · Contractor accounts · Scheduled deliveries · Job site planning</div>
|
||
</div>
|
||
<Link href="/#quote" className="btn-primary" style={{ textAlign: 'center', marginTop: '24px', display: 'block' }}>Request pricing →</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SERVICES */}
|
||
<section className="services-section" id="services">
|
||
<div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>
|
||
What we do
|
||
</div>
|
||
<h2 className="section-h2">More than just <span>supply.</span></h2>
|
||
<div className="services-grid">
|
||
<div className="service-card">
|
||
<div className="service-num">01</div>
|
||
<div className="service-name">2D Fence <span>Drawing Services</span></div>
|
||
<div className="service-desc">CAD-based fence layout drawings for residential and commercial projects.</div>
|
||
<ul className="service-list">
|
||
<li>Residential & commercial layouts</li>
|
||
<li>Material takeoff & quantity estimation</li>
|
||
<li>Permit support drawings</li>
|
||
</ul>
|
||
</div>
|
||
<div className="service-card">
|
||
<div className="service-num">02</div>
|
||
<div className="service-name">Wood <span>Staining Services</span></div>
|
||
<div className="service-desc">Professional application of Expert Stain & Seal products on outdoor structures.</div>
|
||
<ul className="service-list">
|
||
<li>Fence, deck & pergola staining</li>
|
||
<li>New wood preparation & staining</li>
|
||
<li>Maintenance & restoration</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* TERRITORY */}
|
||
<section className="territory-section" id="territory">
|
||
<div className="section-eyebrow">Quick Delivery</div>
|
||
<h2 className="section-h2">Across <span>Ontario.</span></h2>
|
||
<div className="territory-layout">
|
||
<div className="city-list">
|
||
<div className="city-item">
|
||
<div className="city-dot home"></div>
|
||
<div className="city-info">
|
||
<div className="city-name-txt">Kitchner / Waterloo</div>
|
||
<div className="city-sub-txt">Home Depot & Job Site Base</div>
|
||
</div>
|
||
<div className="city-dist-badge">BASE</div>
|
||
</div>
|
||
<div className="city-item">
|
||
<div className="city-dot near"></div>
|
||
<div className="city-info">
|
||
<div className="city-name-txt">Guelph / Cambridge</div>
|
||
<div className="city-sub-txt">Immediate 1-hour Delivery</div>
|
||
</div>
|
||
<div className="city-dist-badge">20KM</div>
|
||
</div>
|
||
<div className="city-item">
|
||
<div className="city-dot far"></div>
|
||
<div className="city-info">
|
||
<div className="city-name-txt">Toronto / GTA</div>
|
||
<div className="city-sub-txt">Same-day Delivery Available</div>
|
||
</div>
|
||
<div className="city-dist-badge">110KM</div>
|
||
</div>
|
||
</div>
|
||
<div className="territory-map-wrap">
|
||
<div className="radius-label">250km Service Radius</div>
|
||
<div style={{ height: '300px', background: 'var(--gray-100)', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyCenter: 'center', color: 'var(--gray-400)', fontSize: '14px' }}>
|
||
[Interactive Region Map Integration]
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<section className="cta-section">
|
||
<h2 className="cta-h2">Ready to <span>start?</span></h2>
|
||
<p className="cta-sub">Join hundreds of Ontario contractors who trust VG Fence for their supply needs.</p>
|
||
<div className="cta-btns">
|
||
<Link href="/login" className="btn-white">Create Account</Link>
|
||
<Link href="/#quote" className="btn-white-outline">Get a Quote Now</Link>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|