diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..078ce06 --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,142 @@ +import Link from 'next/link'; +import Image from 'next/image'; + +export default function AboutPage() { + return ( +
+ {/* Inner Banner */} +
+
+
+
About VG Fence
+

Your Trusted Fencing Partner.

+

+ Ontario's dedicated supplier for professional-grade fencing and railing materials. + Reliability built with every post and panel. +

+
+
+ + {/* Our Story Section */} +
+
+
+
+
Our Story
+

A Reputation Built on Reliability.

+
+

+ 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. +

+

+ We stock and supply a comprehensive range of fence products, including chain link fences, + temporary fencing, ornamental fences, wood fence hardware, gates, railings, deck products, + and privacy screens. +

+

+ All our materials are available in galvanized and black finishes, ensuring durability + and long-lasting performance in Canada's diverse climate. +

+

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

+
+
+ +
+
+ Quality Fencing +
+
+
100%
+
Professional Grade Materials In Stock
+
+
+
+
+
+ + {/* Mission Section */} +
+
+
Our Mission
+

Empowering Success.

+
+

+ "To supply premium fencing and railing materials that combine quality, durability, and convenience, + helping every project — large or small — succeed." +

+
+
+
+ + {/* Testimonial Section */} +
+
+
Testimonials
+

What Our Partners Say.

+ +
+
+
"VG Fence consistently delivers high-quality materials on time. Their contractor pricing allows me to stay competitive, and their inventory is unmatched."
+
Mark S.
+
Local Fence Contractor
+
+
+
"Their galvanized and black finish railings are top-notch. It's rare to find a supplier that combines durability with such an aesthetic appeal."
+
Sarah L.
+
Property Manager
+
+
+
"The team at VG Fence is incredibly knowledgeable. They helped us select the right ornamental fencing for our latest residential development."
+
David K.
+
Construction Manager
+
+
+
+
+ + {/* FAQ Section */} +
+
+
FAQ
+

Frequently Asked Questions.

+ +
+
+
Do you offer contractor pricing?
+
Yes! We provide dedicated contractor accounts with specialized pricing. You need to create an account and verify your business details to unlock these rates.
+
+
+
Do you offer installation services?
+
While our primary focus is supplying high-quality materials, we do provide installation support for select projects based on their size and scope.
+
+
+
Where are your materials sourced from?
+
We source professional-grade materials focused on durability, specifically suited for Canada's diverse climate, including robust galvanized and black finish options.
+
+
+
+
+ + {/* CTA Section */} +
+

Ready to Build?

+

Explore Ontario's most reliable inventory of fencing products.

+
+ View Full Catalog + Contact Us +
+
+ +
+ ); +} diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..8c99e8e --- /dev/null +++ b/app/contact/page.tsx @@ -0,0 +1,125 @@ +import Navbar from '@/components/Navbar'; +import Footer from '@/components/Footer'; + +export default function ContactPage() { + return ( +
+ {/* Inner Banner */} +
+
+
+
Get in Touch
+

How to contact us.

+

+ If you’ve got questions or ideas you would like to share, send a message. + For anything more specific, please use one of our addresses. +

+
+
+ + {/* Contact Content */} +
+
+
+ + {/* Left Col: Info & Map */} +
+
+

Office Details.

+ +
+
+
+ +
+
+
Our Location
+
125 Earl Thompson Rd, Ayr, ON N0B 1E0, Canada
+
+
+ +
+
+ +
+
+
Direct Line Numbers
+
+1 226-888-7999
+
+
+ +
+
+ +
+
+
Our Email
+
info@vgfenceproducts.com
+
+
+
+
+ + {/* Map Placeholder */} +
+ +
+
+ +
+
+

Send us a Message.

+

Fill out the form below and our team will get back to you within 24 hours.

+
+ +
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ + +
+
+ +
+
+
+ +
+ ); +} diff --git a/app/globals.css b/app/globals.css index 62665d8..10d288f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -18,8 +18,18 @@ --font-body: 'Barlow', sans-serif; } -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -html { scroll-behavior: smooth; } +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + body { font-family: var(--font-body); background: var(--white); @@ -29,8 +39,15 @@ body { /* ── ANIMATIONS ── */ @keyframes fadeUp { - from { opacity: 0; transform: translateY(24px); } - to { opacity: 1; transform: translateY(0); } + from { + opacity: 0; + transform: translateY(24px); + } + + to { + opacity: 1; + transform: translateY(0); + } } .fade-up { @@ -38,570 +55,1438 @@ body { } /* ── SCROLLBAR ── */ -::-webkit-scrollbar { width: 6px; } -::-webkit-scrollbar-track { background: var(--gray-100); } -::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; } +::-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; } +section { + padding: 80px 60px; } @media (max-width: 768px) { - section { padding: 64px 24px; } + section { + padding: 60px 20px; + } } .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; + 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); + 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; + font-family: var(--font-display); + font-size: clamp(32px, 4vw, 58px); + font-weight: 800; + text-transform: uppercase; + line-height: .95; + color: var(--navy); + letter-spacing: -.01em; +} + +.section-h2 span { + color: var(--orange); } -.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; + 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-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; + 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); } -.btn-secondary:hover { border-color: rgba(255,255,255,.7); } /* ── NAV ── */ nav { - position: fixed; top: 0; left: 0; right: 0; z-index: 1000; + 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; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 48px; + height: 64px; border-bottom: 2px solid var(--orange); } + .nav-logo { - display: flex; align-items: center; gap: 12px; + display: flex; + align-items: center; + gap: 12px; font-family: var(--font-display); - font-size: 22px; font-weight: 700; color: var(--white); - letter-spacing: .04em; text-decoration: none; + font-size: 22px; + font-weight: 700; + color: var(--white); + letter-spacing: .04em; + text-decoration: none; } + .nav-logo .logo-mark { - width: 38px; height: 38px; border-radius: 50%; + width: 38px; + height: 38px; + border-radius: 50%; border: 2.5px solid var(--orange); - display: flex; align-items: center; justify-content: center; - font-size: 14px; font-weight: 800; color: var(--white); + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: 800; + color: var(--white); letter-spacing: -.02em; } -.nav-logo .logo-text span { color: var(--orange); } + +.nav-logo .logo-text span { + color: var(--orange); +} + .nav-links { - display: flex; align-items: center; gap: 32px; list-style: none; + display: flex; + align-items: center; + gap: 32px; + list-style: none; } + .nav-links a { - font-family: var(--font-display); font-size: 14px; font-weight: 500; - color: rgba(255,255,255,.75); text-decoration: none; letter-spacing: .06em; - text-transform: uppercase; transition: color .2s; + font-family: var(--font-display); + font-size: 14px; + font-weight: 500; + color: rgba(255, 255, 255, .75); + text-decoration: none; + letter-spacing: .06em; + text-transform: uppercase; + transition: color .2s; } -.nav-links a:hover { 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; + 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; +} + +.nav-cta:hover { + background: var(--orange-dark); } -.nav-cta:hover { background: var(--orange-dark); } /* ── HERO ── */ .hero { min-height: 100vh; background: var(--navy); - display: grid; grid-template-columns: 1fr 1fr; - padding-top: 64px; position: relative; overflow: hidden; + display: grid; + grid-template-columns: 1fr 1fr; + padding-top: 64px; + position: relative; + overflow: hidden; } + .hero-pattern { - position: absolute; inset: 0; opacity: .04; - background-image: repeating-linear-gradient( - 0deg, transparent, transparent 39px, rgba(255,255,255,.5) 39px, rgba(255,255,255,.5) 40px - ), repeating-linear-gradient( - 90deg, transparent, transparent 39px, rgba(255,255,255,.5) 39px, rgba(255,255,255,.5) 40px - ); + position: absolute; + inset: 0; + opacity: .04; + background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, .5) 39px, rgba(255, 255, 255, .5) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, .5) 39px, rgba(255, 255, 255, .5) 40px); } + .hero-accent { - position: absolute; right: -60px; top: 80px; - width: 420px; height: 420px; border-radius: 50%; - border: 60px solid var(--orange); opacity: .12; + position: absolute; + right: -60px; + top: 80px; + width: 420px; + height: 420px; + border-radius: 50%; + border: 60px solid var(--orange); + opacity: .12; } + .hero-accent2 { - position: absolute; right: 80px; bottom: -80px; - width: 280px; height: 280px; border-radius: 50%; - border: 40px solid var(--orange); opacity: .08; + position: absolute; + right: 80px; + bottom: -80px; + width: 280px; + height: 280px; + border-radius: 50%; + border: 40px solid var(--orange); + opacity: .08; } + .hero-left { - display: flex; flex-direction: column; justify-content: center; - padding: 80px 48px 80px 80px; position: relative; z-index: 2; + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 48px 80px 80px; + position: relative; + z-index: 2; } + .hero-eyebrow { - display: inline-flex; align-items: center; gap: 10px; - font-family: var(--font-display); font-size: 13px; font-weight: 600; - letter-spacing: .12em; text-transform: uppercase; color: var(--orange); + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--font-display); + font-size: 13px; + font-weight: 600; + letter-spacing: .12em; + text-transform: uppercase; + color: var(--orange); margin-bottom: 24px; } + .hero-eyebrow::before { - content: ''; display: block; width: 32px; height: 2px; background: var(--orange); + content: ''; + display: block; + width: 32px; + height: 2px; + background: var(--orange); } + .hero-h1 { font-family: var(--font-display); font-size: clamp(52px, 5vw, 80px); - font-weight: 800; line-height: .95; - color: var(--white); letter-spacing: -.01em; - text-transform: uppercase; margin-bottom: 28px; + font-weight: 800; + line-height: .95; + color: var(--white); + letter-spacing: -.01em; + text-transform: uppercase; + margin-bottom: 28px; } -.hero-h1 em { color: var(--orange); font-style: normal; display: block; } + +.hero-h1 em { + color: var(--orange); + font-style: normal; + display: block; +} + .hero-sub { - font-size: 17px; font-weight: 300; line-height: 1.7; - color: rgba(255,255,255,.65); max-width: 460px; margin-bottom: 40px; + font-size: 17px; + font-weight: 300; + line-height: 1.7; + color: rgba(255, 255, 255, .65); + max-width: 460px; + margin-bottom: 40px; +} + +.hero-sub strong { + color: rgba(255, 255, 255, .9); + font-weight: 500; +} + +.hero-btns { + display: flex; + gap: 14px; + flex-wrap: wrap; + margin-bottom: 56px; } -.hero-sub strong { color: rgba(255,255,255,.9); font-weight: 500; } -.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; } .hero-stats { - display: flex; gap: 40px; padding-top: 28px; - border-top: 1px solid rgba(255,255,255,.1); + display: flex; + gap: 40px; + padding-top: 28px; + border-top: 1px solid rgba(255, 255, 255, .1); } + .stat-val { - font-family: var(--font-display); font-size: 36px; font-weight: 800; - color: var(--orange); line-height: 1; + font-family: var(--font-display); + font-size: 36px; + font-weight: 800; + color: var(--orange); + line-height: 1; } + .stat-label { - font-size: 12px; font-weight: 400; color: rgba(255,255,255,.5); - margin-top: 4px; letter-spacing: .03em; + font-size: 12px; + font-weight: 400; + color: rgba(255, 255, 255, .5); + margin-top: 4px; + letter-spacing: .03em; } + .hero-right { - display: flex; flex-direction: column; justify-content: center; - padding: 80px 80px 80px 40px; position: relative; z-index: 2; + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 80px 80px 40px; + position: relative; + z-index: 2; } + .quote-card { - background: rgba(255,255,255,.06); - border: 1px solid rgba(255,255,255,.12); - border-radius: 12px; padding: 32px; + background: rgba(255, 255, 255, .06); + border: 1px solid rgba(255, 255, 255, .12); + border-radius: 12px; + padding: 32px; backdrop-filter: blur(10px); } + .quote-card-title { - font-family: var(--font-display); font-size: 20px; font-weight: 700; - color: var(--white); text-transform: uppercase; letter-spacing: .06em; + font-family: var(--font-display); + font-size: 20px; + font-weight: 700; + color: var(--white); + text-transform: uppercase; + letter-spacing: .06em; margin-bottom: 6px; } + .quote-card-sub { - font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 24px; + font-size: 13px; + color: rgba(255, 255, 255, .5); + margin-bottom: 24px; } -.form-group { margin-bottom: 14px; } + +.form-group { + margin-bottom: 14px; +} + .form-label { - display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; - text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px; + display: block; + font-size: 11px; + font-weight: 600; + letter-spacing: .08em; + text-transform: uppercase; + color: rgba(255, 255, 255, .5); + margin-bottom: 6px; } -.form-input, .form-select { - width: 100%; background: rgba(255,255,255,.08); - border: 1px solid rgba(255,255,255,.15); border-radius: 6px; - padding: 11px 14px; font-family: var(--font-body); font-size: 14px; - color: var(--white); outline: none; transition: border-color .2s; + +.form-input, +.form-select { + width: 100%; + background: rgba(255, 255, 255, .08); + border: 1px solid rgba(255, 255, 255, .15); + border-radius: 6px; + padding: 11px 14px; + font-family: var(--font-body); + font-size: 14px; + color: var(--white); + outline: none; + transition: border-color .2s; appearance: none; } -.form-input::placeholder { color: rgba(255,255,255,.3); } -.form-input:focus, .form-select:focus { border-color: var(--orange); } -.form-select option { background: var(--navy); color: var(--white); } -.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } -.form-submit { - width: 100%; background: var(--orange); color: var(--white); - font-family: var(--font-display); font-size: 16px; font-weight: 700; - letter-spacing: .08em; text-transform: uppercase; - padding: 14px; border: none; border-radius: 6px; cursor: pointer; - margin-top: 6px; transition: background .2s; + +.form-input::placeholder { + color: rgba(255, 255, 255, .3); } -.form-submit:hover { background: var(--orange-dark); } + +.form-input:focus, +.form-select:focus { + border-color: var(--orange); +} + +.form-select option { + background: var(--navy); + color: var(--white); +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.form-submit { + width: 100%; + background: var(--orange); + color: var(--white); + font-family: var(--font-display); + font-size: 16px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 14px; + border: none; + border-radius: 6px; + cursor: pointer; + margin-top: 6px; + transition: background .2s; +} + +.form-submit:hover { + background: var(--orange-dark); +} + .form-note { - text-align: center; font-size: 12px; color: rgba(255,255,255,.35); + text-align: center; + font-size: 12px; + color: rgba(255, 255, 255, .35); margin-top: 12px; } /* ── TRUST BAR ── */ .trust-bar { background: var(--orange); - display: flex; align-items: center; justify-content: center; - gap: 0; overflow: hidden; + 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; - gap: 10px; padding: 14px 20px; - 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); + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 14px 20px; + 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; } + +.trust-item:last-child { + border-right: none; +} + +.trust-icon { + font-size: 16px; +} /* ── PRODUCTS ── */ -.products-section { background: var(--gray-100); } +.products-section { + background: var(--gray-100); +} + .products-header { - display: flex; align-items: flex-end; justify-content: space-between; - margin-bottom: 48px; flex-wrap: wrap; gap: 20px; + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-bottom: 48px; + flex-wrap: wrap; + gap: 20px; } + .products-grid { - display: grid; grid-template-columns: repeat(3, 1fr); - gap: 2px; background: var(--gray-200); border: 2px solid var(--gray-200); - border-radius: 12px; overflow: hidden; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; } + +@media (max-width: 1024px) { + .products-grid { + background: none; + border: none; + border-radius: none; + } +} + .product-card { - background: var(--white); padding: 32px 28px; - transition: background .2s; cursor: pointer; position: relative; + background: var(--white); + padding: 32px 28px; + border: 1px solid var(--gray-200); + border-radius: 12px; + transition: all .2s; + cursor: pointer; + position: relative; overflow: hidden; text-decoration: none; - display: block; + display: flex; + flex-direction: column; } + .product-card::after { - content: ''; position: absolute; bottom: 0; left: 0; right: 0; - height: 3px; background: var(--orange); - transform: scaleX(0); transform-origin: left; + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: var(--orange); + transform: scaleX(0); + transform-origin: left; transition: transform .3s; } -.product-card:hover { background: var(--navy); } -.product-card:hover::after { transform: scaleX(1); } -.product-card:hover .product-name { color: var(--white); } -.product-card:hover .product-desc { color: rgba(255,255,255,.55); } -.product-card:hover .product-tag { background: rgba(232,87,42,.2); color: var(--orange-light); } -.product-card:hover .product-arrow { color: var(--orange); } + +.product-card:hover { + background: var(--navy); +} + +.product-card:hover::after { + transform: scaleX(1); +} + +.product-card:hover .product-name { + color: var(--white); +} + +.product-card:hover .product-desc { + color: rgba(255, 255, 255, .55); +} + +.product-card:hover .product-tag { + background: rgba(232, 87, 42, .2); + color: var(--orange-light); +} + +.product-card:hover .product-arrow { + color: var(--orange); +} + .product-icon { - width: 44px; height: 44px; background: var(--orange); - border-radius: 8px; display: flex; align-items: center; justify-content: center; + width: 44px; + height: 44px; + background: var(--orange); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; margin-bottom: 20px; } -.product-icon svg { width: 22px; height: 22px; } + +.product-icon svg { + width: 22px; + height: 22px; +} + .product-name { - font-family: var(--font-display); font-size: 20px; font-weight: 700; - text-transform: uppercase; color: var(--navy); letter-spacing: .02em; - margin-bottom: 8px; transition: color .2s; + font-family: var(--font-display); + font-size: 20px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 8px; + transition: color .2s; } + .product-desc { - font-size: 13px; color: var(--gray-600); line-height: 1.6; - margin-bottom: 16px; transition: color .2s; + font-size: 13px; + color: var(--gray-600); + line-height: 1.6; + margin-bottom: 16px; + transition: color .2s; } -.product-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } + +.product-tags { + display: flex; + gap: 6px; + flex-wrap: wrap; + margin-bottom: 16px; +} + .product-tag { - font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; - padding: 3px 8px; border-radius: 3px; - background: rgba(15,36,68,.07); color: var(--navy-light); + font-size: 10px; + font-weight: 600; + letter-spacing: .06em; + text-transform: uppercase; + padding: 3px 8px; + border-radius: 3px; + background: rgba(15, 36, 68, .07); + color: var(--navy-light); transition: background .2s, color .2s; } + .product-arrow { - font-size: 18px; color: var(--gray-400); transition: color .2s; + font-size: 18px; + color: var(--gray-400); + transition: color .2s; } /* ── SERVICES ── */ -.services-section { background: var(--navy); } -.services-section .section-h2 { color: var(--white); } +.services-section { + background: var(--navy); +} + +.services-section .section-h2 { + color: var(--white); +} + .services-grid { - display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; margin-top: 48px; } + .service-card { - background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); - border-radius: 10px; padding: 32px; + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .1); + border-radius: 10px; + padding: 32px; transition: background .2s, border-color .2s; } + .service-card:hover { - background: rgba(232,87,42,.1); border-color: rgba(232,87,42,.3); + background: rgba(232, 87, 42, .1); + border-color: rgba(232, 87, 42, .3); } + .service-num { - font-family: var(--font-display); font-size: 48px; font-weight: 800; - color: rgba(255,255,255,.06); line-height: 1; margin-bottom: -8px; + font-family: var(--font-display); + font-size: 48px; + font-weight: 800; + color: rgba(255, 255, 255, .06); + line-height: 1; + margin-bottom: -8px; letter-spacing: -.02em; } + .service-name { - font-family: var(--font-display); font-size: 22px; font-weight: 700; - text-transform: uppercase; color: var(--white); margin-bottom: 12px; + font-family: var(--font-display); + font-size: 22px; + font-weight: 700; + text-transform: uppercase; + color: var(--white); + margin-bottom: 12px; letter-spacing: .04em; } -.service-name span { color: var(--orange); } + +.service-name span { + color: var(--orange); +} + .service-desc { - font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.7; + font-size: 14px; + color: rgba(255, 255, 255, .55); + line-height: 1.7; margin-bottom: 20px; } -.service-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } -.service-list li { - font-size: 13px; color: rgba(255,255,255,.6); - display: flex; align-items: center; gap: 8px; + +.service-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 6px; } + +.service-list li { + font-size: 13px; + color: rgba(255, 255, 255, .6); + display: flex; + align-items: center; + gap: 8px; +} + .service-list li::before { - content: ''; width: 6px; height: 6px; border-radius: 50%; - background: var(--orange); flex-shrink: 0; + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--orange); + flex-shrink: 0; } /* ── TERRITORY ── */ -.territory-section { background: var(--cream); } +.territory-section { + background: var(--cream); +} + .territory-layout { - display: grid; grid-template-columns: 1fr 1fr; gap: 64px; - margin-top: 48px; align-items: center; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + margin-top: 48px; + align-items: center; } + .territory-map-wrap { - background: var(--white); border-radius: 12px; - border: 1px solid var(--gray-200); overflow: hidden; - padding: 32px; position: relative; + background: var(--white); + border-radius: 12px; + border: 1px solid var(--gray-200); + overflow: hidden; + padding: 32px; + position: relative; } + .radius-label { - position: absolute; top: 16px; right: 16px; - background: var(--navy); color: var(--white); - font-family: var(--font-display); font-size: 12px; font-weight: 700; - letter-spacing: .08em; text-transform: uppercase; - padding: 5px 12px; border-radius: 20px; + position: absolute; + top: 16px; + right: 16px; + background: var(--navy); + color: var(--white); + font-family: var(--font-display); + font-size: 12px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 5px 12px; + border-radius: 20px; } -.city-list { display: flex; flex-direction: column; gap: 10px; } + +.city-list { + display: flex; + flex-direction: column; + gap: 10px; +} + .city-item { - display: flex; align-items: center; gap: 14px; - padding: 14px 16px; background: var(--white); border-radius: 8px; + display: flex; + align-items: center; + gap: 14px; + padding: 14px 16px; + background: var(--white); + border-radius: 8px; border: 1px solid var(--gray-200); } + .city-dot { - width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; + width: 10px; + height: 10px; + border-radius: 50%; + flex-shrink: 0; } -.city-dot.home { background: var(--orange); } -.city-dot.near { background: var(--navy-mid); } -.city-dot.far { background: var(--gray-400); } -.city-info { flex: 1; } + +.city-dot.home { + background: var(--orange); +} + +.city-dot.near { + background: var(--navy-mid); +} + +.city-dot.far { + background: var(--gray-400); +} + +.city-info { + flex: 1; +} + .city-name-txt { - font-family: var(--font-display); font-size: 15px; font-weight: 700; - text-transform: uppercase; color: var(--navy); letter-spacing: .02em; + font-family: var(--font-display); + font-size: 15px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; } -.city-sub-txt { font-size: 12px; color: var(--gray-600); margin-top: 1px; } + +.city-sub-txt { + font-size: 12px; + color: var(--gray-600); + margin-top: 1px; +} + .city-dist-badge { - font-size: 11px; font-weight: 600; color: var(--orange); - font-family: var(--font-display); letter-spacing: .04em; + font-size: 11px; + font-weight: 600; + color: var(--orange); + font-family: var(--font-display); + letter-spacing: .04em; } /* ── TARGETS ── */ -.targets-section { background: var(--white); } +.targets-section { + background: var(--white); +} + .targets-grid { - display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; margin-top: 48px; } + .target-card { - border: 1px solid var(--gray-200); border-radius: 10px; padding: 24px 20px; + border: 1px solid var(--gray-200); + border-radius: 10px; + padding: 24px 20px; transition: border-color .2s, transform .2s; } -.target-card:hover { border-color: var(--orange); transform: translateY(-3px); } + +.target-card:hover { + border-color: var(--orange); + transform: translateY(-3px); +} + .target-priority { - font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; + font-size: 10px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; margin-bottom: 12px; } -.priority-1 { color: var(--orange); } -.priority-2 { color: var(--navy-mid); } -.priority-3 { color: var(--gray-600); } -.target-name { - font-family: var(--font-display); font-size: 17px; font-weight: 700; - text-transform: uppercase; color: var(--navy); letter-spacing: .02em; - margin-bottom: 8px; line-height: 1.1; + +.priority-1 { + color: var(--orange); } + +.priority-2 { + color: var(--navy-mid); +} + +.priority-3 { + color: var(--gray-600); +} + +.target-name { + font-family: var(--font-display); + font-size: 17px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 8px; + line-height: 1.1; +} + .target-examples { - font-size: 12px; color: var(--gray-600); line-height: 1.6; + font-size: 12px; + color: var(--gray-600); + line-height: 1.6; } /* ── STAIN PROMO ── */ .stain-section { - background: var(--navy); position: relative; overflow: hidden; + background: var(--navy); + position: relative; + overflow: hidden; } + .stain-bg { - position: absolute; right: -100px; top: -100px; - width: 500px; height: 500px; border-radius: 50%; - background: var(--orange); opacity: .06; + position: absolute; + right: -100px; + top: -100px; + width: 500px; + height: 500px; + border-radius: 50%; + background: var(--orange); + opacity: .06; } + .stain-layout { - display: grid; grid-template-columns: 1fr 1fr; gap: 64px; - align-items: center; position: relative; z-index: 1; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; + position: relative; + z-index: 1; } + .stain-badge { - display: inline-block; background: var(--orange); - font-family: var(--font-display); font-size: 11px; font-weight: 700; - letter-spacing: .12em; text-transform: uppercase; color: var(--white); - padding: 5px 12px; border-radius: 3px; margin-bottom: 16px; + display: inline-block; + background: var(--orange); + font-family: var(--font-display); + font-size: 11px; + font-weight: 700; + letter-spacing: .12em; + text-transform: uppercase; + color: var(--white); + padding: 5px 12px; + border-radius: 3px; + margin-bottom: 16px; } + .stain-h2 { - font-family: var(--font-display); font-size: clamp(36px, 4vw, 54px); - font-weight: 800; text-transform: uppercase; color: var(--white); - line-height: .95; letter-spacing: -.01em; margin-bottom: 20px; + font-family: var(--font-display); + font-size: clamp(36px, 4vw, 54px); + font-weight: 800; + text-transform: uppercase; + color: var(--white); + line-height: .95; + letter-spacing: -.01em; + margin-bottom: 20px; } -.stain-h2 span { color: var(--orange); } + +.stain-h2 span { + color: var(--orange); +} + .stain-desc { - font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.7; + font-size: 16px; + color: rgba(255, 255, 255, .6); + line-height: 1.7; margin-bottom: 32px; } -.product-pills { display: flex; gap: 10px; flex-wrap: wrap; } + +.product-pills { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + .product-pill { - background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); - border-radius: 6px; padding: 12px 18px; - font-family: var(--font-display); font-size: 14px; font-weight: 600; - text-transform: uppercase; color: var(--white); letter-spacing: .04em; + background: rgba(255, 255, 255, .08); + border: 1px solid rgba(255, 255, 255, .15); + border-radius: 6px; + padding: 12px 18px; + font-family: var(--font-display); + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + color: var(--white); + letter-spacing: .04em; } -.product-pill strong { display: block; color: var(--orange); font-size: 11px; margin-bottom: 2px; } -.stain-targets { display: flex; flex-direction: column; gap: 12px; } + +.product-pill strong { + display: block; + color: var(--orange); + font-size: 11px; + margin-bottom: 2px; +} + +.stain-targets { + display: flex; + flex-direction: column; + gap: 12px; +} + .stain-target { - display: flex; align-items: center; gap: 14px; - background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); - border-radius: 8px; padding: 14px 18px; + display: flex; + align-items: center; + gap: 14px; + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .08); + border-radius: 8px; + padding: 14px 18px; } + .stain-target-dot { - width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--orange); + flex-shrink: 0; +} + +.stain-target-txt { + font-size: 14px; + color: rgba(255, 255, 255, .75); } -.stain-target-txt { font-size: 14px; color: rgba(255,255,255,.75); } /* ── CTA ── */ .cta-section { - background: var(--orange); text-align: center; padding: 80px; + background: var(--orange); + text-align: center; + padding: 80px; } + +@media (max-width: 768px) { + .cta-section { + padding: 60px 20px !important; + } +} + .cta-h2 { - font-family: var(--font-display); font-size: clamp(42px, 5vw, 72px); - font-weight: 800; text-transform: uppercase; color: var(--white); - line-height: .95; letter-spacing: -.01em; margin-bottom: 20px; + font-family: var(--font-display); + font-size: clamp(42px, 5vw, 72px); + font-weight: 800; + text-transform: uppercase; + color: var(--white); + line-height: .95; + letter-spacing: -.01em; + margin-bottom: 20px; } + .cta-sub { - font-size: 18px; color: rgba(255,255,255,.8); margin-bottom: 40px; + font-size: 18px; + color: rgba(255, 255, 255, .8); + margin-bottom: 40px; } -.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } + +.cta-btns { + display: flex; + gap: 16px; + justify-content: center; + flex-wrap: wrap; +} + .btn-white { - background: var(--white); color: var(--orange); - 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; + background: var(--white); + color: var(--orange); + 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); - font-family: var(--font-display); font-size: 15px; font-weight: 700; - 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; + background: transparent; + color: var(--white); + font-family: var(--font-display); + font-size: 15px; + font-weight: 700; + 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); } + +.btn-white-outline:hover { + border-color: var(--white); +} /* ── FOOTER ── */ footer { - background: #080F1C; padding: 56px 80px 32px; + background: #080F1C; + padding: 56px 80px 32px; } + +@media (max-width: 768px) { + footer { + padding: 60px 20px !important; + } +} + .footer-top { - display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 48px; margin-bottom: 48px; - padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); + padding-bottom: 48px; + border-bottom: 1px solid rgba(255, 255, 255, .08); } + .footer-brand-name { - font-family: var(--font-display); font-size: 24px; font-weight: 800; - color: var(--white); text-transform: uppercase; letter-spacing: .04em; + font-family: var(--font-display); + font-size: 24px; + font-weight: 800; + color: var(--white); + text-transform: uppercase; + letter-spacing: .04em; margin-bottom: 4px; } -.footer-brand-name span { color: var(--orange); } -.footer-tagline { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 20px; } -.footer-contact { display: flex; flex-direction: column; gap: 8px; } + +.footer-brand-name span { + color: var(--orange); +} + +.footer-tagline { + font-size: 13px; + color: rgba(255, 255, 255, .4); + margin-bottom: 20px; +} + +.footer-contact { + display: flex; + flex-direction: column; + gap: 8px; +} + .footer-contact a { - font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; + font-size: 13px; + color: rgba(255, 255, 255, .55); + text-decoration: none; transition: color .2s; } -.footer-contact a:hover { color: var(--orange); } + +.footer-contact a:hover { + color: var(--orange); +} + .footer-col-title { - font-family: var(--font-display); font-size: 13px; font-weight: 700; - letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); + font-family: var(--font-display); + font-size: 13px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; + color: rgba(255, 255, 255, .4); margin-bottom: 16px; } -.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; } + +.footer-links { + list-style: none; + display: flex; + flex-direction: column; + gap: 8px; +} + .footer-links a { - font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; + font-size: 13px; + color: rgba(255, 255, 255, .6); + text-decoration: none; transition: color .2s; } -.footer-links a:hover { color: var(--orange); } -.footer-bottom { - display: flex; align-items: center; justify-content: space-between; - font-size: 12px; color: rgba(255,255,255,.25); + +.footer-links a:hover { + color: var(--orange); } + +.footer-bottom { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: 12px; + color: rgba(255, 255, 255, .25); +} + .footer-territory { - display: inline-flex; align-items: center; gap: 6px; - background: rgba(232,87,42,.15); color: var(--orange); - border-radius: 3px; padding: 3px 10px; - font-family: var(--font-display); font-size: 11px; font-weight: 600; - letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; + display: inline-flex; + align-items: center; + gap: 6px; + background: rgba(232, 87, 42, .15); + color: var(--orange); + border-radius: 3px; + padding: 3px 10px; + font-family: var(--font-display); + font-size: 11px; + font-weight: 600; + letter-spacing: .06em; + text-transform: uppercase; + margin-top: 10px; +} + +/* ── SECTIONS & COMPONENTS ── */ +.section-padding { + padding: 80px 0; +} + +/* Testimonials */ +.testimonials-section { + background: var(--navy); + color: var(--white); +} + +.testimonials-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 32px; + margin-top: 48px; +} + +.testimonial-card { + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .1); + border-radius: 12px; + padding: 32px; + display: flex; + flex-direction: column; +} + +.testimonial-quote { + font-size: 15px; + line-height: 1.7; + color: rgba(255, 255, 255, .8); + margin-bottom: 24px; + flex: 1; +} + +.testimonial-author { + font-family: var(--font-display); + font-size: 16px; + font-weight: 700; + color: var(--white); +} + +.testimonial-role { + font-size: 13px; + color: var(--orange); + margin-top: 4px; +} + +/* FAQ */ +.faq-section { + background: var(--white); +} + +.faq-list { + max-width: 800px; + margin: 48px auto 0; + display: flex; + flex-direction: column; + gap: 16px; +} + +.faq-item { + border: 1px solid var(--gray-200); + border-radius: 8px; + padding: 24px; + background: var(--white); + transition: border-color .2s; +} + +.faq-item:hover { + border-color: var(--orange); +} + +.faq-question { + font-family: var(--font-display); + font-size: 18px; + font-weight: 700; + color: var(--navy); + margin-bottom: 12px; +} + +.faq-answer { + font-size: 14px; + color: var(--gray-600); + line-height: 1.6; } /* ── 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; } + .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; + } + + .contact-layout { + grid-template-columns: 1fr !important; + gap: 48px !important; + } + + .about-layout { + grid-template-columns: 1fr !important; + gap: 64px !important; + } + + .testimonials-grid { + grid-template-columns: repeat(2, 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; } + .section-padding { + padding: 60px 0; + } + + nav { + padding: 0 24px; + } + + .nav-links { + display: none; + } + + .hero-left { + padding: 60px 0; + } + + .hero-h1 { + font-size: 38px; + margin-bottom: 20px; + } + + .hero-sub { + font-size: 15px; + line-height: 1.6; + margin-bottom: 32px; + } + + .hero-right { + padding: 20px 0 10px; + } + + .quote-card { + padding: 24px 20px; + } + + .form-row { + grid-template-columns: 1fr; + gap: 0; + } + + .hero-stats { + gap: 20px; + flex-wrap: wrap; + } + + .stat-val { + font-size: 28px; + } + + .products-grid { + grid-template-columns: 1fr; + } + + .testimonials-grid { + grid-template-columns: 1fr; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .territory-layout { + grid-template-columns: 1fr; + } + + /* .footer-top { + grid-template-columns: 1fr; + } */ +} + +@media (max-width: 424px) { + .footer-top { + grid-template-columns: 1fr; + } } /* ── AUTH PAGES ── */ .auth-page { min-height: 100vh; - padding-top: calc(80px + 64px); /* 80px spacing + 64px for fixed navbar */ + 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; + 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; + 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; + content: ''; + position: absolute; + bottom: -100px; + right: -100px; + width: 400px; + height: 400px; + border-radius: 50%; + background: var(--orange); + opacity: .05; } + .auth-card { - width: 100%; max-width: 440px; - background: rgba(255,255,255,.03); - border: 1px solid rgba(255,255,255,.1); - border-radius: 16px; 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; + position: relative; + z-index: 2; } + .auth-title { - 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; + 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-title span { + color: var(--orange); +} + .auth-sub { - font-size: 14px; color: rgba(255,255,255,.5); text-align: center; - margin-bottom: 40px; line-height: 1.6; + font-size: 14px; + color: rgba(255, 255, 255, .5); + text-align: center; + margin-bottom: 40px; + line-height: 1.6; } -.auth-form { display: flex; flex-direction: column; } + +.auth-form { + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 9db7c55..176a3ce 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -19,6 +19,9 @@ const barlowCondensed = Barlow_Condensed({ export const metadata: Metadata = { title: "VG Fence Products — Ontario's B2B Fence Supply Partner", description: "Supplying contractors, builders, and property managers across Ontario with chain link, ornamental, composite, glass railing, and stain products.", + icons: { + icon: "/favicon.png", + }, }; export default function RootLayout({ diff --git a/app/products/[slug]/page.tsx b/app/products/[slug]/page.tsx new file mode 100644 index 0000000..82d7959 --- /dev/null +++ b/app/products/[slug]/page.tsx @@ -0,0 +1,85 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import { products } from '@/data/products'; +import { notFound } from 'next/navigation'; + +// Pre-generate all product detail pages at build time +export function generateStaticParams() { + return products.map((product) => ({ + slug: product.slug, + })); +} + +// In Next.js 15+/16, params is a Promise and must be awaited +export default async function ProductDetailPage({ + params, +}: { + params: Promise<{ slug: string }>; +}) { + const { slug } = await params; + const product = products.find((p) => p.slug === slug); + + if (!product) { + notFound(); + } + + return ( +
+
+ + ← Back to Catalog + + +
+ {/* Left: Image */} +
+ {product!.name} +
+ + {/* Right: Info */} +
+
{product!.category}
+

{product!.name}

+ +
+ {product!.price} +
+ +
+

Description

+

+ {product!.description} +

+
+ + {/*
+
+ Category: + {product!.category} +
+
+ Availability: + In Stock (Same-day Delivery) +
+
*/} + +
+ + Contact for Quote & Specs → + + {/*

+ Bulk ordering and contractor pricing available on request. +

*/} +
+
+
+
+
+ ); +} diff --git a/app/products/page.tsx b/app/products/page.tsx index a78a488..033bdc3 100644 --- a/app/products/page.tsx +++ b/app/products/page.tsx @@ -1,79 +1,116 @@ +"use client"; +import { useState } from 'react'; 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: - } -]; +import Image from 'next/image'; +import { products } from '@/data/products'; 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. -

-
+ const [currentPage, setCurrentPage] = useState(1); + const productsPerPage = 12; -
- {products.map((product, i) => ( -
-
- {product.icon} + // Calculate pagination + const indexOfLastProduct = currentPage * productsPerPage; + const indexOfFirstProduct = indexOfLastProduct - productsPerPage; + const currentProducts = products.slice(indexOfFirstProduct, indexOfLastProduct); + const totalPages = Math.ceil(products.length / productsPerPage); + + const paginate = (pageNumber: number) => setCurrentPage(pageNumber); + + return ( +
+ {/* Inner Banner */} +
+
+
+
Full Inventory
+

Our Product Catalog.

+

+ Explore our complete range of professional-grade fence supply products. + High stocks and contractor pricing for same-day delivery across Ontario. +

+
+
+ + {/* Grid Content */} +
+
+ {currentProducts.map((product) => ( +
+
+ {product.name} +
+
{product.name}
+
+ {product.description} +
+
+
+ {product.price} +
+ + View Product → + +
-
{product.name}
-
{product.desc}
-
- {product.tags.map((tag, j) => ( - {tag} + ))} +
+ + {/* Pagination */} + {totalPages > 1 && ( +
+ + +
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map((num) => ( + ))}
-
- -
-
- ))} -
-
-

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/Footer.tsx b/components/Footer.tsx index e899cff..dc26c83 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -5,7 +5,9 @@ export default function Footer() {
-
VG Fence Products
+
+ VG Fence Products +
Ontario's B2B fence supply partner — KWC & beyond
📍 Serving 250km radius from Kitchener-Waterloo
@@ -34,6 +36,8 @@ export default function Footer() {
  • Site services
  • Job site delivery
  • Contractor accounts
  • +
  • About Us
  • +
  • Contact Us
  • @@ -49,8 +53,7 @@ export default function Footer() {
    - © {new Date().getFullYear()} VG Fence Products. All rights reserved. · Kitchener, Ontario, Canada - vgfence.com + © Copyright {new Date().getFullYear()} VGFence Products Powered by MetatronCube. All Right Reserved.
    ); diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 3c0c77a..90337b9 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -4,15 +4,18 @@ export default function Navbar() { return ( ); } diff --git a/components/Products.tsx b/components/Products.tsx index afe0375..e31b78f 100644 --- a/components/Products.tsx +++ b/components/Products.tsx @@ -7,7 +7,7 @@ export default function Products() { desc: "Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.", tags: ["Residential", "Commercial"], icon: ( - + ) }, { @@ -15,7 +15,7 @@ export default function Products() { desc: "Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.", tags: ["Black", "Galvanized", "Commercial", "Residential"], icon: ( - + ) }, { @@ -23,7 +23,7 @@ export default function Products() { desc: "Low maintenance composite fence panels in three premium colours. Natural wood look, zero rot.", tags: ["Ancient Wood", "Golden Teak", "Anthracite Grey"], icon: ( - + ) }, { @@ -31,7 +31,7 @@ export default function Products() { desc: "Premium tempered glass railing for pools, decks, balconies, and commercial applications.", tags: ["Pool-safe", "Residential", "Commercial"], icon: ( - + ) }, { @@ -39,7 +39,7 @@ export default function Products() { desc: "Classic black ornamental iron fence for residential properties. Elegant, durable, and timeless.", tags: ["Black", "Residential"], icon: ( - + ) }, { @@ -47,7 +47,7 @@ export default function Products() { desc: "Professional-grade wood care products for fences, decks, pergolas, and outdoor structures.", tags: ["Stain & Seal", "Clean & Bright", "High margin"], icon: ( - + ) }, { @@ -55,7 +55,7 @@ export default function Products() { 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: ( - + ) }, { @@ -63,7 +63,7 @@ export default function Products() { desc: "Construction site fencing, crowd control, and event barriers available for short or long-term rental.", tags: ["Construction", "Events", "Rental"], icon: ( - + ) } ]; diff --git a/data/products.ts b/data/products.ts new file mode 100644 index 0000000..2207123 --- /dev/null +++ b/data/products.ts @@ -0,0 +1,683 @@ +export interface Product { + id: number; + slug: string; + name: string; + description: string; + price: string; + category: string; +} + +export const products: Product[] = [ + { + id: 1, + slug: "galvanized-commercial-chain-link-fabric", + name: "Galvanized Commercial Chain Link Fabric", + description: "Mesh Size: 2\" x 9 gauge (standard commercial) Gauge Options: 6 gauge (high security), 9 gauge (standard), 11 gauge (light commercial) Heights Available: 36\", 42\", 48\", 60\", 72\", 84\", 96\", 120\", 144\" Roll Length: 50 ft Finish: Hot-Dip Galvanized Selvage Options: Knuckle / Knuckle (KK), Knuckle / Twist (KT) Applications: Industrial sites, warehouses, factories, schools, municipal fencing", + price: "$14.50 / ft", + category: "Commercial Chain Link Fence Products" + }, + { + id: 2, + slug: "black-chain-link-fence-fabric", + name: "Black Chain Link Fence Fabric", + description: "Mesh Size: 2\" x 9 gauge Gauge Options: 9 gauge, 11 gauge Heights Available: 36\" to 144\" Roll Length: 50 ft Finish: Black Vinyl-Coated over galvanized steel Selvage: Knuckle / Knuckle or Knuckle / Twist Applications: Commercial properties, security fencing, modern industrial sites", + price: "$18.25 / ft", + category: "Commercial Chain Link Fence Products" + }, + { + id: 3, + slug: "galvanized-line-posts", + name: "Galvanized Line Posts", + description: "Outside Diameter: 1-7/8\" Wall Thickness: 17 gauge or Schedule 40 Lengths: 6'6\", 7'6\", 8'6\", 10'6\", 12'6\", 21? Finish: Galvanized", + price: "$38.00", + category: "Commercial Fence Posts & Pipe – Galvanized" + }, + { + id: 4, + slug: "galvanized-terminal-posts", + name: "Galvanized Terminal Posts", + description: "Outside Diameters: 2-3/8\", 2-7/8\", 3-1/2\", 4-1/2\", 6-5/8\" Wall: Schedule 40 Finish: Galvanized Use: End, corner, brace, and gate posts", + price: "$62.00", + category: "Commercial Fence Posts & Pipe – Galvanized" + }, + { + id: 5, + slug: "galvanized-top-rail", + name: "Galvanized Top Rail", + description: "Diameter: 1-5/8\" Wall: 17 gauge Lengths: 10'4\" (swedged), 21? Finish: Galvanized", + price: "$5.50 / ft", + category: "Commercial Fence Posts & Pipe – Galvanized" + }, + { + id: 6, + slug: "black-line-posts", + name: "Black Line Posts", + description: "Outside Diameter: 1-7/8\" Wall Thickness: 17 gauge or Schedule 40 Lengths: 6'6\", 7'6\", 8'6\", 10'6? Finish: Black powder-coated over galvanized steel", + price: "$45.00", + category: "Commercial Fence Posts & Pipe – Black" + }, + { + id: 7, + slug: "black-terminal-posts", + name: "Black Terminal Posts", + description: "Outside Diameters: 2-3/8\", 2-7/8\", 3-1/2\", 4-1/2\" Wall: Schedule 40 Finish: Black powder-coated", + price: "$72.00", + category: "Commercial Fence Posts & Pipe – Black" + }, + { + id: 8, + slug: "black-top-rail", + name: "Black Top Rail", + description: "Diameter: 1-5/8\" Wall: 17 gauge Lengths: 10'4\", 21? Finish: Black powder-coated", + price: "$7.25 / ft", + category: "Commercial Fence Posts & Pipe – Black" + }, + { + id: 9, + slug: "galvanized-industrial-swing-gates", + name: "Galvanized Industrial Swing Gates", + description: "Widths: 4', 5', 6', 7', 8', 10', 12? Heights: 4' to 12? Frame: Welded steel Fill: 2\" x 9 gauge galvanized chain link Hardware: Heavy-duty hinges, industrial latch Finish: Galvanized", + price: "From $350.00", + category: "Commercial Chain Link Gates – Galvanized" + }, + { + id: 10, + slug: "galvanized-double-drive-gates", + name: "Galvanized Double Drive Gates", + description: "Openings: 8' to 24? Includes: Drop rods, gate stops Finish: Galvanized", + price: "From $650.00", + category: "Commercial Chain Link Gates – Galvanized" + }, + { + id: 11, + slug: "black-industrial-chain-link-gates", + name: "Black Industrial Chain Link Gates", + description: "Single & Double Swing Options Widths: 4' to 24? Heights: 4' to 12? Frame: Welded steel tubing Fill: 2\" x 9 gauge black chain link Optional: Black powder-coated, Gate operators, cane bolts", + price: "From $420.00", + category: "Commercial Chain Link Gates – Black" + }, + { + id: 12, + slug: "chain-link-fence-fittings", + name: "Chain Link Fence Fittings", + description: "Available Finishes: Galvanized, Black (powder-coated)", + price: "Contact for Pricing", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 13, + slug: "tension-bands-commercial", + name: "Tension Bands", + description: "Use: Attach chain link fabric to end, corner, and gate posts Fits post sizes: 1-5/8\" to 6-5/8\" Used with tension bars and bolts Heavy-duty steel Finish: Galvanized or Black", + price: "$1.40", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 14, + slug: "brace-bands-commercial", + name: "Brace Bands", + description: "Use: Connect top rail or brace rail to terminal posts Fits post sizes: 1-5/8\" to 6-5/8\" Works with rail ends Commercial-grade steel Finish: Galvanized or Black", + price: "$1.65", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 15, + slug: "rail-ends-rail-end-cups-commercial", + name: "Rail Ends & Rail End Cups", + description: "Use: Secure top rail to brace bands Fits 1-3/8\" and 1-5/8\" top rail Steel construction Easy bolt-on installation Finish: Galvanized or Black", + price: "$2.85", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 16, + slug: "post-caps-commercial", + name: "Post Caps", + description: "Use: Protect posts and support top rail Line post loop caps for top rail Terminal caps for end and corner posts Fits posts from 1-5/8\" to 6-5/8\" Finish: Galvanized or Black", + price: "$3.95", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 17, + slug: "tension-bars-commercial", + name: "Tension Bars", + description: "Use: Tighten and secure chain link fabric Widths: 1/2\" or 3/4\" Lengths: 36\" to 144\" Flat steel bar Finish: Galvanized or Black", + price: "$9.50", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 18, + slug: "truss-rod-assemblies-commercial", + name: "Truss Rod Assemblies", + description: "Use: Strengthen end and corner posts Includes rod, turnbuckle, and fittings Prevents post movement Used on terminal posts Finish: Galvanized or Black", + price: "$18.50", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 19, + slug: "boulevard-clamps-commercial", + name: "Boulevard Clamps", + description: "Use: Connect horizontal rail to vertical post Used for extensions or special connections Heavy-duty steel clamp Multiple size options Finish: Galvanized or Black", + price: "$4.25", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 20, + slug: "carriage-bolts-nuts-commercial", + name: "Carriage Bolts & Nuts", + description: "Use: Fasten bands, clamps, and hardware Sizes: 5/16\" and 3/8\" Rounded carriage head Steel construction Finish: Galvanized or Black", + price: "$0.45", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 21, + slug: "barb-arms-commercial", + name: "Barb Arms", + description: "Use: Add barbed wire for security fencing 45? Barb Arms: Angled outward, holds 3 strands Vertical Barb Arms: Straight up design, holds 3 strands Double Barb Arms: Dual-direction arms, holds up to 6 strands Finish: Galvanized or Black", + price: "$15.50", + category: "Commercial Fence Hardware – Galvanized & Black" + }, + { + id: 22, + slug: "lifemax-composite-deck-boards", + name: "LifeMax Composite Deck Boards", + description: "Solid core composite material Made with ~85% recycled wood and plastic 4-sided capping for durability Weather-resistant, UV and moisture resistant Low-maintenance (no staining/sealing) Anti-slip, quiet walk surface Sizes: Grooved edge deck board ? approx 5.43\" ? 0.91\" Length Options: 12' and 16' (or similar industry standard lengths) Available Colours: Black, Ancient Wood, Anthracite Grey, Maple, Smoke Grey, Red Wood, Golden Teak, Mica Grey, Willow, Blue Grey (colour options vary by supplier)", + price: "$185.00 / panel", + category: "DECK PRODUCTS" + }, + { + id: 23, + slug: "ecomost-composite-deck-boards", + name: "EcoMost Composite Deck Boards", + description: "Hollow core composite board ~85% recycled wood and plastic makeup Lightweight yet strong Weather-resistant and low-maintenance Anti-slip and moisture resistant Sizes: approx 5.43\" ? 0.91\" grooved edge Length Options: 12' and 16' Colour Options: Black plus other wood-tone colours", + price: "$65.00", + category: "DECK PRODUCTS" + }, + { + id: 24, + slug: "starter-deck-boards-starter-boards", + name: "Starter Deck Boards / Starter Boards", + description: "Used at edges to start first row of decking Matches LifeMax and EcoMost boards Same width as deck boards Length Options: 12' and 16' Made of composite material Available in standard DexEra colours", + price: "$85.00", + category: "DECK PRODUCTS" + }, + { + id: 25, + slug: "composite-deck-fascia-boards", + name: "Composite Deck Fascia Boards", + description: "Solid composite board to finish deck edges Protects joists and gives a polished look Size: approx 7.5\" ? 0.55\" Lengths: 12' and 16' Matches deck boards in colour and finish Weather-resistant, low-maintenance", + price: "$95.00", + category: "DECK PRODUCTS" + }, + { + id: 26, + slug: "deck-board-clip-fastener-kits", + name: "Deck Board Clip & Fastener Kits", + description: "Stainless steel or corrosion-resistant fasteners Designed for hidden or exposed fastening Includes clips and screws in kit form Works with composite decking boards Helps secure boards without visible screw heads", + price: "$45.00 / pack", + category: "DECK PRODUCTS" + }, + { + id: 27, + slug: "deck-railing-systems-composite-metal", + name: "Deck Railing Systems (Composite & Metal)", + description: "Composite railing or aluminum railing options Includes posts, balusters/infill, post sleeves, post caps Designed to match decking style and colours Weather-resistant, low-maintenance", + price: "From $145.00", + category: "DECK PRODUCTS" + }, + { + id: 28, + slug: "tension-bands-residential", + name: "Tension Bands", + description: "Secures chain link fabric to terminal posts Fits post sizes: 1-5/8\" to 6-5/8\" Finish: Galvanized, Black", + price: "$1.15", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 29, + slug: "brace-bands-residential", + name: "Brace Bands", + description: "Connects top rail to terminal posts Fits post sizes: 1-5/8\" to 6-5/8\" Finish: Galvanized, Black", + price: "$1.35", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 30, + slug: "boulevard-clamps-residential", + name: "Boulevard Clamps", + description: "Connects horizontal rail to vertical post Multiple size combinations Finish: Galvanized, Black", + price: "$2.10", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 31, + slug: "rail-ends-residential", + name: "Rail Ends", + description: "Attaches top rail to brace bands Fits 1-3/8\" and 1-5/8\" rail Finish: Galvanized, Black", + price: "$2.20", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 32, + slug: "rail-end-cups-residential", + name: "Rail End Cups", + description: "Locks rail end into brace band Finish: Galvanized, Black", + price: "$7.25", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 33, + slug: "line-post-caps-loop-caps", + name: "Line Post Caps (Loop Caps)", + description: "Supports top rail on line posts Fits 1-5/8\" and 1-7/8\" posts Finish: Galvanized, Black", + price: "$0.85", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 34, + slug: "terminal-post-caps-residential", + name: "Terminal Post Caps", + description: "Covers end, corner, and gate posts Fits 2-3/8\" to 6-5/8\" posts Finish: Galvanized, Black", + price: "$8.50", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 35, + slug: "tension-bars-residential", + name: "Tension Bars", + description: "Used to tension chain link fabric Lengths: 36\" ? 144\" Finish: Galvanized, Black", + price: "$16.50", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 36, + slug: "truss-rod-assemblies-residential", + name: "Truss Rod Assemblies", + description: "Strengthens terminal and corner posts Includes rod and turnbuckle Finish: Galvanized, Black", + price: "$14.00", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 37, + slug: "bottom-tension-wire", + name: "Bottom Tension Wire", + description: "Keeps bottom of fence tight Finish: Galvanized", + price: "$0.35 / ft", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 38, + slug: "carriage-bolts-nuts-residential", + name: "Carriage Bolts & Nuts", + description: "Used with bands, clamps, and fittings Sizes: 5/16\", 3/8\" Finish: Galvanized, Black", + price: "$0.25", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 39, + slug: "barb-arms-residential", + name: "Barb Arms", + description: "45? Barb Arms Vertical Barb Arms Double Barb Arms Finish: Galvanized, Black", + price: "$12.50", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 40, + slug: "barbed-wire", + name: "Barbed Wire", + description: "4-point barbed wire Finish: Galvanized", + price: "$75.00 / roll", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 41, + slug: "gate-hinges-residential", + name: "Gate Hinges", + description: "Heavy-duty adjustable hinges Finish: Galvanized, Black", + price: "$28.00 / pair", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 42, + slug: "gate-latches-residential", + name: "Gate Latches", + description: "Fork latch / gravity latch styles Lockable options available Finish: Galvanized, Black", + price: "$14.00", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 43, + slug: "drop-rods-cane-bolts-residential", + name: "Drop Rods (Cane Bolts)", + description: "For double swing gates Finish: Galvanized, Black", + price: "$45.00 / pair", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 44, + slug: "privacy-slats", + name: "Privacy Slats", + description: "Inserts into chain link mesh Color: Black", + price: "$65.00 / box", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 45, + slug: "fence-weave-wind-screen", + name: "Fence Weave / Wind Screen", + description: "Wind and visibility reduction Color: Black", + price: "$85.00 / roll", + category: "FENCE HARDWARE & ACCESSORIES" + }, + { + id: 46, + slug: "post-caps-ornamental", + name: "Post Caps", + description: "Flat, ball, spear, or decorative styles Fits ornamental fence posts Finish: Black", + price: "$2.50", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 47, + slug: "post-base-plates-ornamental", + name: "Post Base Plates", + description: "Surface-mount post installation Steel construction Finish: Black", + price: "$18.00", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 48, + slug: "panel-mount-brackets-ornamental", + name: "Panel Mount Brackets", + description: "Connect fence panels to posts Bolt-on or screw-on Finish: Black", + price: "$3.50", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 49, + slug: "rail-brackets-ornamental", + name: "Rail Brackets", + description: "Secures horizontal rails to posts Finish: Black", + price: "$4.50", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 50, + slug: "self-drilling-screws-ornamental", + name: "Self-Drilling Screws", + description: "Exterior-grade steel Corrosion-resistant Finish: Black", + price: "$5.50 / pack", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 51, + slug: "anchor-bolts-ornamental", + name: "Anchor Bolts", + description: "Used for surface-mounted posts Heavy-duty steel Finish: Galvanized", + price: "$6.00 / unit", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 52, + slug: "gate-hinges-ornamental", + name: "Gate Hinges", + description: "Adjustable ornamental gate hinges Heavy-duty design Finish: Black", + price: "$32.00 / pair", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 53, + slug: "gate-latches-ornamental", + name: "Gate Latches", + description: "Self-latching and lockable styles Residential & commercial use Finish: Black", + price: "$24.50", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 54, + slug: "drop-rods-ornamental", + name: "Drop Rods", + description: "For double ornamental gates Finish: Black", + price: "$55.00", + category: "ORNAMENTAL FENCE HARDWARE & ACCESSORIES" + }, + { + id: 55, + slug: "chain-link-line-posts", + name: "Chain Link Line Posts", + description: "Used for: Supporting chain link fabric Sizes / Diameters: 1-5/8?, 1-7/8? Wall Thickness: 17 gauge standard Lengths: 6'6?, 7'6?, 8'6?, 10'6? Finish: Galvanized, Black", + price: "$18.50 / unit", + category: "FENCE POSTS & TUBING" + }, + { + id: 56, + slug: "chain-link-terminal-corner-posts", + name: "Chain Link Terminal & Corner Posts", + description: "Used for: Ends, corners, gates Diameters: 2-3/8?, 2-7/8?, 3-1/2?, 4-1/2?, 6-5/8? Wall: Schedule 40 Lengths: 8? to 12?+ depending on size Finish: Galvanized, Black", + price: "$35.00 / unit", + category: "FENCE POSTS & TUBING" + }, + { + id: 57, + slug: "chain-link-top-rail", + name: "Chain Link Top Rail", + description: "Used for: Connecting line posts and adding stability Diameter: 1-5/8? Swedged or plain ends Standard Lengths: 10'4?, 21? Finish: Galvanized, Black", + price: "$4.50 / ft", + category: "FENCE POSTS & TUBING" + }, + { + id: 58, + slug: "ornamental-fence-posts-black", + name: "Ornamental Fence Posts – Black", + description: "Used for: Decorative / ornamental metal fencing Material: Steel or aluminum Styles: Square picket posts, Rounded posts, Decorative finial tops Sizes: 2\" x 2\", 2.5\" x 2.5\" Finish: Black powder-coated Notes: Designed to match ornamental fencing panels for a finished look", + price: "$42.00 / unit", + category: "FENCE POSTS & TUBING" + }, + { + id: 59, + slug: "ornamental-railing-posts-black", + name: "Ornamental Railing Posts – Black", + description: "Used for: Deck railing, balcony railing, ornamental fences Post Sizes: 2\" x 2\", 2.5\" x 2.5\" Material: Aluminum or steel Finish: Black powder-coated Styles: Square, Decorative tops (flat cap, ball cap) Compatible with: Metal pickets, table infill, glass infill", + price: "$38.00 / unit", + category: "FENCE POSTS & TUBING" + }, + { + id: 60, + slug: "post-caps-finials-black-galvanized", + name: "Post Caps & Finials (Black & Galvanized)", + description: "Used to finish post tops Styles: Flat caps, Dome caps, Decorative finials (ball, spear, fleur) Fits: Chain link posts, Ornamental posts Finish: Galvanized, Black", + price: "$12.50", + category: "FENCE POSTS & TUBING" + }, + { + id: 61, + slug: "surface-mount-post-bases", + name: "Surface Mount Post Bases", + description: "Used for: Installing railing posts on wood or concrete Material: Steel or aluminum Finish: Black, Galvanized", + price: "$28.00", + category: "FENCE POSTS & TUBING" + }, + { + id: 62, + slug: "commercial-chain-link-swing-gates", + name: "Commercial Chain Link Swing Gates", + description: "Type: Single Swing / Double Swing Widths: 4?, 5?, 6?, 8?, 10?, 12? Heights: 6?, 7?, 8?, 10?, 12? Frame Tubing: 1 5/8\" or 2\" OD steel Mesh: 9 ga (standard), 6 ga (high security) Finish: Galvanized or Black Applications: Industrial facilities, construction sites, municipal properties", + price: "From $210 / ft", + category: "Gates & Gate Hardware" + }, + { + id: 63, + slug: "cantilever-rolling-slide-chain-link-gates", + name: "Cantilever Rolling / Slide Chain Link Gates", + description: "Opening Widths: 12?, 16?, 20', 24?, 30' Gate Heights: 6?, 8? System: Trackless cantilever Finish: Galvanized or Black", + price: "From $1,250", + category: "Gates & Gate Hardware" + }, + { + id: 64, + slug: "rolling-slide-chain-link-gates", + name: "Rolling / Slide Chain Link Gates", + description: "Opening Widths: 10' - 30' Track Type: Ground track Finish: Galvanized or Black", + price: "From $850.00", + category: "Gates & Gate Hardware" + }, + { + id: 65, + slug: "commercial-gate-hardware", + name: "Commercial Gate Hardware", + description: "Heavy-Duty Adjustable Hinges Cantilever Roller Assemblies Guide Rollers & Posts Industrial Gate Latches (padlock-ready) Drop Rods / Cane Bolts Gate Stops Finish: Galvanized or Black", + price: "$155.00 / kit", + category: "Gates & Gate Hardware" + }, + { + id: 66, + slug: "ornamental-gates-commercial", + name: "Ornamental Gates – Commercial", + description: "Heavy duty ornamental steel and aluminum gates designed to match commercial ornamental fencing systems while providing secure access control Type: Single Swing / Double Swing Widths: 4?, 6?, 8', 10?, 12', 16' Heights: 4?, 5?, 6?, 8' Styles: Flat Top / Spear Top Frame: Welded steel or aluminum Finish: Galvanized or Black Powder-Coated Applications: Commercial properties, institutional buildings, gated facilities", + price: "From $550.00", + category: "Gates & Gate Hardware" + }, + { + id: 67, + slug: "chain-link-swing-gates-residential", + name: "Chain Link Swing Gates – Residential", + description: "Type: Single / Double Swing Widths: 3', 4', 5', 6', 8', 10' Heights: 4', 5', 6' Frame: 1-3/8\" OD steel Mesh: 11 ga Finish: Galvanized or Black", + price: "From $125.00", + category: "Gates & Gate Hardware" + }, + { + id: 68, + slug: "ornamental-gates-residential", + name: "Ornamental Gates – Residential", + description: "Decorative yet durable ornamental gates designed to complement residential ornamental fencing Type: Single Swing / Double Swing Widths: 3', 4', 5', 6', 8', 10' Heights: 4', 5', 6' Styles: Flat Top / Spear Top / Puppy Picket Finish: Black Powder-Coated or Galvanized Applications: Homes, private properties, decorative fencing", + price: "From $185.00", + category: "Gates & Gate Hardware" + }, + { + id: 69, + slug: "residential-gate-hardware", + name: "Residential Gate Hardware", + description: "Adjustable Hinges Self-Closing Hinges (optional) Gravity Latches Thumb Latches Padlockable Latches Drop Rods Finish: Galvanized or Black", + price: "$48.00 / kit", + category: "Gates & Gate Hardware" + }, + { + id: 70, + slug: "universal-gate-hardware", + name: "Universal Gate Hardware", + description: "Hinges (1-3/8\" to 3\" compatibility) Latches & Locks Drop Rods / Cane Bolts Gate Stops Roller & Guide Assemblies Finish: Galvanized & Black Only", + price: "$32.00 / kit", + category: "Gates & Gate Hardware" + }, + { + id: 71, + slug: "residential-iron-fence-systems", + name: "Residential Iron Fence Systems", + description: "Specifications:\nMaterial: Cold-rolled steel tubing\nCoating: Galv + Zinc Phosphate + E-Coat (standard heights) + Polyester Powder Coat\nRail Size: 1\" square\nPicket Size: 5/8\" square\nPost Size: 2\" square (other sizes available)\nAvailable Profiles: Spear Top, Triad, Pinch Top\nHeights Available: 4 ft, 5 ft, 6 ft\nFinish Options: High Gloss Black, Flat Black, Textured Black\nGate Options: Single, Double, Arched, Full Arch\nWarranty: 10-Year Limited Warranty\nApplications: Residential yards, pools, gardens, walkways, decorative property fencing.", + price: "$19.50 / ft", + category: "Ornamental Fence" + }, + { + id: 72, + slug: "commercial-iron-fence-solutions", + name: "Commercial Iron Fence Solutions", + description: "Specifications:\nCollection: States Collection\nRail Size: 1-1/2\" square\nPicket Size: 1\" square\nPost Size: 2-1/2\" square\nMaterial: Galv-coated cold-rolled steel\nMounting: Universal and swivel brackets available\nFinish Options: High Gloss Black, Flat Black, Textured Black\nGate Compatibility: Matching commercial swing and driveway gates\nHeight Options: Custom and standard heights available\nWarranty: 10-Year Limited Warranty\nApplications: Commercial properties, office complexes, schools, retail centers, municipal fencing.", + price: "$28.00 / ft", + category: "Ornamental Fence" + }, + { + id: 73, + slug: "industrial-iron-fence-systems", + name: "Industrial Iron Fence Systems", + description: "Specifications:\nCollection: Memorial Collection & Memorial Aluminum Collection\nRail Size: 2-1/2\" x 1-1/2\"\nPicket Size: 1/2\" x 1/2\"\nPost Size: 3\" square\nSecurity Feature: Pinch-top pickets available\nMaterial: Heavy-duty cold-rolled steel or aluminum\nFinish Options: High Gloss Black, Flat Black, Textured Black\nGate Options: Swing, cantilever, automated-ready gates\nWarranty: 10-Year Limited Warranty\nApplications: Warehouses, factories, industrial facilities, infrastructure sites, high-security properties.", + price: "$42.00 / ft", + category: "Ornamental Fence" + }, + { + id: 74, + slug: "ornamental-iron-fence-designs", + name: "Ornamental Iron Fence Designs", + description: "Specifications:\nAvailable Styles: Spear Top, Triad, Pinch Top\nDecorative Options: Ball, Pyramid, Spear post caps\nMaterial: Galv-coated steel\nRail & Picket Sizes: Vary by collection\nFinish Options: High Gloss Black, Flat Black, Textured Black\nGate Matching: Fully compatible ornamental gates\nWarranty: 10-Year Limited Warranty\nApplications: Decorative landscaping, estate fencing, front yards, architectural projects.", + price: "Call for Pricing", + category: "Ornamental Fence" + }, + { + id: 75, + slug: "aluminum-fence-panels", + name: "Aluminum Fence Panels", + description: "Specifications:\nCollection: Memorial Aluminum Collection\nMaterial: Premium aluminum\nRust-Resistant & Lightweight\nRail & Picket Sizes: Match Memorial profiles\nFinish: Powder-coated black\nGate Compatibility: Matching aluminum gates available\nApplications: Residential, commercial, and coastal installations requiring corrosion resistance.", + price: "$32.00 / ft", + category: "Ornamental Fence" + }, + { + id: 76, + slug: "iron-fence-gates", + name: "Iron Fence Gates", + description: "Specifications:\nGate Types: Single, Double, Arched, Full Arch\nHardware: Self-closing hardware available (pool code compliant)\nLock Options: Lock boxes available\nAutomation Ready: Yes\nMaterial: Cold-rolled steel with Galv coating\nFinish: Powder-coated black\nApplications: Driveways, walkways, commercial entrances, secured access points.", + price: "From $250.00", + category: "Ornamental Fence" + }, + { + id: 77, + slug: "decorative-iron-post-caps", + name: "Decorative Iron Post Caps", + description: "Specifications:\nStyles Available: Pyramid, Ball, Spear, Triad\nMaterial: Cast aluminum or steel\nFinish: Black powder coat\nCompatibility: Residential, commercial, and industrial posts\nApplications: Decorative fencing, architectural accents, custom fence projects.", + price: "$14.50 / unit", + category: "Ornamental Fence" + }, + { + id: 78, + slug: "aluminum-railing-systems", + name: "Aluminum Railing Systems", + description: "Specifications:\nMaterial: Heavy-duty aluminum\nFinish: Powder-coated for UV and corrosion resistance\nColors Available: Black, white, custom finishes available\nMounting Options: Surface mount or fascia mount\nCode Compliance: Meets residential and commercial building codes\nApplications: Decks, balconies, stairways, porches", + price: "$85.00 / ft", + category: "Railings & Glass Railings" + }, + { + id: 79, + slug: "glass-railing-hardware-accessories", + name: "Glass Railing Hardware & Accessories", + description: "Hardware Types Available:\nGlass Clamps (Square & Round)\nGlass Spigots / Posts\nBase Shoe Systems\nStandoff Mounts\nHandrail Brackets\nGlass Connectors & Corner Clamps\nEnd Caps & Covers\nSpecifications:\nMaterial Options: Stainless steel, aluminum\nGrades Available: 304 stainless steel (interior), 316 stainless steel (exterior/coastal)\nFinish Options: Brushed stainless, polished stainless, matte black, custom finishes\nGlass Compatibility: Fits 10 mm, 12 mm tempered or laminated glass\nMounting Options: Top mount, side mount, surface mount\nLoad Rating: Designed to meet residential and commercial code requirements\nCorrosion Resistance: Suitable for outdoor and high-moisture environments\nSystem Compatibility:\nFrameless glass railing systems\nSemi-frameless railing systems\nBalcony, deck, and stair glass railings\nInterior and exterior installations\nApplications: Balconies, decks, staircases, terraces, pool enclosures, commercial buildings, modern architectural projects.", + price: "Varies by Project", + category: "Railings & Glass Railings" + }, + { + id: 80, + slug: "glass-railings-custom-glass-railings", + name: "Glass Railings & Custom Glass Railings", + description: "Specifications:\nGlass Type: Tempered safety glass or laminated safety glass\nGlass Thickness Options: 10 mm, 12 mm, 15 mm, or custom thickness as per project requirements\nCustom Glass: We cut, shape, and fabricate glass to your specifications, including curves, etching, frosted or tinted finishes\nSystem Types: Frameless, semi-frameless, post mounted, or top rail mounted\nHardware Material: Stainless steel or powder-coated aluminum for posts, clamps, spigots, and connectors\nMounting Options: Top mount, side mount, or base shoe system\nCompliance: Meets all residential and commercial building codes and safety regulations\nStandard Options: Aluminum, stainless steel, or custom design caps\nApplications: Balconies & terraces\nStaircases & landings\nDecks & rooftop railings\nCommercial & residential properties\nHotels, resorts, and luxury apartments", + price: "From $250.00 / ft", + category: "Railings & Glass Railings" + }, + { + id: 81, + slug: "temporary-fence-rentals", + name: "Temporary Fence Rentals", + description: "Rental Options:\nShort term (daily/weekly) or long term (monthly)\nPanel and gate rental packages\nDelivery and pickup included (area-dependent)\nCustom layouts for crowd management, security, or safety\nApplications: Outdoor events, concerts, roadworks, construction sites, festivals, sports events. Enhance temporary fence with accessories for safety, visibility, and convenience. Includes: Safety signage and banners, feet, clamps, connectors, protective base plates, security lock kits", + price: "$12.00 / month / panel", + category: "Temporary Fence Rentals" + }, + { + id: 82, + slug: "temporary-fence-accessories-add-ons", + name: "Temporary Fence Accessories & Add-Ons", + description: "Applications: Public safety, construction compliance, event organization, traffic control", + price: "Inquire for Pricing", + category: "Temporary Fence Rentals" + }, + { + id: 83, + slug: "wood-fence-hardware-accessories", + name: "Wood Fence Hardware & Accessories", + description: "Wood Fence Hardware\nBrackets & Mounting Hardware\nGate Hinges (Heavy-Duty & Decorative)\nLatches & Locks\nGate Closers\nPost Caps & Finials\nScrews, Bolts & Fasteners\nWood Gates\nSingle Wood Gates\nDouble Wood Gates\nDecorative Wood Gates\nCustom Sized Wood Gates\nGate Frames & Reinforcements\nDrop Rods & Gate Accessories\nApplications:\nResidential yards & gardens\nCommercial properties\nDecorative fencing\nSecurity fencing", + price: "Varies", + category: "Wood Fence Hardware & Gates" + }, + { + id: 84, + slug: "spray-paint", + name: "Spray Paint", + description: "High-quality fence spray paint for chain link, ornamental, and metal fences. Available in standard fence colors like Black, Cold Zinc Galvanized, Green, Brown, and custom shades. Perfect for touch-ups, maintenance, or finishing new installations.", + price: "$14.50 / can", + category: "Others" + } +]; diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..292b5c2 Binary files /dev/null and b/public/favicon.png differ diff --git a/public/vg-fence.png b/public/vg-fence.png new file mode 100644 index 0000000..92f3207 Binary files /dev/null and b/public/vg-fence.png differ