From deec9faa678e89dceae211b60b6e0a6f229ec1cf Mon Sep 17 00:00:00 2001 From: vidhya Date: Sat, 13 Jun 2026 16:20:52 +0530 Subject: [PATCH] New product pages added --- .../drawing-services.css | 983 +++++++++++++++ app/2d-fence-drawing-services/page.tsx | 881 +++++++++++++ app/globals.css | 19 +- .../glass-railing/GlassRailingClient.tsx | 899 ++++++++++++++ app/products/glass-railing/glass-railing.css | 290 +++++ app/products/glass-railing/page.tsx | 73 ++ .../OrnamentalFenceClient.tsx | 956 +++++++++++++++ .../ornamental-fence/ornamental-fence.css | 1077 ++++++++++++++++ app/products/ornamental-fence/page.tsx | 73 ++ .../TemporaryFenceRentalClient.tsx | 942 ++++++++++++++ app/temporary-fence-rental/page.tsx | 152 +++ .../tempfence-rental.css | 1091 +++++++++++++++++ .../TemporaryFencingClient.tsx | 999 +++++++++++++++ app/temporary-fencing/page.tsx | 77 ++ app/temporary-fencing/temporary-fencing.css | 997 +++++++++++++++ .../WoodStainingServicesClient.tsx | 851 +++++++++++++ app/wood-staining-services/page.tsx | 74 ++ .../wood-staining-services.css | 887 ++++++++++++++ components/Footer.tsx | 14 +- components/Navbar.tsx | 15 +- components/Products.tsx | 6 +- 21 files changed, 11331 insertions(+), 25 deletions(-) create mode 100644 app/2d-fence-drawing-services/drawing-services.css create mode 100644 app/2d-fence-drawing-services/page.tsx create mode 100644 app/products/glass-railing/GlassRailingClient.tsx create mode 100644 app/products/glass-railing/glass-railing.css create mode 100644 app/products/glass-railing/page.tsx create mode 100644 app/products/ornamental-fence/OrnamentalFenceClient.tsx create mode 100644 app/products/ornamental-fence/ornamental-fence.css create mode 100644 app/products/ornamental-fence/page.tsx create mode 100644 app/temporary-fence-rental/TemporaryFenceRentalClient.tsx create mode 100644 app/temporary-fence-rental/page.tsx create mode 100644 app/temporary-fence-rental/tempfence-rental.css create mode 100644 app/temporary-fencing/TemporaryFencingClient.tsx create mode 100644 app/temporary-fencing/page.tsx create mode 100644 app/temporary-fencing/temporary-fencing.css create mode 100644 app/wood-staining-services/WoodStainingServicesClient.tsx create mode 100644 app/wood-staining-services/page.tsx create mode 100644 app/wood-staining-services/wood-staining-services.css diff --git a/app/2d-fence-drawing-services/drawing-services.css b/app/2d-fence-drawing-services/drawing-services.css new file mode 100644 index 0000000..cdfcce8 --- /dev/null +++ b/app/2d-fence-drawing-services/drawing-services.css @@ -0,0 +1,983 @@ +/* 2D Fence Drawing Services Page - Scoped Styles */ + +/* Breadcrumb */ +.drawing-services-page .breadcrumb { + background: var(--gray-100); + padding: 12px 80px; + font-size: 12px; + color: var(--gray-600); + display: flex; + align-items: center; + gap: 8px; + margin-top: 64px; + border-bottom: 1px solid var(--gray-200); +} +.drawing-services-page .breadcrumb a { + color: var(--navy-mid); + text-decoration: none; +} +.drawing-services-page .breadcrumb a:hover { + color: var(--orange); +} +.drawing-services-page .breadcrumb span { + color: var(--gray-400); +} + +/* Hero */ +.drawing-services-page .hero { + background: var(--navy); + position: relative; + overflow: hidden; + padding: 72px 80px 80px; + min-height: auto; /* override global hero height */ + display: block; /* override global hero grid layout */ +} +.drawing-services-page .hero-grid-bg { + position: absolute; + inset: 0; + opacity: .035; + background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, .6) 39px, rgba(255, 255, 255, .6) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, .6) 39px, rgba(255, 255, 255, .6) 40px); +} +.drawing-services-page .hero-cad-deco { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 42%; + opacity: .05; + background-image: repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(255, 255, 255, .8) 18px, rgba(255, 255, 255, .8) 20px), repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255, 255, 255, .4) 18px, rgba(255, 255, 255, .4) 20px); +} +.drawing-services-page .hero-accent { + position: absolute; + right: -80px; + bottom: -80px; + width: 360px; + height: 360px; + border-radius: 50%; + border: 56px solid var(--orange); + opacity: .1; +} +.drawing-services-page .hero-inner { + position: relative; + z-index: 2; + max-width: 760px; +} +.drawing-services-page .hero-eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 20px; +} +.drawing-services-page .hero-eyebrow::before { + content: ''; + display: block; + width: 28px; + height: 2px; + background: var(--orange); +} +.drawing-services-page h1 { + font-family: var(--fd); + font-size: clamp(44px, 5.5vw, 80px); + font-weight: 800; + line-height: .92; + color: var(--white); + letter-spacing: -.01em; + text-transform: uppercase; + margin-bottom: 24px; +} +.drawing-services-page h1 em { + color: var(--orange); + font-style: normal; + display: block; +} +.drawing-services-page .hero-desc { + font-size: 17px; + font-weight: 300; + line-height: 1.75; + color: rgba(255, 255, 255, .65); + max-width: 600px; + margin-bottom: 36px; +} +.drawing-services-page .hero-desc strong { + color: rgba(255, 255, 255, .9); + font-weight: 500; +} +.drawing-services-page .hero-badges { + display: flex; + gap: 10px; + flex-wrap: wrap; + margin-bottom: 40px; +} +.drawing-services-page .badge { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + padding: 7px 14px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, .2); + color: rgba(255, 255, 255, .8); +} +.drawing-services-page .badge-fill { + background: var(--orange); + border-color: var(--orange); + color: var(--white); +} +.drawing-services-page .hero-stats { + display: flex; + gap: 48px; + padding-top: 32px; + border-top: 1px solid rgba(255, 255, 255, .1); +} +.drawing-services-page .stat-val { + font-family: var(--fd); + font-size: 38px; + font-weight: 800; + color: var(--orange); + line-height: 1; +} +.drawing-services-page .stat-label { + font-size: 12px; + color: rgba(255, 255, 255, .45); + margin-top: 4px; +} + +/* Model Scrollspy Nav */ +.drawing-services-page .model-nav { + background: var(--white); + border-bottom: 2px solid var(--gray-200); + padding: 0 80px; + display: flex; + gap: 0; + position: sticky; + top: 90px; /* modified to account for 90px main navbar height */ + z-index: 90; + scrollbar-width: none; +} +.drawing-services-page .model-nav::-webkit-scrollbar { + display: none; +} +.drawing-services-page .model-nav-item { + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + color: var(--gray-600); + padding: 16px 22px; + border-bottom: 3px solid transparent; + cursor: pointer; + text-decoration: none; + transition: color .2s, border-color .2s; + display: block; + white-space: nowrap; +} +.drawing-services-page .model-nav-item:hover { + color: var(--orange); + border-bottom-color: var(--orange); +} +.drawing-services-page .model-nav-item.active { + color: var(--navy); + border-bottom-color: var(--navy); +} + +/* Headings */ +.drawing-services-page .section-eyebrow { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 10px; +} +.drawing-services-page .section-eyebrow::before { + content: ''; + display: block; + width: 24px; + height: 2px; + background: var(--orange); +} +.drawing-services-page h2.sh { + font-family: var(--fd); + font-size: clamp(34px, 3.5vw, 52px); + font-weight: 800; + text-transform: uppercase; + line-height: .95; + color: var(--navy); + letter-spacing: -.01em; +} +.drawing-services-page h2.sh span { + color: var(--orange); +} +.drawing-services-page h2.sh-white { + color: var(--white); +} + +/* Intro */ +.drawing-services-page .intro { + padding: 72px 80px 64px; + background: var(--white); +} +.drawing-services-page .intro-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: start; + margin-top: 40px; +} +.drawing-services-page .intro-text p { + font-size: 15px; + line-height: 1.8; + color: var(--gray-600); + margin-bottom: 16px; +} +.drawing-services-page .intro-text p strong { + color: var(--gray-800); + font-weight: 600; +} +.drawing-services-page .check-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 8px; +} +.drawing-services-page .check-list li { + display: flex; + align-items: flex-start; + gap: 12px; + font-size: 14px; + color: var(--gray-600); + line-height: 1.5; +} +.drawing-services-page .check-list li::before { + content: '✓'; + width: 22px; + height: 22px; + border-radius: 50%; + background: rgba(232, 87, 42, .12); + color: var(--orange); + font-size: 11px; + font-weight: 700; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + margin-top: 1px; +} +.drawing-services-page .highlight-cards { + display: flex; + flex-direction: column; + gap: 14px; +} +.drawing-services-page .hcard { + background: var(--gray-100); + border-radius: 10px; + padding: 18px 22px; + border-left: 3px solid var(--orange); +} +.drawing-services-page .hcard-title { + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 5px; +} +.drawing-services-page .hcard-desc { + font-size: 13px; + color: var(--gray-600); + line-height: 1.6; +} + +/* Service Sections */ +.drawing-services-page .model-section { + padding: 80px; + position: relative; + overflow: hidden; +} +.drawing-services-page .model-section.bg-white { + background: var(--white); +} +.drawing-services-page .model-section.bg-gray { + background: var(--gray-100); +} +.drawing-services-page .model-section.bg-navy { + background: var(--navy); +} +.drawing-services-page .model-section.bg-cream { + background: var(--cream); +} + +.drawing-services-page .model-label { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: var(--fd); + font-size: 11px; + font-weight: 700; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 10px; +} +.drawing-services-page .model-label::before { + content: ''; + display: block; + width: 20px; + height: 2px; + background: var(--orange); +} +.drawing-services-page .model-label.dim { + color: rgba(255, 255, 255, .5); +} +.drawing-services-page .model-label.dim::before { + background: rgba(255, 255, 255, .3); +} +.drawing-services-page .model-name { + font-family: var(--fd); + font-size: clamp(36px, 5vw, 64px); + font-weight: 800; + text-transform: uppercase; + color: var(--navy); + letter-spacing: -.02em; + line-height: .9; + margin-bottom: 6px; +} +.drawing-services-page .model-name.white { + color: var(--white); +} +.drawing-services-page .model-tagline { + font-family: var(--fd); + font-size: 16px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: .06em; + color: var(--orange); + margin-bottom: 24px; +} +.drawing-services-page .model-desc { + font-size: 15px; + color: var(--gray-600); + line-height: 1.8; + margin-bottom: 28px; + max-width: 480px; +} +.drawing-services-page .model-desc.white { + color: rgba(255, 255, 255, .65); +} +.drawing-services-page .model-accent-strip { + height: 4px; + background: var(--orange); + border-radius: 2px; + width: 48px; + margin-bottom: 20px; +} + +.drawing-services-page .photo-area { + background: var(--gray-200); + border-radius: 12px; + border: 2px dashed var(--gray-400); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; + min-height: 300px; + position: relative; + overflow: hidden; +} +.drawing-services-page .photo-area.dark-placeholder { + background: rgba(255, 255, 255, .05); + border-color: rgba(255, 255, 255, .2); +} +.drawing-services-page .photo-icon { + opacity: .35; +} +.drawing-services-page .photo-label { + font-family: var(--fd); + font-size: 13px; + font-weight: 600; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--gray-400); +} +.drawing-services-page .photo-sub { + font-size: 12px; + color: var(--gray-400); +} +.drawing-services-page .photo-area.dark-placeholder .photo-label { + color: rgba(255, 255, 255, .35); +} +.drawing-services-page .photo-area.dark-placeholder .photo-sub { + color: rgba(255, 255, 255, .25); +} +.drawing-services-page .model-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: start; + margin-top: 40px; +} +.drawing-services-page .model-layout.reverse { + direction: rtl; +} +.drawing-services-page .model-layout.reverse > * { + direction: ltr; +} +.drawing-services-page .photo-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-top: 12px; +} + +.drawing-services-page .specs-block { + margin-top: 24px; +} +.drawing-services-page .specs-title { + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; + color: var(--gray-400); + margin-bottom: 14px; + padding-bottom: 10px; + border-bottom: 1px solid var(--gray-200); +} +.drawing-services-page .specs-title.white { + color: rgba(255, 255, 255, .35); + border-bottom-color: rgba(255, 255, 255, .1); +} +.drawing-services-page .spec-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid var(--gray-100); + gap: 12px; +} +.drawing-services-page .spec-row.white-row { + border-bottom-color: rgba(255, 255, 255, .08); +} +.drawing-services-page .spec-row:last-child { + border-bottom: none; +} +.drawing-services-page .spec-key { + font-size: 13px; + color: var(--gray-600); +} +.drawing-services-page .spec-key.white { + color: rgba(255, 255, 255, .55); +} +.drawing-services-page .spec-val { + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + color: var(--navy); + letter-spacing: .02em; + text-align: right; +} +.drawing-services-page .spec-val.white { + color: var(--white); +} +.drawing-services-page .spec-val.orange { + color: var(--orange); +} + +/* Drawings Catalog Grid */ +.drawing-services-page .drawings-section { + padding: 80px; + background: var(--gray-100); +} +.drawing-services-page .drawings-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin-top: 48px; +} +.drawing-services-page .drawing-card { + background: var(--white); + border: 1px solid var(--gray-200); + border-radius: 10px; + padding: 24px 22px; + transition: border-color .2s, transform .2s; +} +.drawing-services-page .drawing-card:hover { + border-color: var(--orange); + transform: translateY(-3px); +} +.drawing-services-page .drawing-num { + font-family: var(--fd); + font-size: 40px; + font-weight: 800; + color: rgba(15, 36, 68, .06); + line-height: 1; + margin-bottom: -4px; +} +.drawing-services-page .drawing-icon { + width: 40px; + height: 40px; + background: rgba(232, 87, 42, .1); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 14px; +} +.drawing-services-page .drawing-icon svg { + width: 20px; + height: 20px; +} +.drawing-services-page .drawing-name { + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 8px; + line-height: 1.1; +} +.drawing-services-page .drawing-desc { + font-size: 13px; + color: var(--gray-600); + line-height: 1.65; +} + +/* Process Section */ +.drawing-services-page .process-section { + padding: 80px; + background: var(--navy); +} +.drawing-services-page .process-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + margin-top: 48px; +} +.drawing-services-page .process-step { + text-align: center; + padding: 28px 20px; +} +.drawing-services-page .step-num { + font-family: var(--fd); + font-size: 52px; + font-weight: 800; + color: var(--orange); + line-height: 1; + margin-bottom: 12px; + opacity: .9; +} +.drawing-services-page .step-title { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--white); + letter-spacing: .03em; + margin-bottom: 10px; +} +.drawing-services-page .step-desc { + font-size: 13px; + color: rgba(255, 255, 255, .55); + line-height: 1.7; +} + +/* Targets Section */ +.drawing-services-page .targets-section { + padding: 80px; + background: var(--cream); +} +.drawing-services-page .targets-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + margin-top: 48px; +} +.drawing-services-page .target-card { + border: 1px solid var(--gray-200); + border-radius: 10px; + padding: 22px 18px; + background: var(--white); + transition: border-color .2s, transform .2s; +} +.drawing-services-page .target-card:hover { + border-color: var(--orange); + transform: translateY(-3px); +} +.drawing-services-page .target-name { + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 6px; + line-height: 1.1; +} +.drawing-services-page .target-desc { + font-size: 12px; + color: var(--gray-600); + line-height: 1.6; +} + +/* FAQ + SEO content */ +.drawing-services-page .faq-section { + padding: 80px; + background: var(--white); +} +.drawing-services-page .faq-seo-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + margin-top: 48px; +} +.drawing-services-page .faq { + display: flex; + flex-direction: column; + gap: 0; +} +.drawing-services-page .faq-item { + border-bottom: 1px solid var(--gray-200); +} +.drawing-services-page .faq-q { + font-family: var(--fd); + font-size: 15px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + padding: 18px 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + transition: color .2s; + user-select: none; +} +.drawing-services-page .faq-q:hover { + color: var(--orange); +} +.drawing-services-page .faq-icon { + width: 22px; + height: 22px; + border-radius: 50%; + background: rgba(232, 87, 42, .1); + color: var(--orange); + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + flex-shrink: 0; + transition: transform .3s; +} +.drawing-services-page .faq-item.open .faq-icon { + transform: rotate(45deg); +} +.drawing-services-page .faq-a { + font-size: 14px; + color: var(--gray-600); + line-height: 1.75; + max-height: 0; + overflow: hidden; + transition: max-height .35s ease, padding .3s; +} +.drawing-services-page .faq-item.open .faq-a { + max-height: 240px; + padding-bottom: 18px; +} +.drawing-services-page .content-block h3 { + font-family: var(--fd); + font-size: 19px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .03em; + margin-bottom: 10px; + margin-top: 28px; +} +.drawing-services-page .content-block h3:first-child { + margin-top: 0; +} +.drawing-services-page .content-block p { + font-size: 14px; + color: var(--gray-600); + line-height: 1.8; + margin-bottom: 14px; +} + +/* Territory */ +.drawing-services-page .territory { + padding: 80px; + background: var(--navy); +} +.drawing-services-page .territory .sh-white { + color: var(--white); + margin-bottom: 0; +} +.drawing-services-page .territory-intro { + font-size: 15px; + color: rgba(255, 255, 255, .6); + line-height: 1.7; + max-width: 600px; + margin-top: 14px; + margin-bottom: 48px; +} +.drawing-services-page .region-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} +.drawing-services-page .region-block { + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .1); + border-radius: 10px; + padding: 20px; + transition: background .2s, border-color .2s; +} +.drawing-services-page .region-block:hover { + background: rgba(232, 87, 42, .1); + border-color: rgba(232, 87, 42, .3); +} +.drawing-services-page .region-name { + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + color: var(--orange); + letter-spacing: .06em; + margin-bottom: 12px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(255, 255, 255, .1); +} +.drawing-services-page .region-cities { + list-style: none; + display: flex; + flex-direction: column; + gap: 5px; +} +.drawing-services-page .region-cities li { + font-size: 12px; + color: rgba(255, 255, 255, .55); +} +.drawing-services-page .region-cities li.primary { + color: rgba(255, 255, 255, .9); + font-weight: 500; +} +.drawing-services-page .region-cities a { + color: inherit; + text-decoration: none; + transition: color .2s; +} +.drawing-services-page .region-cities a:hover { + color: var(--orange); +} + +/* Quote form CTA */ +.drawing-services-page .quote-cta { + padding: 80px; + background: var(--orange); +} +.drawing-services-page .quote-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; +} +.drawing-services-page .quote-left h2 { + font-family: var(--fd); + font-size: clamp(38px, 4vw, 60px); + font-weight: 800; + text-transform: uppercase; + color: var(--white); + line-height: .92; + letter-spacing: -.01em; + margin-bottom: 16px; +} +.drawing-services-page .quote-left p { + font-size: 16px; + color: rgba(255, 255, 255, .8); + line-height: 1.7; +} +.drawing-services-page .quote-form-card { + background: rgba(255, 255, 255, .12); + border: 1px solid rgba(255, 255, 255, .2); + border-radius: 12px; + padding: 32px; +} +.drawing-services-page .ql { + display: block; + font-size: 11px; + font-weight: 600; + letter-spacing: .08em; + text-transform: uppercase; + color: rgba(255, 255, 255, .6); + margin-bottom: 6px; +} +.drawing-services-page .qi { + width: 100%; + background: rgba(255, 255, 255, .15); + border: 1px solid rgba(255, 255, 255, .25); + border-radius: 6px; + padding: 11px 14px; + font-family: var(--fb); + font-size: 14px; + color: var(--white); + outline: none; + transition: border-color .2s; + margin-bottom: 12px; + appearance: none; +} +.drawing-services-page .qi::placeholder { + color: rgba(255, 255, 255, .4); +} +.drawing-services-page .qi:focus { + border-color: rgba(255, 255, 255, .7); +} +.drawing-services-page .qi option { + background: var(--navy); +} +.drawing-services-page .qrow { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} +.drawing-services-page .qbtn { + width: 100%; + background: var(--white); + color: var(--orange); + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 14px; + border: none; + border-radius: 6px; + cursor: pointer; + margin-top: 4px; + transition: background .2s; +} +.drawing-services-page .qbtn:hover { + background: var(--cream); +} +.drawing-services-page .qbtn:disabled { + opacity: 0.7; + cursor: not-allowed; +} + +/* Animations and reveals */ +@keyframes drawingFadeUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +.drawing-services-page .hero-eyebrow { + animation: drawingFadeUp .5s ease both; +} +.drawing-services-page .hero h1 { + animation: drawingFadeUp .55s .08s ease both; +} +.drawing-services-page .hero-desc { + animation: drawingFadeUp .55s .16s ease both; +} +.drawing-services-page .hero-badges { + animation: drawingFadeUp .55s .24s ease both; +} +.drawing-services-page .hero-stats { + animation: drawingFadeUp .55s .32s ease both; +} +.drawing-services-page .reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity .6s ease, transform .6s ease; +} +.drawing-services-page .reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* Form Success & Error states inside Card */ +.drawing-services-page .form-success { + text-align: center; + padding: 24px 0; + color: var(--white); +} +.drawing-services-page .fs-icon { + font-size: 48px; + margin-bottom: 16px; +} +.drawing-services-page .fs-title { + font-family: var(--fd); + font-size: 24px; + font-weight: 800; + text-transform: uppercase; + margin-bottom: 8px; +} +.drawing-services-page .fs-note { + font-size: 13px; + color: rgba(255, 255, 255, .7); + line-height: 1.5; +} + +/* Media Queries */ +@media(max-width:900px){ + .drawing-services-page .breadcrumb, + .drawing-services-page .intro, + .drawing-services-page .model-section, + .drawing-services-page .drawings-section, + .drawing-services-page .process-section, + .drawing-services-page .targets-section, + .drawing-services-page .faq-section, + .drawing-services-page .territory, + .drawing-services-page .quote-cta { + padding-left: 24px; + padding-right: 24px; + } + .drawing-services-page .intro-grid, + .drawing-services-page .model-layout, + .drawing-services-page .faq-seo-grid, + .drawing-services-page .quote-inner { + grid-template-columns: 1fr; + gap: 28px; + } + .drawing-services-page .drawings-grid, + .drawing-services-page .targets-grid { + grid-template-columns: 1fr 1fr; + } + .drawing-services-page .process-grid { + grid-template-columns: 1fr 1fr; + } + .drawing-services-page .region-grid { + grid-template-columns: 1fr 1fr; + } + .drawing-services-page .qrow { + grid-template-columns: 1fr; + } + .drawing-services-page .model-nav { + padding: 0 24px; + overflow-x: auto; + } + .drawing-services-page .photo-row { + grid-template-columns: 1fr; + } +} diff --git a/app/2d-fence-drawing-services/page.tsx b/app/2d-fence-drawing-services/page.tsx new file mode 100644 index 0000000..adf63ca --- /dev/null +++ b/app/2d-fence-drawing-services/page.tsx @@ -0,0 +1,881 @@ +"use client"; + +import React, { useState, useEffect } from 'react'; +import Link from 'next/link'; +import axios from 'axios'; +import './drawing-services.css'; + +export default function DrawingServicesPage() { + const [activeSection, setActiveSection] = useState('residential'); + const [openFaq, setOpenFaq] = useState(null); + const [formData, setFormData] = useState({ + name: '', + phone: '', + email: '', + drawingType: '', + city: '', + length: '' + }); + 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 = ['residential', 'commercial', 'drawing-types', 'process', 'who-we-serve']; + 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, id: string) => { + e.preventDefault(); + const el = document.getElementById(id); + if (el) { + // Offset for sticky navs (approx 90px 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) => { + 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.drawingType || "2D Fence Drawing Services Quote", + message: ` + Company / Name: ${formData.name}
+ Phone: ${formData.phone}
+ Email: ${formData.email}
+ Drawing Type Needed: ${formData.drawingType}
+ City / Location: ${formData.city}
+ Approx. Fence Length: ${formData.length} + `, + to: "info@vgfenceproducts.com", + senderName: "VG Fence Drawing Page Request", + }; + + try { + await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + setFormStatus('success'); + } catch (error) { + console.error("❌ Error sending quote request:", error); + setFormStatus('error'); + } + }; + + return ( +
+ {/* BREADCRUMB */} + + + {/* HERO SECTION */} +
+
+
+
+
+
2D Fence Drawing Services · KWC Ontario
+

+ Plan it right
+ before you build. +

+

+ Professional CAD-based 2D fence layout drawings for residential and commercial projects across Ontario. Permit support, material takeoffs, gate placement, and site-specific fence planning — delivered to contractors, builders, and homeowners from our Kitchener–Waterloo base. +

+
+ CAD-Based Drawings + Residential & Commercial + Permit Support + Material Takeoffs + Fast Turnaround +
+
+
+
14+
+
Drawing types offered
+
+
+
CAD
+
Professional software
+
+
+
250km
+
Ontario service radius
+
+
+
+
+ + {/* MODEL SCROLLSPY NAV */} + + + {/* INTRO SECTION */} +
+
+
About this service
+

CAD fence drawings that make
every project run smoother.

+
+
+
+

VG Fence Products offers professional 2D CAD fence layout drawings for contractors, builders, property managers, and homeowners across Ontario. A clear, accurate drawing before any fence goes in the ground saves time, material, and money — and it's often required for building permits.

+

Whether you need a straightforward residential property boundary layout or a detailed commercial site plan with multiple access points, gate placements, and material specifications, we produce drawings that your installation crew, municipality, and clients can all work from with confidence.

+

Our drawings pair directly with our fence material supply — when you order your layout drawing through VG Fence Products, we can simultaneously spec and supply all the materials needed to execute it.

+
    +
  • CAD-based fence layout drawings — residential and commercial
    • +
  • Permit support drawings accepted by Ontario municipalities
    • +
  • Material takeoff — accurate linear footage and component counts
    • +
  • Gate placement and access point planning
    • +
  • Chain link, wood, aluminum, ornamental, and composite layouts
    • +
  • Property boundary fence design from survey or site measurements
    • +
  • Temporary fence site plans for construction projects
    • +
  • Fast turnaround — contact us for current lead times
    • +
+
+
+
+
Drawing + materials in one place
+
Order your fence layout drawing and your materials from the same supplier. We spec the drawing to the exact products we carry — so your material list matches your layout perfectly and there are no surprises at the job site.
+
+
+
Permit-ready drawings
+
Many Ontario municipalities require a basic fence drawing for building permits, especially on commercial properties and shared lot-line fences. Our permit support drawings are formatted to meet typical municipal requirements — saving your clients the back-and-forth.
+
+
+
Accurate material takeoffs
+
A properly drawn fence plan eliminates guesswork on material quantities. Contractors who order drawings before ordering materials waste less product, avoid short-orders, and can quote more accurately — making every job more profitable.
+
+
+
+
+ + {/* RESIDENTIAL DRAWINGS */} +
+
+
+
+
Service 01
+
Residential
Drawings
+
Property boundaries, pools, backyards & permits
+

Residential fence drawings cover the full range of homeowner and contractor needs — from a straightforward backyard fence layout to a complete property boundary plan with gate placement, grade changes, and permit documentation. We work from site measurements, survey documents, or municipality-provided site plans.

+
+
What's included
+
Fence line layoutProperty boundary design
+
Gate placementAccess points, swing direction
+
Post spacing planStandard & non-standard spans
+
Material takeoffPanels, posts, hardware counts
+
Permit drawingMunicipality-ready format
+
+
+
Fence types covered
+
Chain linkResidential & commercial gauge
+
Wood fencePrivacy, picket, board-on-board
+
Aluminum / ornamentalAll 4 panel models
+
Composite fenceAll 3 colour options
+
+
+
+
+ + + + + +
Residential fence layout drawing
+
Upload drawing example here
+
+
+
+ + + + + +
Gate placement detail
+
+
+ + + + + +
Material takeoff sheet
+
+
+
+
+
+ + {/* COMMERCIAL DRAWINGS */} +
+
+
+
+ + + + + +
Commercial fence site plan
+
Upload drawing example here
+
+
+
+ + + + + +
Access point planning
+
+
+ + + + + +
Temporary fence site plan
+
+
+
+
+
+
Service 02
+
Commercial
Drawings
+
Site security, parking, construction & industrial
+

Commercial fence drawings involve larger perimeters, multiple access control points, vehicle gates, and often stricter permit requirements than residential projects. We produce full site layout drawings that your contractor team can execute from, and that your property management or development client can submit for approvals.

+
+
What's included
+
Full site perimeter layoutScaled CAD drawing
+
Vehicle gate placementSingle & double access
+
Pedestrian access planningControlled entry points
+
Security specificationBarbed wire, heights, gauge
+
Material takeoffFull component count
+
Contractor submission formatPermit & project ready
+
+
+
Commercial applications
+
Industrial / warehouse sitesSecurity perimeter
+
Construction site temp fenceSite layout plans
+
Parking lot enclosuresChain link layouts
+
Multi-unit residentialDeveloper site plans
+
+
+
+
+ + {/* DRAWING CATALOGUE */} +
+
+
Full drawing catalogue
+

Every drawing type
we produce.

+
+
+ +
+
01
+
+ + + + +
+
Residential fence layout
+
Full backyard, front yard, and property boundary fence layouts for residential homeowners and fence contractors.
+
+ +
+
02
+
+ + + + +
+
Commercial fence layout
+
Large-scale commercial and industrial site perimeter drawings with multiple access points, security specs, and material takeoffs.
+
+ +
+
03
+
+ + + +
+
Site measurement drawings
+
Drawings produced directly from contractor or surveyor field measurements, accurately scaled and ready for permit submission or contractor use.
+
+ +
+
04
+
+ + + + + + +
+
Chain link fence drawings
+
Residential and commercial chain link layouts including gauge specification, post spacing, fabric height, and gate placement.
+
+ +
+
05
+
+ + + + +
+
Wood fence drawings
+
Privacy fence, picket, and board-on-board wood fence layouts with post scheduling and material quantities by section.
+
+ +
+
06
+
+ + + + + +
+
Aluminum fence drawings
+
Ornamental and aluminum railing fence drawings including model specification (Tokio, Rio, Denver, Oslo) and installation notes.
+
+ +
+
07
+
+ + + + + +
+
Gate placement drawings
+
Dedicated gate layout plans showing swing direction, clearance zones, latch side, hinge placement, and post sizing for all gate types.
+
+ +
+
08
+
+ + + + +
+
Property boundary design
+
Fence layout drawings referenced to property line survey data, designed to accurately place the fence on or adjacent to the legal boundary.
+
+ +
+
09
+
+ + + + +
+
Temporary fence site plans
+
Construction site temporary fence layout plans showing panel runs, gate positions, access control points, and safety barrier zones.
+
+ +
+
10
+
+ + + + +
+
Material takeoff drawings
+
Quantity estimation drawings that break down the full material list — linear footage, panel count, post count, hardware requirements — section by section.
+
+ +
+
11
+
+ + + + +
+
Permit support drawings
+
Formatted fence drawings suitable for building permit applications with Ontario municipalities — scaled, labelled, and including required specification notes.
+
+ +
+
12
+
+ + + + +
+
Contractor project planning
+
Multi-phase project drawings for fence contractors managing complex residential or commercial jobs — section breakdowns, staging areas, and installation sequencing notes.
+
+ +
+
13
+
+ + + + +
+
Custom fence design drafting
+
Bespoke fence design drawings built to client-specific requirements — irregular lot shapes, grade transitions, feature gates, and custom panel configurations.
+
+ +
+
14
+
+ + + + + + + +
+
CAD-based layout preparation
+
Full CAD drawing preparation from supplied site plans, survey documents, or aerial imagery — formatted for contractor, client, and municipal use.
+
+ +
+
+ + {/* HOW IT WORKS */} +
+
+
How it works
+

Simple process.
Professional output.

+
+
+
+
01
+
Send us your info
+
Share your site measurements, survey, property plan, or aerial image. Tell us the fence type, heights, gate locations, and what the drawing will be used for (permit, contractor, or client).
+
+
+
02
+
We prepare your drawing
+
Our team produces a scaled CAD layout drawing of your fence project — including fence lines, gate placements, post schedule, and all required specification notes.
+
+
+
03
+
Review & approve
+
We send you the drawing for review. Any adjustments to fence lines, gate positions, or material specs are made before final delivery. Your satisfaction with the accuracy is the standard.
+
+
+
04
+
Drawing delivered
+
Final drawing delivered digitally — ready to submit for permits, hand to your installation crew, or present to your client. Order materials from us in the same step.
+
+
+
+ + {/* WHO WE SERVE */} +
+
+
Who uses our drawing services
+

Built for every
fence professional.

+
+
+
+
Fence contractors
+
Accurate drawings reduce material waste, speed up quoting, and give clients a professional presentation before a single post goes in the ground.
+
+
+
General contractors
+
Fence scope drawings for larger commercial, residential development, and renovation projects where fencing is one component of a broader build.
+
+
+
Homeowners
+
Property owners who need a permit drawing for their fence project or want a clear plan to present to their chosen fence contractor.
+
+
+
Property managers
+
Commercial and residential property managers planning fence replacements, upgrades, or additions across managed properties and facilities.
+
+
+
Developers & builders
+
Site developers needing fence scope drawings as part of a broader site plan package — for new builds, subdivisions, and commercial developments.
+
+
+
Landscaping companies
+
Landscapers who include fence as part of a complete outdoor project and need a professional drawing to support the scope and permit requirements.
+
+
+
Municipalities & institutions
+
Government contractors and institutional facility managers requiring documented fence plans for public infrastructure, schools, parks, and recreation facilities.
+
+
+
Pool contractors
+
Pool installers who need a fence drawing that satisfies Ontario pool enclosure requirements — showing fence height, gate placement, and barrier continuity.
+
+
+
+ + {/* FAQ + SEO SECTION */} +
+
+
Helpful information
+

Fence drawing services
knowledge base.

+
+
+
+ {[ + { + q: "What information do I need to provide to get a fence drawing?", + a: "The more detail you can provide, the better. Ideal inputs include a site plan or survey document, lot dimensions, fence type and height, gate locations, and what the drawing will be used for (permit, contractor use, or client presentation). If you don't have a formal survey, site measurements or a scaled property plan are a good starting point. Contact us and we'll tell you exactly what we need for your specific project type." + }, + { + q: "Do your permit drawings meet Ontario municipality requirements?", + a: "Our permit support drawings are formatted to meet the typical requirements of Ontario municipalities for fence permit applications — including scaled site plan, fence height and type notation, property line referencing, and gate placement. Individual municipality requirements can vary, and we recommend confirming specific requirements with your local building department before submission. We can adjust the drawing format to meet specific municipal notes if required." + }, + { + q: "What fence types can you produce drawings for?", + a: "We produce drawings for all fence types we supply — chain link (residential and commercial), wood fences (privacy, picket, board-on-board), aluminum and ornamental fences (all four models), composite fences, glass railing, and temporary fence site plans. We can also produce drawings for fence types outside our standard product line on request." + }, + { + q: "Can I order fence materials at the same time as the drawing?", + a: "Yes — and we recommend it. When you order your fence drawing through VG Fence Products, we spec the layout to the exact products we carry. Once the drawing is approved, the material takeoff is ready and you can order everything in one step. This eliminates the gap between drawing and material spec that often causes ordering errors or quantity surprises on the job site." + }, + { + q: "How long does it take to get a fence drawing?", + a: "Turnaround time depends on project complexity and our current volume. Simple residential fence layouts are typically faster to produce than complex commercial site plans. Contact us with your project details and timeline and we'll give you an accurate turnaround estimate. For urgent permit applications, let us know and we'll do our best to prioritize your drawing." + }, + { + q: "Do you serve areas outside Kitchener–Waterloo?", + a: "Yes. Our drawing services are available to clients across Ontario — not limited by geography. We work digitally, so fence drawings can be produced for any property in Ontario based on supplied measurements, survey documents, or site plans. For fence material supply and delivery, our service radius is 250km from our Kitchener–Waterloo base." + } + ].map((faq, idx) => ( +
+
toggleFaq(idx)}> + {faq.q} + + +
+
+ {faq.a} +
+
+ ))} +
+ +
+

2D fence drawing services — Kitchener, Waterloo & Ontario

+

VG Fence Products offers professional CAD-based 2D fence layout drawings to fence contractors, builders, homeowners, and property managers across Ontario. Our drawing service covers every project type — from a straightforward residential backyard fence to a complete commercial site perimeter plan with multiple access gates and security specifications.

+

Fence permit drawings — Ontario municipalities

+

Many Ontario municipalities require a scaled fence permit drawing for building permit applications, particularly on commercial properties and shared lot-line fence installations. Our permit support drawings are formatted to meet typical municipal requirements — saving your clients the back-and-forth with the building department and keeping your project moving on schedule.

+

Material takeoff drawings — accurate quantities, every time

+

A properly drawn fence layout produces a material takeoff — a precise count of every panel, post, hardware piece, and gate component required for the project. Contractors who use material takeoffs before ordering waste less product, avoid costly short-orders at critical project phases, and can quote more accurately from the start.

+

Drawing + supply — one supplier, one invoice

+

VG Fence Products is unique in offering both fence drawing services and fence material supply under the same roof. When you order your drawing from us, the material takeoff is built into the drawing — and you can order your materials in the same conversation. One supplier, one point of contact, and materials spec'd exactly to your layout.

+
+
+
+ + {/* TERRITORY SECTION */} +
+
+
Where we serve
+

Fence drawing services
across Ontario.

+

Our 2D fence drawing services are available across Ontario. Material supply and delivery covers a 250km radius from Kitchener–Waterloo.

+
+
+
+
Waterloo Region
+ +
+
+
Guelph & Wellington
+
    +
  • Guelph
    • +
  • Fergus
  • Elora
  • Rockwood
  • Acton
  • Georgetown
    • +
+
+
+
Halton & Hamilton
+ +
+
+
GTA & Peel
+ +
+
+
Oxford & Perth
+
    +
  • Woodstock
  • Stratford
    • +
  • Ingersoll
  • Tillsonburg
  • St. Marys
    • +
+
+
+
London & Elgin
+
    +
  • London
    • +
  • St. Thomas
  • Strathroy
  • Komoka
    • +
+
+
+
Southwest Ontario
+
    +
  • Windsor
  • Chatham
    • +
  • Leamington
  • Sarnia
  • Petrolia
    • +
+
+
+
Extended Service
+
    +
  • Niagara Falls
  • St. Catharines
  • Welland
    • +
  • Barrie
  • Owen Sound
  • Collingwood
    • +
+
+
+
+ + {/* QUOTE CTA SECTION */} +
+
+
+

Get your fence drawing started.

+

Tell us your fence type, project size, and what you need the drawing for — we'll come back within 2 business hours with a quote and turnaround time.

+
+
+
+ Request a drawing quote +
+
+ Response within 2 business hours +
+ + {formStatus === 'success' ? ( +
+
✅
+
Request Sent!
+

+ Thank you! We have received your drawing quote request and will respond within 2 business hours. +

+
+ ) : ( +
+
+
+ + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + {formStatus === 'error' && ( +

+ ⚠️ Failed to send request. Please try again or email info@vgfenceproducts.com directly. +

+ )} +
+ )} +
+
+
+
+ ); +} diff --git a/app/globals.css b/app/globals.css index b3e036e..d5a7a9a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -61,12 +61,12 @@ nav { left: 0; right: 0; z-index: 100; - background: var(--navy); + background: #072133; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; - height: 64px; + height: 90px; border-bottom: 2px solid var(--orange); transition: box-shadow .3s; } @@ -80,8 +80,8 @@ nav { } .nav-logo img { - height: 36px; - width: auto; + height: 50px; + width: 180px; /* filter: brightness(0) invert(1); */ } @@ -108,9 +108,9 @@ nav { .nav-links a { font-family: var(--fd); - font-size: 13px; + font-size: 18px; font-weight: 600; - color: rgba(255, 255, 255, .72); + color: #ffffff; text-decoration: none; letter-spacing: .06em; text-transform: uppercase; @@ -134,7 +134,7 @@ nav { position: absolute; top: 100%; left: 0; - background: var(--navy); + background: #072133; min-width: 200px; list-style: none; padding: 10px 0; @@ -157,7 +157,7 @@ nav { padding: 10px 24px; border-bottom: none !important; color: rgba(255, 255, 255, .7) !important; - font-size: 12px !important; + font-size: 16px !important; } .nav-dropdown li a:hover { @@ -206,7 +206,7 @@ nav { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; - color: rgba(255, 255, 255, .65); + color: #fff; text-decoration: none; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .2); @@ -2114,6 +2114,7 @@ footer { position: relative; z-index: 2; max-width: 760px; + top:40px; } .hero-badges { diff --git a/app/products/glass-railing/GlassRailingClient.tsx b/app/products/glass-railing/GlassRailingClient.tsx new file mode 100644 index 0000000..1d65995 --- /dev/null +++ b/app/products/glass-railing/GlassRailingClient.tsx @@ -0,0 +1,899 @@ +"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(null); + + // Active section for jump navigation + const [activeSection, setActiveSection] = useState("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) => { + 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: ` + Company Name: ${formData.companyName || "N/A"}
+ System & Glass: ${formData.systemGlass || "Not Specified"}
+ Job Site City: ${formData.city || "Not Specified"}
+ Linear Footage: ${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 ( +
+ {/* BREADCRUMB */} + {/* */} + + {/* HERO */} +
+
+
+
+
+
+
+
+
+
+
+
+
Glass railing systems · KWC Ontario
+

+ Open views.
+ Clean lines. +

+

+ We carry 3 glass railing systems — 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 250km from Kitchener–Waterloo. +

+
+ 3 Railing Systems + Tempered Safety Glass + 10mm & 12mm + Pool Compliant + Contractor Pricing +
+
+
3
Railing systems
+
4
Glass options
+
250km
Ontario delivery
+
+
+
+ + + + {/* INTRO */} +
+
+
About this product line
+

Glass railing supply
for contractors.

+
+
+
+

+ VG Fence Products supplies glass railing systems to deck builders, fence contractors, and general contractors 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. +

+

+ All systems use tempered safety glass as standard, 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. +

+

+ Commercial glass railing is also available on request — contact us with your project specifications and we'll provide pricing and lead time. +

+
    +
  • 3 systems — post-mount, standoff spigot, fascia-mount base shoe
    • +
  • Tempered safety glass — 10mm and 12mm thickness
    • +
  • Clear, frosted, bronze tint, and grey tint glass options
    • +
  • Aluminum and stainless steel hardware finishes
    • +
  • Pool-compliant configurations — 12mm recommended
    • +
  • Continuous aluminum top rail and stainless handrail options
    • +
  • Contractor pricing — bulk orders welcome
    • +
  • Commercial glass railing available on request
    • +
+
+
+
+
Tempered safety glass — standard
+
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.
+
+
+
Pool-compliant systems
+
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.
+
+
+
Commercial orders available
+
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.
+
+
+
+
+ + {/* SYSTEM 1 — POST-MOUNT */} +
+
+
+
+
System 01
+
Post-Mount
+
Most popular residential system
+

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.

+ +
+
Glass specifications
+
Standard thickness10mm tempered
+
Heavy-duty / pool12mm tempered
+
Glass typeSafety glass — OBC compliant
+
+ +
+
Glass options
+
+ Clear + Frosted + Bronze tint + Grey tint +
+
+ +
+
Post & hardware
+
+
+
Post material
+
Aluminum or stainless steel
+
Round or square profile
+
+
+
Finish options
+
Black · Satin / brushed
+
Surface or core-mount
+
+
+
+ +
+
Top rail options
+
Aluminum top railContinuous run
+
Stainless round handrailOptional upgrade
+
+
+ + {/* PHOTO AREA */} +
+
+ + + + + +
Post-mount installation photo
+
Upload product image here
+
+
+
+ + + + + +
Post detail / close-up
+
+
+ + + + + +
Installed project
+
+
+
+
+
+ + {/* SYSTEM 2 — STANDOFF / SPIGOT */} +
+
+ {/* PHOTO LEFT */} +
+
+ + + + + +
Standoff / spigot photo
+
Upload product image here
+
+
+
+ + + + + +
Spigot detail
+
+
+ + + + + +
Installed project
+
+
+
+ +
+
+
System 02
+
Standoff / Spigot
+
Frameless · Modern aesthetic
+

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.

+ +
+
Glass specifications
+
Standard thickness12mm tempered
+
Glass typeSafety glass — OBC compliant
+
Panel styleFull-height frameless panels
+
+ +
+
Glass options
+
+ Clear + Frosted + Bronze tint + Grey tint +
+
+ +
+
Spigot hardware
+
+
+
Material
+
Stainless steel 316
+
Brushed · Polished black
+
+
+
Mount type
+
Surface · Side · Core
+
Stair-compatible fittings available
+
+
+
+ +
+
Top rail options
+
Stainless round handrailMost common choice
+
Glass-to-glass connectorNo top rail option
+
Aluminum top railAvailable
+
+
+
+
+ + {/* SYSTEM 3 — FASCIA-MOUNT */} +
+
+
+
+
System 03 · Cleanest look
+
Fascia-Mount
+
Base shoe · Fully frameless appearance
+

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.

+ +
+
Glass specifications
+
Standard thickness10mm tempered
+
Heavy-duty option12mm tempered
+
Glass typeSafety glass — OBC compliant
+
+ +
+
Glass options
+
+ Clear + Frosted + Bronze tint + Grey tint +
+
+ +
+
Base shoe channel
+
+
+
Material
+
Aluminum extrusion
+
Black · Mill / silver finish
+
+
+
Mount type
+
Top-mount · Side fascia
+
With rubber gasket kit
+
+
+
+ +
+
Top rail options
+
Aluminum top railStandard — continuous
+
Stainless round handrailOptional upgrade
+
Glass-to-glass connectorNo rail option
+
+
+ + {/* PHOTO AREA */} +
+
+ + + + + +
Fascia-mount photo
+
Upload product image here
+
+
+
+ + + + + +
Base shoe detail
+
+
+ + + + + +
Installed project
+
+
+
+
+
+ + {/* POSTS & HARDWARE */} +
+
+
Components
+

Posts, hardware
& handrail.

+
+
+
+
+ + + + +
+
Posts & Spigots
+
Structural support for post-mount and standoff systems. Aluminum and stainless steel in multiple profiles and finishes to match any project aesthetic.
+
+
Round aluminum posts — black & satin
+
Square aluminum posts — black & satin
+
Stainless steel 316 spigots — brushed & black
+
Surface, core & side-mount options
+
Post sleeves and base plates available
+
Stair-specific fittings available
+
+
+ +
+
+ + + + +
+
Top Rail & Handrail
+
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.
+
+
Aluminum continuous top rail — black & mill
+
Stainless round handrail — brushed & polished
+
Glass-to-glass connector clips
+
Corner connectors and end caps
+
Stair rail fittings available
+
+
+ +
+
+ + + + + +
+
Base Shoe & Channels
+
Aluminum base shoe channels for fascia-mount systems. Precision extruded with rubber gasket kits to secure glass firmly with no lateral movement.
+
+
Aluminum base shoe — top & side fascia versions
+
Black anodized & clear / mill finish
+
Setting blocks & rubber gasket kits
+
End caps and corner extrusions
+
Wedge shim packs for glass adjustment
+
+
+
+ + {/* COMMERCIAL BANNER inside navy section */} +
+
+ + + + + +
+
+

Commercial glass railing — available on request

+

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.

+
+ +
+
+ + {/* COMPARE ALL SYSTEMS */} +
+
+
System comparison
+

Compare all
three systems.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
FeaturePost-MountStandoff / SpigotFascia-Mount
Standard glass thickness10mm tempered12mm tempered10mm tempered
12mm option✓ Available✓ Standard✓ Available
Frameless appearancePosts visibleNear-framelessFully frameless
Post / support materialAluminum or SSStainless 316Aluminum channel
Finish optionsBlack · SatinBrushed · BlackBlack · Mill
Pool compliant✓ Yes✓ Yes✓ Yes
Stair-compatible✓ Yes✓ Yes✓ Yes
Clear glass✓✓✓
Frosted / tinted glass✓✓✓
Aluminum top rail✓✓✓ Standard
Stainless handrail✓ Optional✓ Popular✓ Optional
No-rail / glass-to-glass—✓✓
Best forDecks, pools, balconiesContemporary, rooftop, poolPremium builds, new decks
+
+
+ + {/* FAQ + SEO CONTENT */} +
+
+
Helpful information
+

Glass railing
knowledge base.

+
+
+
+ {[ + { + 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) => ( +
+
toggleFaq(index)}> + {faq.q} + + +
+
+ {faq.a} +
+
+ ))} +
+
+

Glass railing supplier — KWC & Ontario

+

VG Fence Products is a dedicated glass railing supplier 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.

+

Contractor supply across Southern Ontario

+

We supply glass railing materials directly to contractors with contractor pricing on all orders 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.

+

Pool-compliant glass railing — Ontario

+

Glass railing is a popular and code-compliant choice for pool enclosures 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.

+

Frameless glass railing — Waterloo Region

+

Whether you're installing a frameless glass railing 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.

+
+
+
+ + {/* TERRITORY */} +
+
+
Where we deliver
+

Glass railing supply
across Ontario.

+

Scheduled delivery of glass railing systems and all components to job sites across a 250km radius from Kitchener–Waterloo.

+
+
+
+
Waterloo Region
+
    +
  • Kitchener
  • Waterloo
  • Cambridge
    • +
  • Ayr
  • Breslau
  • Elmira
  • St. Jacobs
  • New Hamburg
  • Baden
  • Wellesley
    • +
+
+
+
Guelph & Wellington
+
    +
  • Guelph
  • Fergus
  • Elora
  • Rockwood
  • Acton
  • Georgetown
    • +
+
+
+
Halton & Hamilton
+
    +
  • Hamilton
  • Burlington
  • Milton
  • Oakville
    • +
  • Stoney Creek
  • Grimsby
  • Brantford
  • Paris
    • +
+
+
+
GTA & Peel
+
    +
  • Mississauga
  • Brampton
    • +
  • Vaughan
  • Markham
  • Richmond Hill
    • +
+
+
+
Oxford & Perth
+
    +
  • Woodstock
  • Stratford
    • +
  • Ingersoll
  • Tillsonburg
  • St. Marys
    • +
+
+
+
London & Elgin
+
    +
  • London
  • St. Thomas
  • Strathroy
  • Komoka
    • +
+
+
+
Southwest Ontario
+
    +
  • Windsor
  • Chatham
  • Leamington
  • Sarnia
  • Petrolia
    • +
+
+
+
Extended Service
+
    +
  • Niagara Falls
  • St. Catharines
  • Welland
    • +
  • Barrie
  • Owen Sound
  • Collingwood
    • +
+
+
+
+ + {/* QUOTE CTA */} +
+
+
+

Get glass railing pricing.

+

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.

+
+
+ {formStatus === "success" ? ( +
+
✅
+

Request Sent!

+

Thank you. We'll be in touch within 2 business hours.

+ +
+ ) : ( +
+
Request a quote
+
Response within 2 business hours · Contractor pricing
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + {formStatus === "error" && ( +

+ ⚠️ Failed to send request. Please try again or email us directly. +

+ )} + + +
+ )} +
+
+
+
+ ); +} diff --git a/app/products/glass-railing/glass-railing.css b/app/products/glass-railing/glass-railing.css new file mode 100644 index 0000000..808d6f1 --- /dev/null +++ b/app/products/glass-railing/glass-railing.css @@ -0,0 +1,290 @@ +.glass-railing-page { + --navy: #0F2444; + --navy-mid: #1B3A6B; + --navy-light: #2A5298; + --orange: #E8572A; + --orange-dark: #C0421B; + --orange-light:#F07A50; + --cream: #F5F2ED; + --white: #ffffff; + --gray-100: #F7F6F3; + --gray-200: #ECEAE5; + --gray-400: #B0ADA6; + --gray-600: #6B6860; + --gray-800: #2E2C29; + --fd: 'Barlow Condensed', sans-serif; + --fb: 'Barlow', sans-serif; +} + +/* BREADCRUMB */ +.glass-railing-page .breadcrumb { background: var(--gray-100); padding: 12px 80px; font-size: 12px; color: var(--gray-600); display: flex; align-items: center; gap: 8px; margin-top: 0px; border-bottom: 1px solid var(--gray-200); } +.glass-railing-page .breadcrumb a { color: var(--navy-mid); text-decoration: none; } +.glass-railing-page .breadcrumb a:hover { color: var(--orange); } +.glass-railing-page .breadcrumb span { color: var(--gray-400); } + +/* HERO */ +.glass-railing-page .hero { background: var(--navy); position: relative; overflow: hidden; padding: 72px 80px 80px; } +.glass-railing-page .hero-grid-bg { + position: absolute; inset: 0; opacity: .035; + background-image: repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.6) 39px,rgba(255,255,255,.6) 40px), repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.6) 39px,rgba(255,255,255,.6) 40px); +} +/* decorative glass panel pattern on right */ +.glass-railing-page .hero-glass-deco { + position: absolute; right: 0; top: 0; bottom: 0; width: 42%; + display: flex; gap: 16px; align-items: stretch; padding: 0 48px; + opacity: .06; +} +.glass-railing-page .hero-glass-panel { + flex: 1; background: rgba(255,255,255,.9); + border-radius: 4px 4px 0 0; position: relative; +} +.glass-railing-page .hero-glass-panel::after { + content: ''; position: absolute; top: 30%; left: 20%; right: 20%; bottom: 0; + background: rgba(255,255,255,.3); border-radius: 2px; +} +.glass-railing-page .hero-accent { position: absolute; right: -80px; bottom: -80px; width: 360px; height: 360px; border-radius: 50%; border: 56px solid var(--orange); opacity: .1; } +.glass-railing-page .hero-inner { position: relative; z-index: 2; max-width: 760px; top:40px;} +.glass-railing-page .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fd); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; } +.glass-railing-page .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--orange); } +.glass-railing-page h1 { font-family: var(--fd); font-size: clamp(44px, 5.5vw, 80px); font-weight: 800; line-height: .92; color: var(--white); letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 24px; } +.glass-railing-page h1 em { color: var(--orange); font-style: normal; display: block; } +.glass-railing-page .hero-desc { font-size: 17px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.65); max-width: 600px; margin-bottom: 36px; } +.glass-railing-page .hero-desc strong { color: rgba(255,255,255,.9); font-weight: 500; } +.glass-railing-page .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; } +.glass-railing-page .badge { font-family: var(--fd); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 7px 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); } +.glass-railing-page .badge-fill { background: var(--orange); border-color: var(--orange); color: var(--white); } +.glass-railing-page .hero-stats { display: flex; gap: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); } +.glass-railing-page .stat-val { font-family: var(--fd); font-size: 38px; font-weight: 800; color: var(--orange); line-height: 1; } +.glass-railing-page .stat-label { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 4px; } + +/* MODEL JUMP NAV */ +.glass-railing-page .model-nav { + background: var(--white); + border-bottom: 2px solid var(--gray-200); + padding: 0 80px; + display: flex; + gap: 0; + position: sticky; + top: 64px; + z-index: 90; +} +.glass-railing-page .model-nav-item { + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--gray-600); + padding: 16px 28px; + border-bottom: 3px solid transparent; + cursor: pointer; + text-decoration: none; + transition: color .2s, border-color .2s; + display: block;} +.glass-railing-page .model-nav-item:hover { color: var(--orange); border-bottom-color: var(--orange); } +.glass-railing-page .model-nav-item.active { color: var(--navy); border-bottom-color: var(--navy); } + +/* SECTION COMMON */ +.glass-railing-page .section-eyebrow { font-family: var(--fd); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } +.glass-railing-page .section-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--orange); } +.glass-railing-page h2.sh { font-family: var(--fd); font-size: clamp(34px, 3.5vw, 52px); font-weight: 800; text-transform: uppercase; line-height: .95; color: var(--navy); letter-spacing: -.01em; } +.glass-railing-page h2.sh span { color: var(--orange); } +.glass-railing-page h2.sh-white { color: var(--white); } + +/* INTRO */ +.glass-railing-page .intro { padding: 72px 80px 64px; background: var(--white); } +.glass-railing-page .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 40px; } +.glass-railing-page .intro-text p { font-size: 15px; line-height: 1.8; color: var(--gray-600); margin-bottom: 16px; } +.glass-railing-page .intro-text p strong { color: var(--gray-800); font-weight: 600; } +.glass-railing-page .check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } +.glass-railing-page .check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--gray-600); line-height: 1.5; } +.glass-railing-page .check-list li::before { content: '✓'; width: 22px; height: 22px; border-radius: 50%; background: rgba(232,87,42,.12); color: var(--orange); font-size: 11px; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; } +.glass-railing-page .highlight-cards { display: flex; flex-direction: column; gap: 14px; } +.glass-railing-page .hcard { background: var(--gray-100); border-radius: 10px; padding: 18px 22px; border-left: 3px solid var(--orange); } +.glass-railing-page .hcard-title { font-family: var(--fd); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--navy); letter-spacing: .02em; margin-bottom: 5px; } +.glass-railing-page .hcard-desc { font-size: 13px; color: var(--gray-600); line-height: 1.6; } + +/* MODEL SECTIONS */ +.glass-railing-page .model-section { padding: 80px; position: relative; overflow: hidden; } +.glass-railing-page .model-section.bg-white { background: var(--white); } +.glass-railing-page .model-section.bg-gray { background: var(--gray-100); } +.glass-railing-page .model-section.bg-navy { background: var(--navy); } +.glass-railing-page .model-section.bg-cream { background: var(--cream); } + +.glass-railing-page .model-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fd); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; } +.glass-railing-page .model-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--orange); } +.glass-railing-page .model-label.dim { color: rgba(255,255,255,.5); } +.glass-railing-page .model-label.dim::before { background: rgba(255,255,255,.3); } + +.glass-railing-page .model-name { font-family: var(--fd); font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; text-transform: uppercase; color: var(--navy); letter-spacing: -.02em; line-height: .9; margin-bottom: 6px; } +.glass-railing-page .model-name.white { color: var(--white); } +.glass-railing-page .model-tagline { font-family: var(--fd); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--orange); margin-bottom: 24px; } +.glass-railing-page .model-desc { font-size: 15px; color: var(--gray-600); line-height: 1.8; margin-bottom: 28px; max-width: 480px; } +.glass-railing-page .model-desc.white { color: rgba(255,255,255,.65); } + +/* Photo placeholder */ +.glass-railing-page .photo-area { + background: var(--gray-200); border-radius: 12px; + border: 2px dashed var(--gray-400); + display: flex; flex-direction: column; align-items: center; justify-content: center; + gap: 10px; min-height: 300px; position: relative; overflow: hidden; +} +.glass-railing-page .photo-area.dark-placeholder { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); } +.glass-railing-page .photo-icon { opacity: .35; } +.glass-railing-page .photo-label { font-family: var(--fd); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400); } +.glass-railing-page .photo-sub { font-size: 12px; color: var(--gray-400); } +.glass-railing-page .photo-area.dark-placeholder .photo-label { color: rgba(255,255,255,.35); } +.glass-railing-page .photo-area.dark-placeholder .photo-sub { color: rgba(255,255,255,.25); } + +.glass-railing-page .model-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 40px; } + +.glass-railing-page .photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } + +/* Specs block */ +.glass-railing-page .specs-block { margin-top: 24px; } +.glass-railing-page .specs-title { font-family: var(--fd); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-200); } +.glass-railing-page .specs-title.white { color: rgba(255,255,255,.35); border-bottom-color: rgba(255,255,255,.1); } + +.glass-railing-page .spec-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gray-100); gap: 12px; } +.glass-railing-page .spec-row.white-row { border-bottom-color: rgba(255,255,255,.08); } +.glass-railing-page .spec-row:last-child { border-bottom: none; } +.glass-railing-page .spec-key { font-size: 13px; color: var(--gray-600); } +.glass-railing-page .spec-key.white { color: rgba(255,255,255,.55); } +.glass-railing-page .spec-val { font-family: var(--fd); font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: .02em; text-align: right; } +.glass-railing-page .spec-val.white { color: var(--white); } +.glass-railing-page .spec-val.orange { color: var(--orange); } + +/* Glass type pills */ +.glass-railing-page .glass-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } +.glass-railing-page .glass-pill { font-family: var(--fd); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 8px 14px; border-radius: 6px; } +.glass-railing-page .glass-pill.navy { background: var(--navy); color: var(--white); } +.glass-railing-page .glass-pill.orange { background: var(--orange); color: var(--white); } +.glass-railing-page .glass-pill.outline { background: transparent; border: 1.5px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85); } +.glass-railing-page .glass-pill.light { background: rgba(15,36,68,.08); color: var(--navy-mid); } + +/* Hardware/finish cards */ +.glass-railing-page .hw-detail-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } +.glass-railing-page .hw-detail-card { border-radius: 8px; padding: 14px 16px; border: 1px solid var(--gray-200); background: var(--white); transition: border-color .2s; } +.glass-railing-page .hw-detail-card:hover { border-color: var(--orange); } +.glass-railing-page .hw-detail-card.dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } +.glass-railing-page .hw-detail-card.dark:hover { border-color: rgba(232,87,42,.5); } +.glass-railing-page .hw-detail-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; } +.glass-railing-page .hw-detail-val { font-family: var(--fd); font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: .02em; line-height: 1.2; } +.glass-railing-page .hw-detail-val.white { color: var(--white); } +.glass-railing-page .hw-detail-note { font-size: 11px; color: var(--gray-600); margin-top: 3px; } +.glass-railing-page .hw-detail-note.white { color: rgba(255,255,255,.5); } + +/* model accent strip */ +.glass-railing-page .model-accent-strip { height: 4px; background: var(--orange); border-radius: 2px; width: 48px; margin-bottom: 20px; } + +/* POSTS & HARDWARE SECTION */ +.glass-railing-page .hw-section { padding: 80px; background: var(--navy); } +.glass-railing-page .hw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } +.glass-railing-page .hw-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 28px 24px; transition: background .2s, border-color .2s; } +.glass-railing-page .hw-card:hover { background: rgba(232,87,42,.1); border-color: rgba(232,87,42,.3); } +.glass-railing-page .hw-icon { width: 42px; height: 42px; background: var(--orange); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } +.glass-railing-page .hw-icon svg { width: 20px; height: 20px; } +.glass-railing-page .hw-name { font-family: var(--fd); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--white); letter-spacing: .03em; margin-bottom: 8px; line-height: 1.1; } +.glass-railing-page .hw-name span { color: var(--orange); } +.glass-railing-page .hw-desc { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 14px; } +.glass-railing-page .hw-specs { display: flex; flex-direction: column; gap: 6px; } +.glass-railing-page .hw-spec { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.65); } +.glass-railing-page .hw-spec::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } + +/* COMMERCIAL BANNER */ +.glass-railing-page .commercial-banner { background: var(--gray-800); border-radius: 12px; padding: 32px 40px; display: flex; align-items: center; gap: 32px; } +.glass-railing-page .commercial-banner-icon { width: 56px; height: 56px; background: var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } +.glass-railing-page .commercial-banner-icon svg { width: 28px; height: 28px; } +.glass-railing-page .commercial-banner-text h3 { font-family: var(--fd); font-size: 22px; font-weight: 700; text-transform: uppercase; color: var(--white); letter-spacing: .03em; margin-bottom: 6px; } +.glass-railing-page .commercial-banner-text p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.7; } +.glass-railing-page .commercial-banner-cta { margin-left: auto; flex-shrink: 0; background: var(--orange); color: var(--white); font-family: var(--fd); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; transition: background .2s; white-space: nowrap; text-decoration: none; display: inline-block; } +.glass-railing-page .commercial-banner-cta:hover { background: var(--orange-dark); } + +/* COMPARE TABLE */ +.glass-railing-page .compare-section { padding: 80px; background: var(--cream); } +.glass-railing-page .compare-table-wrap { margin-top: 48px; overflow-x: auto; border-radius: 12px; border: 1px solid var(--gray-200); } +.glass-railing-page .compare-table { width: 100%; border-collapse: collapse; background: var(--white); } +.glass-railing-page .compare-table thead { background: var(--navy); } +.glass-railing-page .compare-table th { font-family: var(--fd); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--white); padding: 16px 20px; text-align: left; border-right: 1px solid rgba(255,255,255,.1); } +.glass-railing-page .compare-table th:first-child { color: rgba(255,255,255,.5); font-size: 11px; } +.glass-railing-page .compare-table th:last-child { border-right: none; } +.glass-railing-page .compare-table td { font-size: 13px; color: var(--gray-700); padding: 14px 20px; border-bottom: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100); } +.glass-railing-page .compare-table td:last-child { border-right: none; } +.glass-railing-page .compare-table td:first-child { font-weight: 600; color: var(--gray-600); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } +.glass-railing-page .compare-table tr:last-child td { border-bottom: none; } +.glass-railing-page .compare-table tr:hover td { background: var(--gray-100); } +.glass-railing-page .check { color: var(--orange); font-weight: 700; } +.glass-railing-page .model-pill { font-family: var(--fd); font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 3px; } +.glass-railing-page .pill-post { background: rgba(232,87,42,.12); color: var(--orange-dark); } +.glass-railing-page .pill-standoff{ background: rgba(15,36,68,.08); color: var(--navy-mid); } +.glass-railing-page .pill-fascia { background: rgba(42,82,152,.1); color: var(--navy-light); } + +/* FAQ */ +.glass-railing-page .faq-section { padding: 80px; background: var(--white); } +.glass-railing-page .faq-seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; } +.glass-railing-page .faq { display: flex; flex-direction: column; gap: 0; } +.glass-railing-page .faq-item { border-bottom: 1px solid var(--gray-200); } +.glass-railing-page .faq-q { font-family: var(--fd); font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--navy); letter-spacing: .02em; padding: 18px 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: color .2s; user-select: none; } +.glass-railing-page .faq-q:hover { color: var(--orange); } +.glass-railing-page .faq-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(232,87,42,.1); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; transition: transform .3s; } +.glass-railing-page .faq-item.open .faq-icon { transform: rotate(45deg); } +.glass-railing-page .faq-a { font-size: 14px; color: var(--gray-600); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s; } +.glass-railing-page .faq-item.open .faq-a { max-height: 240px; padding-bottom: 18px; } +.glass-railing-page .content-block h3 { font-family: var(--fd); font-size: 19px; font-weight: 700; text-transform: uppercase; color: var(--navy); letter-spacing: .03em; margin-bottom: 10px; margin-top: 28px; } +.glass-railing-page .content-block h3:first-child { margin-top: 0; } +.glass-railing-page .content-block p { font-size: 14px; color: var(--gray-600); line-height: 1.8; margin-bottom: 14px; } + +/* TERRITORY */ +.glass-railing-page .territory { padding: 80px; background: var(--navy); } +.glass-railing-page .territory .sh-white { color: var(--white); margin-bottom: 0; } +.glass-railing-page .territory-intro { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.7; max-width: 560px; margin-top: 14px; margin-bottom: 48px; } +.glass-railing-page .region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } +.glass-railing-page .region-block { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 20px; transition: background .2s, border-color .2s; } +.glass-railing-page .region-block:hover { background: rgba(232,87,42,.1); border-color: rgba(232,87,42,.3); } +.glass-railing-page .region-name { font-family: var(--fd); font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--orange); letter-spacing: .06em; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.1); } +.glass-railing-page .region-cities { list-style: none; display: flex; flex-direction: column; gap: 5px; } +.glass-railing-page .region-cities li { font-size: 12px; color: rgba(255,255,255,.55); } +.glass-railing-page .region-cities li.primary { color: rgba(255,255,255,.9); font-weight: 500; } + +/* QUOTE CTA */ +.glass-railing-page .quote-cta { padding: 80px; background: var(--orange); } +.glass-railing-page .quote-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } +.glass-railing-page .quote-left h2 { font-family: var(--fd); font-size: clamp(38px, 4vw, 60px); font-weight: 800; text-transform: uppercase; color: var(--white); line-height: .92; letter-spacing: -.01em; margin-bottom: 16px; } +.glass-railing-page .quote-left p { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.7; } +.glass-railing-page .quote-form-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 32px; } +.glass-railing-page .ql { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; } +.glass-railing-page .qi { width: 100%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 11px 14px; font-family: var(--fb); font-size: 14px; color: var(--white); outline: none; transition: border-color .2s; margin-bottom: 12px; appearance: none; } +.glass-railing-page .qi::placeholder { color: rgba(255,255,255,.4); } +.glass-railing-page .qi:focus { border-color: rgba(255,255,255,.7); } +.glass-railing-page .qi option { background: var(--navy); } +.glass-railing-page .qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } +.glass-railing-page .qbtn { width: 100%; background: var(--white); color: var(--orange); font-family: var(--fd); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 14px; border: none; border-radius: 6px; cursor: pointer; margin-top: 4px; transition: background .2s; } +.glass-railing-page .qbtn:hover { background: var(--cream); } + +/* REVEAL / SCROLL ANIMATION */ +.glass-railing-page .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } +.glass-railing-page .reveal.visible { opacity: 1; transform: translateY(0); } + +/* RESPONSIVE LAYOUTS */ +@media (max-width: 900px) { + .glass-railing-page .breadcrumb, + .glass-railing-page .intro, + .glass-railing-page .model-section, + .glass-railing-page .hw-section, + .glass-railing-page .compare-section, + .glass-railing-page .faq-section, + .glass-railing-page .territory, + .glass-railing-page .quote-cta { padding-left: 24px; padding-right: 24px; } + .glass-railing-page .intro-grid, + .glass-railing-page .model-layout, + .glass-railing-page .faq-seo-grid, + .glass-railing-page .quote-inner { grid-template-columns: 1fr; gap: 28px; } + .glass-railing-page .hw-grid { grid-template-columns: 1fr 1fr; } + .glass-railing-page .region-grid { grid-template-columns: 1fr 1fr; } + .glass-railing-page .qrow { grid-template-columns: 1fr; } + .glass-railing-page .model-nav { padding: 0 24px; overflow-x: auto; } + .glass-railing-page .photo-row { grid-template-columns: 1fr; } + .glass-railing-page .hw-detail-cards { grid-template-columns: 1fr; } + .glass-railing-page .commercial-banner { flex-direction: column; gap: 16px; } + .glass-railing-page .commercial-banner-cta { margin-left: 0; } +} diff --git a/app/products/glass-railing/page.tsx b/app/products/glass-railing/page.tsx new file mode 100644 index 0000000..73575a5 --- /dev/null +++ b/app/products/glass-railing/page.tsx @@ -0,0 +1,73 @@ +import type { Metadata } from "next"; +import GlassRailingClient from "./GlassRailingClient"; + +export const metadata: Metadata = { + title: "Glass Railing Systems | Deck, Pool & Balcony | VG Fence Products — KWC Ontario", + description: "Glass railing systems for decks, balconies, pools, and stairs. Post-mount, standoff spigot, and fascia-mount systems with tempered safety glass. Contractor supply with scheduled delivery across 250km in Ontario from Kitchener–Waterloo.", + keywords: "glass railing Ontario, glass railing Kitchener, glass railing Waterloo, glass deck railing KWC, frameless glass railing Ontario, pool glass railing, glass railing contractor supply, tempered glass railing, glass balcony railing, glass railing Cambridge, glass railing Guelph, glass railing Hamilton, fence supply Ontario", + alternates: { + canonical: "/products/glass-railing", + }, + openGraph: { + title: "Glass Railing Systems — Post-Mount, Standoff & Fascia | VG Fence Products", + description: "Three glass railing systems. Tempered safety glass in clear, frosted, bronze and grey. Contractor supply with scheduled delivery across 250km in Ontario.", + type: "website", + url: "https://vgfence.com/products/glass-railing", + locale: "en_CA", + siteName: "VG Fence Products", + }, + other: { + "geo.region": "CA-ON", + "geo.placename": "Kitchener, Ontario", + "geo.position": "43.4516;-80.4925", + "ICBM": "43.4516, -80.4925", + } +}; + +const productSchema = { + "@context": "https://schema.org", + "@type": "Product", + "name": "Glass Railing Systems", + "description": "Glass railing systems for decks, balconies, pools, and stairs. Post-mount, standoff spigot, and fascia-mount base shoe systems. Tempered safety glass 10mm and 12mm in clear, frosted, and tinted options.", + "brand": { "@type": "Brand", "name": "VG Fence Products" }, + "offers": { + "@type": "Offer", + "availability": "https://schema.org/InStock", + "seller": { + "@type": "LocalBusiness", + "name": "VG Fence Products", + "address": { "@type": "PostalAddress", "addressLocality": "Kitchener", "addressRegion": "ON", "addressCountry": "CA" }, + "email": "info@vgfenceproducts.com", + "url": "https://vgfence.com", + "areaServed": "Ontario, Canada" + } + } +}; + +const businessSchema = { + "@context": "https://schema.org", + "@type": "LocalBusiness", + "name": "VG Fence Products", + "description": "B2B fence and railing supplier — glass railing, ornamental fence, chain link, composite and stain products. Serving contractors across Ontario from Kitchener–Waterloo.", + "address": { "@type": "PostalAddress", "addressLocality": "Kitchener", "addressRegion": "ON", "addressCountry": "CA" }, + "email": "info@vgfenceproducts.com", + "url": "https://vgfence.com", + "areaServed": ["Kitchener","Waterloo","Cambridge","Guelph","Hamilton","Brantford","Toronto","London","Windsor","Barrie","Niagara","Milton","Oakville","Burlington","Mississauga","Brampton","Woodstock","Stratford","Sarnia"], + "serviceType": "Fence & Railing Materials Supply" +}; + +export default function GlassRailingPage() { + return ( + <> +