900 lines
49 KiB
TypeScript
900 lines
49 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import Link from "next/link";
|
||
import axios from "axios";
|
||
import "./glass-railing.css";
|
||
|
||
export default function GlassRailingClient() {
|
||
// FAQ state
|
||
const [openFaq, setOpenFaq] = useState<number | null>(null);
|
||
|
||
// Active section for jump navigation
|
||
const [activeSection, setActiveSection] = useState<string>("post-mount");
|
||
|
||
// Form state
|
||
const [formData, setFormData] = useState({
|
||
companyName: "",
|
||
name: "",
|
||
phone: "",
|
||
email: "",
|
||
systemGlass: "",
|
||
city: "",
|
||
footage: "",
|
||
});
|
||
const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
||
|
||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||
};
|
||
|
||
const handleFormSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setFormStatus("submitting");
|
||
|
||
const emailData = {
|
||
name: formData.name,
|
||
email: formData.email,
|
||
phone: formData.phone,
|
||
service: "Glass Railing Systems Quote",
|
||
message: `
|
||
<b>Company Name:</b> ${formData.companyName || "N/A"}<br/>
|
||
<b>System & Glass:</b> ${formData.systemGlass || "Not Specified"}<br/>
|
||
<b>Job Site City:</b> ${formData.city || "Not Specified"}<br/>
|
||
<b>Linear Footage:</b> ${formData.footage || "Not Specified"}
|
||
`,
|
||
to: "info@vgfenceproducts.com",
|
||
senderName: "VG Glass Railing Page",
|
||
};
|
||
|
||
try {
|
||
await axios.post("https://mailserver.metatronnest.com/send", emailData, {
|
||
headers: { "Content-Type": "application/json" },
|
||
});
|
||
setFormStatus("success");
|
||
setFormData({
|
||
companyName: "",
|
||
name: "",
|
||
phone: "",
|
||
email: "",
|
||
systemGlass: "",
|
||
city: "",
|
||
footage: "",
|
||
});
|
||
} catch (err) {
|
||
console.error("❌ Glass Railing Quote Submission Error:", err);
|
||
setFormStatus("error");
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
// Scrollspy setup
|
||
const sections = ["post-mount", "standoff", "fascia", "hardware", "compare"];
|
||
const sysObs = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
setActiveSection(entry.target.id);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.3 }
|
||
);
|
||
|
||
sections.forEach((id) => {
|
||
const el = document.getElementById(id);
|
||
if (el) sysObs.observe(el);
|
||
});
|
||
|
||
// Reveal animations setup
|
||
const revealObs = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add("visible");
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.08 }
|
||
);
|
||
|
||
document.querySelectorAll(".reveal").forEach((el) => revealObs.observe(el));
|
||
|
||
return () => {
|
||
sysObs.disconnect();
|
||
revealObs.disconnect();
|
||
};
|
||
}, []);
|
||
|
||
const handleNavClick = (id: string) => {
|
||
setActiveSection(id);
|
||
const el = document.getElementById(id);
|
||
if (el) {
|
||
const yOffset = -120; // adjust for sticky headers
|
||
const y = el.getBoundingClientRect().top + window.scrollY + yOffset;
|
||
window.scrollTo({ top: y, behavior: "smooth" });
|
||
}
|
||
};
|
||
|
||
const toggleFaq = (index: number) => {
|
||
setOpenFaq(openFaq === index ? null : index);
|
||
};
|
||
|
||
return (
|
||
<div className="glass-railing-page">
|
||
{/* BREADCRUMB */}
|
||
{/* <nav className="breadcrumb" aria-label="Breadcrumb">
|
||
<Link href="/">Home</Link>
|
||
<span>›</span>
|
||
<Link href="/products">Products</Link>
|
||
<span>›</span>
|
||
<span>Glass Railing Systems</span>
|
||
</nav> */}
|
||
|
||
{/* HERO */}
|
||
<section className="hero">
|
||
<div className="hero-grid-bg"></div>
|
||
<div className="hero-glass-deco">
|
||
<div className="hero-glass-panel"></div>
|
||
<div className="hero-glass-panel"></div>
|
||
<div className="hero-glass-panel"></div>
|
||
<div className="hero-glass-panel"></div>
|
||
<div className="hero-glass-panel"></div>
|
||
<div className="hero-glass-panel"></div>
|
||
</div>
|
||
<div className="hero-accent"></div>
|
||
<div className="hero-inner">
|
||
<div className="hero-eyebrow">Glass railing systems · KWC Ontario</div>
|
||
<h1>
|
||
Open views.<br />
|
||
<em>Clean lines.</em>
|
||
</h1>
|
||
<p className="hero-desc">
|
||
We carry <strong>3 glass railing systems</strong> — post-mount, standoff spigot, and fascia-mount — for decks, balconies, pool enclosures, and stairs. Tempered safety glass in clear, frosted, and tinted options. Serving contractors across <strong>250km from Kitchener–Waterloo.</strong>
|
||
</p>
|
||
<div className="hero-badges">
|
||
<span className="badge badge-fill">3 Railing Systems</span>
|
||
<span className="badge">Tempered Safety Glass</span>
|
||
<span className="badge">10mm & 12mm</span>
|
||
<span className="badge">Pool Compliant</span>
|
||
<span className="badge">Contractor Pricing</span>
|
||
</div>
|
||
<div className="hero-stats">
|
||
<div><div className="stat-val">3</div><div className="stat-label">Railing systems</div></div>
|
||
<div><div className="stat-val">4</div><div className="stat-label">Glass options</div></div>
|
||
<div><div className="stat-val">250km</div><div className="stat-label">Ontario delivery</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="model-nav">
|
||
<a
|
||
className={`model-nav-item ${activeSection === "post-mount" ? "active" : ""}`}
|
||
href="#post-mount"
|
||
onClick={(e) => { e.preventDefault(); handleNavClick("post-mount"); }}
|
||
>
|
||
Post-Mount
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === "standoff" ? "active" : ""}`}
|
||
href="#standoff"
|
||
onClick={(e) => { e.preventDefault(); handleNavClick("standoff"); }}
|
||
>
|
||
Standoff / Spigot
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === "fascia" ? "active" : ""}`}
|
||
href="#fascia"
|
||
onClick={(e) => { e.preventDefault(); handleNavClick("fascia"); }}
|
||
>
|
||
Fascia-Mount
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === "hardware" ? "active" : ""}`}
|
||
href="#hardware"
|
||
onClick={(e) => { e.preventDefault(); handleNavClick("hardware"); }}
|
||
>
|
||
Posts & Hardware
|
||
</a>
|
||
<a
|
||
className={`model-nav-item ${activeSection === "compare" ? "active" : ""}`}
|
||
href="#compare"
|
||
onClick={(e) => { e.preventDefault(); handleNavClick("compare"); }}
|
||
>
|
||
Compare All
|
||
</a>
|
||
</div>
|
||
|
||
{/* INTRO */}
|
||
<section className="intro">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">About this product line</div>
|
||
<h2 className="sh">Glass railing supply<br /><span>for contractors.</span></h2>
|
||
</div>
|
||
<div className="intro-grid">
|
||
<div className="intro-text reveal">
|
||
<p>
|
||
<strong>VG Fence Products supplies glass railing systems to deck builders, fence contractors, and general contractors</strong> across Waterloo Region and Ontario. We carry three complete systems — post-mount, standoff spigot, and fascia-mount — each suited to different project aesthetics, structural requirements, and budgets.
|
||
</p>
|
||
<p>
|
||
All systems use <strong>tempered safety glass as standard</strong>, available in clear, frosted, bronze tint, and grey tint. Glass thickness options include 10mm for standard residential applications and 12mm for standoff systems, pool enclosures, and structural requirements.
|
||
</p>
|
||
<p>
|
||
Commercial glass railing is also available on request — contact us with your project specifications and we'll provide pricing and lead time.
|
||
</p>
|
||
<ul className="check-list">
|
||
<li>3 systems — post-mount, standoff spigot, fascia-mount base shoe</li>
|
||
<li>Tempered safety glass — 10mm and 12mm thickness</li>
|
||
<li>Clear, frosted, bronze tint, and grey tint glass options</li>
|
||
<li>Aluminum and stainless steel hardware finishes</li>
|
||
<li>Pool-compliant configurations — 12mm recommended</li>
|
||
<li>Continuous aluminum top rail and stainless handrail options</li>
|
||
<li>Contractor pricing — bulk orders welcome</li>
|
||
<li>Commercial glass railing available on request</li>
|
||
</ul>
|
||
</div>
|
||
<div className="highlight-cards reveal">
|
||
<div className="hcard">
|
||
<div className="hcard-title">Tempered safety glass — standard</div>
|
||
<div className="hcard-desc">All three systems use tempered (heat-treated) safety glass as standard. Required by Ontario Building Code for all railing applications — significantly stronger than standard glass and safe if broken.</div>
|
||
</div>
|
||
<div className="hcard">
|
||
<div className="hcard-title">Pool-compliant systems</div>
|
||
<div className="hcard-desc">Tempered glass railing is a code-approved material for pool enclosures in Ontario. We carry self-latching gate hardware for pool access points. 12mm glass recommended for pool applications.</div>
|
||
</div>
|
||
<div className="hcard">
|
||
<div className="hcard-title">Commercial orders available</div>
|
||
<div className="hcard-desc">Commercial-grade glass railing for condos, offices, and public spaces is available on special order. Contact us with your linear footage, system preference, and glass spec for a custom quote.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SYSTEM 1 — POST-MOUNT */}
|
||
<section className="model-section bg-white" id="post-mount">
|
||
<div className="model-layout reveal">
|
||
<div>
|
||
<div className="model-accent-strip"></div>
|
||
<div className="model-label">System 01</div>
|
||
<div className="model-name">Post-Mount</div>
|
||
<div className="model-tagline">Most popular residential system</div>
|
||
<p className="model-desc">Glass panels sit between aluminum or stainless steel posts mounted to the deck frame or concrete. Posts are visible as a clean design element. The most widely installed glass railing system — structurally robust, easy to install, and compatible with virtually any deck construction type.</p>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Glass specifications</div>
|
||
<div className="spec-row"><span className="spec-key">Standard thickness</span><span className="spec-val orange">10mm tempered</span></div>
|
||
<div className="spec-row"><span className="spec-key">Heavy-duty / pool</span><span className="spec-val orange">12mm tempered</span></div>
|
||
<div className="spec-row"><span className="spec-key">Glass type</span><span className="spec-val">Safety glass — OBC compliant</span></div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Glass options</div>
|
||
<div className="glass-pills">
|
||
<span className="glass-pill navy">Clear</span>
|
||
<span className="glass-pill light">Frosted</span>
|
||
<span className="glass-pill light">Bronze tint</span>
|
||
<span className="glass-pill light">Grey tint</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Post & hardware</div>
|
||
<div className="hw-detail-cards">
|
||
<div className="hw-detail-card">
|
||
<div className="hw-detail-label">Post material</div>
|
||
<div className="hw-detail-val">Aluminum or stainless steel</div>
|
||
<div className="hw-detail-note">Round or square profile</div>
|
||
</div>
|
||
<div className="hw-detail-card">
|
||
<div className="hw-detail-label">Finish options</div>
|
||
<div className="hw-detail-val">Black · Satin / brushed</div>
|
||
<div className="hw-detail-note">Surface or core-mount</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Top rail options</div>
|
||
<div className="spec-row"><span className="spec-key">Aluminum top rail</span><span className="spec-val">Continuous run</span></div>
|
||
<div className="spec-row"><span className="spec-key">Stainless round handrail</span><span className="spec-val">Optional upgrade</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* PHOTO AREA */}
|
||
<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">Post-mount installation photo</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" }}>Post detail / close-up</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" }}>Installed project</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SYSTEM 2 — STANDOFF / SPIGOT */}
|
||
<section className="model-section bg-gray" id="standoff">
|
||
<div className="model-layout reveal" style={{ direction: "rtl" }}>
|
||
{/* PHOTO LEFT */}
|
||
<div style={{ direction: "ltr" }}>
|
||
<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">Standoff / spigot photo</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" }}>Spigot detail</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" }}>Installed project</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ direction: "ltr" }}>
|
||
<div className="model-accent-strip"></div>
|
||
<div className="model-label">System 02</div>
|
||
<div className="model-name">Standoff / Spigot</div>
|
||
<div className="model-tagline">Frameless · Modern aesthetic</div>
|
||
<p className="model-desc">Individual stainless steel spigots bolt directly to the deck surface and support the glass panels from below — no posts between panels. Nearly frameless look with unobstructed views on all sides. The most modern glass railing option, popular for contemporary homes, pool surrounds, and rooftop terraces.</p>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Glass specifications</div>
|
||
<div className="spec-row"><span className="spec-key">Standard thickness</span><span className="spec-val orange">12mm tempered</span></div>
|
||
<div className="spec-row"><span className="spec-key">Glass type</span><span className="spec-val">Safety glass — OBC compliant</span></div>
|
||
<div className="spec-row"><span className="spec-key">Panel style</span><span className="spec-val">Full-height frameless panels</span></div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Glass options</div>
|
||
<div className="glass-pills">
|
||
<span className="glass-pill navy">Clear</span>
|
||
<span className="glass-pill light">Frosted</span>
|
||
<span className="glass-pill light">Bronze tint</span>
|
||
<span className="glass-pill light">Grey tint</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Spigot hardware</div>
|
||
<div className="hw-detail-cards">
|
||
<div className="hw-detail-card">
|
||
<div className="hw-detail-label">Material</div>
|
||
<div className="hw-detail-val">Stainless steel 316</div>
|
||
<div className="hw-detail-note">Brushed · Polished black</div>
|
||
</div>
|
||
<div className="hw-detail-card">
|
||
<div className="hw-detail-label">Mount type</div>
|
||
<div className="hw-detail-val">Surface · Side · Core</div>
|
||
<div className="hw-detail-note">Stair-compatible fittings available</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title">Top rail options</div>
|
||
<div className="spec-row"><span className="spec-key">Stainless round handrail</span><span className="spec-val">Most common choice</span></div>
|
||
<div className="spec-row"><span className="spec-key">Glass-to-glass connector</span><span className="spec-val">No top rail option</span></div>
|
||
<div className="spec-row"><span className="spec-key">Aluminum top rail</span><span className="spec-val">Available</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* SYSTEM 3 — FASCIA-MOUNT */}
|
||
<section className="model-section bg-navy" id="fascia">
|
||
<div className="model-layout reveal">
|
||
<div>
|
||
<div className="model-accent-strip"></div>
|
||
<div className="model-label dim">System 03 · Cleanest look</div>
|
||
<div className="model-name white">Fascia-Mount</div>
|
||
<div className="model-tagline">Base shoe · Fully frameless appearance</div>
|
||
<p className="model-desc white">An aluminum base shoe channel fastened to the face or top of the deck rim joist holds the glass panels from below — no visible posts at all. Glass appears to rise directly from the deck surface. The cleanest, most frameless appearance of any glass railing system — preferred for premium deck builds and high-end renovations.</p>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title white">Glass specifications</div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Standard thickness</span><span className="spec-val orange">10mm tempered</span></div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Heavy-duty option</span><span className="spec-val orange">12mm tempered</span></div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Glass type</span><span className="spec-val white">Safety glass — OBC compliant</span></div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title white">Glass options</div>
|
||
<div className="glass-pills">
|
||
<span className="glass-pill orange">Clear</span>
|
||
<span className="glass-pill outline">Frosted</span>
|
||
<span className="glass-pill outline">Bronze tint</span>
|
||
<span className="glass-pill outline">Grey tint</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title white">Base shoe channel</div>
|
||
<div className="hw-detail-cards">
|
||
<div className="hw-detail-card dark">
|
||
<div className="hw-detail-label">Material</div>
|
||
<div className="hw-detail-val white">Aluminum extrusion</div>
|
||
<div className="hw-detail-note white">Black · Mill / silver finish</div>
|
||
</div>
|
||
<div className="hw-detail-card dark">
|
||
<div className="hw-detail-label">Mount type</div>
|
||
<div className="hw-detail-val white">Top-mount · Side fascia</div>
|
||
<div className="hw-detail-note white">With rubber gasket kit</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="specs-block">
|
||
<div className="specs-title white">Top rail options</div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Aluminum top rail</span><span className="spec-val white">Standard — continuous</span></div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Stainless round handrail</span><span className="spec-val white">Optional upgrade</span></div>
|
||
<div className="spec-row white-row"><span className="spec-key white">Glass-to-glass connector</span><span className="spec-val white">No rail option</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* PHOTO AREA */}
|
||
<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,.4)" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.4)" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.4)" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-label">Fascia-mount photo</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,.4)" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.4)" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.4)" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: "11px" }}>Base shoe detail</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,.4)" strokeWidth="2" />
|
||
<circle cx="17" cy="22" r="5" stroke="rgba(255,255,255,.4)" strokeWidth="2" />
|
||
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="rgba(255,255,255,.4)" strokeWidth="2" fill="none" />
|
||
</svg>
|
||
<div className="photo-sub" style={{ fontSize: "11px" }}>Installed project</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* POSTS & HARDWARE */}
|
||
<section className="hw-section" id="hardware">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow" style={{ color: "rgba(255,255,255,.5)" }}>Components</div>
|
||
<h2 className="sh sh-white">Posts, hardware<br /><span>& handrail.</span></h2>
|
||
</div>
|
||
<div className="hw-grid reveal">
|
||
<div className="hw-card">
|
||
<div className="hw-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="7" y="1" width="6" height="18" rx="2" fill="white" />
|
||
<rect x="4" y="1" width="6" height="4" rx="1.5" fill="white" opacity=".5" />
|
||
</svg>
|
||
</div>
|
||
<div className="hw-name">Posts <span>& Spigots</span></div>
|
||
<div className="hw-desc">Structural support for post-mount and standoff systems. Aluminum and stainless steel in multiple profiles and finishes to match any project aesthetic.</div>
|
||
<div className="hw-specs">
|
||
<div className="hw-spec">Round aluminum posts — black & satin</div>
|
||
<div className="hw-spec">Square aluminum posts — black & satin</div>
|
||
<div className="hw-spec">Stainless steel 316 spigots — brushed & black</div>
|
||
<div className="hw-spec">Surface, core & side-mount options</div>
|
||
<div className="hw-spec">Post sleeves and base plates available</div>
|
||
<div className="hw-spec">Stair-specific fittings available</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hw-card">
|
||
<div className="hw-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="1" y="8" width="18" height="3" rx="1.5" fill="white" />
|
||
<rect x="4" y="13" width="12" height="2" rx="1" fill="white" opacity=".5" />
|
||
</svg>
|
||
</div>
|
||
<div className="hw-name">Top Rail <span>& Handrail</span></div>
|
||
<div className="hw-desc">Continuous top rail in aluminum and stainless steel, plus glass-to-glass connectors for a true no-rail frameless look. Corner and stair fittings included.</div>
|
||
<div className="hw-specs">
|
||
<div className="hw-spec">Aluminum continuous top rail — black & mill</div>
|
||
<div className="hw-spec">Stainless round handrail — brushed & polished</div>
|
||
<div className="hw-spec">Glass-to-glass connector clips</div>
|
||
<div className="hw-spec">Corner connectors and end caps</div>
|
||
<div className="hw-spec">Stair rail fittings available</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hw-card">
|
||
<div className="hw-icon">
|
||
<svg viewBox="0 0 20 20" fill="none">
|
||
<rect x="2" y="15" width="16" height="3" rx="1.5" fill="white" />
|
||
<rect x="6" y="4" width="8" height="12" rx="1" fill="white" opacity=".6" />
|
||
<rect x="4" y="3" width="12" height="3" rx="1" fill="white" opacity=".4" />
|
||
</svg>
|
||
</div>
|
||
<div className="hw-name">Base Shoe <span>& Channels</span></div>
|
||
<div className="hw-desc">Aluminum base shoe channels for fascia-mount systems. Precision extruded with rubber gasket kits to secure glass firmly with no lateral movement.</div>
|
||
<div className="hw-specs">
|
||
<div className="hw-spec">Aluminum base shoe — top & side fascia versions</div>
|
||
<div className="hw-spec">Black anodized & clear / mill finish</div>
|
||
<div className="hw-spec">Setting blocks & rubber gasket kits</div>
|
||
<div className="hw-spec">End caps and corner extrusions</div>
|
||
<div className="hw-spec">Wedge shim packs for glass adjustment</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* COMMERCIAL BANNER inside navy section */}
|
||
<div className="commercial-banner reveal" style={{ marginTop: "48px" }}>
|
||
<div className="commercial-banner-icon">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<rect x="3" y="8" width="22" height="16" rx="2" stroke="white" strokeWidth="2" />
|
||
<path d="M9 8V6a5 5 0 0110 0v2" stroke="white" strokeWidth="2" strokeLinecap="round" />
|
||
<circle cx="14" cy="16" r="2" fill="white" />
|
||
</svg>
|
||
</div>
|
||
<div className="commercial-banner-text">
|
||
<h3>Commercial glass railing — available on request</h3>
|
||
<p>Commercial-grade glass railing for condos, offices, mixed-use buildings, and public spaces is available on special order. Contact us with your system type, linear footage, glass spec, and application.</p>
|
||
</div>
|
||
<button
|
||
className="commercial-banner-cta"
|
||
onClick={() => handleNavClick("quote-section")}
|
||
>
|
||
Request commercial quote →
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
{/* COMPARE ALL SYSTEMS */}
|
||
<section className="compare-section" id="compare">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">System comparison</div>
|
||
<h2 className="sh">Compare all<br /><span>three systems.</span></h2>
|
||
</div>
|
||
<div className="compare-table-wrap reveal">
|
||
<table className="compare-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Feature</th>
|
||
<th><span className="model-pill pill-post">Post-Mount</span></th>
|
||
<th><span className="model-pill pill-standoff">Standoff / Spigot</span></th>
|
||
<th><span className="model-pill pill-fascia">Fascia-Mount</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Standard glass thickness</td><td>10mm tempered</td><td>12mm tempered</td><td>10mm tempered</td></tr>
|
||
<tr><td>12mm option</td><td><span className="check">✓</span> Available</td><td><span className="check">✓</span> Standard</td><td><span className="check">✓</span> Available</td></tr>
|
||
<tr><td>Frameless appearance</td><td>Posts visible</td><td>Near-frameless</td><td>Fully frameless</td></tr>
|
||
<tr><td>Post / support material</td><td>Aluminum or SS</td><td>Stainless 316</td><td>Aluminum channel</td></tr>
|
||
<tr><td>Finish options</td><td>Black · Satin</td><td>Brushed · Black</td><td>Black · Mill</td></tr>
|
||
<tr><td>Pool compliant</td><td><span className="check">✓</span> Yes</td><td><span className="check">✓</span> Yes</td><td><span className="check">✓</span> Yes</td></tr>
|
||
<tr><td>Stair-compatible</td><td><span className="check">✓</span> Yes</td><td><span className="check">✓</span> Yes</td><td><span className="check">✓</span> Yes</td></tr>
|
||
<tr><td>Clear glass</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
|
||
<tr><td>Frosted / tinted glass</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
|
||
<tr><td>Aluminum top rail</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span> Standard</td></tr>
|
||
<tr><td>Stainless handrail</td><td><span className="check">✓</span> Optional</td><td><span className="check">✓</span> Popular</td><td><span className="check">✓</span> Optional</td></tr>
|
||
<tr><td>No-rail / glass-to-glass</td><td>—</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
|
||
<tr><td>Best for</td><td>Decks, pools, balconies</td><td>Contemporary, rooftop, pool</td><td>Premium builds, new decks</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ + SEO CONTENT */}
|
||
<section className="faq-section">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">Helpful information</div>
|
||
<h2 className="sh">Glass railing<br /><span>knowledge base.</span></h2>
|
||
</div>
|
||
<div className="faq-seo-grid">
|
||
<div className="faq reveal">
|
||
{[
|
||
{
|
||
q: "What glass railing systems do you carry?",
|
||
a: "We carry three systems: post-mount (aluminum or stainless posts between glass panels), standoff/spigot (individual stainless spigots — near-frameless look), and fascia-mount base shoe (aluminum channel holds glass from below — cleanest, fully frameless appearance). All systems use tempered safety glass as standard."
|
||
},
|
||
{
|
||
q: "What glass thickness do I need?",
|
||
a: "10mm tempered glass is standard for post-mount and fascia-mount systems on most residential decks and balconies. 12mm is standard for the standoff/spigot system (glass bears more structural load) and is also recommended for pool enclosures and high-wind applications. We can help confirm the right spec for your project."
|
||
},
|
||
{
|
||
q: "Is tempered glass required for railing in Ontario?",
|
||
a: "Yes. Tempered (heat-treated) safety glass is required under the Ontario Building Code for all railing applications. Tempered glass is significantly stronger than standard glass and, if broken, shatters into small blunt pieces rather than sharp shards — making it the only safe choice for railing. All glass we supply is tempered safety glass."
|
||
},
|
||
{
|
||
q: "Can glass railing be used for pool enclosures?",
|
||
a: "Yes. Tempered glass railing is a code-approved material for pool enclosures in Ontario. Pool enclosures typically require a minimum 1.2m (approximately 48\") barrier height. We recommend 12mm glass for pool applications. Self-latching gate hardware is required at all pool access points — we stock this as well. Always verify specific requirements with your local municipality."
|
||
},
|
||
{
|
||
q: "Which system gives the cleanest frameless look?",
|
||
a: "The fascia-mount base shoe system gives the cleanest, most frameless appearance — glass appears to rise directly from the deck surface with no visible posts. The standoff/spigot system is a close second with only small spigot hardware visible between panels. Post-mount systems have visible posts and are the most structurally straightforward to install."
|
||
},
|
||
{
|
||
q: "Do you deliver glass railing materials to job sites?",
|
||
a: "Yes. We offer scheduled delivery of all glass railing components — panels, posts, spigots, base shoe channels, top rail, and hardware — to job sites across a 250km radius from our Kitchener–Waterloo base. Contact us to arrange delivery timing around your installation schedule."
|
||
}
|
||
].map((faq, index) => (
|
||
<div
|
||
key={index}
|
||
className={`faq-item ${openFaq === index ? "open" : ""}`}
|
||
>
|
||
<div className="faq-q" onClick={() => toggleFaq(index)}>
|
||
{faq.q}
|
||
<span className="faq-icon">+</span>
|
||
</div>
|
||
<div className="faq-a">
|
||
{faq.a}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="content-block reveal">
|
||
<h3>Glass railing supplier — KWC & Ontario</h3>
|
||
<p>VG Fence Products is a dedicated <strong>glass railing supplier</strong> serving deck builders, fence contractors, and general contractors across Waterloo Region and Ontario. We carry three complete glass railing systems with all components in stock — panels, posts, spigots, base shoe, top rail, and hardware — so your team can source everything from one place.</p>
|
||
<h3>Contractor supply across Southern Ontario</h3>
|
||
<p>We supply glass railing materials directly to contractors with <strong>contractor pricing on all orders</strong> and scheduled delivery to your job site across our 250km service radius. Set up a contractor account for streamlined ordering. Commercial glass railing projects are available on request — contact us with your specifications for a custom quote.</p>
|
||
<h3>Pool-compliant glass railing — Ontario</h3>
|
||
<p>Glass railing is a popular and code-compliant choice for <strong>pool enclosures</strong> across Ontario. Our tempered glass systems meet Ontario Building Code requirements for pool barriers. We carry self-latching gate hardware for pool access gates. Verify your specific municipal requirements with your local building department before installation.</p>
|
||
<h3>Frameless glass railing — Waterloo Region</h3>
|
||
<p>Whether you're installing a <strong>frameless glass railing</strong> on a new deck in Waterloo, a pool enclosure in Guelph, or a balcony railing in Hamilton, VG Fence Products has the system and delivery reach to support your project. Contact us with your system choice and linear footage for a fast contractor quote.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* TERRITORY */}
|
||
<section className="territory">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow" style={{ color: "rgba(255,255,255,.5)" }}>Where we deliver</div>
|
||
<h2 className="sh sh-white">Glass railing supply<br /><span>across Ontario.</span></h2>
|
||
<p className="territory-intro">Scheduled delivery of glass railing systems and all components to job sites 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">Kitchener</li><li className="primary">Waterloo</li><li className="primary">Cambridge</li>
|
||
<li>Ayr</li><li>Breslau</li><li>Elmira</li><li>St. Jacobs</li><li>New Hamburg</li><li>Baden</li><li>Wellesley</li>
|
||
</ul>
|
||
</div>
|
||
<div className="region-block">
|
||
<div className="region-name">Guelph & Wellington</div>
|
||
<ul className="region-cities">
|
||
<li className="primary">Guelph</li><li>Fergus</li><li>Elora</li><li>Rockwood</li><li>Acton</li><li>Georgetown</li>
|
||
</ul>
|
||
</div>
|
||
<div className="region-block">
|
||
<div className="region-name">Halton & Hamilton</div>
|
||
<ul className="region-cities">
|
||
<li className="primary">Hamilton</li><li className="primary">Burlington</li><li>Milton</li><li>Oakville</li>
|
||
<li>Stoney Creek</li><li>Grimsby</li><li>Brantford</li><li>Paris</li>
|
||
</ul>
|
||
</div>
|
||
<div className="region-block">
|
||
<div className="region-name">GTA & Peel</div>
|
||
<ul className="region-cities">
|
||
<li className="primary">Mississauga</li><li className="primary">Brampton</li>
|
||
<li>Vaughan</li><li>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">Woodstock</li><li className="primary">Stratford</li>
|
||
<li>Ingersoll</li><li>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">London</li><li>St. Thomas</li><li>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">Windsor</li><li className="primary">Chatham</li><li>Leamington</li><li>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</li><li>Welland</li>
|
||
<li className="primary">Barrie</li><li>Owen Sound</li><li>Collingwood</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* QUOTE CTA */}
|
||
<section className="quote-cta" id="quote-section">
|
||
<div className="quote-inner">
|
||
<div className="quote-left">
|
||
<h2>Get glass railing pricing.</h2>
|
||
<p>Tell us your system, glass type, linear footage, and job site — we'll come back with contractor pricing within 2 business hours. Commercial orders also available on request.</p>
|
||
</div>
|
||
<div className="quote-form-card">
|
||
{formStatus === "success" ? (
|
||
<div style={{ padding: "30px", background: "rgba(255,255,255,0.1)", borderRadius: "8px", border: "1px solid white", color: "white", textAlign: "center" }}>
|
||
<div style={{ fontSize: "40px", marginBottom: "15px" }}>✅</div>
|
||
<h3 style={{ margin: "0 0 10px 0", fontFamily: "var(--fd)" }}>Request Sent!</h3>
|
||
<p style={{ margin: 0, opacity: 0.9 }}>Thank you. We'll be in touch within 2 business hours.</p>
|
||
<button
|
||
type="button"
|
||
className="qbtn"
|
||
style={{ marginTop: "20px" }}
|
||
onClick={() => setFormStatus("idle")}
|
||
>
|
||
Send another request
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={handleFormSubmit}>
|
||
<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 · Contractor pricing</div>
|
||
|
||
<div className="qrow">
|
||
<div>
|
||
<label className="ql">Company name</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="companyName"
|
||
placeholder="ABC Deck Co."
|
||
value={formData.companyName}
|
||
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">System & glass</label>
|
||
<select
|
||
className="qi"
|
||
name="systemGlass"
|
||
value={formData.systemGlass}
|
||
onChange={handleInputChange}
|
||
required
|
||
>
|
||
<option value="">Select system...</option>
|
||
<option value="Post-Mount — 10mm clear">Post-Mount — 10mm clear</option>
|
||
<option value="Post-Mount — 12mm clear">Post-Mount — 12mm clear</option>
|
||
<option value="Post-Mount — frosted or tinted">Post-Mount — frosted or tinted</option>
|
||
<option value="Standoff / Spigot — 12mm clear">Standoff / Spigot — 12mm clear</option>
|
||
<option value="Standoff / Spigot — frosted or tinted">Standoff / Spigot — frosted or tinted</option>
|
||
<option value="Fascia-Mount — 10mm clear">Fascia-Mount — 10mm clear</option>
|
||
<option value="Fascia-Mount — 12mm clear">Fascia-Mount — 12mm clear</option>
|
||
<option value="Fascia-Mount — frosted or tinted">Fascia-Mount — frosted or tinted</option>
|
||
<option value="Posts, spigots & hardware only">Posts, spigots & hardware only</option>
|
||
<option value="Commercial project — special order">Commercial project — special order</option>
|
||
<option value="Not sure — need advice">Not sure — need advice</option>
|
||
</select>
|
||
|
||
<div className="qrow">
|
||
<div>
|
||
<label className="ql">Job site city</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="city"
|
||
placeholder="Kitchener, Guelph..."
|
||
value={formData.city}
|
||
onChange={handleInputChange}
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="ql">Linear footage</label>
|
||
<input
|
||
className="qi"
|
||
type="text"
|
||
name="footage"
|
||
placeholder="e.g. 80 linear ft"
|
||
value={formData.footage}
|
||
onChange={handleInputChange}
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{formStatus === "error" && (
|
||
<p style={{ color: "#fee2e2", fontSize: "14px", marginBottom: "15px" }}>
|
||
⚠️ Failed to send request. Please try again or email us directly.
|
||
</p>
|
||
)}
|
||
|
||
<button
|
||
className="qbtn"
|
||
type="submit"
|
||
disabled={formStatus === "submitting"}
|
||
>
|
||
{formStatus === "submitting" ? "Sending..." : "Send quote request →"}
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|