diff --git a/app/about/AboutClient.tsx b/app/about/AboutClient.tsx index 12facbc..f5fc459 100644 --- a/app/about/AboutClient.tsx +++ b/app/about/AboutClient.tsx @@ -35,7 +35,7 @@ export default function AboutPage() {
Our Story
-

Your Trusted Fencing Partner

+

Your Trusted Fencing Partner

At VG Fence, we are dedicated to providing high-quality fencing and railing materials to contractors, property managers, event organizers, and homeowners. With years of experience in the industry, we have built a reputation as a reliable supplier for both commercial and residential projects. @@ -46,7 +46,7 @@ export default function AboutPage() {

While our focus is primarily on material supply, we also provide installation support for select projects, based on size and scope.

-
+
Learn More
@@ -61,9 +61,9 @@ export default function AboutPage() { className="about-image-cover" />
-
-
Our Mission
-
+
+
Our Mission
+
To supply premium fencing and railing materials that combine quality, durability, and convenience, helping every project — large or small — succeed.
@@ -89,15 +89,15 @@ export default function AboutPage() { {/* Testimonial Section (Slider) */}
-
Google Reviews
-

What Our Clients Say.

+
Google Reviews
+

What Our Clients Say.

-
+
-
FAQ
-

Frequently Asked Questions.

+
FAQ
+

Frequently Asked Questions.

{faqs.map((faq, idx) => ( diff --git a/app/globals.css b/app/globals.css index c722c3c..72fa79e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -279,7 +279,8 @@ nav { display: flex; } -.mobile-menu a, .mobile-dropdown-btn { +.mobile-menu a, +.mobile-dropdown-btn { font-family: var(--fd); font-size: 16px; font-weight: 700; @@ -302,7 +303,8 @@ nav { text-align: left; } -.mobile-menu a:hover, .mobile-dropdown-btn:hover { +.mobile-menu a:hover, +.mobile-dropdown-btn:hover { color: var(--orange); } @@ -617,9 +619,9 @@ h1.hero-h1 em { margin-top: 14px; } -.fl:first-of-type { +/* .fl:first-of-type { margin-top: 0; -} +} */ .fi { width: 100%; @@ -1099,18 +1101,19 @@ h2.sh-white { gap: 6px; } -.service-list li { - font-size: 12px; - color: rgba(255, 255, 255, .6); +.services-section .service-list li { + font-size: 13px; + color: rgba(255, 255, 255, .7); display: flex; align-items: center; - gap: 8px; + gap: 10px; + margin-bottom: 8px; } -.service-list li::before { +.services-section .service-list li::before { content: ''; - width: 5px; - height: 5px; + width: 6px; + height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; @@ -2013,6 +2016,50 @@ footer { } } +@media(max-width:380px) { + + .hero-left, + .hero-right { + padding-left: 15px; + padding-right: 15px; + } + + h1.hero-h1 { + font-size: 34px !important; + } + + .hero-sub { + font-size: 14px; + } + + .quote-card { + padding: 24px 15px; + width: 290px; + } + + .hero-btns { + flex-direction: column; + align-items: stretch; + gap: 10px; + } + + .btn-primary, + .btn-secondary { + width: 100%; + text-align: center; + padding-left: 10px; + padding-right: 10px; + } + + .stat-val { + font-size: 28px; + } + + .hero-stats { + gap: 20px; + } +} + ::-webkit-scrollbar { width: 5px; } @@ -2200,7 +2247,7 @@ footer { } .materials { - padding: 80px; + padding: 80px 20px; background: var(--gray-100); } @@ -2899,6 +2946,13 @@ footer { } } +@media (max-width: 767px) { + .mat-grid, + .region-grid { + grid-template-columns: 1fr; + } +} + .territory .sh { color: var(--white); } @@ -2910,25 +2964,26 @@ footer { } .auth-page { - padding: calc(80px + 64px) 24px 80px; + margin-top: 64px; + padding: 80px 24px; background: #f5f2ed; display: flex; - align-items: flex-start; + align-items: center; justify-content: center; position: relative; overflow: hidden; - min-height: calc(100vh - 64px); + /* min-height: calc(100vh - 64px); */ } .auth-card { width: 100%; max-width: 440px; - background: var(--white); - border: 1px solid var(--gray-200); + background: var(--navy); + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; - padding: 40px; - box-shadow: 0 8px 32px rgba(15, 36, 68, 0.1); + padding: 48px 40px; + box-shadow: 0 20px 50px rgba(15, 36, 68, 0.2); position: relative; z-index: 2; } @@ -2937,7 +2992,7 @@ footer { font-family: var(--fd); font-size: 32px; font-weight: 800; - color: var(--navy); + color: var(--white); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; @@ -2963,30 +3018,30 @@ footer { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; - color: var(--gray-600); + color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; } .form-input { width: 100%; - background: var(--gray-100); - border: 1px solid var(--gray-200); + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; - padding: 11px 14px; + padding: 12px 16px; font-family: var(--fb); font-size: 14px; - color: var(--gray-800); + color: var(--white); outline: none; - transition: border-color .2s; + transition: all .2s; } .form-input::placeholder { - color: var(--gray-400); + color: rgba(255, 255, 255, 0.3); } .form-input:focus { border-color: var(--orange); - background: var(--white); + background: rgba(255, 255, 255, 0.1); } .form-submit { @@ -3016,10 +3071,409 @@ footer { } -.section { - padding: 80px 0; +/* ── ABOUT / STORY COMMON ── */ +.about-story-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 80px; + align-items: stretch; + /* Key to matching height of content */ } +.about-image-column { + position: relative; + display: flex; + flex-direction: column; +} + +.about-image-wrapper { + position: relative; + width: 100%; + height: 100%; + min-height: 400px; + /* Fallback min height */ + border-radius: 12px; + overflow: hidden; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +.about-image-cover { + object-fit: cover; +} + +.about-floating-card { + position: absolute; + bottom: -30px; + left: -30px; + background: var(--white); + padding: 32px; + border-radius: 12px; + box-shadow: 0 15px 45px rgba(15, 36, 68, 0.15); + z-index: 5; + border-left: 4px solid var(--orange); + max-width: 450px; +} + +.about-story-text p { + font-size: 16px; + line-height: 1.8; + color: var(--gray-600); + margin-bottom: 20px; +} + +.about-story-text p:last-child { + margin-bottom: 0; +} + +.about-floating-card-text { + font-size: 15px; + line-height: 1.6; + font-weight: 500; + color: var(--navy); +} + +@media (max-width: 900px) { + .about-story-layout { + grid-template-columns: 1fr; + gap: 40px; + } + + .about-image-wrapper { + min-height: 300px; + } + + .about-floating-card { + position: relative; + bottom: 0; + left: 0; + margin-top: -40px; + margin-left: 20px; + margin-right: 20px; + } +} + +.section { + padding: 100px 0; + position: relative; +} + +.container { + max-width: 1300px; + margin: 0 auto; + padding: 0 40px; + width: 100%; +} + +@media (max-width: 768px) { + .section { + padding: 60px 0; + } + + .container { + padding: 0 24px; + } +} + +.section-h2 { + font-family: var(--fd); + font-size: clamp(36px, 4.5vw, 56px); + font-weight: 800; + text-transform: uppercase; + line-height: .95; + color: var(--navy); + letter-spacing: -.01em; + margin-bottom: 24px; +} + +.section-h2 span { + color: var(--orange); +} + +.section-h2.white { + color: var(--white); +} + +/* ── MANUFACTURING PAGE ── */ +.mfg-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; +} + +.mfg-card { + background: var(--white); + padding: 40px; + border-radius: 16px; + border: 1px solid var(--gray-200); + transition: all 0.3s ease; + display: flex; + flex-direction: column; +} + +.mfg-card:hover { + transform: translateY(-5px); + border-color: var(--orange); + box-shadow: 0 20px 40px rgba(15, 36, 68, 0.08); +} + +.mfg-card .section-h2 { + font-size: 24px; + margin-bottom: 20px; +} + +.service-list { + list-style-type: none !important; + padding: 0; + margin: 0; + margin-top: auto; +} + +.service-list li { + font-size: 14px; + color: var(--gray-600); + margin-bottom: 12px; + padding-left: 24px; + position: relative; + line-height: 1.4; +} + +.service-list li::before { + content: ''; + position: absolute; + left: 0; + top: 8px; + width: 6px; + height: 6px; + background: var(--orange); + border-radius: 50%; +} + +/* ── RENTALS PAGE ── */ +.rental-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; +} + +.rental-item-card { + background: var(--white); + border-radius: 12px; + overflow: hidden; + border: 1px solid var(--gray-200); + transition: all 0.3s ease; +} + +.rental-item-card:hover { + transform: translateY(-5px); + border-color: var(--orange); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); +} + +.rental-item-img { + position: relative; + height: 200px; + width: 100%; +} + +.rental-item-body { + padding: 24px; +} + +.rental-item-name { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + margin-bottom: 8px; +} + +.rental-item-desc { + font-size: 14px; + color: var(--gray-600); + line-height: 1.5; +} + +.app-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 24px; +} + +.app-card { + display: flex; + gap: 20px; + padding: 30px; + background: var(--white); + border-radius: 12px; + border: 1px solid var(--gray-200); +} + +.app-num { + font-family: var(--fd); + font-size: 32px; + font-weight: 800; + color: var(--orange); + opacity: 0.3; + line-height: 1; +} + +.app-title { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + margin-bottom: 6px; +} + +.app-desc { + font-size: 13px; + color: var(--gray-600); + line-height: 1.6; +} + +.rental-why-section { + display: grid; + grid-template-columns: 1fr 1fr; + min-height: 600px; +} + +.rental-why-img { + position: relative; + width: 100%; + height: 100%; +} + +.rental-why-content { + background: var(--navy); + padding: 80px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rental-why-title { + font-family: var(--fd); + font-size: 40px; + font-weight: 800; + text-transform: uppercase; + color: var(--white); + margin-bottom: 40px; +} + +.rental-timeline { + list-style: none; +} + +.rental-timeline-item { + display: flex; + gap: 15px; + margin-bottom: 24px; + align-items: center; +} + +.timeline-icon { + width: 48px; + height: 48px; + background: rgba(232, 87, 42, 0.1); + border: 1px solid rgba(232, 87, 42, 0.3); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--orange); + flex-shrink: 0; +} + +.timeline-text { + color: rgba(255, 255, 255, 0.8); + font-size: 15px; + font-weight: 500; +} + +@media (max-width: 900px) { + .rental-why-section { + grid-template-columns: 1fr; + } + + .rental-why-img { + height: 300px; + } + + .rental-why-content { + padding: 40px 24px; + } +} + +/* ── FAQ ACCORDION ── */ +.faq-accordion { + max-width: 800px; + margin: 60px auto 0; +} + +.faq-item { + border-bottom: 1px solid var(--gray-200); + background: var(--white); +} + +.faq-header { + padding: 24px 0; + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + gap: 20px; + transition: color 0.3s ease; +} + +.faq-header:hover .faq-question { + color: var(--orange); +} + +.faq-question { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: 0.02em; + line-height: 1.3; +} + +.faq-icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + color: var(--orange); + font-size: 20px; + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.faq-icon.open { + transform: rotate(180deg); +} + +.faq-answer-collapse { + max-height: 0; + overflow: hidden; + transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.faq-answer-collapse.open { + max-height: 500px; +} + +.faq-answer-inner { + padding-bottom: 30px; + font-size: 15px; + color: var(--gray-600); + line-height: 1.7; +} + + /* ── CONTACT PAGE Styles ── */ .contact-page { background: var(--white); @@ -3226,10 +3680,10 @@ footer { margin-top: 14px; } -.contact-page .fl:first-of-type, +/* .contact-page .fl:first-of-type, .contact-page .fl.first { margin-top: 0; -} +} */ .contact-page .fi { width: 100%; @@ -3441,7 +3895,7 @@ footer { /* FAQ SECTION */ .faq-section { - padding: 80px; + padding: 80px 20px; background: var(--white); } @@ -4288,7 +4742,7 @@ footer { /* -- ORANGE QUOTE CTA (Staining Services) -- */ .quote-cta-orange { background: var(--orange); - padding: 80px 0; + padding: 80px 20px; } .quote-cta-orange .quote-inner { @@ -4797,9 +5251,9 @@ inner-banner-title { } .contact-section .fi { - background: var(--gray-100); - border: 1px solid var(--gray-200); - color: var(--gray-800); + /* background: var(--gray-100); */ + border: 1px solid var(--gray-100); + color: #fff; } .contact-section .fi::placeholder { @@ -4991,4 +5445,88 @@ inner-banner-title { opacity: 1; transform: scale(1) translateY(0); } +} + +/* ── CTA SECTIONS ── */ +.cta-section { + background: var(--orange); + padding: 80px 0; + text-align: center; + color: var(--white); + position: relative; + overflow: hidden; +} + +.about-cta-section { + background: var(--orange); +} + +.cta-section .cta-h2 span { + color: var(--navy); +} + +.cta-section .btn-primary { + background: var(--white); + color: var(--orange); +} + +.cta-section .btn-primary:hover { + background: var(--cream); + color: var(--orange); +} + +.cta-h2 { + font-family: var(--fd); + font-size: clamp(32px, 5vw, 56px); + font-weight: 800; + text-transform: uppercase; + margin-bottom: 20px; + color: var(--white); + letter-spacing: -0.01em; +} + +.cta-h2 span { + color: var(--orange); +} + +.cta-sub { + font-size: 18px; + color: var(--white); + max-width: 700px; + margin: 0 auto 40px; + line-height: 1.6; + opacity: 0.9; +} + +.cta-btns { + display: flex; + gap: 16px; + justify-content: center; + flex-wrap: wrap; +} + +.btn-white-outline { + display: inline-block; + padding: 14px 28px; + border: 2px solid var(--white); + color: var(--white); + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + border-radius: 4px; + transition: all 0.3s ease; + text-decoration: none; +} + +.btn-white-outline:hover { + background: var(--white); + color: var(--navy); +} + +@media (max-width: 768px) { + .cta-section { + padding: 70px 24px; + } } \ No newline at end of file diff --git a/app/login/LoginClient.tsx b/app/login/LoginClient.tsx index a2774f6..f2d82ad 100644 --- a/app/login/LoginClient.tsx +++ b/app/login/LoginClient.tsx @@ -75,12 +75,12 @@ export default function LoginPage() {
*/} -
+
-

Access Your Account

+

Access Your Account

- {err &&
{err}
} - {msg &&
{msg}
} + {err &&
{err}
} + {msg &&
{msg}
}
@@ -104,23 +104,18 @@ export default function LoginPage() { />
-
+
- +
- Forgot Password? + Forgot Password?
- - - {/*
- Don't have a contractor account?
- Apply for contractor pricing -
*/}
diff --git a/app/manufacturing/ManufacturingClient.tsx b/app/manufacturing/ManufacturingClient.tsx index 50edd24..c879ca2 100644 --- a/app/manufacturing/ManufacturingClient.tsx +++ b/app/manufacturing/ManufacturingClient.tsx @@ -59,7 +59,7 @@ export default function ManufacturingPage() {
-
What We Build
+
What We Build

Specialized Production.

@@ -124,14 +124,16 @@ export default function ManufacturingPage() {
{/* CTA Section */} -
-

Get Your Custom Quote Today

-

- Fill out our job order & fabrication request form or call 226-888-7999 to discuss your bulk and custom fabrication needs. -

-
- Contact Us Now - Call Us Today +
+
+

Get Your Custom Quote Today

+

+ Fill out our job order & fabrication request form or call 226-888-7999 to discuss your bulk and custom fabrication needs. +

+
+ Contact Us Now + Call Us Today +
diff --git a/app/products/ProductsClient.tsx b/app/products/ProductsClient.tsx index 3f4548e..5dffe4d 100644 --- a/app/products/ProductsClient.tsx +++ b/app/products/ProductsClient.tsx @@ -36,11 +36,18 @@ export default function ProductsPage() { {/* Grid Content */}
- {currentProducts.map((product) => ( + {currentProducts.map((product, index) => (
{product.name}
-
-
+
+
FENCE RENTALS
-

+

Temporary Fence Rentals for Construction, Events, and Security

-

+

VG Fence provides high-quality temporary fencing solutions for contractors, event organizers, and property managers. Our rentals are flexible, reliable, and designed to secure construction sites, public events, and temporary perimeters.

- {/* */} Installation support for temporary fences is available for select projects
- - {/*
-
- 85% -
-
-

Satisfied Customer

-

Reliable support for contractors and event managers across Ontario projects.

-
-
*/}
-
+
Industrial fencing installation experts
@@ -84,7 +73,7 @@ export default function RentalsPage() {
-
Equipment List
+
Equipment List

Products & Equipment Available

@@ -108,7 +97,7 @@ export default function RentalsPage() {
-
Tailored Solutions
+
Tailored Solutions

Applications

@@ -137,43 +126,43 @@ export default function RentalsPage() { />
-

Why Choose VG Fence Rentals

+

Why Choose VG Fence Rentals

  • - +
    Flexible rental terms (daily, weekly, monthly)
  • - +
    Durable and professional-grade materials
  • - +
    Quick delivery & setup support available
  • - +
    Galvanized or black finishes
  • - +
    Reliable support for contractors and event managers
-

Secure Your Temporary Fencing Today

+

Secure Your Temporary Fencing Today

Request a Quote
diff --git a/app/services/page.tsx b/app/services/page.tsx index 221affe..33a6879 100644 --- a/app/services/page.tsx +++ b/app/services/page.tsx @@ -54,6 +54,8 @@ export default function ServicesPage() { description="A properly stained wood fence resists moisture penetration, UV fading, mould growth, and the surface cracking that makes wood look aged and rough in just a few seasons. We stain new fences before the grain seals up and grey sets in — and we restore older fences back to a rich, protected finish before applying fresh stain." bgColor="bg-white" image="/images/staining-hero.png" // Using hero image for fence as it's a fence + imageSmall1="/images/chain-link-hero.png" + imageSmall2="/assets/about-fencing.png" photoLabel="Fence staining — before & after" photoSub1="Cedar fence — new stain" photoSub2="Stain detail close-up" @@ -83,6 +85,8 @@ export default function ServicesPage() { bgColor="bg-gray" image="/images/stained-deck.png" reverse={true} + imageSmall1="/images/stained-deck.png" + imageSmall2="/assets/manufacturing-hero.png" photoLabel="Deck staining — before & after" photoSub1="Deck boards — new finish" photoSub2="Railing & stairs detail" @@ -112,6 +116,8 @@ export default function ServicesPage() { bgColor="bg-navy" image="/images/stained-pergola.png" isDark={true} + imageSmall1="/images/stained-pergola.png" + imageSmall2="/assets/about-fencing.png" photoLabel="Pergola & structure staining" photoSub1="Log cabin exterior" photoSub2="Cedar siding detail" @@ -123,12 +129,6 @@ export default function ServicesPage() { { key: "Cedar siding", val: "Horizontal and vertical board" }, { key: "Garden structures", val: "Sheds, trellises, arbors" } ]} - specsTitle2="Specialist care" - specs2={[ - { key: "Checking assessment", val: "Log home cracks" }, - { key: "End grain sealing", val: "Critical for logs" }, - { key: "Chinking inspection", val: "Prior to application" } - ]} extraInfo={{ title: "Log cabins — specialist service", desc: "Log and timber homes require particular care — checking (cracking), end grain exposure, and chinking gaps all need to be addressed before staining. We assess log home surfaces before quoting to ensure the stain application will hold and perform as it should in the Ontario climate." @@ -137,12 +137,15 @@ export default function ServicesPage() {

Ready to place
your next order?

-

Scheduled delivery · B2B contractor pricing · 250km radius across Ontario

+

Scheduled delivery available · Contractor pricing · Serving Ontario

Request a quote → diff --git a/components/ChainLinkFence/ChainLinkMaterials.tsx b/components/ChainLinkFence/ChainLinkMaterials.tsx index efe8dce..a1505d3 100644 --- a/components/ChainLinkFence/ChainLinkMaterials.tsx +++ b/components/ChainLinkFence/ChainLinkMaterials.tsx @@ -9,7 +9,7 @@ const materialsData = [ name: "Chain Link Mesh", desc: "The primary fencing fabric — available in galvanized and vinyl coated black finishes. Multiple gauge and mesh sizes for residential and commercial use.", specs: ["Galvanized", "Black vinyl coated", "Multiple gauges", "2\" mesh typical"], - img: "images/chainlink-mesh.jpg" + img: "/images/chain-link-hero.png" }, { num: "02", @@ -17,7 +17,7 @@ const materialsData = [ name: "Terminal Posts", desc: "Heavy-duty end, corner, and gate posts that anchor the fence line. Larger diameter than line posts for maximum structural strength at key points.", specs: ["End posts", "Corner posts", "Gate posts", "Multiple diameters"], - img: "images/chainlink-terminal-posts.jpg" + img: "/assets/about-fencing.png" }, { num: "03", @@ -25,7 +25,7 @@ const materialsData = [ name: "Line Posts", desc: "Intermediate posts set between terminal posts to support the mesh and top rail at regular intervals, typically every 10 feet.", specs: ["Galvanized steel", "Multiple heights", "Multiple diameters"], - img: "images/chainlink-line-posts.jpg" + img: "/assets/manufacturing-hero.png" }, { num: "04", @@ -33,7 +33,7 @@ const materialsData = [ name: "Top Rail", desc: "Horizontal pipe running along the top of the fence, threading through loop caps on line posts to stabilise the mesh and define the top edge.", specs: ["Galvanized pipe", "21ft lengths", "Sleeve-joined"], - img: "images/chainlink-top-rail.jpg" + img: "/images/chain-link-hero.png" }, { num: "05", @@ -41,7 +41,7 @@ const materialsData = [ name: "Bottom Tension Wire", desc: "Heavy gauge galvanized wire run along the bottom of the mesh to keep the fence taut and prevent mesh lift. Also available as bottom rail pipe.", specs: ["Galvanized wire", "Bottom rail option", "High tension"], - img: "images/chainlink-tension-wire.jpg" + img: "/assets/about-fencing.png" }, { num: "06", @@ -49,7 +49,7 @@ const materialsData = [ name: "Tension Bars", desc: "Flat steel bars woven vertically through the end of the mesh fabric and secured with tension bands to the terminal post, pulling the mesh taut.", specs: ["Galvanized steel", "Multiple lengths"], - img: "images/chainlink-tension-bars.jpg" + img: "/assets/manufacturing-hero.png" }, { num: "07", @@ -57,7 +57,7 @@ const materialsData = [ name: "Tension Bands", desc: "Clamp bands bolted around terminal posts to hold tension bars and rail ends securely in place. Spaced evenly along the post height.", specs: ["Galvanized steel", "Various post sizes"], - img: "images/chainlink-tension-bands.jpg" + img: "/images/chain-link-hero.png" }, { num: "08", @@ -65,7 +65,7 @@ const materialsData = [ name: "Brace Bands", desc: "Used to attach rail ends to line posts, securing the top rail into position around the post perimeter. Essential for top rail alignment and stability.", specs: ["Galvanized", "All post sizes"], - img: "images/chainlink-brace-bands.jpg" + img: "/assets/about-fencing.png" }, { num: "09", @@ -73,7 +73,7 @@ const materialsData = [ name: "Rail Ends", desc: "Pressed steel fittings that attach the end of the top rail to a terminal post via a tension band. Provides a neat, secure termination point for the rail.", specs: ["Pressed steel", "Galvanized"], - img: "images/chainlink-rail-ends.jpg" + img: "/assets/manufacturing-hero.png" }, { num: "10", @@ -81,7 +81,7 @@ const materialsData = [ name: "Post Caps", desc: "Loop caps thread the top rail through the line post for support. Dome caps seal the tops of terminal posts, preventing water ingress and corrosion.", specs: ["Loop caps", "Dome caps", "All post sizes"], - img: "images/chainlink-post-caps.jpg" + img: "/images/chain-link-hero.png" }, { num: "11", @@ -89,7 +89,7 @@ const materialsData = [ name: "Fence Ties", desc: "Aluminum or steel wire ties that fasten the chain link mesh to line posts and top rail, securing the fabric in place throughout the fence run.", specs: ["Aluminum", "Steel", "Bulk packs"], - img: "images/chainlink-fence-ties.jpg" + img: "/assets/about-fencing.png" }, { num: "12", @@ -97,7 +97,7 @@ const materialsData = [ name: "Gates", desc: "Chain link walk gates and double drive gates in standard and custom widths. Pre-built frames ready to hang, or materials for field-fabricated gates.", specs: ["Single walk gates", "Double drive gates", "Custom widths"], - img: "images/chainlink-gates.jpg" + img: "/assets/manufacturing-hero.png" }, { num: "13", @@ -105,7 +105,7 @@ const materialsData = [ name: "Gate Hardware", desc: "Heavy-duty hinges, fork latches, cane bolts, and gate stops. All hardware required for proper gate installation and long-term operation.", specs: ["Hinges", "Latches", "Cane bolts", "Padlock eyes"], - img: "images/chainlink-gate-hardware.jpg" + img: "/images/chain-link-hero.png" }, { num: "14", @@ -113,7 +113,7 @@ const materialsData = [ name: "Concrete", desc: "Fast-setting concrete mix for post setting. Properly set posts are critical to fence longevity — use concrete on every terminal post and every line post in loose or sandy soil.", specs: ["Fast-setting", "Bags available", "Post setting mix"], - img: "images/chainlink-concrete.jpg" + img: "/assets/about-fencing.png" }, { num: "15", @@ -121,7 +121,7 @@ const materialsData = [ name: "Privacy Slats", desc: "Vertical or horizontal slats woven through chain link mesh to add privacy and visual screening. Available in multiple colours to complement any project.", specs: ["Multiple colours", "Vertical weave", "UV resistant"], - img: "images/chainlink-privacy-slats.jpg" + img: "/assets/manufacturing-hero.png" }, { num: "16", @@ -129,7 +129,7 @@ const materialsData = [ name: "Windscreen / Privacy Mesh", desc: "Woven or knitted privacy screen attached to the fence exterior. Popular for sports facilities, construction sites, and commercial properties requiring visual screening.", specs: ["Woven fabric", "Commercial grade", "Custom sizes"], - img: "images/chainlink-windscreen.jpg" + img: "/images/chain-link-hero.png" }, { num: "17", @@ -137,7 +137,7 @@ const materialsData = [ name: "Barbed Wire", desc: "Two-strand galvanized barbed wire for security enhancement on commercial and industrial fence installations. Attached at the top with barbed wire arms.", specs: ["Commercial use", "Galvanized", "Barbed wire arms"], - img: "images/chainlink-barbed-wire.jpg" + img: "/assets/about-fencing.png" } ]; @@ -185,16 +185,7 @@ const ChainLinkMaterials = () => { {filteredMaterials.map((mat) => (
- {mat.name} { (e.target as HTMLImageElement).style.display = 'none'; }} /> -
- - - - - -
Product {mat.num}
-
{mat.img}
-
+ {mat.name}
{mat.num}
diff --git a/components/Footer.tsx b/components/Footer.tsx index 99683d2..bec0ecc 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -23,7 +23,7 @@ export default function Footer() {
@@ -32,14 +32,14 @@ export default function Footer() {
Products
    -
  • Aluminum railing
    • +
  • Aluminum railing
  • Chain link fence
    • -
  • Composite fences
    • -
  • Expert Stain & Seal
    • -
  • Fence armor
    • -
  • Glass railing
    • -
  • Ornamental fence
    • -
  • Temp fence rental
    • +
  • Composite fences
    • +
  • Expert Stain & Seal
    • +
  • Fence armor
    • +
  • Glass railing
    • +
  • Ornamental fence
    • +
  • Temp fence rental
@@ -49,17 +49,17 @@ export default function Footer() {
  • 2D drawing services
  • Wood staining
    • -
  • Temporary fence rental
    • +
  • Temporary fence rental
  • Job site delivery
  • Contractor accounts
We serve
    -
  • Kitchener · Waterloo
    • -
  • Cambridge · Guelph
    • -
  • Hamilton · Brantford
    • -
  • London · Toronto
    • -
  • Windsor · Niagara
    • +
  • Kitchener · Waterloo
    • +
  • Cambridge · Guelph
    • +
  • Hamilton · Brantford
    • +
  • London · Toronto
    • +
  • Windsor · Niagara
@@ -67,11 +67,11 @@ export default function Footer() {
Legal & info
    -
  • Terms & Conditions
    • -
  • Privacy Policy
    • +
  • Terms & Conditions
    • +
  • Privacy Policy
  • Contact Us
  • Contractor Login
    • -
  • All Products & Services
    • +
  • All Products & Services
Hours
    @@ -85,8 +85,8 @@ export default function Footer() {
    © {new Date().getFullYear()} VG Fence Products. All rights reserved. · Kitchener, Ontario, Canada
    - Terms & Conditions - Privacy Policy + Terms & Conditions + Privacy Policy vgfence.com
    diff --git a/components/Hero.tsx b/components/Hero.tsx index c6882f9..5ff51cf 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -8,9 +8,9 @@ import Link from 'next/link'; const slides = [ { id: 0, - eyebrow: "Based in KWC. Delivering everywhere.", - title: <>Ontario's B2B
    Fence Supply
    Partner, - sub: <>Supplying contractors, builders, and property managers across Ontario with{' '}chain link, ornamental, composite, glass railing, aluminum railing, Expert Stain & Seal, Fence Armor, and temporary fence rental — with scheduled job site delivery across a 250km radius from KWC., + eyebrow: "Kitchener · Waterloo · Ontario · 250km delivery radius", + title: <>Ontario's B2B
    Fence Supply

    Partner, + sub: <>Supplying contractors, builders, and property managers across Ontario with chain link, ornamental, composite, glass railing, aluminum railing, Expert Stain & Seal, Fence Armor, and temporary fence rental — with scheduled job site delivery across a 250km radius from KWC., productValue: "", }, { @@ -254,9 +254,9 @@ export default function Hero() {
diff --git a/components/Products.tsx b/components/Products.tsx index d094441..6d6ecb8 100644 --- a/components/Products.tsx +++ b/components/Products.tsx @@ -7,7 +7,7 @@ export default function Products() { desc: "Residential and commercial aluminum railing for decks, balconies, stairs, and pools. Multiple profiles and finishes.", tags: ["Residential", "Commercial", "Pool-safe"], badge: "Railing", - img: "/assets/images/aluminum-railing.jpg", + img: "/assets/manufacturing-hero.png", href: "#", icon: ( @@ -18,7 +18,7 @@ export default function Products() { desc: "Commercial and residential chain link in black and galvanized finishes. All gauges, heights, posts, gates, and hardware in stock.", tags: ["Black", "Galvanized", "Commercial", "Residential"], badge: "Fencing", - img: "/assets/images/chain-link-fence.jpg", + img: "/images/chain-link-hero.png", href: "/products/chain-link-fence", icon: ( @@ -29,7 +29,7 @@ export default function Products() { desc: "Low-maintenance composite panels in three premium colours. Natural wood look, zero rot, no painting, no splitting.", tags: ["Ancient Wood", "Golden Teak", "Anthracite Grey"], badge: "Fencing", - img: "/assets/images/composite-fence.jpg", + img: "/assets/about-fencing.png", href: "#", icon: ( @@ -40,7 +40,7 @@ export default function Products() { desc: "3 systems — post-mount, standoff/spigot, fascia-mount. 10mm & 12mm tempered glass. Pool-compliant configurations available.", tags: ["Pool-safe", "Residential", "Commercial"], badge: "Railing", - img: "/assets/images/glass-railing.jpg", + img: "/assets/manufacturing-hero.png", href: "#", icon: ( @@ -51,7 +51,7 @@ export default function Products() { desc: "4 models — Tokio, Rio, Denver, Oslo. Rackable panels in 48″ and 60″ heights. Matching gates, posts, caps, and hardware.", tags: ["Tokio", "Rio", "Denver", "Oslo"], badge: "Fencing", - img: "/assets/images/ornamental-fence.jpg", + img: "/images/chain-link-hero.png", href: "#", icon: ( @@ -62,7 +62,7 @@ export default function Products() { desc: "Professional-grade wood care products for fences, decks, pergolas, and outdoor structures. Contractor pricing and bulk ordering.", tags: ["Stain & Seal", "Clean & Bright", "High margin"], badge: "Wood Care", - img: "/assets/images/expert-stain-seal.jpg", + img: "/images/staining-hero.png", href: "#", icon: ( @@ -73,7 +73,7 @@ export default function Products() { desc: "Post caps (4×4, 6×6), post guards (11 sizes), rot barrier, RotGuard, PostSaver sleeves, and 7″ pro stain brush. Black steel.", tags: ["Post Caps", "Post Guards", "Rot Barrier"], badge: "Accessories", - img: "/assets/images/fence-armor.jpg", + img: "/images/stained-deck.png", href: "#", icon: ( @@ -84,7 +84,7 @@ export default function Products() { desc: "Construction, demolition, events, beer gardens, festivals, and emergencies. 6×10 and 6×5 panels, gates, and screens. Same-day KWC.", tags: ["Construction", "Events", "Rental"], badge: "Rental", - img: "/assets/images/temporary-fence.jpg", + img: "/assets/fence-rentals-hero.png", href: "#", icon: ( @@ -107,11 +107,6 @@ export default function Products() {
{product.name} -
- -
{product.name}
-
{product.img} · 800×450px
-
{product.badge}
diff --git a/components/StainPromo.tsx b/components/StainPromo.tsx index 5e947a9..12a6e12 100644 --- a/components/StainPromo.tsx +++ b/components/StainPromo.tsx @@ -4,13 +4,13 @@ export default function StainPromo() {
-
High-Margin Product Line
+
New - High Margin Product Line

Expert Stain
& Seal

Professional-grade wood care products built for contractors. Maximum results with less labor — now available in Ontario through VG Fence Products with contractor pricing and bulk ordering.

-
StainingStain & Seal
-
PrepClean & Bright
+
Product 1Stain & Seal
+
Product 2Clean & Bright
WHO ORDERS FROM US
@@ -33,12 +33,7 @@ export default function StainPromo() {
- Expert Stain & Seal Products - + Expert Stain & Seal Products
diff --git a/components/Staining/StainingQuote.tsx b/components/Staining/StainingQuote.tsx index a8dedc8..9bd28bb 100644 --- a/components/Staining/StainingQuote.tsx +++ b/components/Staining/StainingQuote.tsx @@ -25,12 +25,12 @@ export default function StainingQuote() {
-

GET A WOOD STAINING QUOTE.

+

TELL US WHAT YOU NEED
AND WHERE IT'S GOING.

- Tell us what you need stained, its approximate size, and your location — we'll come back with a quote and timeline within 2 business hours. + Get a wood staining quote and timeline within 2 business hours.

-
+
REQUEST A STAINING QUOTE
Response within 2 business hours
@@ -41,7 +41,7 @@ export default function StainingQuote() { SERVICE NEEDED @@ -108,7 +108,7 @@ export default function StainingQuote() { diff --git a/components/Staining/StainingServiceSection.tsx b/components/Staining/StainingServiceSection.tsx index 5691133..d34aca0 100644 --- a/components/Staining/StainingServiceSection.tsx +++ b/components/Staining/StainingServiceSection.tsx @@ -14,8 +14,8 @@ interface StainingServiceSectionProps { description: string; specsTitle1: string; specs1: Spec[]; - specsTitle2: string; - specs2: Spec[]; + specsTitle2?: string; + specs2?: Spec[]; bgColor: 'bg-white' | 'bg-gray' | 'bg-navy' | 'bg-cream'; reverse?: boolean; photoLabel: string; @@ -23,6 +23,8 @@ interface StainingServiceSectionProps { photoSub2: string; isDark?: boolean; image?: string; + imageSmall1?: string; + imageSmall2?: string; extraInfo?: { title: string; desc: string; @@ -46,6 +48,8 @@ export default function StainingServiceSection({ photoSub2, isDark = false, image, + imageSmall1, + imageSmall2, extraInfo }: StainingServiceSectionProps) { const PhotoIcon = ({ size = 48, color = "#B0ADA6" }) => ( @@ -59,7 +63,7 @@ export default function StainingServiceSection({ return (
-
+
Service {serviceNum}
@@ -76,15 +80,17 @@ export default function StainingServiceSection({ ))}
-
-
{specsTitle2}
- {specs2.map((spec, i) => ( -
- {spec.key} - {spec.val} -
- ))} -
+ {specs2 && specsTitle2 && ( +
+
{specsTitle2}
+ {specs2.map((spec, i) => ( +
+ {spec.key} + {spec.val} +
+ ))} +
+ )} {extraInfo && (
@@ -93,7 +99,7 @@ export default function StainingServiceSection({
)}
-
+
{image ? ( {photoLabel} @@ -107,12 +113,24 @@ export default function StainingServiceSection({
- -
{photoSub1}
+ {imageSmall1 ? ( + {photoSub1} + ) : ( + <> + +
{photoSub1}
+ + )}
- -
{photoSub2}
+ {imageSmall2 ? ( + {photoSub2} + ) : ( + <> + +
{photoSub2}
+ + )}
diff --git a/components/Territory.tsx b/components/Territory.tsx index e43963b..a9b1835 100644 --- a/components/Territory.tsx +++ b/components/Territory.tsx @@ -8,9 +8,9 @@ export default function Territory() { { type: 'near', name: 'Hamilton', sub: 'Industrial, commercial, property managers', dist: '~75km', link: "https://vgfence.com/fence-supply-hamilton" }, { type: 'home', name: 'Toronto / GTA', sub: 'Commercial builders, developers, high volume', dist: '~110km', link: "https://vgfence.com/fence-supply-toronto" }, { type: 'home', name: 'London', sub: 'Large market, residential & commercial', dist: '~120km', link: "https://vgfence.com/fence-supply-london-ontario" }, - { type: 'far', name: 'Windsor', sub: 'Southwest Ontario hub', dist: '~230km', link: "https://vgfence.com/fence-supply-windsor" }, - { type: 'far', name: 'Barrie', sub: 'Extended service area', dist: '~160km', link: "https://vgfence.com/fence-supply-barrie" }, - { type: 'far', name: 'Niagara · Owen Sound', sub: 'Delivery available', dist: '~150–175km', link: null }, + { type: 'far', name: 'Windsor · Niagara · Barrie · Owen Sound', sub: 'Extended delivery available', dist: '~230km', link: "https://vgfence.com/fence-supply-windsor" }, + // { type: 'far', name: 'Barrie', sub: 'Extended service area', dist: '~160km', link: "https://vgfence.com/fence-supply-barrie" }, + // { type: 'far', name: 'Niagara · Owen Sound', sub: 'Delivery available', dist: '~150–175km', link: null }, ]; return (