81 lines
5.0 KiB
TypeScript
81 lines
5.0 KiB
TypeScript
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: <svg viewBox="0 0 22 22" fill="none"><rect x="1" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="9" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="1" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="1" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /></svg>
|
|
},
|
|
{
|
|
name: "Chain Link Fence",
|
|
desc: "Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.",
|
|
tags: ["Black", "Galvanized", "Security"],
|
|
icon: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="2" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="2" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /><line x1="8" y1="3" x2="8" y2="19" stroke="white" strokeWidth="1.5" /><line x1="14" y1="3" x2="14" y2="19" stroke="white" strokeWidth="1.5" /></svg>
|
|
},
|
|
{
|
|
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: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="2" width="6" height="18" rx="2" fill="white" opacity=".7" /><rect x="14" y="2" width="6" height="18" rx="2" fill="white" opacity=".7" /><rect x="5" y="2" width="12" height="18" rx="2" fill="white" opacity=".35" /></svg>
|
|
},
|
|
{
|
|
name: "Glass Railing",
|
|
desc: "Premium tempered glass railing for pools, decks, balconies, and commercial applications.",
|
|
tags: ["Pool-safe", "Tempered Glass", "Modern"],
|
|
icon: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="6" width="18" height="11" rx="2" fill="white" opacity=".25" stroke="white" strokeWidth="1.5" /><rect x="4" y="2" width="2" height="18" rx="1" fill="white" /><rect x="16" y="2" width="2" height="18" rx="1" fill="white" /></svg>
|
|
},
|
|
{
|
|
name: "Ornamental Fence",
|
|
desc: "Classic black ornamental iron fence for residential properties. Elegant, durable, and timeless.",
|
|
tags: ["Black Iron", "Residential", "Elegant"],
|
|
icon: <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="2" y1="7" x2="20" y2="7" stroke="white" strokeWidth="1.5" /><line x1="2" y1="11" x2="20" y2="11" stroke="white" strokeWidth="1.5" /><line x1="2" y1="15" x2="20" y2="15" stroke="white" strokeWidth="1.5" /></svg>
|
|
},
|
|
{
|
|
name: "Expert Stain & Seal",
|
|
desc: "Professional-grade wood care products for fences, decks, pergolas, and outdoor structures.",
|
|
tags: ["Wood Care", "High Margin", "Professional"],
|
|
icon: <svg viewBox="0 0 22 22" fill="none"><path d="M4 19 L11 3 L18 19" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" /><circle cx="11" cy="11" r="3.5" fill="white" opacity=".5" /></svg>
|
|
}
|
|
];
|
|
|
|
export default function ProductsPage() {
|
|
return (
|
|
<div className="products-section" style={{ minHeight: '100vh', paddingTop: '144px', paddingBottom: '80px' }}>
|
|
<div style={{ padding: '0 80px', marginBottom: '64px' }}>
|
|
<div className="section-eyebrow">Inventory</div>
|
|
<h1 className="section-h2" style={{ fontSize: '64px' }}>Our <span>Product Lines.</span></h1>
|
|
<p style={{ color: 'var(--gray-600)', maxWidth: '600px', marginTop: '20px', fontSize: '18px' }}>
|
|
Explore our full range of professional fence and railing supplies. All items are available for same-day delivery across Ontario.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="products-grid" style={{ margin: '0 80px' }}>
|
|
{products.map((product, i) => (
|
|
<div key={i} className="product-card">
|
|
<div className="product-icon">
|
|
{product.icon}
|
|
</div>
|
|
<div className="product-name">{product.name}</div>
|
|
<div className="product-desc">{product.desc}</div>
|
|
<div className="product-tags">
|
|
{product.tags.map((tag, j) => (
|
|
<span key={j} className="product-tag">{tag}</span>
|
|
))}
|
|
</div>
|
|
<div style={{ marginTop: '24px' }}>
|
|
<button className="btn-primary" style={{ padding: '8px 20px', fontSize: '12px' }}>Request Specs</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<section className="cta-section" style={{ marginTop: '96px' }}>
|
|
<h2 className="cta-h2">Don't see what you <span>need?</span></h2>
|
|
<p className="cta-sub">We handle custom orders and bulk supplies for large-scale developments.</p>
|
|
<Link href="/#quote" className="btn-white">Contact our supply team</Link>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|