174 lines
8.8 KiB
TypeScript
174 lines
8.8 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/manufacturing-hero.png" },
|
|
{ name: "Fence Wheels", desc: "Smooth movement for gate panels", img: "/assets/temp-fence-panel.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">
|
|
<h1 className="inner-banner-title">Fence <span>Rentals.</span></h1>
|
|
<div className="inner-banner-breadcrumbs">
|
|
<Link href="/">Home</Link>
|
|
<span>/</span>
|
|
Rentals
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── INTRO SECTION (REDESIGNED) ── */}
|
|
<section className="section rental-intro">
|
|
<div className="container">
|
|
<div className="about-story-layout">
|
|
<div className="about-story-text">
|
|
<div className="section-eyebrow">FENCE RENTALS</div>
|
|
<h2 className="section-h2">
|
|
Temporary Fence Rentals for <span>Construction, Events, and Security</span>
|
|
</h2>
|
|
<p>
|
|
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' }}>
|
|
<span style={{ fontSize: '15px', fontWeight: 700, color: 'var(--navy)' }}>Installation support for temporary fences is available for select projects</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="about-image-column">
|
|
<div className="about-image-wrapper">
|
|
<Image
|
|
src="/assets/about-fencing.png"
|
|
alt="Industrial fencing installation experts"
|
|
fill
|
|
className="about-image-cover"
|
|
/>
|
|
</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 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 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 <span>VG Fence Rentals</span></h2>
|
|
|
|
<ul className="rental-timeline">
|
|
<li className="rental-timeline-item">
|
|
<div className="timeline-icon">
|
|
<svg width="24" height="24" 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="24" height="24" 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="24" height="24" 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="24" height="24" 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="24" height="24" 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 white">Secure Your <span>Temporary Fencing</span> Today</h2>
|
|
<Link href="/contact" className="btn-primary">Request a Quote</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
);
|
|
}
|