1000 lines
59 KiB
TypeScript
1000 lines
59 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import Link from 'next/link';
|
||
import axios from 'axios';
|
||
import './temporary-fencing.css';
|
||
|
||
export default function TemporaryFencingClient() {
|
||
const [activeSection, setActiveSection] = useState('panels');
|
||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||
const [formData, setFormData] = useState({
|
||
company: '',
|
||
name: '',
|
||
phone: '',
|
||
email: '',
|
||
type: '',
|
||
city: '',
|
||
panels: '',
|
||
requirements: ''
|
||
});
|
||
const [formStatus, setFormStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||
|
||
useEffect(() => {
|
||
// Scroll reveal observer
|
||
const revealObs = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.08 });
|
||
|
||
document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el));
|
||
|
||
// Subnav scrollspy observer
|
||
const sysIds = ['panels', 'gates', 'screens', 'accessories', 'who-we-serve', 'territory', 'quote-section'];
|
||
const navObs = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
setActiveSection(e.target.id);
|
||
}
|
||
});
|
||
}, { threshold: 0.3 });
|
||
|
||
sysIds.forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) navObs.observe(el);
|
||
});
|
||
|
||
return () => {
|
||
revealObs.disconnect();
|
||
navObs.disconnect();
|
||
};
|
||
}, []);
|
||
|
||
const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
|
||
e.preventDefault();
|
||
const el = document.getElementById(id);
|
||
if (el) {
|
||
// Offset for sticky navs (approx 90px main header + 52px model nav + padding)
|
||
const offset = 160;
|
||
const bodyRect = document.body.getBoundingClientRect().top;
|
||
const elementRect = el.getBoundingClientRect().top;
|
||
const elementPosition = elementRect - bodyRect;
|
||
const offsetPosition = elementPosition - offset;
|
||
|
||
window.scrollTo({
|
||
top: offsetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
setActiveSection(id);
|
||
}
|
||
};
|
||
|
||
const toggleFaq = (idx: number) => {
|
||
setOpenFaq(openFaq === idx ? null : idx);
|
||
};
|
||
|
||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||
const { name, value } = e.target;
|
||
setFormData(prev => ({ ...prev, [name]: value }));
|
||
};
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
if (!formData.email || !formData.email.includes('@')) {
|
||
alert('Please enter a valid email address.');
|
||
return;
|
||
}
|
||
|
||
setFormStatus('submitting');
|
||
|
||
const emailData = {
|
||
name: formData.name,
|
||
phone: formData.phone,
|
||
email: formData.email,
|
||
service: formData.type || "Temporary Fence Quote Request",
|
||
message: `
|
||
<b>Company Name:</b> ${formData.company}<br />
|
||
<b>Contact Name:</b> ${formData.name}<br />
|
||
<b>Phone:</b> ${formData.phone}<br />
|
||
<b>Email:</b> ${formData.email}<br />
|
||
<b>Rental / Purchase Option:</b> ${formData.type}<br />
|
||
<b>Site City / Location:</b> ${formData.city}<br />
|
||
<b>Approx. Panels Needed:</b> ${formData.panels}<br />
|
||
<b>Additional Requirements:</b> ${formData.requirements}
|
||
`,
|
||
to: "info@vgfenceproducts.com",
|
||
senderName: "VG Fence Temporary Fencing Page Form",
|
||
};
|
||
|
||
try {
|
||
await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||
headers: { "Content-Type": "application/json" },
|
||
});
|
||
setFormStatus('success');
|
||
} catch (error) {
|
||
console.error("❌ Error sending temporary fencing quote request:", error);
|
||
setFormStatus('error');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="temporary-fencing-page">
|
||
{/* BREADCRUMB */}
|
||
{/* <nav className="breadcrumb" aria-label="Breadcrumb">
|
||
<Link href="/">Home</Link>
|
||
<span>›</span>
|
||
<Link href="/services">Services</Link>
|
||
<span>›</span>
|
||
<span>Temporary Fence Rental</span>
|
||
</nav> */}
|
||
|
||
{/* HERO */}
|
||
<section className="hero">
|
||
<div className="hero-grid-bg"></div>
|
||
<div className="hero-fence-deco"></div>
|
||
<div className="hero-accent"></div>
|
||
<div className="hero-inner">
|
||
<div className="hero-eyebrow">Temporary fence rental & sales · KWC Ontario</div>
|
||
<h1>
|
||
Site secure.<br />
|
||
<em>Delivered fast.</em>
|
||
</h1>
|
||
<p className="hero-desc">
|
||
<strong>Temporary fence rental and sales</strong> for construction sites, events, crowd control, and emergency situations. Full panel inventory, gates, privacy screens, and all accessories — available for <strong>short or long-term rental</strong> across 250km from Kitchener–Waterloo.
|
||
</p>
|
||
<div className="hero-badges">
|
||
<span className="badge badge-fill">Rental Available</span>
|
||
<span className="badge">Sales Available</span>
|
||
<span className="badge">6×10 & 6×5 Panels</span>
|
||
<span className="badge">Gates & Screens</span>
|
||
<span className="badge">250km Ontario Delivery</span>
|
||
</div>
|
||
<div className="hero-stats">
|
||
<div><div className="stat-val">18+</div><div className="stat-label">Product types</div></div>
|
||
<div><div className="stat-val">2</div><div className="stat-label">Panel sizes</div></div>
|
||
<div><div className="stat-val">250km</div><div className="stat-label">Ontario service radius</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* JUMP NAV */}
|
||
<div className="model-nav">
|
||
<a
|
||
className={`model-nav-item ${activeSection === 'panels' ? 'active' : ''}`}
|
||
href="#panels"
|
||
onClick={(e) => handleNavClick(e, 'panels')}
|
||
>
|
||
Panels
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === 'gates' ? 'active' : ''}`}
|
||
href="#gates"
|
||
onClick={(e) => handleNavClick(e, 'gates')}
|
||
>
|
||
Gates
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === 'screens' ? 'active' : ''}`}
|
||
href="#screens"
|
||
onClick={(e) => handleNavClick(e, 'screens')}
|
||
>
|
||
Screens & Safety
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === 'accessories' ? 'active' : ''}`}
|
||
href="#accessories"
|
||
onClick={(e) => handleNavClick(e, 'accessories')}
|
||
>
|
||
Accessories
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === 'who-we-serve' ? 'active' : ''}`}
|
||
href="#who-we-serve"
|
||
onClick={(e) => handleNavClick(e, 'who-we-serve')}
|
||
>
|
||
Who we serve
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === 'territory' ? 'active' : ''}`}
|
||
href="#territory"
|
||
onClick={(e) => handleNavClick(e, 'territory')}
|
||
>
|
||
Territory
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === 'quote-section' ? 'active' : ''}`}
|
||
href="#quote-section"
|
||
onClick={(e) => handleNavClick(e, 'quote-section')}
|
||
>
|
||
Get a quote
|
||
</a>
|
||
</div>
|
||
|
||
{/* INTRO */}
|
||
<section className="intro">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">About this service</div>
|
||
<h2 className="sh">Temporary fencing for every<br /><span>site and situation.</span></h2>
|
||
</div>
|
||
<div className="intro-grid">
|
||
<div className="intro-text reveal">
|
||
<p>
|
||
<strong>VG Fence Products supplies temporary fence panels, gates, screens, and all accessories</strong> for construction sites, renovation projects, events, and emergency situations across Waterloo Region and Ontario. Whether you need a single panel to block a pedestrian path or a full site perimeter fence for a large commercial project, we have the inventory and the delivery reach to get it done.
|
||
</p>
|
||
<p>
|
||
We offer both <strong>rental and purchase options</strong> depending on your project needs. Short-term jobs and events are better served by rental — buy makes more sense for ongoing site management or contractors who want their own permanent inventory. Privacy screens and safety fencing are available for purchase.
|
||
</p>
|
||
<p>
|
||
All temporary fence equipment is delivered and picked up on a schedule that works around your project timeline. Same-day setup is available in the KWC area — contact us to confirm availability.
|
||
</p>
|
||
<ul className="check-list">
|
||
<li>6×10 standard panels and compact 6×5 panels for tight spaces</li>
|
||
<li>Single, double, vehicle access, and pedestrian gates</li>
|
||
<li>Privacy screens in black and green — sales only</li>
|
||
<li>Printed custom branding fence screens available</li>
|
||
<li>Orange safety fence and snow fence available</li>
|
||
<li>Full hardware kit — bases, clamps, pins, sandbags, ties</li>
|
||
<li>Short and long-term rental or outright purchase</li>
|
||
<li>Delivery, setup, and pickup across 250km in Ontario</li>
|
||
</ul>
|
||
</div>
|
||
<div className="highlight-cards reveal">
|
||
<div className="hcard">
|
||
<div className="hcard-title">Rental or purchase — your choice</div>
|
||
<div className="hcard-desc">Need it for two weeks on a reno project? Rent it. Running a multi-month construction site? Purchase the panels outright and manage your own inventory. We supply both ways — whatever makes the most sense for your project and budget.</div>
|
||
</div>
|
||
<div className="hcard">
|
||
<div className="hcard-title">Full kit — panels to pins</div>
|
||
<div className="hcard-desc">We supply everything needed for a complete temporary fence installation — panels, steel bases or plastic feet, clamps, top connectors, sandbags, zip ties, T bars, and gate wheels. One supplier, one delivery, one invoice.</div>
|
||
</div>
|
||
<div className="hcard">
|
||
<div className="hcard-title">Same-day setup in KWC</div>
|
||
<div className="hcard-desc">For urgent construction site requirements and emergency situations in the Kitchener–Waterloo–Cambridge area, same-day setup may be available. Contact us directly to confirm availability and arrange rapid deployment.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* PANELS */}
|
||
<section className="model-section bg-white" id="panels">
|
||
<div className="model-layout reveal">
|
||
<div>
|
||
<div className="model-accent-strip"></div>
|
||
<div className="model-label">Panels — 2 sizes</div>
|
||
<div className="model-name">Temporary<br />Fence Panels</div>
|
||
<div className="model-tagline">Standard & compact — rental or purchase</div>
|
||
<span className="rental-tag">Rental available</span><span className="sale-tag">Purchase available</span>
|
||
<p className="model-desc">Our temporary fence panels are heavy-gauge galvanized steel mesh — sturdy enough for construction sites, flexible enough for events and crowd control. Two sizes cover every project scale: the full-size 6×10 for perimeter runs, and the compact 6×5 for tight spaces, small projects, and single-entry gates.</p>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Standard panel</div>
|
||
<div className="spec-row"><span className="spec-key">Size</span><span className="spec-val orange">6' × 10'</span></div>
|
||
<div className="spec-row"><span className="spec-key">Use</span><span className="spec-val">Site perimeter, large area fencing</span></div>
|
||
<div className="spec-row"><span className="spec-key">Material</span><span className="spec-val">Galvanized steel mesh</span></div>
|
||
<div className="spec-row"><span className="spec-key">Availability</span><span className="spec-val orange">Rental & purchase</span></div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Compact panel</div>
|
||
<div className="spec-row"><span className="spec-key">Size</span><span className="spec-val orange">6' × 5'</span></div>
|
||
<div className="spec-row"><span className="spec-key">Use</span><span className="spec-val">Small projects, tight spaces, single gate entry</span></div>
|
||
<div className="spec-row"><span className="spec-key">Advantage</span><span className="spec-val">Easy transportation & handling</span></div>
|
||
<div className="spec-row"><span className="spec-key">Availability</span><span className="spec-val orange">Rental & purchase</span></div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '18px', background: 'rgba(232,87,42,.07)', border: '1.5px solid rgba(232,87,42,.2)', borderRadius: '10px', padding: '16px 20px' }}>
|
||
<div style={{ fontFamily: 'var(--fd)', fontSize: '12px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '6px' }}>6×5 compact panel — contractor tip</div>
|
||
<div style={{ fontSize: '13px', color: 'var(--gray-600)', lineHeight: 1.7 }}>The 6×5 panel fits in a standard pickup truck bed — no flat-deck required. Ideal for residential renovations, small event barriers, and single-entry pedestrian gate setups where the full 10-foot panel is more than the job needs.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="photo-area" style={{ minHeight: '340px' }}>
|
||
<svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-label">6×10 & 6×5 panel photos</div>
|
||
<div className="photo-sub">Upload product image here</div>
|
||
</div>
|
||
<div className="photo-row">
|
||
<div className="photo-area" style={{ minHeight: '160px' }}>
|
||
<svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: '11px' }}>Construction site install</div>
|
||
</div>
|
||
<div className="photo-area" style={{ minHeight: '160px' }}>
|
||
<svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: '11px' }}>6×5 compact — small project</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* GATES */}
|
||
<section className="model-section bg-gray" id="gates">
|
||
<div className="model-layout reverse reveal">
|
||
<div>
|
||
<div className="photo-area" style={{ minHeight: '340px' }}>
|
||
<svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-label">Gate options — all types</div>
|
||
<div className="photo-sub">Upload product image here</div>
|
||
</div>
|
||
<div className="photo-row">
|
||
<div className="photo-area" style={{ minHeight: '160px' }}>
|
||
<svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: '11px' }}>Double gate — vehicle access</div>
|
||
</div>
|
||
<div className="photo-area" style={{ minHeight: '160px' }}>
|
||
<svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: '11px' }}>Pedestrian gate detail</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="model-accent-strip"></div>
|
||
<div className="model-label">Gates — 3 types</div>
|
||
<div className="model-name">Temporary<br />Fence Gates</div>
|
||
<div className="model-tagline">Single, double & pedestrian — rental or purchase</div>
|
||
<span className="rental-tag">Rental available</span><span className="sale-tag">Purchase available</span>
|
||
<p className="model-desc">Every temporary fence installation needs the right gate solution. We carry three gate configurations to suit pedestrian access, single-width vehicle entry, and full double-width vehicle lanes. All gates connect to standard temporary fence panels using the same hardware system.</p>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Gate types available</div>
|
||
<div className="spec-row">
|
||
<span className="spec-key">Single gate</span>
|
||
<span className="spec-val orange">Temporary fence single gate</span>
|
||
</div>
|
||
<div className="spec-row">
|
||
<span className="spec-key">Double gate</span>
|
||
<span className="spec-val">Vehicle access — wide opening</span>
|
||
</div>
|
||
<div className="spec-row">
|
||
<span className="spec-key">Pedestrian gate</span>
|
||
<span className="spec-val">Walk-through access control</span>
|
||
</div>
|
||
<div className="spec-row">
|
||
<span className="spec-key">Availability</span>
|
||
<span className="spec-val orange">Rental & purchase</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Gate accessories</div>
|
||
<div className="spec-row"><span className="spec-key">Gate wheels</span><span className="spec-val">For heavy or wide double gates</span></div>
|
||
<div className="spec-row"><span className="spec-key">Panel clamps</span><span className="spec-val">Secure gate frame to panel run</span></div>
|
||
<div className="spec-row"><span className="spec-key">T Bars</span><span className="spec-val">Bracing and stabilisation</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SCREENS */}
|
||
<section className="model-section bg-navy" id="screens">
|
||
<div className="model-layout reveal">
|
||
<div>
|
||
<div className="model-accent-strip"></div>
|
||
<div className="model-label dim">Screens & safety fence</div>
|
||
<div className="model-name white">Privacy &<br />Safety Screens</div>
|
||
<div className="model-tagline">Visual screening, branding & site safety</div>
|
||
<span className="rental-tag white-tag">Sales only</span>
|
||
<p className="model-desc white">Add privacy, site branding, or safety visibility to any temporary fence installation. Privacy mesh screens attach directly to standard fence panels. Orange safety fence and snow fence are available for hazard marking and pedestrian guidance. All screen products are sold — not rented.</p>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title white">Privacy screens</div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Black mesh screen</span><span className="spec-val orange">Sale — attach to panels</span></div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Green mesh screen</span><span className="spec-val orange">Sale — attach to panels</span></div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Printed fence screen</span><span className="spec-val white">Custom branding — full colour print</span></div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title white">Safety & barrier fence</div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Orange safety fence</span><span className="spec-val orange">Plastic mesh — hazard marking</span></div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Snow fence</span><span className="spec-val white">Seasonal barrier & drift control</span></div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '18px', background: 'rgba(232,87,42,.12)', border: '1px solid rgba(232,87,42,.25)', borderRadius: '10px', padding: '16px 20px' }}>
|
||
<div style={{ fontFamily: 'var(--fd)', fontSize: '12px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '6px' }}>Custom printed fence screens</div>
|
||
<div style={{ fontSize: '13px', color: 'rgba(255,255,255,.7)', lineHeight: 1.7 }}>Turn your construction perimeter fence into a marketing asset. Printed fence screens with your company logo, project name, or developer branding are available on request. A professional solution for high-visibility construction sites, event perimeters, and commercial developments.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="photo-area dark-placeholder" style={{ minHeight: '340px' }}>
|
||
<svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="rgba(255,255,255,.35)" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.35)" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.35)" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-label">Privacy & safety screens</div>
|
||
<div className="photo-sub">Upload product image here</div>
|
||
</div>
|
||
<div className="photo-row">
|
||
<div className="photo-area dark-placeholder" style={{ minHeight: '160px' }}>
|
||
<svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="rgba(255,255,255,.35)" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.35)" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.35)" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: '11px' }}>Custom printed screen</div>
|
||
</div>
|
||
<div className="photo-area dark-placeholder" style={{ minHeight: '160px' }}>
|
||
<svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
|
||
<rect x="4" y="10" width="40" height="30" rx="4" stroke="rgba(255,255,255,.35)" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.35)" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.35)" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: '11px' }}>Orange safety fence in use</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ACCESSORIES GRID */}
|
||
<section className="acc-section" id="accessories">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">Hardware & accessories</div>
|
||
<h2 className="sh">Everything to build<br /><span>a complete setup.</span></h2>
|
||
</div>
|
||
<div className="acc-grid reveal">
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="2" y="14" width="16" height="4" rx="1.5" fill="#E8572A" opacity=".8" />
|
||
<rect x="7" y="5" width="6" height="10" rx="1" fill="#E8572A" opacity=".4" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Steel Base Plates</div>
|
||
<div className="acc-desc">Heavy-duty steel base plates that anchor each panel to the ground. Provide stability on concrete, asphalt, and compacted gravel surfaces without staking.</div>
|
||
<span className="acc-badge rental">Rental</span> <span className="acc-badge sale">Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<circle cx="10" cy="10" r="5" stroke="#E8572A" strokeWidth="2" fill="none" />
|
||
<rect x="9" y="3" width="2" height="5" rx="1" fill="#E8572A" />
|
||
<rect x="9" y="12" width="2" height="5" rx="1" fill="#E8572A" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Plastic Fence Bases</div>
|
||
<div className="acc-desc">Lightweight plastic bases for indoor events, trade shows, and surfaces where steel plates are not appropriate. Quick to set up and easy to reposition.</div>
|
||
<span className="acc-badge rental">Rental</span> <span className="acc-badge sale">Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<path d="M4 10 Q10 4 16 10" stroke="#E8572A" strokeWidth="2" fill="none" strokeLinecap="round" />
|
||
<path d="M4 10 Q10 16 16 10" stroke="#E8572A" strokeWidth="1" fill="none" strokeLinecap="round" opacity=".5" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Top Connectors / Pins</div>
|
||
<div className="acc-desc">Panel-to-panel coupling pins that lock adjacent fence panels together at the top rail, creating a continuous, rigid fence line. Essential for every installation.</div>
|
||
<span className="acc-badge both">Rental & Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="3" y="8" width="14" height="5" rx="1.5" fill="#E8572A" opacity=".8" />
|
||
<rect x="6" y="4" width="3" height="12" rx="1" fill="#E8572A" opacity=".4" />
|
||
<rect x="11" y="4" width="3" height="12" rx="1" fill="#E8572A" opacity=".4" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Panel Clamps / Top Clamps</div>
|
||
<div className="acc-desc">Steel clamps that secure fence panels together at multiple heights for added rigidity. Used at corners, gate junctions, and wherever panels need extra stability against wind or foot traffic.</div>
|
||
<span className="acc-badge both">Rental & Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<ellipse cx="10" cy="13" rx="7" ry="5" fill="#E8572A" opacity=".5" />
|
||
<ellipse cx="10" cy="11" rx="5" ry="3" fill="#E8572A" opacity=".7" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Sandbags</div>
|
||
<div className="acc-desc">Ballast sandbags placed over steel base plates to add weight and prevent panels from shifting in wind. Critical for open-site and event installations where staking is not possible.</div>
|
||
<span className="acc-badge both">Rental & Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<path d="M5 5 L15 15 M15 5 L5 15" stroke="#E8572A" strokeWidth="2" strokeLinecap="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Zip Ties / Wire Ties</div>
|
||
<div className="acc-desc">Heavy-duty zip ties and wire ties for attaching privacy screens, mesh, and signage to temporary fence panels. Supplied in bulk packs for job site use.</div>
|
||
<span className="acc-badge sale">Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="9" y="2" width="2" height="16" rx="1" fill="#E8572A" />
|
||
<rect x="4" y="7" width="12" height="2" rx="1" fill="#E8572A" opacity=".5" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">T Bars</div>
|
||
<div className="acc-desc">Steel T bars used to brace corner sections, gate frames, and any point in the fence run requiring additional lateral support. Standard hardware for professional temporary fence setups.</div>
|
||
<span className="acc-badge both">Rental & Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<circle cx="10" cy="14" r="4" stroke="#E8572A" strokeWidth="1.5" fill="none" />
|
||
<circle cx="10" cy="14" r="1.5" fill="#E8572A" />
|
||
<rect x="8" y="4" width="4" height="8" rx="1" fill="#E8572A" opacity=".4" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Gate Wheels</div>
|
||
<div className="acc-desc">Caster wheels that attach to the bottom of double and single gate frames, supporting the gate's weight and allowing smooth opening and closing on hard surfaces.</div>
|
||
<span className="acc-badge both">Rental & Purchase</span>
|
||
</div>
|
||
|
||
<div className="acc-card">
|
||
<div className="acc-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<path d="M10 3 L10 17" stroke="#E8572A" strokeWidth="2" strokeLinecap="round" />
|
||
<path d="M6 6 L10 3 L14 6" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="acc-name">Fence Feet Pins</div>
|
||
<div className="acc-desc">Ground pins that anchor plastic fence feet and steel base plates to soft ground, preventing movement on grass, gravel, or compacted soil surfaces.</div>
|
||
<span className="acc-badge both">Rental & Purchase</span>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* WHO WE SERVE */}
|
||
<section className="targets-section" id="who-we-serve">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">Who we serve</div>
|
||
<h2 className="sh">Temporary fencing for every<br /><span>site and event.</span></h2>
|
||
</div>
|
||
<div className="targets-grid reveal">
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<rect x="2" y="8" width="14" height="8" rx="1.5" fill="#E8572A" opacity=".7" />
|
||
<path d="M5 8 L5 5 L13 5 L13 8" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Construction sites</div>
|
||
<div className="target-desc">General contractors, site supers, and developers securing active construction perimeters, hazard zones, and public exclusion areas for the duration of a project.</div>
|
||
</div>
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<rect x="2" y="4" width="14" height="12" rx="2" stroke="#E8572A" strokeWidth="1.5" fill="none" />
|
||
<path d="M6 4 L6 2 L12 2 L12 4" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinecap="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Home renovations</div>
|
||
<div className="target-desc">Residential contractors needing short-term site barriers for driveway, backyard, or front yard renovation projects where public or neighbour access must be controlled.</div>
|
||
</div>
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<path d="M9 2 L16 6 L16 12 Q9 16 9 16 Q2 12 2 12 L2 6 Z" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinejoin="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Events & festivals</div>
|
||
<div className="target-desc">Event organizers and production companies requiring crowd control barriers, pedestrian channelling, restricted area fencing, and branded fence screens for public events.</div>
|
||
</div>
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<circle cx="9" cy="9" r="7" stroke="#E8572A" strokeWidth="1.5" fill="none" />
|
||
<path d="M9 5 L9 9 L12 11" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Utility & infrastructure</div>
|
||
<div className="target-desc">Municipalities, utility companies, and road contractors requiring site safety barriers for roadwork, utility trenching, and public infrastructure projects.</div>
|
||
</div>
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<rect x="2" y="2" width="6" height="14" rx="1.5" fill="#E8572A" opacity=".5" />
|
||
<rect x="10" y="6" width="6" height="10" rx="1.5" fill="#E8572A" opacity=".5" />
|
||
<rect x="2" y="2" width="14" height="3" rx="1" fill="#E8572A" opacity=".7" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Demolition projects</div>
|
||
<div className="target-desc">Demolition contractors and site managers who need a quick perimeter fence for debris control, public safety, and site security during teardown and excavation phases.</div>
|
||
</div>
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<path d="M3 14 L3 8 M9 14 L9 4 M15 14 L15 8" stroke="#E8572A" strokeWidth="2" strokeLinecap="round" />
|
||
<path d="M2 14 L16 14" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Property managers</div>
|
||
<div className="target-desc">Property management companies needing temporary site barriers for building maintenance, parking lot work, landscaping projects, or emergency repairs on managed properties.</div>
|
||
</div>
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<rect x="3" y="3" width="12" height="12" rx="2" stroke="#E8572A" strokeWidth="1.5" fill="none" />
|
||
<path d="M7 9 L9 11 L12 7" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Emergency response</div>
|
||
<div className="target-desc">Situations requiring immediate site containment — gas line breaks, structural failures, flooding, and public safety incidents where a rapid, reliable fence perimeter is needed fast.</div>
|
||
</div>
|
||
|
||
<div className="target-card">
|
||
<div className="target-icon">
|
||
<svg viewBox="0 0 18 18" fill="none">
|
||
<circle cx="9" cy="6" r="4" stroke="#E8572A" strokeWidth="1.5" fill="none" />
|
||
<path d="M4 16 Q4 11 9 11 Q14 11 14 16" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" fill="none" />
|
||
</svg>
|
||
</div>
|
||
<div className="target-name">Schools & institutions</div>
|
||
<div className="target-desc">Schools, colleges, parks, and recreational facilities requiring temporary site fencing during construction, outdoor event setup, or seasonal safety barrier installations.</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ + SEO */}
|
||
<section className="faq-section">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">Helpful information</div>
|
||
<h2 className="sh">Temporary fence rental<br /><span>knowledge base.</span></h2>
|
||
</div>
|
||
<div className="faq-seo-grid">
|
||
<div className="faq reveal">
|
||
{[
|
||
{
|
||
q: "What temporary fence products do you offer for rental?",
|
||
a: "We rent 6×10 and 6×5 temporary fence panels, single gates, double vehicle access gates, pedestrian gates, steel base plates, plastic fence bases, sandbags, top connectors, panel clamps, T bars, and gate wheels. Privacy screens, orange safety fence, snow fence, zip ties, and fence feet pins are available for purchase. Contact us to discuss your full project requirements and we'll put together a complete rental or sales package."
|
||
},
|
||
{
|
||
q: "What is the difference between the 6×10 and 6×5 panels?",
|
||
a: "The 6×10 panel is the standard temporary fence size — 6 feet high by 10 feet wide — used for construction site perimeters, event barriers, and all general temporary fencing applications. The 6×5 compact panel is half the width at 5 feet, making it ideal for small projects, tight spaces, residential jobs, and single-gate entry configurations. The 6×5 also fits in a standard pickup truck bed without a flatdeck — much easier to transport on small jobs."
|
||
},
|
||
{
|
||
q: "Do you offer same-day temporary fence setup?",
|
||
a: "Same-day setup is available in the Kitchener–Waterloo–Cambridge area, subject to inventory availability and crew scheduling. For urgent construction site requirements or emergency situations in our local service area, contact us directly as soon as possible. For projects outside of KWC, we offer scheduled delivery and setup across our 250km Ontario service radius."
|
||
},
|
||
{
|
||
q: "Can I get custom printed fence screens?",
|
||
a: "Yes. Printed fence screens with custom branding — company name, logo, project name, developer branding, or full-colour graphics — are available on request. These attach to standard temporary fence panels and are a professional way to brand your construction site perimeter or event barrier. Contact us with your dimensions and artwork and we'll provide a quote and production timeline."
|
||
},
|
||
{
|
||
q: "Do you deliver temporary fence across Ontario?",
|
||
a: "Yes. We deliver temporary fence panels, gates, and all accessories to construction sites and event venues across a 250km radius from our Kitchener–Waterloo base. Our delivery radius covers Guelph, Hamilton, Brantford, Toronto/GTA, London, Windsor, Niagara, Barrie, and all communities in between. Contact us for a delivery quote for your specific location and project size."
|
||
},
|
||
{
|
||
q: "Is it better to rent or buy temporary fence?",
|
||
a: "For one-off or short-term projects — renovations, events, or a single construction phase — rental is almost always the better choice. You pay only for the duration you need, we handle delivery and pickup, and you're not storing panels between jobs. For contractors who regularly run multiple sites or long-duration projects, purchasing your own inventory can reduce per-project costs over time. We're happy to talk through the economics with you based on your typical project volume."
|
||
}
|
||
].map((faq, idx) => (
|
||
<div className={`faq-item ${openFaq === idx ? 'open' : ''}`} key={idx}>
|
||
<div className="faq-q" onClick={() => toggleFaq(idx)}>
|
||
{faq.q}
|
||
<span className="faq-icon">+</span>
|
||
</div>
|
||
<div
|
||
className="faq-a"
|
||
style={{
|
||
maxHeight: openFaq === idx ? '300px' : '0',
|
||
paddingBottom: openFaq === idx ? '18px' : '0',
|
||
transition: 'max-height 0.35s ease, padding 0.3s'
|
||
}}
|
||
>
|
||
{faq.a}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="content-block reveal">
|
||
<h3>Temporary fence rental — Kitchener, Waterloo & Ontario</h3>
|
||
<p>VG Fence Products is a dedicated <strong>temporary fence rental supplier</strong> serving contractors, builders, and event organizers across Kitchener–Waterloo–Cambridge and Ontario. We carry full panel inventory, gates, privacy screens, safety fence, and all accessories — available for short or long-term rental, or outright purchase depending on your project needs.</p>
|
||
<h3>Construction fence rental — KWC & Waterloo Region</h3>
|
||
<p>We supply <strong>temporary construction fence</strong> to general contractors, site superintendents, and developers across Waterloo Region on a scheduled delivery and pickup basis. Standard 6×10 panels and compact 6×5 panels are in stock, along with all hardware needed for a safe, professional site perimeter setup. Same-day installation may be available in the KWC area for urgent requirements.</p>
|
||
<h3>Event fence rental — Ontario</h3>
|
||
<p>Event organizers and production companies across Ontario use our <strong>temporary fence rental service</strong> for crowd control, VIP area barriers, restricted zone fencing, pedestrian channelling, and branded fence screens. Our 6×5 compact panels are particularly popular for events — lightweight, easy to reposition, and compatible with all gate and screen accessories.</p>
|
||
<h3>Privacy screens & custom printed fence screens</h3>
|
||
<p>Privacy mesh screens in black and green are available for purchase and attach to standard temporary fence panels using zip ties. Custom <strong>printed fence screens</strong> with company branding, developer logos, or project graphics are available on request — a visible, professional presentation for any high-traffic construction site or event.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* TERRITORY */}
|
||
<section className="territory" id="territory">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>Where we deliver</div>
|
||
<h2 className="sh sh-white">Temporary fence rental<br /><span>across Ontario.</span></h2>
|
||
<p className="territory-intro">Delivery, setup, and pickup of temporary fence panels, gates, and accessories to construction sites and event venues across a 250km radius from Kitchener–Waterloo.</p>
|
||
</div>
|
||
<div className="region-grid reveal">
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">Waterloo Region</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-kitchener" title="Temporary fence rental Kitchener">Kitchener</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-waterloo" title="Temporary fence rental Waterloo">Waterloo</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-cambridge" title="Temporary fence rental Cambridge">Cambridge</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-ayr" title="Temp fence rental Ayr Ontario">Ayr</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-breslau" title="Temp fence rental Breslau Ontario">Breslau</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-elmira" title="Temp fence rental Elmira Ontario">Elmira</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-st-jacobs" title="Temp fence rental St. Jacobs Ontario">St. Jacobs</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-new-hamburg" title="Temp fence rental New Hamburg Ontario">New Hamburg</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-baden" title="Temp fence rental Baden Ontario">Baden</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-wellesley" title="Temp fence rental Wellesley Ontario">Wellesley</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">Guelph & Wellington</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-guelph" title="Temporary fence rental Guelph">Guelph</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-fergus" title="Temp fence rental Fergus Ontario">Fergus</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-elora" title="Temp fence rental Elora Ontario">Elora</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-rockwood" title="Temp fence rental Rockwood Ontario">Rockwood</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-acton" title="Temp fence rental Acton Ontario">Acton</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-georgetown" title="Temp fence rental Georgetown Ontario">Georgetown</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">Halton & Hamilton</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-hamilton" title="Temporary fence rental Hamilton">Hamilton</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-burlington" title="Temporary fence rental Burlington">Burlington</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-milton" title="Temp fence rental Milton Ontario">Milton</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-oakville" title="Temp fence rental Oakville Ontario">Oakville</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-stoney-creek" title="Temp fence rental Stoney Creek">Stoney Creek</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-grimsby" title="Temp fence rental Grimsby Ontario">Grimsby</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-brantford" title="Temp fence rental Brantford Ontario">Brantford</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-paris" title="Temp fence rental Paris Ontario">Paris</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">GTA & Peel</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-mississauga" title="Temporary fence rental Mississauga">Mississauga</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-brampton" title="Temporary fence rental Brampton">Brampton</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-vaughan" title="Temp fence rental Vaughan Ontario">Vaughan</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-markham" title="Temp fence rental Markham Ontario">Markham</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-richmond-hill" title="Temp fence rental Richmond Hill">Richmond Hill</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">Oxford & Perth</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-woodstock" title="Temp fence rental Woodstock Ontario">Woodstock</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-stratford" title="Temp fence rental Stratford Ontario">Stratford</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-ingersoll" title="Temp fence rental Ingersoll Ontario">Ingersoll</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-tillsonburg" title="Temp fence rental Tillsonburg Ontario">Tillsonburg</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-st-marys" title="Temp fence rental St. Marys Ontario">St. Marys</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">London & Elgin</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-london-ontario" title="Temporary fence rental London Ontario">London</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-st-thomas" title="Temp fence rental St. Thomas Ontario">St. Thomas</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-strathroy" title="Temp fence rental Strathroy Ontario">Strathroy</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-komoka" title="Temp fence rental Komoka Ontario">Komoka</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">Southwest Ontario</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-windsor" title="Temporary fence rental Windsor Ontario">Windsor</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-chatham" title="Temp fence rental Chatham Ontario">Chatham</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-leamington" title="Temp fence rental Leamington Ontario">Leamington</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-sarnia" title="Temp fence rental Sarnia Ontario">Sarnia</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-petrolia" title="Temp fence rental Petrolia Ontario">Petrolia</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="region-block">
|
||
<div className="region-name">Extended Service</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-niagara" title="Temporary fence rental Niagara Falls Ontario">Niagara Falls</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-st-catharines" title="Temp fence rental St. Catharines">St. Catharines</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-welland" title="Temp fence rental Welland Ontario">Welland</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/temporary-fence-rental-barrie" title="Temporary fence rental Barrie Ontario">Barrie</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-owen-sound" title="Temp fence rental Owen Sound Ontario">Owen Sound</a></li>
|
||
<li><a href="https://vgfence.com/temporary-fence-rental-collingwood" title="Temp fence rental Collingwood Ontario">Collingwood</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* QUOTE CTA */}
|
||
<section className="quote-cta" id="quote-section">
|
||
<div className="quote-inner">
|
||
<div className="quote-left">
|
||
<h2>Get temporary fence pricing.</h2>
|
||
<p>Tell us your panel count, gate requirements, site location, and how long you need it — we'll come back with a rental or purchase quote within 2 business hours.</p>
|
||
</div>
|
||
<div className="quote-form-card">
|
||
<div style={{ fontFamily: 'var(--fd)', fontSize: '17px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--white)', letterSpacing: '.04em', marginBottom: '4px' }}>Request a quote</div>
|
||
<div style={{ fontSize: '12px', color: 'rgba(255,255,255,.6)', marginBottom: '20px' }}>Response within 2 business hours · Rental & purchase</div>
|
||
|
||
{formStatus === 'success' ? (
|
||
<div className="form-success">
|
||
<div className="fs-icon">✅</div>
|
||
<div className="fs-title">Quote Request Sent!</div>
|
||
<p className="fs-note">
|
||
Thank you! We have received your temporary fence quote request and will respond within 2 business hours.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleSubmit}>
|
||
<div className="qrow">
|
||
<div>
|
||
<label className="ql">Company name</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="company"
|
||
placeholder="ABC Construction Co."
|
||
value={formData.company}
|
||
onChange={handleInputChange}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="ql">Your name</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="name"
|
||
placeholder="John Smith"
|
||
value={formData.name}
|
||
onChange={handleInputChange}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="qrow">
|
||
<div>
|
||
<label className="ql">Phone</label>
|
||
<input
|
||
className="qi"
|
||
type="tel"
|
||
name="phone"
|
||
placeholder="519-xxx-xxxx"
|
||
value={formData.phone}
|
||
onChange={handleInputChange}
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="ql">Email</label>
|
||
<input
|
||
className="qi"
|
||
type="email"
|
||
name="email"
|
||
placeholder="you@company.com"
|
||
value={formData.email}
|
||
onChange={handleInputChange}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<label className="ql">Rental or purchase?</label>
|
||
<select
|
||
className="qi"
|
||
name="type"
|
||
value={formData.type}
|
||
onChange={handleInputChange}
|
||
required
|
||
>
|
||
<option value="">Select...</option>
|
||
<option value="Rental — short term (under 4 weeks)">Rental — short term (under 4 weeks)</option>
|
||
<option value="Rental — long term (1–6 months)">Rental — long term (1–6 months)</option>
|
||
<option value="Rental — ongoing / open-ended">Rental — ongoing / open-ended</option>
|
||
<option value="Purchase — panels & hardware">Purchase — panels & hardware</option>
|
||
<option value="Purchase — privacy / safety screens">Purchase — privacy / safety screens</option>
|
||
<option value="Rental panels + purchase screens">Rental panels + purchase screens</option>
|
||
<option value="Not sure — need advice">Not sure — need advice</option>
|
||
</select>
|
||
|
||
<div className="qrow">
|
||
<div>
|
||
<label className="ql">Site city / location</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="city"
|
||
placeholder="Kitchener, Guelph..."
|
||
value={formData.city}
|
||
onChange={handleInputChange}
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="ql">Approx. panels needed</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="panels"
|
||
placeholder="e.g. 40 panels"
|
||
value={formData.panels}
|
||
onChange={handleInputChange}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<label className="ql">Additional requirements</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="requirements"
|
||
placeholder="Gates, privacy screens, delivery date..."
|
||
value={formData.requirements}
|
||
onChange={handleInputChange}
|
||
/>
|
||
|
||
<button className="qbtn" type="submit" disabled={formStatus === 'submitting'}>
|
||
{formStatus === 'submitting' ? 'Sending...' : 'Send quote request →'}
|
||
</button>
|
||
|
||
{formStatus === 'error' && (
|
||
<p style={{ color: '#fff', fontSize: '12px', marginTop: '10px', textAlign: 'center' }}>
|
||
⚠️ Failed to send request. Please try again or email info@vgfenceproducts.com directly.
|
||
</p>
|
||
)}
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|