142 lines
7.6 KiB
TypeScript
142 lines
7.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
export default function ManufacturingPage() {
|
|
return (
|
|
<div className="about-page-wrapper">
|
|
<section className="inner-banner">
|
|
<h1 className="inner-banner-title">Job Order <span>Manufacturing.</span></h1>
|
|
<div className="inner-banner-breadcrumbs">
|
|
<Link href="/">Home</Link>
|
|
<span>/</span>
|
|
Manufacturing
|
|
</div>
|
|
</section>
|
|
|
|
{/* Intro Section */}
|
|
<section className="about-section section">
|
|
<div className="container about-story-container">
|
|
<div className="about-story-layout">
|
|
<div>
|
|
<div className="section-eyebrow">Our Capabilities</div>
|
|
<h2 className="section-h2 about-story-h2">Bulk & Job Order <span>Manufacturing</span></h2>
|
|
<div className="about-story-text">
|
|
<p>
|
|
VG Fence specializes in bulk and job order manufacturing for contractors, developers, and businesses.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<div style={{ marginTop: '40px' }}>
|
|
<Link href="/contact" className="btn-primary">
|
|
Get a custom quote today for your next project →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="about-image-column">
|
|
<div className="about-image-wrapper">
|
|
<Image
|
|
src="/assets/manufacturing-hero.png"
|
|
alt="Industrial metal fabrication and manufacturing"
|
|
fill
|
|
className="about-image-cover"
|
|
/>
|
|
</div>
|
|
<div className="floating-card about-floating-card">
|
|
<div className="about-floating-card-100">Fence Solutions</div>
|
|
{/* <div className="about-floating-card-text">Fence Solutions</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Grid */}
|
|
<section className="section" style={{ background: 'var(--gray-100)' }}>
|
|
<div className="container">
|
|
<div style={{ textAlign: 'center', marginBottom: '80px' }}>
|
|
<div className="section-eyebrow center">What We Build</div>
|
|
<h2 className="section-h2">Specialized <span>Production.</span></h2>
|
|
</div>
|
|
|
|
<div className="mfg-grid">
|
|
{/* Gates */}
|
|
<div className="mfg-card">
|
|
<div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/><path d="M3 12h18"/></svg>
|
|
</div>
|
|
<h3 className="section-h2">Residential & <span>Commercial Gates</span></h3>
|
|
<ul className="service-list">
|
|
<li>Sliding, swing, and decorative gates</li>
|
|
<li>Custom sizes and finishes</li>
|
|
<li>Galvanized or powder-coated for durability</li>
|
|
<li>Factory-fabricated for precise fit and fast installation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Components */}
|
|
<div className="mfg-card">
|
|
<div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
|
</div>
|
|
<h3 className="section-h2">Brackets, Rails & <span>Metal Components</span></h3>
|
|
<ul className="service-list">
|
|
<li>Fence brackets, mounting hardware, rail supports</li>
|
|
<li>Custom metal components for all types of projects</li>
|
|
<li>Bulk manufacturing for contractors and developers</li>
|
|
<li>High-quality steel with consistent dimensions</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Bulk Orders */}
|
|
<div className="mfg-card">
|
|
<div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/><path d="m3 9 2.45-4.91A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.79 1.09L21 9"/><path d="M12 3v6"/></svg>
|
|
</div>
|
|
<h3 className="section-h2">Bulk & <span>Job Orders</span></h3>
|
|
<ul className="service-list">
|
|
<li>Large-scale production for commercial or municipal projects</li>
|
|
<li>Pre-assembled material bundles for faster execution</li>
|
|
<li>Optional customization for dimensions and finishes</li>
|
|
<li>Competitive pricing for bulk quantities</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Fabrication */}
|
|
<div className="mfg-card">
|
|
<div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z"/></svg>
|
|
</div>
|
|
<h3 className="section-h2">Full Fabrication <span>Works</span></h3>
|
|
<ul className="service-list">
|
|
<li>Cutting, bending, welding, and finishing</li>
|
|
<li>Custom fabrication for any size requirement</li>
|
|
<li>Assistance with finishing touches for panels and accessories</li>
|
|
<li>Ensures every product meets durability standards</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="cta-section about-cta-section">
|
|
<div className="container">
|
|
<h2 className="cta-h2">Get Your <span>Custom Quote</span> Today</h2>
|
|
<p className="cta-sub">
|
|
Fill out our job order & fabrication request form or call <strong style={{ color: 'var(--navy)' }}>226-888-7999</strong> to discuss your bulk and custom fabrication needs.
|
|
</p>
|
|
<div className="cta-btns">
|
|
<Link href="/contact" className="btn-primary">Contact Us Now</Link>
|
|
<a href="tel:2268887999" className="btn-white-outline">Call Us Today</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|