From 332ed5ef7fbba26ccb20923acf9af0d4b09ae404 Mon Sep 17 00:00:00 2001 From: selvi Date: Sat, 18 Apr 2026 15:00:53 +0530 Subject: [PATCH] inner pages updated --- app/about/page.tsx | 198 ++-- app/blog/[slug]/page.tsx | 117 +++ app/blog/page.tsx | 57 ++ app/contact/page.tsx | 23 +- app/globals.css | 1313 +++++++++++++++++++++++++- app/layout.tsx | 2 +- app/login/page.tsx | 24 +- app/manufacturing/page.tsx | 145 +++ app/products/[slug]/page.tsx | 38 +- app/products/page.tsx | 27 +- app/rentals/page.tsx | 189 ++++ components/Footer.tsx | 3 +- components/Navbar.tsx | 42 +- data/blogs.ts | 124 +++ next.config.ts | 6 +- public/assets/about-fencing.png | Bin 0 -> 1049477 bytes public/{ => assets}/favicon.png | Bin public/assets/favicon.webp | Bin 0 -> 1592 bytes public/assets/fence-rentals-hero.png | Bin 0 -> 1101961 bytes public/{ => assets}/file.svg | 0 public/{ => assets}/globe.svg | 0 public/assets/manufacturing-hero.png | Bin 0 -> 970124 bytes public/{ => assets}/next.svg | 0 public/assets/temp-fence-panel.png | Bin 0 -> 570991 bytes public/{ => assets}/vercel.svg | 0 public/{ => assets}/vg-fence.png | Bin public/{ => assets}/window.svg | 0 27 files changed, 2165 insertions(+), 143 deletions(-) create mode 100644 app/blog/[slug]/page.tsx create mode 100644 app/blog/page.tsx create mode 100644 app/manufacturing/page.tsx create mode 100644 app/rentals/page.tsx create mode 100644 data/blogs.ts create mode 100644 public/assets/about-fencing.png rename public/{ => assets}/favicon.png (100%) create mode 100644 public/assets/favicon.webp create mode 100644 public/assets/fence-rentals-hero.png rename public/{ => assets}/file.svg (100%) rename public/{ => assets}/globe.svg (100%) create mode 100644 public/assets/manufacturing-hero.png rename public/{ => assets}/next.svg (100%) create mode 100644 public/assets/temp-fence-panel.png rename public/{ => assets}/vercel.svg (100%) rename public/{ => assets}/vg-fence.png (100%) rename public/{ => assets}/window.svg (100%) diff --git a/app/about/page.tsx b/app/about/page.tsx index 078ce06..daa6ff4 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,63 +1,93 @@ +"use client"; + import Link from 'next/link'; import Image from 'next/image'; +import { useState, useEffect } from 'react'; export default function AboutPage() { + const [testIndex, setTestIndex] = useState(0); + const [openFaq, setOpenFaq] = useState(null); + + const testimonials = [ + { quote: "VG Fence consistently delivers high-quality materials on time. Their contractor pricing allows me to stay competitive, and their inventory is unmatched.", author: "Mark S.", role: "Local Fence Contractor" }, + { quote: "Their galvanized and black finish railings are top-notch. It's rare to find a supplier that combines durability with such an aesthetic appeal.", author: "Sarah L.", role: "Property Manager" }, + { quote: "The team at VG Fence is incredibly knowledgeable. They helped us select the right ornamental fencing for our latest residential development.", author: "David K.", role: "Construction Manager" } + ]; + + const nextTestimonial = () => setTestIndex((prev) => (prev + 1) % testimonials.length); + const prevTestimonial = () => setTestIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length); + + const faqs = [ + { question: "Do you offer contractor pricing?", answer: "Yes! We provide dedicated contractor accounts with specialized pricing. You need to create an account and verify your business details to unlock these rates." }, + { question: "Do you offer installation services?", answer: "While our primary focus is supplying high-quality materials, we do provide installation support for select projects based on their size and scope." }, + { question: "Where are your materials sourced from?", answer: "We source professional-grade materials focused on durability, specifically suited for Canada's diverse climate, including robust galvanized and black finish options." }, + { question: "Do you offer delivery across Ontario?", answer: "Yes, we provide reliable delivery services across Ontario for both residential and commercial projects. Delivery times depend on the order size and location." }, + { question: "Can I order custom gate sizes?", answer: "Absolutely. We specialize in custom gate fabrication. You can provide us with your specific dimensions and requirements, and we will manufacture them to fit your project perfectly." }, + ]; + + // Auto-slide effect + useEffect(() => { + const interval = setInterval(() => { + nextTestimonial(); + }, 5000); // Change slide every 5 seconds + + return () => clearInterval(interval); + }, [testIndex]); // Reset timer when index changes (manual navigation) + 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. -

+
+
+

Your Trusted Fencing Partner

+
+ + + Home + + / + About Us +
{/* Our Story Section */} -
-
-
+
+
+
Our Story
-

A Reputation Built on Reliability.

-
+

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

- 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. + While our focus is primarily on material supply, we also provide installation support for select projects, based on size and scope.

+
+ Learn More +
-
-
+
+
Quality Fencing
-
-
100%
-
Professional Grade Materials In Stock
+
+
Our Mission
+
+ To supply premium fencing and railing materials that combine quality, durability, and convenience, helping every project — large or small — succeed. +
@@ -65,78 +95,84 @@ export default function AboutPage() {
{/* Mission Section */} -
-
-
Our Mission
-

Empowering Success.

-
-

+ {/*

+
+
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 */} + {/* Testimonial Section (Slider) */}
-
-
Testimonials
-

What Our Partners Say.

+
+
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
+
+
+ {testimonials.map((test, idx) => ( +
+
+
{test.quote}
+
{test.author}
+
{test.role}
+
+
+ ))}
-
-
"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 Section (Accordion) */}
-
-
FAQ
-

Frequently Asked Questions.

+
+
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.
-
+
+ {faqs.map((faq, idx) => ( +
+
setOpenFaq(openFaq === idx ? null : idx)} + > +
{faq.question}
+
+ ▾ +
+
+
+
+ {faq.answer} +
+
+
+ ))}
{/* CTA Section */} -
+ {/*

Ready to Build?

-

Explore Ontario's most reliable inventory of fencing products.

+

Explore Ontario's most reliable inventory of fencing products.

View Full Catalog Contact Us
-
- +
*/}
); } + diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx new file mode 100644 index 0000000..68821dc --- /dev/null +++ b/app/blog/[slug]/page.tsx @@ -0,0 +1,117 @@ +import Image from "next/image"; +import Link from "next/link"; +import { notFound } from "next/navigation"; +import { blogs } from "@/data/blogs"; + +interface Props { + params: Promise<{ slug: string }>; +} + +export async function generateStaticParams() { + return blogs.map((blog) => ({ + slug: blog.slug, + })); +} + +export async function generateMetadata({ params }: Props) { + const { slug } = await params; + const blog = blogs.find((b) => b.slug === slug); + if (!blog) return { title: "Blog Not Found" }; + + return { + title: `${blog.title} | VG Fence Products`, + description: blog.excerpt, + }; +} + +export default async function BlogDetailPage({ params }: Props) { + const { slug } = await params; + const blog = blogs.find((b) => b.slug === slug); + + if (!blog) { + notFound(); + } + + // Split content into paragraphs to insert images in between + const paragraphs = blog.content.split('\n\n'); + + return ( +
+ {/* ── INNER BANNER ── */} +
+
+

{blog.title}

+
+ + + Home + + / + Blog + / + {blog.title} +
+
+
+ + {/* ── CONTENT SECTION ── */} +
+
+ {/* Big Image */} +
+ {blog.title} +
+ +
+ {/* First couple of paragraphs */} + {paragraphs.slice(0, Math.min(2, paragraphs.length)).map((p, i) => ( +

{p}

+ ))} + + {/* 2 Small Images (Left and Right) */} +
+
+ Feature 1 +
+
+ Feature 2 +
+
+ + {/* Remaining paragraphs */} + {paragraphs.slice(2).map((p, i) => ( +

{p}

+ ))} +
+ + {/* Bottom Button */} +
+ + + Back to Blog + +
+
+
+ +
+ ); +} diff --git a/app/blog/page.tsx b/app/blog/page.tsx new file mode 100644 index 0000000..96988aa --- /dev/null +++ b/app/blog/page.tsx @@ -0,0 +1,57 @@ +import Link from "next/link"; +import Image from "next/image"; +import { blogs } from "@/data/blogs"; + +export const metadata = { + title: "Blog | VG Fence Products", + description: "Read our latest articles about fencing installation, maintenance, and product choices.", +}; + +export default function BlogPage() { + return ( +
+ {/* ── INNER BANNER ── */} +
+
+

Our Blog

+
+ + + Home + + / + Blog +
+
+
+ + {/* ── BLOG GRID ── */} +
+
+ {blogs.map((blog) => ( + +
+ {blog.title} +
{blog.category}
+
+
+
{blog.date}
+

{blog.title}

+

{blog.excerpt}

+
+ Read Article → +
+
+ + ))} +
+
+ +
+ ); +} diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 8c99e8e..c9c1297 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,19 +1,22 @@ +import Link from 'next/link'; 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. -

+
+
+

How to Contact Us

+
+ + + Home + + / + Contact +
diff --git a/app/globals.css b/app/globals.css index 10d288f..dbd29da 100644 --- a/app/globals.css +++ b/app/globals.css @@ -69,14 +69,27 @@ body { } /* Section Generic Styles */ -section { - padding: 80px 60px; +section, +.section { + padding: 80px 20px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 40px; } @media (max-width: 768px) { - section { + + section, + .section { padding: 60px 20px; } + + .container { + padding: 0; + } } .section-eyebrow { @@ -257,10 +270,7 @@ nav { } .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); + display: none; } .hero-accent { @@ -539,6 +549,10 @@ nav { .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); + /* gap: 24px; */ +} + +.product-page { gap: 24px; } @@ -554,7 +568,7 @@ nav { background: var(--white); padding: 32px 28px; border: 1px solid var(--gray-200); - border-radius: 12px; + /* border-radius: 12px; */ transition: all .2s; cursor: pointer; position: relative; @@ -1271,7 +1285,7 @@ footer { .faq-item { border: 1px solid var(--gray-200); border-radius: 8px; - padding: 24px; + /* padding: 24px; */ background: var(--white); transition: border-color .2s; } @@ -1344,9 +1358,7 @@ footer { padding: 0 24px; } - .nav-links { - display: none; - } + /* Removed display: none to allow mobile menu logic to work */ .hero-left { padding: 60px 0; @@ -1415,10 +1427,10 @@ footer { /* ── AUTH PAGES ── */ .auth-page { - min-height: 100vh; + /* min-height: 100vh; */ padding-top: calc(80px + 64px); /* 80px spacing + 64px for fixed navbar */ - padding-bottom: 80px; + /* padding-bottom: 80px; */ background: var(--navy); display: flex; align-items: flex-start; @@ -1489,4 +1501,1275 @@ footer { .auth-form { display: flex; flex-direction: column; -} \ No newline at end of file +} + +/* ── ABOUT PAGE ── */ +.about-page-wrapper { + min-height: 100vh; + background: var(--white); +} + +.about-hero-section { + min-height: 350px; + display: flex; + align-items: center; + padding-top: 130px; +} + +.about-hero-left { + padding: 0; + width: 100%; +} + +.about-hero-h1 { + margin-bottom: 16px; +} + +.about-hero-sub { + max-width: 600px; + margin-bottom: 0; +} + +.about-story-container { + max-width: 1200px; + margin: 0 auto; + /* padding: 0 20px; */ +} + +.about-story-layout { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 80px; + align-items: center; +} + +@media (max-width: 1024px) { + .about-story-layout { + grid-template-columns: 1fr; + gap: 40px; + } +} + +.about-story-h2 { + margin-bottom: 32px; +} + +.about-story-text { + font-size: 17px; + color: var(--gray-600); + line-height: 1.8; + display: flex; + flex-direction: column; + gap: 20px; +} + +.about-story-p-italic { + font-style: italic; + color: var(--gray-500); + font-size: 15px; +} + +.about-image-column { + position: relative; +} + +.about-image-cover { + object-fit: cover; +} + +.about-floating-card { + position: absolute; + bottom: -30px; + left: -17px; + background: var(--navy); + padding: 32px; + border-radius: 12px; + color: var(--white); + max-width: 280px; + z-index: 2; + box-shadow: 0 20px 40px rgba(0, 0, 0, .3); +} + +@media (max-width: 1024px) { + .about-section { + margin-bottom: 40px; + } +} + +@media (max-width: 768px) { + .about-floating-card { + left: 20px; + right: 20px; + max-width: none; + bottom: -40px; + } +} + +.about-floating-card-100 { + font-size: 40px; + font-weight: 800; + color: var(--orange); + margin-bottom: 8px; + font-family: var(--font-display); +} + +.about-floating-card-text { + font-size: 13px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: .1em; + line-height: 1.4; +} + +.about-mission-section { + background: var(--cream); +} + +.about-mission-container { + max-width: 800px; + margin: 0 auto; + padding: 0 20px; + text-align: center; +} + +.about-mission-eyebrow { + margin: 0 auto 16px; + justify-content: center; +} + +.about-mission-h2 { + margin-bottom: 32px; +} + +.about-mission-card { + background: var(--white); + padding: 64px 15px; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, .03); +} + +.about-mission-text { + font-size: 24px; + color: var(--navy); + line-height: 1.6; + font-weight: 500; + font-family: var(--font-body); +} + +.about-testimonial-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + text-align: center; +} + +.about-testimonial-eyebrow { + margin: 0 auto 16px; + justify-content: center; +} + +.about-testimonial-h2 { + color: var(--white); + margin-bottom: 30px; +} + +.about-testimonial-card-inner { + max-width: 800px; + margin: 0 auto; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 20px; + border-radius: 12px; +} + +.about-testimonial-quote { + font-size: 22px; + font-style: italic; + margin-bottom: 24px; +} + +.about-testimonial-author { + font-weight: bold; + color: var(--orange); + font-size: 18px; +} + +.about-testimonial-role { + color: var(--gray-300); + font-size: 14px; +} + +.about-faq-container { + max-width: 800px; + margin: 0 auto; + padding: 0 20px; +} + +.about-faq-eyebrow { + margin: 0 auto 16px; + justify-content: center; +} + +.about-faq-h2 { + text-align: center; + margin-bottom: 40px; +} + +.about-cta-section { + text-align: center; + background: var(--navy); + color: var(--white); +} + +.about-cta-sub { + opacity: .7; +} + +@keyframes float { + 0% { + transform: translateY(0px); + } + + 50% { + transform: translateY(-15px); + } + + 100% { + transform: translateY(0px); + } +} + +.floating-card { + animation: float 4s ease-in-out infinite; +} + +.testimonials-slider { + position: relative; + max-width: 800px; + margin: 0 auto; + overflow: hidden; +} + +.slider-inner { + display: flex; + transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); +} + +.slide { + min-width: 100%; + /* padding: 0 20px; */ + box-sizing: border-box; +} + +.slider-controls { + display: flex; + gap: 16px; + justify-content: center; + margin-top: 40px; +} + +.slider-btn { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.05); + color: var(--white); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 50%; + cursor: pointer; + transition: all 0.3s; + font-size: 24px; +} + +.slider-btn:hover { + background: var(--orange); + border-color: var(--orange); + transform: scale(1.1); +} + +.faq-accordion .faq-item { + border: 1px solid var(--gray-200); + border-radius: 12px; + margin-bottom: 16px; + overflow: hidden; + background: var(--white); + transition: all 0.3s; +} + +.faq-accordion .faq-item:hover { + border-color: var(--orange); + box-shadow: 0 10px 30px rgba(221, 107, 32, 0.05); +} + +.faq-header { + padding: 18px 24px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; +} + +.faq-question { + font-size: 18px; + font-weight: 600; + color: var(--navy); + transition: color 0.3s; + margin: 0; +} + +.faq-header:hover .faq-question { + color: var(--orange); +} + +.faq-answer-collapse { + overflow: hidden; + transition: max-height 0.5s ease; + max-height: 0; +} + +.faq-answer-collapse.open { + max-height: 300px; +} + +.faq-answer-inner { + padding: 0 24px 20px; + color: var(--gray-600); + line-height: 1.6; +} + +.faq-icon { + font-size: 24px; + color: var(--orange); + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); + line-height: 1; +} + +.faq-icon.open { + transform: rotate(180deg); +} + +.about-image-wrapper { + position: relative; + width: 100%; + height: 500px; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 30px 60px rgba(221, 107, 32, .15); + border: 4px solid var(--orange); +} + +/* -- BLOG PAGES -- */ +.inner-banner { + background: var(--navy); + padding: 160px 80px 100px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + position: relative; + overflow: hidden; +} + +.inner-banner::before { + display: none; +} + +.inner-banner-content { + position: relative; + z-index: 2; + max-width: 700px; +} + +.inner-banner .section-eyebrow { + justify-content: center; +} + +.inner-banner h1 { + color: var(--white); + margin: 20px 0; +} + +.banner-sub { + font-size: 18px; + color: rgba(255, 255, 255, 0.7); + line-height: 1.6; +} + +.blog-grid-section { + background: var(--cream); + padding: 100px 80px; +} + +.blog-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; + max-width: 1400px; + margin: 0 auto; +} + +.blog-card { + background: var(--white); + border-radius: 16px; + overflow: hidden; + text-decoration: none; + color: inherit; + transition: transform 0.3s ease, box-shadow 0.3s ease; + display: flex; + flex-direction: column; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + border: 1px solid var(--gray-200); +} + +.blog-card:hover { + transform: translateY(-10px); + box-shadow: 0 20px 40px rgba(15, 36, 68, 0.15); +} + +.blog-card-img { + position: relative; + height: 240px; + overflow: hidden; +} + +.blog-card-img img { + transition: transform 0.5s ease; +} + +.blog-card:hover .blog-card-img img { + transform: scale(1.1); +} + +.blog-card-category { + position: absolute; + top: 20px; + left: 20px; + background: var(--orange); + color: var(--white); + padding: 6px 16px; + border-radius: 4px; + font-family: var(--font-display); + font-size: 12px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + z-index: 2; +} + +.blog-card-body { + padding: 30px; + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.blog-card-date { + font-size: 13px; + color: var(--gray-600); + margin-bottom: 12px; + font-weight: 500; +} + +.blog-card-title { + font-family: var(--font-display); + font-size: 24px; + font-weight: 700; + color: var(--navy); + line-height: 1.25; + margin-bottom: 16px; + text-transform: uppercase; +} + +.blog-card-excerpt { + font-size: 15px; + line-height: 1.6; + color: var(--gray-600); + margin-bottom: 24px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.blog-card-footer { + margin-top: auto; + display: flex; + align-items: center; +} + +.read-more { + color: var(--orange); + font-family: var(--font-display); + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + display: flex; + align-items: center; + gap: 8px; +} + +.arrow-icon { + transition: transform 0.3s ease; +} + +.blog-card:hover .arrow-icon { + transform: translateX(5px); +} + +/* Detail Page */ +.detail-banner { + background: var(--navy); + padding: 160px 80px 120px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + position: relative; +} + +.detail-banner .section-eyebrow { + justify-content: center; + margin-bottom: 24px; +} + +.detail-title { + font-family: var(--font-display); + font-size: clamp(32px, 5vw, 64px); + font-weight: 800; + color: var(--white); + text-transform: uppercase; + line-height: 1.1; + margin-bottom: 24px; + max-width: 1000px; +} + +.detail-meta { + font-size: 15px; + color: rgba(255, 255, 255, 0.6); + font-weight: 500; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.detail-content-section { + background: var(--white); +} + +.detail-container { + max-width: 1000px; + margin: 0 auto; + /* padding: 0 40px; */ +} + +.big-image-wrap { + position: relative; + z-index: 5; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); + border-radius: 20px; + overflow: hidden; + margin-bottom: 60px; +} + +.big-image { + width: 100%; + height: 500px; + object-fit: cover; + display: block; +} + +.detail-body { + font-size: 18px; + line-height: 1.8; + color: var(--gray-800); +} + +.detail-body p { + margin-bottom: 30px; +} + +.split-images { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin: 50px 0; +} + +.small-image-wrap { + border-radius: 12px; + overflow: hidden; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); +} + +.small-image { + width: 100%; + height: 350px; + object-fit: cover; + display: block; +} + +.detail-footer { + margin-top: 60px; + padding-top: 40px; + border-top: 1px solid var(--gray-200); + text-align: center; +} + +@media (max-width: 1200px) { + .blog-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 1024px) { + .detail-banner { + padding: 140px 40px 100px; + } + + .detail-container { + padding: 0; + } +} + +@media (max-width: 768px) { + .blog-grid { + grid-template-columns: 1fr; + } + + .inner-banner { + padding: 140px 20px 80px; + } + + .blog-grid-section { + padding: 60px 20px; + } + + .detail-banner { + padding: 120px 20px 80px; + } + + .big-image-wrap { + margin-top: -60px; + } + + .split-images { + grid-template-columns: 1fr; + } + + .detail-title { + font-size: 32px; + } +} + +/* -- RENTALS PAGE -- */ +.intro-text { + font-size: 20px; + line-height: 1.7; + color: var(--gray-800); + margin-bottom: 30px; +} + +.info-bar { + background: var(--cream); + padding: 15px 30px; + border-radius: 8px; + border-left: 4px solid var(--orange); + display: inline-block; + font-weight: 600; + color: var(--navy); +} + +.rental-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; +} + +.rental-item-card { + background: var(--orange); + border-radius: 12px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(221, 107, 32, 0.15); + transition: all 0.3s ease; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.rental-item-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); +} + +.rental-item-img { + height: 180px; + position: relative; +} + +.rental-item-body { + padding: 24px; +} + +.rental-item-name { + font-family: var(--font-display); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--white); + margin-bottom: 8px; +} + +.rental-item-desc { + font-size: 13px; + color: rgba(255, 255, 255, 0.85); + line-height: 1.4; +} + +.app-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; +} + +.app-card { + display: flex; + align-items: flex-start; + gap: 24px; + background: var(--gray-100); + padding: 32px; + border-radius: 16px; + transition: background 0.3s ease; +} + +.app-card:hover { + background: var(--cream); +} + +.app-num { + font-family: var(--font-display); + font-size: 48px; + font-weight: 800; + color: var(--orange); + line-height: 1; + opacity: 0.5; +} + +.app-title { + font-family: var(--font-display); + font-size: 24px; + font-weight: 700; + color: var(--navy); + text-transform: uppercase; + margin-bottom: 8px; +} + +.app-desc { + font-size: 15px; + color: var(--gray-600); +} + +.benefits-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; +} + +.benefits-list { + list-style: none; +} + +.benefits-list li { + font-size: 18px; + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 12px; +} + +.benefits-list li::before { + content: '?'; + color: var(--orange); + font-weight: bold; + font-size: 20px; +} + +@media (max-width: 1200px) { + .rental-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 992px) { + .rental-grid { + grid-template-columns: repeat(2, 1fr); + } + + .benefits-container { + grid-template-columns: 1fr; + gap: 40px; + } +} + +@media (max-width: 768px) { + .app-grid { + grid-template-columns: 1fr; + } + + .rental-grid { + grid-template-columns: 1fr; + } + + .intro-text { + font-size: 18px; + } +} + +/* -- BREADCRUMB -- */ +.banner-breadcrumb { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + font-family: var(--font-display); + font-size: 13px; + font-weight: 600; + color: var(--orange); + text-transform: uppercase; + letter-spacing: 0.12em; + margin-bottom: 20px; +} + +.banner-breadcrumb a { + color: rgba(255, 255, 255, 0.45); + text-decoration: none; + transition: color 0.2s; + display: flex; + align-items: center; + gap: 8px; +} + +.banner-breadcrumb a:hover { + color: var(--white); +} + +.banner-breadcrumb .separator { + color: rgba(255, 255, 255, 0.15); + font-size: 10px; +} + +/* -- BACK LINK -- */ +.back-link { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 10px 20px; + background: var(--gray-100); + color: var(--navy); + text-decoration: none; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + border-radius: 50px; + margin-bottom: 40px; + transition: all 0.3s ease; + border: 1px solid transparent; +} + +.back-link:hover { + background: var(--white); + border-color: var(--orange); + color: var(--orange); + transform: translateX(-5px); + box-shadow: 0 5px 15px rgba(221, 107, 32, 0.1); +} + +/* -- MANUFACTURING UI UPGRADE -- */ +.mfg-card { + background: var(--navy); + padding: 50px 40px; + border-radius: 20px; + transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); + position: relative; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.05); + display: flex; + flex-direction: column; + height: 100%; +} + +.mfg-card:hover { + transform: translateY(-10px); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); + border-color: rgba(221, 107, 32, 0.3); +} + +.mfg-card .section-h2 { + color: var(--white) !important; + font-size: 24px !important; + margin-bottom: 25px !important; +} + +.mfg-card .service-list li { + color: rgba(255, 255, 255, 0.7); + font-size: 15px; + margin-bottom: 12px; + line-height: 1.5; + display: flex; + align-items: flex-start; + gap: 12px; +} + +.mfg-card .service-list li::before { + margin-top: 8px; +} + +/* -- RENTAL WHY CHOOSE (TIMELINE UI) -- */ +.rental-why-section { + padding: 0 !important; + background: var(--navy); + display: flex; + min-height: 650px; +} + +.rental-why-img { + flex: 1; + position: relative; + min-height: 500px; +} + +.rental-why-content { + flex: 1; + padding: 80px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.rental-why-title { + font-family: var(--font-display); + font-size: 48px; + color: var(--white); + margin-bottom: 48px; + font-weight: 700; + line-height: 1.1; + text-transform: uppercase; +} + +.rental-timeline { + list-style: none; + padding: 0; +} + +.rental-timeline-item { + position: relative; + display: flex; + align-items: center; + gap: 24px; + padding-bottom: 40px; +} + +.rental-timeline-item:last-child { + padding-bottom: 0; +} + +.rental-timeline-item::after { + content: ""; + position: absolute; + left: 32px; + top: 60px; + bottom: 0; + width: 1px; + border-left: 2px dashed rgba(255, 255, 255, 0.2); + z-index: 1; +} + +.rental-timeline-item:last-child::after { + display: none; +} + +.timeline-icon { + flex-shrink: 0; + width: 64px; + height: 64px; + background: var(--orange); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + color: var(--white); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); +} + +.timeline-text { + font-family: var(--font-body); + color: var(--white); + font-size: 18px; + font-weight: 500; + line-height: 1.4; +} + +@media (max-width: 992px) { + .rental-why-section { + flex-direction: column; + } + + .rental-why-img { + height: 400px; + } + + .rental-why-content { + padding: 48px 24px; + } + + .rental-why-title { + font-size: 36px; + } +} + +/* -- RENTAL INTRO REDESIGN -- */ +.progress-container { + display: flex; + align-items: center; + gap: 30px; + margin-top: 50px; +} + +.circular-progress { + width: 100px; + height: 100px; + border-radius: 50%; + background: conic-gradient(var(--orange) 85% 0, var(--gray-200) 0); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.circular-progress::before { + content: ""; + position: absolute; + width: 80px; + height: 80px; + background: var(--white); + border-radius: 50%; +} + +.progress-value { + position: relative; + z-index: 1; + font-family: var(--font-display); + font-size: 22px; + font-weight: 800; + color: var(--orange); +} + +.progress-info h4 { + font-family: var(--font-display); + font-size: 20px; + color: var(--navy); + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.progress-info p { + font-size: 14px; + color: var(--gray-600); + line-height: 1.5; + max-width: 300px; +} + +/* -- RENTAL PARALLAX CTA -- */ +.rental-parallax-cta { + position: relative; + background-image: url("/assets/fence-rentals-hero.png"); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + padding: 120px 0 !important; +} + +.rental-parallax-cta::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(15, 36, 68, 0.85); + z-index: 1; +} + +.rental-parallax-cta .container { + position: relative; + z-index: 2; +} +/* -- PRODUCT DETAIL RESPONSIVE GRID -- */ +.detail-grid { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 80px; + align-items: start; +} + +.detail-image-column { + position: relative; + width: 100%; + height: 600px; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 20px 40px rgba(0,0,0,0.05); + background: var(--gray-100); +} + +.detail-info-column { + padding-top: 20px; + display: flex; + flex-direction: column; +} + +@media (max-width: 1024px) { + .detail-grid { + grid-template-columns: 1fr; + gap: 48px; + } + + .detail-info-column { + order: 1; + padding-top: 0; + } + + .detail-image-column { + order: 2; + height: 450px; + } +} + +/* -- MOBILE MENU -- */ +.menu-toggle { + display: none; + background: none; + border: none; + cursor: pointer; + padding: 10px; + z-index: 1100; +} + +.hamburger { + width: 24px; + height: 18px; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.hamburger span { + display: block; + width: 100%; + height: 2px; + background-color: var(--white); + transition: all 0.3s ease; +} + +.hamburger.active span:nth-child(1) { + transform: translateY(8px) rotate(45deg); +} + +.hamburger.active span:nth-child(2) { + opacity: 0; +} + +.hamburger.active span:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); +} + +.mobile-cta-li { + display: none; +} + +@media (max-width: 992px) { + nav { + padding: 0 24px; + justify-content: space-between; + } + + .menu-toggle { + display: block; + } + + .desktop-cta { + display: none; + } + + .nav-links { + display: flex; + position: fixed; + top: 64px; + left: 0; + width: 100%; + height: calc(100vh - 64px); + background: var(--navy); + flex-direction: column; + padding: 40px 0; + gap: 0; + transition: transform 0.4s ease; + transform: translateX(100%); + z-index: 999; + border-top: 1px solid rgba(255, 255, 255, 0.1); + } + + .nav-links.active { + transform: translateX(0); + } + + .nav-links li { + width: 100%; + text-align: center; + } + + .nav-links a { + font-size: 20px; + display: block; + padding: 10px 0; + } + + .mobile-cta-li { + display: block; + padding: 0 40px; + margin-top: 20px; + } +} + +/* -- BLOG DETAIL RESPONSIVE FIX -- */ +@media (max-width: 768px) { + .detail-content-section { + padding: 60px 20px !important; + } + + /* .detail-container { + padding: 0 20px !important; + } */ + + .big-image-wrap { + margin-top: 0 !important; + margin-bottom: 30px; + } +} + +/* -- MANUFACTURING GRID RESPONSIVE -- */ +.mfg-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; +} + +@media (max-width: 768px) { + .mfg-grid { + grid-template-columns: 1fr !important; + } +} diff --git a/app/layout.tsx b/app/layout.tsx index 176a3ce..76b3442 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -20,7 +20,7 @@ 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", + icon: "/assets/favicon.webp", }, }; diff --git a/app/login/page.tsx b/app/login/page.tsx index bed685c..1a4a354 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -56,10 +56,25 @@ export default function LoginPage() { }; return ( -
-
-

Login

-

Access your pricing and order history.

+
+ {/* ── INNER BANNER ── */} + {/*
+
+

Customer Login

+
+ + + Home + + / + Login +
+
+
*/} + +
+
+

Access Your Account

{err &&
{err}
} {msg &&
{msg}
} @@ -105,5 +120,6 @@ export default function LoginPage() {
*/}
+
); } diff --git a/app/manufacturing/page.tsx b/app/manufacturing/page.tsx new file mode 100644 index 0000000..0c6911a --- /dev/null +++ b/app/manufacturing/page.tsx @@ -0,0 +1,145 @@ +"use client"; + +import Link from 'next/link'; +import Image from 'next/image'; + +export default function ManufacturingPage() { + return ( +
+ {/* Inner Banner */} +
+
+

Job Order Manufacturing

+
+ + + Home + + / + Manufacturing +
+
+
+ + {/* Intro Section */} +
+
+
+
+
Our Capabilities
+

Bulk & Job Order Manufacturing

+
+

+ VG Fence specializes in bulk and job order manufacturing for contractors, developers, and businesses. +

+

+ From residential and commercial gates to brackets or custom metal components, we handle production from start to finish — ensuring high-quality, durable products delivered on time. +

+
+ + Get a custom quote today for your next project → + +
+
+
+ +
+
+ Industrial metal fabrication and manufacturing +
+
+
Fence Solutions
+ {/*
Fence Solutions
*/} +
+
+
+
+
+ + {/* Services Grid */} +
+
+
+
What We Build
+

Specialized Production.

+
+ +
+ {/* Gates */} +
+
+ +
+

Residential & Commercial Gates

+
    +
  • Sliding, swing, and decorative gates
    • +
  • Custom sizes and finishes
    • +
  • Galvanized or powder-coated for durability
    • +
  • Factory-fabricated for precise fit and fast installation
    • +
+
+ + {/* Components */} +
+
+ +
+

Brackets, Rails & Metal Components

+
    +
  • Fence brackets, mounting hardware, rail supports
    • +
  • Custom metal components for all types of projects
    • +
  • Bulk manufacturing for contractors and developers
    • +
  • High-quality steel with consistent dimensions
    • +
+
+ + {/* Bulk Orders */} +
+
+ +
+

Bulk & Job Orders

+
    +
  • Large-scale production for commercial or municipal projects
    • +
  • Pre-assembled material bundles for faster execution
    • +
  • Optional customization for dimensions and finishes
    • +
  • Competitive pricing for bulk quantities
    • +
+
+ + {/* Fabrication */} +
+
+ +
+

Full Fabrication Works

+
    +
  • Cutting, bending, welding, and finishing
    • +
  • Custom fabrication for any size requirement
    • +
  • Assistance with finishing touches for panels and accessories
    • +
  • Ensures every product meets durability standards
    • +
+
+
+
+
+ + {/* 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 +
+
+
+ ); +} diff --git a/app/products/[slug]/page.tsx b/app/products/[slug]/page.tsx index 82d7959..06986c9 100644 --- a/app/products/[slug]/page.tsx +++ b/app/products/[slug]/page.tsx @@ -24,17 +24,36 @@ export default async function ProductDetailPage({ } return ( -
-
- - ← Back to Catalog +
+ {/* ── INNER BANNER ── */} +
+
+

{product.name}

+
+ + + Home + + / + Products + / + {product.name} +
+
+
+ +
+
+ + + Back to Catalog -
+
{/* Left: Image */} -
+
{product!.name} {/* Right: Info */} -
+
{product!.category}

{product!.name}

@@ -70,7 +89,7 @@ export default async function ProductDetailPage({
*/}
- + Contact for Quote & Specs → {/*

@@ -81,5 +100,6 @@ export default async function ProductDetailPage({

+
); } diff --git a/app/products/page.tsx b/app/products/page.tsx index 033bdc3..c8b7c8c 100644 --- a/app/products/page.tsx +++ b/app/products/page.tsx @@ -13,32 +13,33 @@ export default function ProductsPage() { 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. -

+
+
+

Our Product Catalog

+
+ + + Home + + / + Products +
{/* Grid Content */} -
-
+
+
{currentProducts.map((product) => (
{product.name} + {/* ── INNER BANNER ── */} +
+
+

Fence Rentals

+
+ + + Home + + / + Rentals +
+
+
+ + {/* ── INTRO SECTION (REDESIGNED) ── */} +
+
+
+
+
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 +
+
+
+
+
+ + {/* ── PRODUCTS SECTION ── */} +
+
+
+
Equipment List
+

Products & Equipment Available

+
+ +
+ {products.map((p, i) => ( +
+
+ {p.name} +
+
+

{p.name}

+

{p.desc}

+
+
+ ))} +
+
+
+ + {/* ── APPLICATIONS SECTION ── */} +
+
+
+
Tailored Solutions
+

Applications

+
+ +
+ {applications.map((app) => ( +
+
{app.id}
+
+

{app.title}

+

{app.desc}

+
+
+ ))} +
+
+
+ + {/* ── WHY CHOOSE SECTION (IMAGE + TIMELINE) ── */} +
+
+ VG Fence Temporary Fencing +
+
+

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

+ Request a Quote +
+
+
+ +
+ ); +} diff --git a/components/Footer.tsx b/components/Footer.tsx index dc26c83..52d206b 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -6,7 +6,7 @@ export default function Footer() {
- VG Fence Products + VG Fence Products
Ontario's B2B fence supply partner — KWC & beyond
📍 Serving 250km radius from Kitchener-Waterloo
@@ -31,6 +31,7 @@ export default function Footer() {
Services