190 lines
10 KiB
TypeScript
190 lines
10 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export const metadata = {
|
|
title: "Fence Rentals | VG Fence Products",
|
|
description: "Temporary fence rentals for construction sites, events, and security perimeters. Flexible rental terms and quick delivery.",
|
|
};
|
|
|
|
export default function RentalsPage() {
|
|
const products = [
|
|
{ name: "Temporary Fence Panels", desc: "Durable and easy to assemble", img: "/assets/temp-fence-panel.png" },
|
|
{ name: "Temporary Fence Gates", desc: "Single or double swing gates", img: "/assets/about-fencing.png" },
|
|
{ name: "Fence Wheels", desc: "Smooth movement for gate panels", img: "/assets/manufacturing-hero.png" },
|
|
{ name: "Wind Bracing", desc: "Prevent fence panels from tipping", img: "/assets/about-fencing.png" },
|
|
{ name: "Fence Bases", desc: "Concrete, rubber, or plastic bases for stability", img: "/assets/manufacturing-hero.png" },
|
|
{ name: "Fence Clamps & Accessories", desc: "Secure connections for panels", img: "/assets/about-fencing.png" },
|
|
{ name: "Sandbags / Ballast", desc: "Extra stability for windy or busy areas", img: "/assets/manufacturing-hero.png" },
|
|
{ name: "Debris & Safety Netting", desc: "Optional add-ons for construction sites", img: "/assets/about-fencing.png" },
|
|
];
|
|
|
|
const applications = [
|
|
{ id: 1, title: "Construction Sites", desc: "Keep workers and equipment secure" },
|
|
{ id: 2, title: "Events and Festivals", desc: "Crowd control and perimeter fencing" },
|
|
{ id: 3, title: "Sports and Film Production", desc: "Temporary barriers for staff and public safety" },
|
|
{ id: 4, title: "Short-Term and Long-Term Projects", desc: "Flexible rental periods" },
|
|
];
|
|
|
|
return (
|
|
<div className="rentals-page">
|
|
{/* ── INNER BANNER ── */}
|
|
<section className="inner-banner fade-up">
|
|
<div className="inner-banner-content">
|
|
<h1 className="section-h2">Fence <span>Rentals</span></h1>
|
|
<div className="banner-breadcrumb" style={{ marginTop: '30px', marginBottom: '0' }}>
|
|
<Link href="/">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Home
|
|
</Link>
|
|
<span className="separator">/</span>
|
|
<span>Rentals</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── INTRO SECTION (REDESIGNED) ── */}
|
|
<section className="section rental-intro">
|
|
<div className="container">
|
|
<div className="about-story-layout" style={{ alignItems: 'center' }}>
|
|
<div className="about-story-text" style={{ textAlign: 'left' }}>
|
|
<div className="section-eyebrow">FENCE RENTALS</div>
|
|
<h2 className="section-h2" style={{ fontSize: '48px', lineHeight: '1.1', marginBottom: '30px' }}>
|
|
Temporary Fence Rentals for <span>Construction, Events, and Security</span>
|
|
</h2>
|
|
<p style={{ fontSize: '16px', color: 'var(--gray-600)', lineHeight: '1.8', marginBottom: '24px' }}>
|
|
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.
|
|
</p>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '15px', padding: '15px 20px', background: 'rgba(232,87,42,0.05)', borderLeft: '4px solid var(--orange)', borderRadius: '4px', marginBottom: '32px' }}>
|
|
{/* <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> */}
|
|
<span style={{ fontSize: '15px', fontWeight: 700, color: 'var(--navy)' }}>Installation support for temporary fences is available for select projects</span>
|
|
</div>
|
|
|
|
{/* <div className="progress-container">
|
|
<div className="circular-progress">
|
|
<span className="progress-value">85%</span>
|
|
</div>
|
|
<div className="progress-info">
|
|
<h4>Satisfied Customer</h4>
|
|
<p>Reliable support for contractors and event managers across Ontario projects.</p>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
|
|
<div className="about-image-column">
|
|
<div className="about-image-wrapper" style={{ padding: '15px', background: 'var(--white)', boxShadow: '0 30px 60px rgba(0,0,0,0.1)', borderRadius: '4px' }}>
|
|
<Image
|
|
src="/assets/about-fencing.png"
|
|
alt="Industrial fencing installation experts"
|
|
fill
|
|
style={{ objectFit: 'cover', borderRadius: '2px' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── PRODUCTS SECTION ── */}
|
|
<section className="section rental-products" style={{ background: 'var(--gray-100)' }}>
|
|
<div className="container">
|
|
<div style={{ textAlign: 'center', marginBottom: '60px' }}>
|
|
<div className="section-eyebrow" style={{ justifyContent: 'center' }}>Equipment List</div>
|
|
<h2 className="section-h2">Products & Equipment <span>Available</span></h2>
|
|
</div>
|
|
|
|
<div className="rental-grid">
|
|
{products.map((p, i) => (
|
|
<div key={i} className="rental-item-card">
|
|
<div className="rental-item-img">
|
|
<Image src={p.img} alt={p.name} fill style={{ objectFit: 'cover' }} />
|
|
</div>
|
|
<div className="rental-item-body">
|
|
<h3 className="rental-item-name">{p.name}</h3>
|
|
<p className="rental-item-desc">{p.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── APPLICATIONS SECTION ── */}
|
|
<section className="section rental-apps">
|
|
<div className="container">
|
|
<div style={{ textAlign: 'center', marginBottom: '60px' }}>
|
|
<div className="section-eyebrow" style={{ justifyContent: 'center' }}>Tailored Solutions</div>
|
|
<h2 className="section-h2">Applications</h2>
|
|
</div>
|
|
|
|
<div className="app-grid">
|
|
{applications.map((app) => (
|
|
<div key={app.id} className="app-card">
|
|
<div className="app-num">{app.id}</div>
|
|
<div className="app-content">
|
|
<h3 className="app-title">{app.title}</h3>
|
|
<p className="app-desc">{app.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── WHY CHOOSE SECTION (IMAGE + TIMELINE) ── */}
|
|
<section className="rental-why-section fade-up">
|
|
<div className="rental-why-img">
|
|
<Image
|
|
src="/assets/fence-rentals-hero.png"
|
|
alt="VG Fence Temporary Fencing"
|
|
fill
|
|
style={{ objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
<div className="rental-why-content">
|
|
<h2 className="rental-why-title">Why Choose VG Fence Rentals</h2>
|
|
|
|
<ul className="rental-timeline">
|
|
<li className="rental-timeline-item">
|
|
<div className="timeline-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20"/><path d="m5 15 7-7 7 7"/></svg>
|
|
</div>
|
|
<div className="timeline-text">Flexible rental terms (daily, weekly, monthly)</div>
|
|
</li>
|
|
<li className="rental-timeline-item">
|
|
<div className="timeline-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7L22 14v-2a2 2 0 0 0-2-2h-6Z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
|
|
</div>
|
|
<div className="timeline-text">Durable and professional-grade materials</div>
|
|
</li>
|
|
<li className="rental-timeline-item">
|
|
<div className="timeline-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="3" width="15" height="13"/><polyline points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
|
|
</div>
|
|
<div className="timeline-text">Quick delivery & setup support available</div>
|
|
</li>
|
|
<li className="rental-timeline-item">
|
|
<div className="timeline-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
|
</div>
|
|
<div className="timeline-text">Galvanized or black finishes</div>
|
|
</li>
|
|
<li className="rental-timeline-item">
|
|
<div className="timeline-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
</div>
|
|
<div className="timeline-text">Reliable support for contractors and event managers</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div style={{ marginTop: '60px', borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: '40px' }}>
|
|
<h2 className="section-h2" style={{ color: 'var(--white)', fontSize: '32px', marginBottom: '30px' }}>Secure Your <span>Temporary Fencing</span> Today</h2>
|
|
<Link href="/contact" className="btn-primary">Request a Quote</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
);
|
|
}
|