721 lines
50 KiB
TypeScript
721 lines
50 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import Link from "next/link";
|
||
import axios from "axios";
|
||
|
||
const ContactClient = () => {
|
||
const [formData, setFormData] = useState({
|
||
company: "",
|
||
name: "",
|
||
phone: "",
|
||
email: "",
|
||
product: "",
|
||
city: "",
|
||
qty: "",
|
||
notes: "",
|
||
tc: false
|
||
});
|
||
|
||
const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
||
const [tcError, setTcError] = useState(false);
|
||
const [nlEmail, setNlEmail] = useState("");
|
||
const [nlStatus, setNlStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||
|
||
useEffect(() => {
|
||
const revealObs = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.06 });
|
||
|
||
document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el));
|
||
|
||
return () => revealObs.disconnect();
|
||
}, []);
|
||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||
const { id, value, type } = e.target;
|
||
if (type === 'checkbox') {
|
||
const checked = (e.target as HTMLInputElement).checked;
|
||
setFormData(prev => ({ ...prev, tc: checked }));
|
||
if (checked) setTcError(false);
|
||
} else {
|
||
const key = id.replace('f-', '');
|
||
setFormData(prev => ({ ...prev, [key]: value }));
|
||
}
|
||
};
|
||
|
||
const toggleFaq = (index: number) => {
|
||
setOpenFaq(openFaq === index ? null : index);
|
||
};
|
||
|
||
const submitContactForm = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
// Validate email
|
||
if (!formData.email || !formData.email.includes('@')) {
|
||
const el = document.getElementById('f-email');
|
||
if (el) {
|
||
el.style.outline = '2px solid var(--orange)';
|
||
el.focus();
|
||
setTimeout(() => el.style.outline = '', 2000);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Validate T&C
|
||
if (!formData.tc) {
|
||
setTcError(true);
|
||
const el = document.getElementById('tc-row-contact');
|
||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
return;
|
||
}
|
||
|
||
setFormStatus("submitting");
|
||
|
||
const emailData = {
|
||
name: formData.name,
|
||
phone: formData.phone,
|
||
email: formData.email,
|
||
service: formData.product || "General Enquiry",
|
||
message: `
|
||
<b>Company:</b> ${formData.company}<br />
|
||
<b>City:</b> ${formData.city}<br />
|
||
<b>Quantity:</b> ${formData.qty}<br /><br />
|
||
<b>Notes:</b> ${formData.notes}
|
||
`,
|
||
to: "info@vgfenceproducts.com",
|
||
senderName: "VG Fence Contact Page",
|
||
};
|
||
|
||
try {
|
||
await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||
headers: { "Content-Type": "application/json" },
|
||
});
|
||
setFormStatus("success");
|
||
const successEl = document.getElementById('form-success');
|
||
if (successEl) successEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
} catch (error) {
|
||
console.error("❌ Error sending email:", error);
|
||
setFormStatus("error");
|
||
alert("Failed to send message. Please try again later or email us directly at info@vgfenceproducts.com");
|
||
}
|
||
};
|
||
|
||
const submitNewsletterForm = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!nlEmail || !nlEmail.includes("@")) return;
|
||
|
||
setNlStatus("submitting");
|
||
|
||
const emailData = {
|
||
name: "Newsletter Subscriber",
|
||
email: nlEmail,
|
||
phone: "N/A",
|
||
service: "Newsletter Subscription",
|
||
message: `A new user has subscribed to the newsletter: <b>${nlEmail}</b>`,
|
||
to: "info@vgfenceproducts.com",
|
||
senderName: "VG Fence Contact Page Newsletter",
|
||
};
|
||
|
||
try {
|
||
await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||
headers: { "Content-Type": "application/json" },
|
||
});
|
||
setNlStatus("success");
|
||
setNlEmail("");
|
||
} catch (error) {
|
||
console.error("❌ Error subscribing to newsletter:", error);
|
||
setNlStatus("error");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="contact-page">
|
||
|
||
{/* HERO + QUOTE FORM */}
|
||
<section className="inner-banner">
|
||
<h1 className="inner-banner-title">Get in <span>touch.</span></h1>
|
||
<div className="inner-banner-breadcrumbs">
|
||
<Link href="/">Home</Link>
|
||
<span>/</span>
|
||
Contact
|
||
</div>
|
||
</section> {/* MAIN CONTACT SECTION */}
|
||
<section className="contact-section" id="main-form">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">Send us a message</div>
|
||
<h2 className="sh">Tell us what you need<br /><span>and where it's going.</span></h2>
|
||
</div>
|
||
|
||
<div className="contact-layout">
|
||
{/* LEFT - INFO */}
|
||
<div className="contact-left reveal">
|
||
<div className="hcc">
|
||
<div className="hcc-label">📧 Email — primary contact</div>
|
||
<div className="hcc-val">
|
||
<a href="mailto:info@vgfenceproducts.com">info@vgfenceproducts.com</a>
|
||
</div>
|
||
<div className="hcc-sub">
|
||
Send quote requests, product enquiries, rental bookings, contractor account applications, and any question about our products and services.
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hcc">
|
||
<div className="hcc-label">🌐 Website</div>
|
||
<div className="hcc-val">
|
||
<a href="https://vgfence.com" target="_blank" rel="noopener noreferrer">vgfence.com</a>
|
||
</div>
|
||
<div className="hcc-sub">
|
||
Browse all products, specifications, service pages, and location-specific information for your city.
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hcc">
|
||
<div className="hcc-label">📍 Based in</div>
|
||
<div className="hcc-val">Kitchener–Waterloo, Ontario</div>
|
||
<div className="hcc-sub">
|
||
We are a B2B supplier operating out of the KWC region. We do not have a retail storefront — contact us by email to arrange orders, pickup, or delivery.
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hcc">
|
||
<div className="hcc-label">🕐 Business hours</div>
|
||
<div className="hcc-val" style={{ fontSize: '15px', color: 'var(--orange)' }}>
|
||
2-hour response commitment
|
||
</div>
|
||
<div className="hcc-hours" style={{ marginTop: '10px' }}>
|
||
<div className="hcc-hour-item">
|
||
<div className="hcc-hour-day" style={{ fontSize: '13px', color: 'var(--gray-600)' }}>Mon – Fri</div>
|
||
<div className="hcc-hour-time" style={{ fontSize: '14px', fontWeight: 700, color: 'var(--navy)' }}>8:00 AM – 5:00 PM</div>
|
||
</div>
|
||
<div className="hcc-hour-item">
|
||
<div className="hcc-hour-day" style={{ fontSize: '13px', color: 'var(--gray-600)' }}>Saturday</div>
|
||
<div className="hcc-hour-time" style={{ fontSize: '14px', fontWeight: 700, color: 'var(--navy)' }}>9:00 AM – 2:00 PM</div>
|
||
</div>
|
||
<div className="hcc-hour-item">
|
||
<div className="hcc-hour-day" style={{ fontSize: '13px', color: 'var(--gray-600)' }}>Sunday</div>
|
||
<div className="hcc-hour-time closed" style={{ fontSize: '13px', color: 'var(--gray-400)' }}>Closed</div>
|
||
</div>
|
||
<div className="hcc-hour-item">
|
||
<div className="hcc-hour-day" style={{ fontSize: '13px', color: 'var(--gray-600)' }}>Stat holidays</div>
|
||
<div className="hcc-hour-time closed" style={{ fontSize: '13px', color: 'var(--gray-400)' }}>Closed</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT - FORM */}
|
||
<div className="reveal">
|
||
<div className="contact-form-wrap">
|
||
<div className="form-head">
|
||
<div className="form-head-title">Request a <span>quote</span></div>
|
||
<div className="form-head-sub">Fill in the details below. We respond to all enquiries within 2 business hours during business hours. Emergency temp fence rentals in KWC – contact us directly by email for fastest response.</div>
|
||
</div>
|
||
|
||
{formStatus === "success" ? (
|
||
<div className="form-success">
|
||
<div className="fs-icon">✅</div>
|
||
<p>Quote request sent!</p>
|
||
<p className="fs-note">
|
||
We'll respond to your email within 2 business hours. Check your spam folder if you don't hear from us.
|
||
</p>
|
||
<button className="form-btn mt-24" onClick={() => setFormStatus("idle")}>Send another request</button>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={submitContactForm}>
|
||
<div className="frow">
|
||
<div>
|
||
<label className="fl">Company name</label>
|
||
<input className="fi" type="text" placeholder="ABC Fence Co." id="f2-company" value={formData.company} onChange={handleChange} />
|
||
</div>
|
||
<div>
|
||
<label className="fl">Your name</label>
|
||
<input className="fi" type="text" placeholder="John Smith" id="f2-name" value={formData.name} onChange={handleChange} />
|
||
</div>
|
||
</div>
|
||
<div className="frow">
|
||
<div>
|
||
<label className="fl">Phone</label>
|
||
<input className="fi" type="tel" placeholder="519-xxx-xxxx" id="f2-phone" value={formData.phone} onChange={handleChange} />
|
||
</div>
|
||
<div>
|
||
<label className="fl">Email <span className="text-orange">*</span></label>
|
||
<input className="fi" type="email" placeholder="you@company.com" id="f2-email" value={formData.email} onChange={handleChange} required />
|
||
</div>
|
||
</div>
|
||
<label className="fl">Product / service needed</label>
|
||
<select className="fi" id="f2-product" value={formData.product} onChange={handleChange}>
|
||
<option value="">Select what you need...</option>
|
||
<optgroup label="── Fence Materials ──">
|
||
<option>Chain link fence — commercial</option>
|
||
<option>Chain link fence — residential</option>
|
||
<option>Ornamental fence & gates</option>
|
||
<option>Composite fence</option>
|
||
<option>Glass railing</option>
|
||
<option>Aluminum railing</option>
|
||
<option>Expert Stain & Seal products</option>
|
||
<option>Fence Armor (post caps / guards)</option>
|
||
<option>Wood fence materials</option>
|
||
</optgroup>
|
||
<optgroup label="── Services ──">
|
||
<option>Temporary fence rental — construction</option>
|
||
<option>Temporary fence rental — event / beer garden</option>
|
||
<option>Wood staining service</option>
|
||
<option>2D fence drawing / permit drawing</option>
|
||
<option>Contractor account application</option>
|
||
</optgroup>
|
||
<option>Multiple products / full project</option>
|
||
<option>Other / not sure yet</option>
|
||
</select>
|
||
<div className="frow">
|
||
<div>
|
||
<label className="fl">Job site city</label>
|
||
<input className="fi" type="text" placeholder="Kitchener, Guelph..." id="f2-city" value={formData.city} onChange={handleChange} />
|
||
</div>
|
||
<div>
|
||
<label className="fl">Approx. quantity</label>
|
||
<input className="fi" type="text" placeholder="e.g. 200 linear ft" id="f2-qty" value={formData.qty} onChange={handleChange} />
|
||
</div>
|
||
</div>
|
||
<label className="fl">Additional details</label>
|
||
<textarea className="fi fi-ta" placeholder="Height, finish (black/galvanized), number of gates, delivery date needed..." id="f2-notes" value={formData.notes} onChange={handleChange}></textarea>
|
||
|
||
{/* T&C CHECKBOX */}
|
||
<div className={`tc-row ${formData.tc ? 'checked' : ''} ${tcError ? 'tc-error' : ''}`} id="tc-row-contact-2" onClick={() => { setFormData(p => ({ ...p, tc: !p.tc })); setTcError(false); }}>
|
||
<input type="checkbox" className="tc-check" id="tc-contact-2" checked={formData.tc} onChange={handleChange} onClick={(e) => e.stopPropagation()} />
|
||
<label className="tc-label" htmlFor="tc-contact-2" onClick={(e) => e.stopPropagation()}>
|
||
I have read and agree to VG Fence Products'
|
||
<a href="/legal#t1" target="_blank" onClick={(e) => e.stopPropagation()}> Terms & Conditions</a>,
|
||
<a href="/legal#t3" target="_blank" onClick={(e) => e.stopPropagation()}> Delivery Policy</a>, and
|
||
<a href="/legal#t7" target="_blank" onClick={(e) => e.stopPropagation()}> Photo Verification Policy</a>.
|
||
</label>
|
||
</div>
|
||
{tcError && <div className="tc-error-msg" id="tc-error-msg-contact-2">⚠️ Please read and accept our Terms & Conditions to continue.</div>}
|
||
|
||
<button className="form-btn" id="contact-submit-btn-2" disabled={formStatus === "submitting"}>
|
||
{formStatus === "submitting" ? "Sending..." : "Send quote request →"}
|
||
</button>
|
||
<div className="form-note">Or email directly · info@vgfenceproducts.com</div>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* HOURS + LOCATION */}
|
||
<section className="info-section">
|
||
<div className="section-eyebrow">Details</div>
|
||
<h2 className="sh">Hours, location<br />& <span>response times.</span></h2>
|
||
<div className="info-grid">
|
||
<div className="info-card">
|
||
<div className="ic-icon">🕐</div>
|
||
<div className="ic-title">Business hours & response time</div>
|
||
<div className="ic-rows">
|
||
<div className="ic-row" style={{ color: 'var(--orange)', fontWeight: 600, fontSize: '15px', marginBottom: '8px' }}>Response within 2 business hours</div>
|
||
<div className="ic-row"><span className="ic-key">Monday – Friday</span><span className="ic-val">8:00 AM – 5:00 PM EST</span></div>
|
||
<div className="ic-row"><span className="ic-key">Saturday</span><span className="ic-val">9:00 AM – 2:00 PM EST</span></div>
|
||
<div className="ic-row"><span className="ic-key">Sunday</span><span className="ic-val text-gray-400">Closed</span></div>
|
||
<div className="ic-row"><span className="ic-key">Statutory holidays</span><span className="ic-val text-gray-400">Closed</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="info-card">
|
||
<div className="ic-icon">✅</div>
|
||
<div className="ic-title">We can help with</div>
|
||
<div className="ic-rows">
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Contractor pricing on all 8 product lines</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Temporary fence rental for construction or events</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">2D fence drawing services & permit drawings</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Professional wood staining services (KWC area)</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Contractor account setup & bulk ordering</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Scheduled job site delivery across Ontario</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Product specifications & technical questions</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Emergency temporary fence (same-day KWC)</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="info-card">
|
||
<div className="ic-icon">📝</div>
|
||
<div className="ic-title">For the fastest response — include</div>
|
||
<div className="ic-rows">
|
||
<div className="ic-row"><span className="ic-val ic-val-list">The product or service you need</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Your job site city or location</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Approximate quantity or linear footage</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Your preferred delivery timeline</span></div>
|
||
<div className="ic-row"><span className="ic-val ic-val-list">Your company name and best contact method</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* WHAT TO EXPECT */}
|
||
<section className="expect-section">
|
||
<div className="section-eyebrow">What happens next</div>
|
||
<h2 className="sh">After you send your quote request.<br /><span>Here's our process.</span></h2>
|
||
<div className="expect-grid">
|
||
{[
|
||
{ num: "01", title: "We receive your request", desc: "Your quote request lands in our inbox immediately. We review every request personally — no bots, no auto-replies with prices." },
|
||
{ num: "02", title: "We check stock & delivery", desc: "We confirm current availability and delivery feasibility to your job site within our 250km radius. We quote only what we can actually deliver." },
|
||
{ num: "03", title: "You receive a written quote", desc: "Within 2 business hours, you receive a written quote with contractor pricing, delivery fee, and a confirmed delivery date. No vague estimates." },
|
||
{ num: "04", title: "Confirm & we deliver", desc: "Approve the quote, we confirm delivery. Materials arrive on schedule. For contractor accounts, repeat ordering is fast and pricing is pre-agreed." }
|
||
].map((step, idx) => (
|
||
<div className="expect-step" key={idx}>
|
||
<div className="es-num">{step.num}</div>
|
||
<div className="es-title">{step.title}</div>
|
||
<div className="es-desc">{step.desc}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* REASONS SECTION */}
|
||
<section className="reasons-section">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">How we can help</div>
|
||
<h2 className="sh">Every reason to<br /><span>get in touch.</span></h2>
|
||
</div>
|
||
<div className="reasons-grid reveal">
|
||
<div className="reason-card">
|
||
<div className="reason-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="2" y="3" width="3" height="14" rx="1.5" fill="#E8572A" opacity=".7"></rect>
|
||
<rect x="15" y="3" width="3" height="14" rx="1.5" fill="#E8572A" opacity=".7"></rect>
|
||
<line x1="2" y1="7" x2="18" y2="7" stroke="#E8572A" strokeWidth="1.5"></line>
|
||
<line x1="2" y1="11" x2="18" y2="11" stroke="#E8572A" strokeWidth="1.5"></line>
|
||
<line x1="8" y1="3" x2="8" y2="17" stroke="#E8572A" strokeWidth="1.2"></line>
|
||
<line x1="13" y1="3" x2="13" y2="17" stroke="#E8572A" strokeWidth="1.2"></line>
|
||
</svg>
|
||
</div>
|
||
<div className="reason-title">Contractor pricing</div>
|
||
<div className="reason-desc">Get trade pricing on chain link, ornamental, composite, glass railing, aluminum railing, Expert Stain & Seal, or Fence Armor. Send your quantities and job site location and we'll quote fast.</div>
|
||
<a href="mailto:info@vgfenceproducts.com?subject=Contractor Pricing Request" className="reason-email">Email for pricing →</a>
|
||
</div>
|
||
|
||
<div className="reason-card">
|
||
<div className="reason-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="2" y="5" width="5" height="11" rx="1.5" fill="#E8572A" opacity=".6"></rect>
|
||
<rect x="13" y="5" width="5" height="11" rx="1.5" fill="#E8572A" opacity=".6"></rect>
|
||
<line x1="6" y1="8" x2="14" y2="8" stroke="#E8572A" strokeWidth="1.5"></line>
|
||
<line x1="6" y1="12" x2="14" y2="12" stroke="#E8572A" strokeWidth="1.5"></line>
|
||
</svg>
|
||
</div>
|
||
<div className="reason-title">Temporary fence rental</div>
|
||
<div className="reason-desc">Construction, demolition, events, renovations, and emergencies. Tell us your panel count, gate needs, site location, and how long you need it. Same-day available in KWC for emergencies.</div>
|
||
<a href="mailto:info@vgfenceproducts.com?subject=Temporary Fence Rental Request" className="reason-email">Email for rental →</a>
|
||
</div>
|
||
|
||
<div className="reason-card">
|
||
<div className="reason-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="3" y="2" width="14" height="16" rx="2" stroke="#E8572A" strokeWidth="1.5" fill="none"></rect>
|
||
<path d="M7 7 L13 7 M7 10 L13 10 M7 13 L10 13" stroke="#E8572A" strokeWidth="1.2" strokeLinecap="round"></path>
|
||
<circle cx="14" cy="14" r="4" fill="#E8572A" opacity=".9"></circle>
|
||
<path d="M12.5 14 L13.5 15 L15.5 13" stroke="white" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"></path>
|
||
</svg>
|
||
</div>
|
||
<div className="reason-title">2D fence drawings</div>
|
||
<div className="reason-desc">CAD-based fence layout drawings, permit support drawings, and material takeoffs for residential and commercial projects. Share your site measurements or property plan and we'll produce a professional drawing.</div>
|
||
<a href="mailto:info@vgfenceproducts.com?subject=Fence Drawing Services Request" className="reason-email">Email for drawings →</a>
|
||
</div>
|
||
|
||
<div className="reason-card">
|
||
<div className="reason-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<path d="M4 18 L10 2 L16 18" stroke="#E8572A" strokeWidth="2" fill="none" strokeLinecap="round"></path>
|
||
<circle cx="10" cy="11" r="2.5" fill="#E8572A" opacity=".5"></circle>
|
||
</svg>
|
||
</div>
|
||
<div className="reason-title">Wood staining services</div>
|
||
<div className="reason-desc">Professional fence staining, deck staining, pergola staining, and wood restoration in the KWC area and surrounding communities. Tell us your structure type and approximate size.</div>
|
||
<a href="mailto:info@vgfenceproducts.com?subject=Wood Staining Service Quote" className="reason-email">Email for staining →</a>
|
||
</div>
|
||
|
||
<div className="reason-card">
|
||
<div className="reason-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<path d="M10 2 L18 6 L18 14 Q10 19 10 19 Q2 14 2 14 L2 6 Z" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinejoin="round"></path>
|
||
<path d="M7 10 L9 12 L13 8" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
|
||
</svg>
|
||
</div>
|
||
<div className="reason-title">Contractor account setup</div>
|
||
<div className="reason-desc">Set up a contractor account for streamlined ordering, consistent contractor pricing, scheduled delivery arrangements, and bulk order discounts across all product lines.</div>
|
||
<a href="mailto:info@vgfenceproducts.com?subject=Contractor Account Application" className="reason-email">Email to apply →</a>
|
||
</div>
|
||
|
||
<div className="reason-card">
|
||
<div className="reason-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<circle cx="10" cy="10" r="7" stroke="#E8572A" strokeWidth="1.5" fill="none"></circle>
|
||
<path d="M10 7 Q10 9 10 10" stroke="#E8572A" strokeWidth="2" strokeLinecap="round"></path>
|
||
<circle cx="10" cy="13" r="1" fill="#E8572A"></circle>
|
||
</svg>
|
||
</div>
|
||
<div className="reason-title">General enquiries</div>
|
||
<div className="reason-desc">Product specifications, availability, delivery schedules, service area questions, or anything else — send us an email and we'll help. We respond to every enquiry within 2 business hours.</div>
|
||
<a href="mailto:info@vgfenceproducts.com" className="reason-email">Send us an email →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* COVERAGE SECTION */}
|
||
<section className="coverage-section">
|
||
<div className="reveal visible">
|
||
<div className="se text-white-50">Where we deliver</div>
|
||
<h2 className="sh sh-white">We deliver across<br /><span>250km of Ontario.</span></h2>
|
||
</div>
|
||
<div className="coverage-layout reveal visible">
|
||
{/* MAP SVG */}
|
||
<div className="coverage-map">
|
||
<svg viewBox="0 0 500 380" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<rect width="500" height="380" fill="#0a1a33" rx="8"></rect>
|
||
<circle cx="250" cy="200" r="170" fill="none" stroke="#1B3A6B" strokeWidth="1.5" strokeDasharray="8 5" opacity=".3"></circle>
|
||
<circle cx="250" cy="200" r="110" fill="none" stroke="#1B3A6B" strokeWidth="1" strokeDasharray="4 4" opacity=".2"></circle>
|
||
<circle cx="250" cy="200" r="50" fill="#1B3A6B" opacity=".15"></circle>
|
||
<text x="378" y="60" textAnchor="middle" fontSize="10" fill="#E8572A" fontFamily="'Barlow Condensed',sans-serif" fontWeight="700" letterSpacing="1">250KM</text>
|
||
<text x="378" y="72" textAnchor="middle" fontSize="9" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">RADIUS</text>
|
||
<circle cx="250" cy="200" r="10" fill="#E8572A"></circle>
|
||
<circle cx="250" cy="200" r="5" fill="white"></circle>
|
||
<circle cx="250" cy="200" r="24" fill="none" stroke="#E8572A" strokeWidth="1.5" opacity=".4"></circle>
|
||
<text x="250" y="232" textAnchor="middle" fontSize="11" fontWeight="700" fill="white" fontFamily="'Barlow Condensed',sans-serif" letterSpacing="1">KWC</text>
|
||
|
||
<circle cx="312" cy="158" r="5" fill="#1B3A6B" opacity=".8"></circle>
|
||
<text x="320" y="154" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.8)" fontFamily="sans-serif">Guelph</text>
|
||
<text x="320" y="164" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~30km</text>
|
||
|
||
<circle cx="340" cy="198" r="5" fill="#1B3A6B" opacity=".8"></circle>
|
||
<text x="350" y="194" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.8)" fontFamily="sans-serif">Hamilton</text>
|
||
<text x="350" y="204" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~75km</text>
|
||
|
||
<circle cx="385" cy="168" r="7" fill="#E8572A" opacity=".9"></circle>
|
||
<text x="395" y="164" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.9)" fontFamily="sans-serif">Toronto / GTA</text>
|
||
<text x="395" y="174" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~110km</text>
|
||
|
||
<circle cx="318" cy="238" r="5" fill="#1B3A6B" opacity=".8"></circle>
|
||
<text x="328" y="235" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.8)" fontFamily="sans-serif">Brantford</text>
|
||
<text x="328" y="245" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~50km</text>
|
||
|
||
<circle cx="188" cy="238" r="5" fill="#1B3A6B" opacity=".8"></circle>
|
||
<text x="100" y="236" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.8)" fontFamily="sans-serif">Stratford</text>
|
||
<text x="100" y="246" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~45km</text>
|
||
|
||
<circle cx="148" cy="200" r="7" fill="#E8572A" opacity=".9"></circle>
|
||
<text x="50" y="196" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.9)" fontFamily="sans-serif">London</text>
|
||
<text x="50" y="206" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~120km</text>
|
||
|
||
<circle cx="196" cy="150" r="5" fill="#1B3A6B" opacity=".6"></circle>
|
||
<text x="108" y="146" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.7)" fontFamily="sans-serif">Owen Sound</text>
|
||
<text x="108" y="156" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~175km</text>
|
||
|
||
<circle cx="250" cy="112" r="5" fill="#1B3A6B" opacity=".6"></circle>
|
||
<text x="258" y="108" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.7)" fontFamily="sans-serif">Barrie</text>
|
||
<text x="258" y="118" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~160km</text>
|
||
|
||
<circle cx="368" cy="242" r="5" fill="#1B3A6B" opacity=".6"></circle>
|
||
<text x="378" y="238" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.7)" fontFamily="sans-serif">Niagara</text>
|
||
<text x="378" y="248" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~150km</text>
|
||
|
||
<circle cx="90" cy="198" r="6" fill="#E8572A" opacity=".8"></circle>
|
||
<text x="20" y="194" fontSize="9" fontWeight="600" fill="rgba(255,255,255,.8)" fontFamily="sans-serif">Windsor</text>
|
||
<text x="20" y="204" fontSize="8" fill="rgba(255,255,255,.4)" fontFamily="sans-serif">~230km</text>
|
||
|
||
{/* Legend */}
|
||
<circle cx="25" cy="350" r="5" fill="#E8572A"></circle>
|
||
<text x="35" y="354" fontSize="8" fill="rgba(255,255,255,.5)" fontFamily="sans-serif">Major hub</text>
|
||
<circle cx="110" cy="350" r="4" fill="#1B3A6B" opacity=".8"></circle>
|
||
<text x="120" y="354" fontSize="8" fill="rgba(255,255,255,.5)" fontFamily="sans-serif">Regional city</text>
|
||
<line x1="200" y1="350" x2="230" y2="350" stroke="#1B3A6B" strokeWidth="1.5" strokeDasharray="5 4" opacity=".4"></line>
|
||
<text x="236" y="354" fontSize="8" fill="rgba(255,255,255,.5)" fontFamily="sans-serif">250km delivery</text>
|
||
</svg>
|
||
</div>
|
||
|
||
{/* REGION LIST */}
|
||
<div>
|
||
<p className="coverage-intro">We deliver all fence products and materials to job sites and business locations across Southern Ontario within a 250km radius from our Kitchener–Waterloo base. Contact us with your location for a delivery quote.</p>
|
||
<div className="region-grid">
|
||
<div className="region-block">
|
||
<div className="region-name">Waterloo Region</div>
|
||
<ul className="region-cities">
|
||
<li className="primary"><a href="https://vgfence.com/fence-supply-kitchener">Kitchener</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/fence-supply-waterloo">Waterloo</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/fence-supply-cambridge">Cambridge</a></li>
|
||
<li>Ayr · Breslau · Elmira</li>
|
||
<li>New Hamburg · St. Jacobs</li>
|
||
<li>Baden · Wellesley</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/fence-supply-guelph">Guelph</a></li>
|
||
<li>Fergus · Elora · Rockwood</li>
|
||
<li>Acton · Georgetown</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/fence-supply-hamilton">Hamilton</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/fence-supply-burlington">Burlington</a></li>
|
||
<li>Milton · Oakville</li>
|
||
<li><a href="https://vgfence.com/fence-supply-brantford">Brantford</a> · Paris</li>
|
||
<li>Stoney Creek · Grimsby</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/fence-supply-mississauga">Mississauga</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/fence-supply-brampton">Brampton</a></li>
|
||
<li><a href="https://vgfence.com/fence-supply-toronto">Toronto</a></li>
|
||
<li>Vaughan · Markham</li>
|
||
<li>Richmond Hill</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/fence-supply-woodstock">Woodstock</a></li>
|
||
<li className="primary"><a href="https://vgfence.com/fence-supply-stratford">Stratford</a></li>
|
||
<li>Ingersoll · Tillsonburg</li>
|
||
<li>St. Marys</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/fence-supply-london-ontario">London</a></li>
|
||
<li>St. Thomas · Strathroy</li>
|
||
<li>Komoka</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/fence-supply-windsor">Windsor</a></li>
|
||
<li className="primary">Chatham</li>
|
||
<li>Leamington · Sarnia</li>
|
||
<li>Petrolia</li>
|
||
</ul>
|
||
</div>
|
||
<div className="region-block">
|
||
<div className="region-name">Extended Service</div>
|
||
<ul className="region-cities">
|
||
<li className="primary">Niagara Falls</li>
|
||
<li>St. Catharines · Welland</li>
|
||
<li className="primary"><a href="https://vgfence.com/fence-supply-barrie">Barrie</a></li>
|
||
<li>Owen Sound · Collingwood</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ */}
|
||
<section className="faq-section">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">Common questions</div>
|
||
<h2 className="sh">Before you reach out —<br /><span>quick answers.</span></h2>
|
||
</div>
|
||
<div className="faq-grid reveal">
|
||
<div className="faq">
|
||
{[
|
||
{ q: "How quickly do you respond to quote requests?", a: "We respond to all quote requests and enquiries within 2 business hours during business hours (Monday–Friday 8:00 AM – 5:00 PM, Saturday 9:00 AM – 2:00 PM EST). Requests sent outside business hours are responded to first thing the next business day. For emergency temporary fence requirements in the KWC area, email us directly at info@vgfenceproducts.com for the fastest response." },
|
||
{ q: "Do you have a showroom or storefront I can visit?", a: "We are a B2B supplier operating from the Kitchener–Waterloo–Cambridge area. We do not operate a public retail storefront. All orders, quotes, and service bookings are handled by email and delivered directly to your job site or business location. Contact us at info@vgfenceproducts.com to arrange product pickup if needed." },
|
||
{ q: "What information should I include when requesting a quote?", a: "The more detail you provide, the faster and more accurate the quote. Ideal information to include: the product or service you need, your job site city or address, approximate quantity or linear footage, preferred delivery date, and your company name and contact details. For temporary fence rental, also include the number of gates needed, rental duration, and whether privacy screens are required." },
|
||
{ q: "Do you offer same-day temporary fence rental?", a: "Same-day temporary fence delivery and setup is available in the Kitchener–Waterloo–Cambridge area for urgent construction emergencies and emergency situations, subject to inventory and crew availability. Contact us directly by email as early as possible for same-day requests — we'll confirm availability immediately." }
|
||
].map((item, idx) => (
|
||
<div className={`faq-item ${openFaq === idx ? 'open' : ''}`} key={idx}>
|
||
<div className="faq-q" onClick={() => toggleFaq(idx)}>
|
||
{item.q} <span className="faq-icon">+</span>
|
||
</div>
|
||
<div className="faq-a">
|
||
{item.a}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="faq">
|
||
{[
|
||
{ q: "Do you deliver outside the KWC area?", a: "Yes. We deliver all fence products and materials to job sites and business locations across approximately 250km from our Kitchener–Waterloo base. This covers Guelph, Hamilton, Brantford, the GTA, London, Windsor, Niagara, Barrie, and everything in between. A delivery fee applies based on distance and order size. Contact us with your location and we'll confirm delivery availability and quote the cost." },
|
||
{ q: "How do I set up a contractor account?", a: "Email us at info@vgfenceproducts.com with your company name, your role (fence contractor, general contractor, builder, etc.), and the types of products you typically order. We'll set up your account, confirm your contractor pricing, and get you set up for streamlined ordering. Most contractor accounts are activated within 1 business day of application." },
|
||
{ q: "Do you supply to homeowners or only contractors?", a: "Our primary focus is the trade — fence contractors, general contractors, builders, and property managers. We do supply to homeowners on a case-by-case basis, particularly for Expert Stain & Seal products and Fence Armor post protection accessories. Minimum order quantities and pricing terms for homeowners may differ from contractor pricing. Contact us to discuss your specific project." },
|
||
{ q: "Can I order fence materials and a fence drawing at the same time?", a: "Yes — and we recommend it. When you order your fence layout drawing through us, we spec it to the exact products we carry. Once the drawing is approved, your material takeoff is built in and you can order materials in the same conversation. One supplier, one invoice, and materials spec'd to your layout with no gaps or guesswork." }
|
||
].map((item, idx) => {
|
||
const actualIdx = idx + 4;
|
||
return (
|
||
<div className={`faq-item ${openFaq === actualIdx ? 'open' : ''}`} key={actualIdx}>
|
||
<div className="faq-q" onClick={() => toggleFaq(actualIdx)}>
|
||
{item.q} <span className="faq-icon">+</span>
|
||
</div>
|
||
<div className="faq-a">
|
||
{item.a}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA SECTION */}
|
||
<section className="cta-section">
|
||
<div className="cta-inner">
|
||
<h2 className="cta-h2">READY TO ORDER?<br />EMAIL US NOW.</h2>
|
||
<p className="cta-sub">Contractor pricing · 250km Ontario delivery · Response within 2 business hours</p>
|
||
<a href="mailto:info@vgfenceproducts.com" className="cta-btn">
|
||
<span className="cta-btn-icon">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
||
<polyline points="22,6 12,13 2,6" />
|
||
</svg>
|
||
</span>
|
||
info@vgfenceproducts.com
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
{/* NEWSLETTER */}
|
||
<section className="newsletter-section">
|
||
<div className="nl-inner">
|
||
<div className="nl-eye">Stay in the loop</div>
|
||
<h2 className="nl-h2">Product updates &<br /><span>contractor deals.</span></h2>
|
||
<p className="nl-sub">New products, seasonal promotions, and industry tips — delivered to your inbox. No spam, unsubscribe anytime.</p>
|
||
<div className="nl-form-wrap">
|
||
{nlStatus === "success" ? (
|
||
<div className="nl-success-msg" style={{ padding: '12px 20px', background: '#16A34A', color: 'white', borderRadius: '4px', fontWeight: 600, textAlign: 'center' }}>
|
||
Thank you! You've been subscribed successfully. ✓
|
||
</div>
|
||
) : (
|
||
<form className="nl-form" onSubmit={submitNewsletterForm}>
|
||
<input
|
||
className="nl-input"
|
||
type="email"
|
||
placeholder={nlStatus === "error" ? "Error occurred. Try again?" : "Enter your email address"}
|
||
value={nlEmail}
|
||
onChange={(e) => setNlEmail(e.target.value)}
|
||
required
|
||
disabled={nlStatus === "submitting"}
|
||
/>
|
||
<button type="submit" className="nl-btn" disabled={nlStatus === "submitting"}>
|
||
{nlStatus === "submitting" ? "..." : "Subscribe →"}
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
<p className="nl-note">Join contractors and builders across Ontario · 1–6 emails per month</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ContactClient;
|