From 202fa38d463d227ef81ad8d881aa155221e530f1 Mon Sep 17 00:00:00 2001 From: selvi Date: Fri, 17 Apr 2026 13:28:05 +0530 Subject: [PATCH] first commit --- app/globals.css | 214 +++++++++++++++++++------------- app/login/page.tsx | 39 ++++++ app/page.tsx | 251 +++----------------------------------- app/products/page.tsx | 80 ++++++++++++ components/CTA.tsx | 12 ++ components/Footer.tsx | 49 +++++--- components/Hero.tsx | 105 ++++++++++++++++ components/Navbar.tsx | 2 - components/Products.tsx | 112 +++++++++++++++++ components/Services.tsx | 80 ++++++++++++ components/StainPromo.tsx | 35 ++++++ components/Territory.tsx | 90 ++++++++++++++ components/TrustBar.tsx | 19 +++ components/WhoWeServe.tsx | 30 +++++ 14 files changed, 775 insertions(+), 343 deletions(-) create mode 100644 app/login/page.tsx create mode 100644 app/products/page.tsx create mode 100644 components/CTA.tsx create mode 100644 components/Hero.tsx create mode 100644 components/Products.tsx create mode 100644 components/Services.tsx create mode 100644 components/StainPromo.tsx create mode 100644 components/Territory.tsx create mode 100644 components/TrustBar.tsx create mode 100644 components/WhoWeServe.tsx diff --git a/app/globals.css b/app/globals.css index b775e6a..62665d8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600&display=swap'); + :root { --navy: #0F2444; --navy-mid: #1B3A6B; @@ -23,12 +25,72 @@ body { background: var(--white); color: var(--gray-800); overflow-x: hidden; - padding-top: 64px; /* Space for fixed nav */ } +/* ── ANIMATIONS ── */ +@keyframes fadeUp { + from { opacity: 0; transform: translateY(24px); } + to { opacity: 1; transform: translateY(0); } +} + +.fade-up { + animation: fadeUp 0.6s ease both; +} + +/* ── SCROLLBAR ── */ +::-webkit-scrollbar { width: 6px; } +::-webkit-scrollbar-track { background: var(--gray-100); } +::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; } + +/* Section Generic Styles */ +section { padding: 96px 80px; } + +@media (max-width: 1024px) { + section { padding: 80px 48px; } +} + +@media (max-width: 768px) { + section { padding: 64px 24px; } +} + +.section-eyebrow { + font-family: var(--font-display); 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; +} +.section-eyebrow::before { + content: ''; display: block; width: 24px; height: 2px; background: var(--orange); +} +.section-h2 { + font-family: var(--font-display); font-size: clamp(38px, 4vw, 58px); + font-weight: 800; text-transform: uppercase; line-height: .95; + color: var(--navy); letter-spacing: -.01em; +} +.section-h2 span { color: var(--orange); } + +/* Buttons */ +.btn-primary { + background: var(--orange); color: var(--white); + font-family: var(--font-display); font-size: 15px; font-weight: 700; + letter-spacing: .08em; text-transform: uppercase; + padding: 14px 32px; border: none; border-radius: 4px; cursor: pointer; + transition: background .2s; text-decoration: none; display: inline-block; +} +.btn-primary:hover { background: var(--orange-dark); } + +.btn-secondary { + background: transparent; color: var(--white); + font-family: var(--font-display); font-size: 15px; font-weight: 700; + letter-spacing: .08em; text-transform: uppercase; + padding: 13px 32px; border: 1.5px solid rgba(255,255,255,.3); + border-radius: 4px; cursor: pointer; transition: border-color .2s; + text-decoration: none; display: inline-block; +} +.btn-secondary:hover { border-color: rgba(255,255,255,.7); } + /* ── NAV ── */ nav { - position: fixed; top: 0; left: 0; right: 0; z-index: 100; + position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--navy); display: flex; align-items: center; justify-content: space-between; padding: 0 48px; height: 64px; @@ -56,23 +118,22 @@ nav { color: rgba(255,255,255,.75); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; transition: color .2s; } -.nav-links a:hover, .nav-links a.active { color: var(--orange); } +.nav-links a:hover { color: var(--orange); } .nav-cta { background: var(--orange); color: var(--white); font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 10px 22px; border: none; border-radius: 4px; cursor: pointer; - transition: background .2s; - text-decoration: none; + transition: background .2s; text-decoration: none; } .nav-cta:hover { background: var(--orange-dark); } /* ── HERO ── */ .hero { - min-height: calc(100vh - 64px); + min-height: 100vh; background: var(--navy); display: grid; grid-template-columns: 1fr 1fr; - position: relative; overflow: hidden; + padding-top: 64px; position: relative; overflow: hidden; } .hero-pattern { position: absolute; inset: 0; opacity: .04; @@ -119,23 +180,7 @@ nav { } .hero-sub strong { color: rgba(255,255,255,.9); font-weight: 500; } .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; } -.btn-primary { - background: var(--orange); color: var(--white); - font-family: var(--font-display); font-size: 15px; font-weight: 700; - letter-spacing: .08em; text-transform: uppercase; - padding: 14px 32px; border: none; border-radius: 4px; cursor: pointer; - transition: background .2s; text-decoration: none; display: inline-block; -} -.btn-primary:hover { background: var(--orange-dark); } -.btn-secondary { - background: transparent; color: var(--white); - font-family: var(--font-display); font-size: 15px; font-weight: 700; - letter-spacing: .08em; text-transform: uppercase; - padding: 13px 32px; border: 1.5px solid rgba(255,255,255,.3); - border-radius: 4px; cursor: pointer; transition: border-color .2s; - text-decoration: none; display: inline-block; -} -.btn-secondary:hover { border-color: rgba(255,255,255,.7); } + .hero-stats { display: flex; gap: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); @@ -200,6 +245,7 @@ nav { background: var(--orange); display: flex; align-items: center; justify-content: center; gap: 0; overflow: hidden; + flex-wrap: wrap; } .trust-item { flex: 1; display: flex; align-items: center; justify-content: center; @@ -207,27 +253,11 @@ nav { border-right: 1px solid rgba(255,255,255,.2); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); + min-width: 200px; } .trust-item:last-child { border-right: none; } .trust-icon { font-size: 16px; } -/* ── SECTIONS ── */ -section { padding: 96px 80px; } -.section-eyebrow { - font-family: var(--font-display); 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; -} -.section-eyebrow::before { - content: ''; display: block; width: 24px; height: 2px; background: var(--orange); -} -.section-h2 { - font-family: var(--font-display); font-size: clamp(38px, 4vw, 58px); - font-weight: 800; text-transform: uppercase; line-height: .95; - color: var(--navy); letter-spacing: -.01em; -} -.section-h2 span { color: var(--orange); } - /* ── PRODUCTS ── */ .products-section { background: var(--gray-100); } .products-header { @@ -242,7 +272,9 @@ section { padding: 96px 80px; } .product-card { background: var(--white); padding: 32px 28px; transition: background .2s; cursor: pointer; position: relative; - overflow: hidden; text-decoration: none; display: block; + overflow: hidden; + text-decoration: none; + display: block; } .product-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; @@ -456,6 +488,7 @@ section { padding: 96px 80px; } font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 14px 36px; border: none; border-radius: 4px; cursor: pointer; + text-decoration: none; } .btn-white-outline { background: transparent; color: var(--white); @@ -463,6 +496,7 @@ section { padding: 96px 80px; } letter-spacing: .08em; text-transform: uppercase; padding: 13px 36px; border: 2px solid rgba(255,255,255,.5); border-radius: 4px; cursor: pointer; transition: border-color .2s; + text-decoration: none; } .btn-white-outline:hover { border-color: var(--white); } @@ -511,55 +545,63 @@ footer { letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; } -/* ── LOGIN PAGE SPECIFIC ── */ +/* ── RESPONSIVE ── */ +@media (max-width: 1024px) { + .hero { grid-template-columns: 1fr; } + .hero-right { padding: 40px 48px 80px; } + .products-grid { grid-template-columns: repeat(2, 1fr); } + .footer-top { grid-template-columns: 1fr 1fr; } + .targets-grid { grid-template-columns: repeat(2, 1fr); } + .stain-layout { grid-template-columns: 1fr; } +} + +@media (max-width: 768px) { + nav { padding: 0 24px; } + .nav-links { display: none; } + .hero-left { padding: 60px 24px; } + .hero-right { padding: 40px 24px 60px; } + .products-grid { grid-template-columns: 1fr; } + .services-grid { grid-template-columns: 1fr; } + .territory-layout { grid-template-columns: 1fr; } + .footer-top { grid-template-columns: 1fr; } +} + + +/* ── AUTH PAGES ── */ .auth-page { - min-height: calc(100vh - 64px); - background: var(--cream); - display: flex; align-items: center; justify-content: center; - padding: 40px; + min-height: 100vh; + padding-top: calc(80px + 64px); /* 80px spacing + 64px for fixed navbar */ + padding-bottom: 80px; + background: var(--navy); + display: flex; align-items: flex-start; justify-content: center; + position: relative; overflow: hidden; +} +.auth-page::before { + content: ''; position: absolute; top: -100px; left: -100px; + width: 400px; height: 400px; border-radius: 50%; + background: var(--orange); opacity: .05; +} +.auth-page::after { + content: ''; position: absolute; bottom: -100px; right: -100px; + width: 400px; height: 400px; border-radius: 50%; + background: var(--orange); opacity: .05; } .auth-card { - background: var(--white); - border-radius: 12px; - box-shadow: 0 10px 30px rgba(0,0,0,0.05); - width: 100%; - max-width: 440px; - padding: 48px; + width: 100%; max-width: 440px; + background: rgba(255,255,255,.03); + border: 1px solid rgba(255,255,255,.1); + border-radius: 16px; padding: 48px; + backdrop-filter: blur(20px); + position: relative; z-index: 2; } .auth-title { - font-family: var(--font-display); - font-size: 32px; - font-weight: 800; - color: var(--navy); - text-transform: uppercase; - margin-bottom: 8px; + font-family: var(--font-display); font-size: 32px; font-weight: 800; + color: var(--white); text-transform: uppercase; letter-spacing: .02em; + margin-bottom: 8px; text-align: center; } +.auth-title span { color: var(--orange); } .auth-sub { - font-size: 14px; - color: var(--gray-600); - margin-bottom: 32px; + font-size: 14px; color: rgba(255,255,255,.5); text-align: center; + margin-bottom: 40px; line-height: 1.6; } -.auth-form .form-label { color: var(--gray-600); } -.auth-form .form-input { - background: var(--gray-100); - border: 1px solid var(--gray-200); - color: var(--gray-800); -} -.auth-form .form-input:focus { border-color: var(--orange); } - -/* ── ANIMATIONS ── */ -@keyframes fadeUp { - from { opacity: 0; transform: translateY(24px); } - to { opacity: 1; transform: translateY(0); } -} -.hero-eyebrow { animation: fadeUp .6s ease both; } -.hero-h1 { animation: fadeUp .6s .1s ease both; } -.hero-sub { animation: fadeUp .6s .2s ease both; } -.hero-btns { animation: fadeUp .6s .3s ease both; } -.hero-stats { animation: fadeUp .6s .4s ease both; } -.quote-card { animation: fadeUp .7s .3s ease both; } - -/* ── SCROLLBAR ── */ -::-webkit-scrollbar { width: 6px; } -::-webkit-scrollbar-track { background: var(--gray-100); } -::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; } +.auth-form { display: flex; flex-direction: column; } diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 0000000..56005b8 --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,39 @@ +"use client"; +import Link from 'next/link'; + +export default function LoginPage() { + return ( +
+
+

Login

+

Access your pricing and order history.

+ +
e.preventDefault()}> +
+ + +
+
+ + +
+ +
+
+ + +
+ Forgot Password? +
+ + +
+ + {/*
+ Don't have a contractor account?
+ Apply for contractor pricing +
*/} +
+
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 412999e..208cef7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,242 +1,23 @@ -import Link from 'next/link'; +import Hero from "@/components/Hero"; +import TrustBar from "@/components/TrustBar"; +import Products from "@/components/Products"; +import Services from "@/components/Services"; +import Territory from "@/components/Territory"; +import WhoWeServe from "@/components/WhoWeServe"; +import StainPromo from "@/components/StainPromo"; +import CTA from "@/components/CTA"; export default function Home() { return ( <> - {/* HERO */} -
-
-
-
- -
-
Kitchener–Waterloo Region · Ontario
-

- Ontario's B2B
- Fence Supply
- Partner -

-

- Supplying contractors, builders, and property managers across Ontario with{' '} - chain link, ornamental, composite, glass railing, and stain products — - with same-day job site delivery across a 250km radius from KWC. -

-
- Request contractor pricing - View all products -
-
-
-
3+
-
Years serving KWC
-
-
-
250km
-
Delivery radius
-
-
-
9
-
Product lines
-
-
-
B2B
-
Contractor focus
-
-
-
- -
-
-
Request a quote
-
Response within 2 business hours · Contractor pricing available
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
-
- - -
-
-
- - -
-
- - -
-
- -
Or call us directly · info@vgfenceproducts.com
-
-
-
- - {/* TRUST BAR */} -
-
🚚 Same-day job site delivery
-
📐 2D fence drawing services
-
🏗️ Contractor accounts available
-
📍 Serving 250km across Ontario
-
⭐ 3+ years serving KWC
-
- - {/* PRODUCTS PREVIEW */} -
-
-
-
Our products
-

Everything you
need to build.

-
-

- Nine product lines in stock, ready for same-day or scheduled delivery to your job site anywhere in our 250km radius. -

-
-
- {/* Card 1 */} - -
- -
-
Aluminum railing
-
Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.
-
ResidentialCommercial
-
→
- - - {/* Card 2 */} - -
- -
-
Chain link fence
-
Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.
-
BlackGalvanizedCommercial
-
→
- - - {/* Card 3 */} -
-
-
-
Need a custom quote?
-
Talk to our
supply team.
-
Bulk orders · Contractor accounts · Scheduled deliveries · Job site planning
-
- Request pricing → -
-
-
-
- - {/* SERVICES */} -
-
- What we do -
-

More than just supply.

-
-
-
01
-
2D Fence Drawing Services
-
CAD-based fence layout drawings for residential and commercial projects.
-
    -
  • Residential & commercial layouts
    • -
  • Material takeoff & quantity estimation
    • -
  • Permit support drawings
    • -
-
-
-
02
-
Wood Staining Services
-
Professional application of Expert Stain & Seal products on outdoor structures.
-
    -
  • Fence, deck & pergola staining
    • -
  • New wood preparation & staining
    • -
  • Maintenance & restoration
    • -
-
-
-
- - {/* TERRITORY */} -
-
Quick Delivery
-

Across Ontario.

-
-
-
-
-
-
Kitchner / Waterloo
-
Home Depot & Job Site Base
-
-
BASE
-
-
-
-
-
Guelph / Cambridge
-
Immediate 1-hour Delivery
-
-
20KM
-
-
-
-
-
Toronto / GTA
-
Same-day Delivery Available
-
-
110KM
-
-
-
-
250km Service Radius
-
- [Interactive Region Map Integration] -
-
-
-
- - {/* CTA */} -
-

Ready to start?

-

Join hundreds of Ontario contractors who trust VG Fence for their supply needs.

-
- Create Account - Get a Quote Now -
-
+ + + + + + + + ); } diff --git a/app/products/page.tsx b/app/products/page.tsx new file mode 100644 index 0000000..a78a488 --- /dev/null +++ b/app/products/page.tsx @@ -0,0 +1,80 @@ +import Link from 'next/link'; + +const products = [ + { + name: "Aluminum Railing", + desc: "Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.", + tags: ["Residential", "Commercial", "Maintenance-free"], + icon: + }, + { + name: "Chain Link Fence", + desc: "Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.", + tags: ["Black", "Galvanized", "Security"], + icon: + }, + { + name: "Composite Fences", + desc: "Low maintenance composite fence panels in three premium colours. Natural wood look, zero rot.", + tags: ["Ancient Wood", "Golden Teak", "Anthracite"], + icon: + }, + { + name: "Glass Railing", + desc: "Premium tempered glass railing for pools, decks, balconies, and commercial applications.", + tags: ["Pool-safe", "Tempered Glass", "Modern"], + icon: + }, + { + name: "Ornamental Fence", + desc: "Classic black ornamental iron fence for residential properties. Elegant, durable, and timeless.", + tags: ["Black Iron", "Residential", "Elegant"], + icon: + }, + { + name: "Expert Stain & Seal", + desc: "Professional-grade wood care products for fences, decks, pergolas, and outdoor structures.", + tags: ["Wood Care", "High Margin", "Professional"], + icon: + } +]; + +export default function ProductsPage() { + return ( +
+
+
Inventory
+

Our Product Lines.

+

+ Explore our full range of professional fence and railing supplies. All items are available for same-day delivery across Ontario. +

+
+ +
+ {products.map((product, i) => ( +
+
+ {product.icon} +
+
{product.name}
+
{product.desc}
+
+ {product.tags.map((tag, j) => ( + {tag} + ))} +
+
+ +
+
+ ))} +
+ +
+

Don't see what you need?

+

We handle custom orders and bulk supplies for large-scale developments.

+ Contact our supply team +
+
+ ); +} diff --git a/components/CTA.tsx b/components/CTA.tsx new file mode 100644 index 0000000..dafbee6 --- /dev/null +++ b/components/CTA.tsx @@ -0,0 +1,12 @@ +export default function CTA() { + return ( +
+

Ready to place
your next order?

+

Same-day delivery · Contractor pricing · 250km radius across Ontario

+ +
+ ); +} diff --git a/components/Footer.tsx b/components/Footer.tsx index 8d8ce25..e899cff 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -5,43 +5,52 @@ export default function Footer() {
-
VG FENCE PRODUCTS
-

Ontario's B2B Fence Supply Partner. Premium quality, same-day delivery.

-
+
VG Fence Products
+
Ontario's B2B fence supply partner — KWC & beyond
+
📍 Serving 250km radius from Kitchener-Waterloo
+ -
Serving 250km across Ontario
-
Solutions
+
Products
    -
  • Aluminum Railing
    • -
  • Chain Link Fence
    • -
  • Composite Fences
    • -
  • Glass Railing
    • +
  • Aluminum railing
    • +
  • Chain link fence
    • +
  • Composite fences
    • +
  • Expert Stain & Seal
    • +
  • Fence armor
    • +
  • Glass railing
    • +
  • Ornamental fence
    • +
  • Temp fence rental
-
Company
+
Services
    -
  • About Us
    • -
  • Services
    • -
  • Territory
    • -
  • Request Quote
    • +
  • 2D drawing services
    • +
  • Wood staining
    • +
  • Site services
    • +
  • Job site delivery
    • +
  • Contractor accounts
-
Account
+
We serve
    -
  • Contractor Login
    • -
  • Register
    • +
  • Kitchener · Waterloo
    • +
  • Cambridge · Guelph
    • +
  • Hamilton · Brantford
    • +
  • London · Toronto
    • +
  • Barrie · Owen Sound
    • +
  • Niagara Region
-
© {new Date().getFullYear()} VG Fence Products. All rights reserved.
-
Privacy Policy • Terms of Service
+ © {new Date().getFullYear()} VG Fence Products. All rights reserved. · Kitchener, Ontario, Canada + vgfence.com
); diff --git a/components/Hero.tsx b/components/Hero.tsx new file mode 100644 index 0000000..f7ca884 --- /dev/null +++ b/components/Hero.tsx @@ -0,0 +1,105 @@ +"use client"; +import Link from 'next/link'; + +export default function Hero() { + return ( +
+
+
+
+ +
+
Kitchener–Waterloo Region · Ontario
+

+ Ontario's B2B
+ Fence Supply
+ Partner +

+

+ Supplying contractors, builders, and property managers across Ontario with{' '} + chain link, ornamental, composite, glass railing, and stain products — + with same-day job site delivery across a 250km radius from KWC. +

+
+ Request contractor pricing + View all products +
+
+
+
3+
+
Years serving KWC
+
+
+
250km
+
Delivery radius
+
+
+
9+
+
Product lines
+
+
+
B2B
+
Contractor focus
+
+
+
+ +
+
+
Request a quote
+
Response within 2 business hours · Contractor pricing available
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ +
Or call us directly · info@vgfenceproducts.com
+
+
+
+
+ ); +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx index e69de09..3c0c77a 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -10,8 +10,6 @@ export default function Navbar() {
  • Home
  • Products
    • -
  • Services
    • -
  • Territory
  • Login
Get a quote diff --git a/components/Products.tsx b/components/Products.tsx new file mode 100644 index 0000000..afe0375 --- /dev/null +++ b/components/Products.tsx @@ -0,0 +1,112 @@ +import Link from 'next/link'; + +export default function Products() { + const products = [ + { + name: "Aluminum railing", + desc: "Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.", + tags: ["Residential", "Commercial"], + icon: ( + + ) + }, + { + name: "Chain link fence", + desc: "Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.", + tags: ["Black", "Galvanized", "Commercial", "Residential"], + icon: ( + + ) + }, + { + name: "Composite fences", + desc: "Low maintenance composite fence panels in three premium colours. Natural wood look, zero rot.", + tags: ["Ancient Wood", "Golden Teak", "Anthracite Grey"], + icon: ( + + ) + }, + { + name: "Glass railing", + desc: "Premium tempered glass railing for pools, decks, balconies, and commercial applications.", + tags: ["Pool-safe", "Residential", "Commercial"], + icon: ( + + ) + }, + { + name: "Ornamental fence", + desc: "Classic black ornamental iron fence for residential properties. Elegant, durable, and timeless.", + tags: ["Black", "Residential"], + icon: ( + + ) + }, + { + name: "Expert Stain & Seal", + desc: "Professional-grade wood care products for fences, decks, pergolas, and outdoor structures.", + tags: ["Stain & Seal", "Clean & Bright", "High margin"], + icon: ( + + ) + }, + { + name: "Fence armor", + desc: "Post protection accessories to extend the life of any fence installation. Post caps, guards, and rot barriers.", + tags: ["Post Caps", "Post Guards", "Rot Barrier"], + icon: ( + + ) + }, + { + name: "Temporary fence rentals", + desc: "Construction site fencing, crowd control, and event barriers available for short or long-term rental.", + tags: ["Construction", "Events", "Rental"], + icon: ( + + ) + } + ]; + + return ( +
+
+
+
Our products
+

Everything you
need to build.

+
+

+ Nine product lines in stock, ready for same-day or scheduled delivery to your job site anywhere in our 250km radius. +

+
+
+ {products.map((product, index) => ( + +
+ {product.icon} +
+
{product.name}
+
{product.desc}
+
+ {product.tags.map((tag, tIndex) => ( + {tag} + ))} +
+
→
+ + ))} + +
+
+
+
Need a custom quote?
+
Talk to our
supply team.
+
Bulk orders · Contractor accounts · Scheduled deliveries · Job site planning
+
+ Request pricing → +
+
+
+
+ ); +} diff --git a/components/Services.tsx b/components/Services.tsx new file mode 100644 index 0000000..1d94406 --- /dev/null +++ b/components/Services.tsx @@ -0,0 +1,80 @@ +export default function Services() { + const services = [ + { + num: "01", + name: "2D Fence Drawing Services", + desc: "CAD-based fence layout drawings for residential and commercial projects. Perfect for permits, planning, and contractor submissions.", + list: [ + "Residential & commercial layouts", + "Chain link, wood, aluminum drawings", + "Gate placement & access planning", + "Material takeoff & quantity estimation", + "Permit support drawings", + "Property boundary fence design" + ] + }, + { + num: "02", + name: "Wood Staining Services", + desc: "Professional application of Expert Stain & Seal products on fences, decks, pergolas, and outdoor structures.", + list: [ + "Fence, deck & pergola staining", + "New wood preparation & staining", + "Old wood restoration & re-staining", + "Cedar & pressure treated staining", + "UV & waterproof sealing", + "Color matching services" + ] + }, + { + num: "03", + name: "Temporary & Site Services", + desc: "Complete temporary fencing solutions for construction sites, events, and emergency situations across Ontario.", + list: [ + "Temporary fence rental setup", + "Construction site fence management", + "Site safety barrier installation", + "Emergency fence repair service" + ] + }, + { + num: "04", + name: "Delivery & Logistics", + desc: "Reliable material delivery across our 250km service radius. Same-day local, bulk job site, and scheduled contractor deliveries.", + list: [ + "Same-day delivery (local KWC)", + "Bulk job site delivery", + "Scheduled contractor deliveries", + "Small order pickup support" + ] + } + ]; + + return ( +
+
+ + What we do +
+

More than just supply.

+
+ {services.map((service, index) => ( +
+
{service.num}
+
+ {service.name.split(' ').map((word, wIndex) => ( + wIndex >= 1 ? {word} : word + ))} +
+
{service.desc}
+
    + {service.list.map((item, lIndex) => ( +
  • {item}
    • + ))} +
+
+ ))} +
+
+ ); +} diff --git a/components/StainPromo.tsx b/components/StainPromo.tsx new file mode 100644 index 0000000..8cb5086 --- /dev/null +++ b/components/StainPromo.tsx @@ -0,0 +1,35 @@ +export default function StainPromo() { + return ( +
+
+
+
+
New — high margin product line
+

Expert Stain
& Seal

+

Professional-grade wood care products built for contractors. Two products, maximum results — now available through VG Fence Products with contractor pricing and bulk ordering.

+
+
Product 1Stain & Seal
+
Product 2Clean & Bright
+
+
+
+
Who orders from us
+ {[ + "Deck & fence staining contractors", + "Exterior painters & handymen", + "Pressure washing companies", + "Property maintenance companies", + "Wood restoration contractors", + "DIY homeowners (decks & fences)" + ].map((item, index) => ( +
+
+
{item}
+
+ ))} + Get stain product pricing → +
+
+
+ ); +} diff --git a/components/Territory.tsx b/components/Territory.tsx new file mode 100644 index 0000000..9f3fd88 --- /dev/null +++ b/components/Territory.tsx @@ -0,0 +1,90 @@ +export default function Territory() { + return ( +
+
Service territory
+

Based in KWC.
Delivering everywhere.

+
+
+
250km radius
+ + + + + + + + + KWC + + + Guelph + ~30km + + + Hamilton + ~75km + + + Toronto / GTA + ~110km + + + Brantford + ~50km + + + Stratford + ~45km + + + London + ~120km + + + Owen Sound + ~175km + + + Barrie + ~160km + + + Niagara + ~150km + + + Major hub + + Regional city + + 250km radius + +
+ +
+
📍 Home base: Kitchener · Waterloo · Cambridge
+
+ {[ + { type: 'home', name: 'Kitchener · Waterloo · Cambridge', sub: 'Home base — priority service area', dist: '0km' }, + { type: 'near', name: 'Guelph', sub: 'High residential & commercial growth', dist: '~30km' }, + { type: 'near', name: 'Brantford', sub: 'Contractors, builders, industrial', dist: '~50km' }, + { type: 'near', name: 'Hamilton', sub: 'Industrial, commercial, property managers', dist: '~75km' }, + { type: 'home', name: 'Toronto / GTA', sub: 'Commercial builders, developers, high volume', dist: '~110km' }, + { type: 'home', name: 'London', sub: 'Large market, residential & commercial', dist: '~120km' }, + { type: 'far', name: 'Niagara · Barrie · Owen Sound', sub: 'Extended delivery available', dist: '~150–175km' }, + ].map((city, index) => ( +
+
+
+
{city.name}
+
{city.sub}
+
+
{city.dist}
+
+ ))} +
+
+
+
+ ); +} diff --git a/components/TrustBar.tsx b/components/TrustBar.tsx new file mode 100644 index 0000000..1b4d87c --- /dev/null +++ b/components/TrustBar.tsx @@ -0,0 +1,19 @@ +export default function TrustBar() { + const trustItems = [ + { icon: '🚚', text: 'Same-day job site delivery' }, + { icon: '📐', text: '2D fence drawing services' }, + { icon: '🏗️', text: 'Contractor accounts available' }, + { icon: '📍', text: 'Serving 250km across Ontario' }, + { icon: '⭐', text: '3+ years serving KWC' }, + ]; + + return ( +
+ {trustItems.map((item, index) => ( +
+ {item.icon} {item.text} +
+ ))} +
+ ); +} diff --git a/components/WhoWeServe.tsx b/components/WhoWeServe.tsx new file mode 100644 index 0000000..81dda41 --- /dev/null +++ b/components/WhoWeServe.tsx @@ -0,0 +1,30 @@ +export default function WhoWeServe() { + const targets = [ + { priority: 1, name: "Fence contractors", examples: "Residential · Commercial · Chain link specialists · Ornamental installers" }, + { priority: 1, name: "General contractors", examples: "Landscaping · Deck builders · Pool contractors · Renovation" }, + { priority: 1, name: "Builders & developers", examples: "Home builders · Commercial builders · Site developers · Real estate developers" }, + { priority: 2, name: "Property managers", examples: "Apartments · Commercial properties · Industrial facilities · Storage" }, + { priority: 2, name: "Staining contractors", examples: "Deck staining · Fence staining · Painters · Handyman services · Pressure washing" }, + { priority: 2, name: "Event & rental companies", examples: "Event management · Temp fence rental · Crowd control · Festival organizers" }, + { priority: 3, name: "Government & institutions", examples: "Municipalities · Schools · Parks & rec · Public infrastructure · Government contractors", type: "Specialty" }, + { priority: 3, name: "Agriculture & rural", examples: "Farms · Ranches · Livestock owners · Agricultural businesses", type: "Specialty" }, + ]; + + return ( +
+
Who we serve
+

Built for the
people who build.

+
+ {targets.map((target, index) => ( +
+
+ {target.priority === 1 ? '⬛ Priority 1' : target.priority === 2 ? '◼ Priority 2' : `◻ ${target.type}`} +
+
{target.name}
+
{target.examples}
+
+ ))} +
+
+ ); +}