142 lines
7.9 KiB
TypeScript
142 lines
7.9 KiB
TypeScript
import Link from 'next/link';
|
||
|
||
export default function Products() {
|
||
const products = [
|
||
{
|
||
name: "Aluminum Railing",
|
||
desc: "Residential and commercial aluminum railing for decks, balconies, stairs, and pools. Multiple profiles and finishes.",
|
||
tags: ["Residential", "Commercial", "Pool-safe"],
|
||
badge: "Railing",
|
||
img: "/assets/home/our-products/aluminium-railing.webp",
|
||
href: "#",
|
||
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. All gauges, heights, posts, gates, and hardware in stock.",
|
||
tags: ["Black", "Galvanized", "Commercial", "Residential"],
|
||
badge: "Fencing",
|
||
img: "/assets/home/our-products/chain-link-fence.webp",
|
||
href: "/products/chain-link-fence",
|
||
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 panels in three premium colours. Natural wood look, zero rot, no painting, no splitting.",
|
||
tags: ["Ancient Wood", "Golden Teak", "Anthracite Grey"],
|
||
badge: "Fencing",
|
||
img: "/assets/home/our-products/composite-fence.webp",
|
||
href: "#",
|
||
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: "3 systems — post-mount, standoff/spigot, fascia-mount. 10mm & 12mm tempered glass. Pool-compliant configurations available.",
|
||
tags: ["Pool-safe", "Residential", "Commercial"],
|
||
badge: "Railing",
|
||
img: "/assets/home/our-products/glass-railing.webp",
|
||
href: "#",
|
||
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: "4 models — Tokio, Rio, Denver, Oslo. Rackable panels in 48″ and 60″ heights. Matching gates, posts, caps, and hardware.",
|
||
tags: ["Tokio", "Rio", "Denver", "Oslo"],
|
||
badge: "Fencing",
|
||
img: "/assets/home/our-products/ornamental-fence.webp",
|
||
href: "#",
|
||
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. Contractor pricing and bulk ordering.",
|
||
tags: ["Stain & Seal", "Clean & Bright", "High margin"],
|
||
badge: "Wood Care",
|
||
img: "/assets/home/our-products/expert-stain.webp",
|
||
href: "#",
|
||
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>
|
||
)
|
||
},
|
||
{
|
||
name: "Fence Armor",
|
||
desc: "Post caps (4×4, 6×6), post guards (11 sizes), rot barrier, RotGuard, PostSaver sleeves, and 7″ pro stain brush. Black steel.",
|
||
tags: ["Post Caps", "Post Guards", "Rot Barrier"],
|
||
badge: "Accessories",
|
||
img: "/assets/home/our-products/fence-armor.webp",
|
||
href: "#",
|
||
icon: (
|
||
<svg viewBox="0 0 22 22" fill="none"><circle cx="7" cy="4" r="3" fill="white"/><rect x="5" y="7" width="4" height="11" rx="1" fill="white"/><rect x="3" y="11" width="8" height="2" rx="1" fill="white" opacity=".5"/></svg>
|
||
)
|
||
},
|
||
{
|
||
name: "Temporary Fence Rentals",
|
||
desc: "Construction, demolition, events, beer gardens, festivals, and emergencies. 6×10 and 6×5 panels, gates, and screens. Same-day KWC.",
|
||
tags: ["Construction", "Events", "Rental"],
|
||
badge: "Rental",
|
||
img: "/assets/home/our-products/temporary-fence-rentals.webp",
|
||
href: "#",
|
||
icon: (
|
||
<svg viewBox="0 0 22 22" fill="none"><rect x="2" y="5" width="5" height="13" rx="1.5" fill="white"/><rect x="15" y="5" width="5" height="13" rx="1.5" fill="white"/><rect x="6" y="7" width="10" height="2" rx="1" fill="white" opacity=".7"/><rect x="6" y="13" width="10" height="2" rx="1" fill="white" opacity=".7"/></svg>
|
||
)
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section className="products-section" id="products">
|
||
<div className="products-header reveal">
|
||
<div>
|
||
<div className="section-eyebrow">Our products</div>
|
||
<h2 className="sh">Everything you<br/>need to <span>build.</span></h2>
|
||
</div>
|
||
<p className="products-header-right">Eight product lines in stock, ready for scheduled delivery to your job site anywhere in our 250km Ontario radius.</p>
|
||
</div>
|
||
|
||
<div className="products-grid reveal">
|
||
{products.map((product, index) => (
|
||
<Link href={product.href} key={index} className="product-card">
|
||
<div className="product-img-area">
|
||
<img src={product.img} alt={product.name} />
|
||
<div className="img-badge">{product.badge}</div>
|
||
</div>
|
||
<div className="product-card-body">
|
||
<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, tIndex) => (
|
||
<span key={tIndex} className="product-tag">{tag}</span>
|
||
))}
|
||
</div>
|
||
<div className="product-arrow">→</div>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
|
||
<div className="product-card product-cta-card">
|
||
<div className="product-card-body" style={{ justifyContent: 'space-between', height: '100%', minHeight: '200px' }}>
|
||
<div>
|
||
<div style={{ fontFamily: 'var(--fd)', fontSize: '13px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '14px' }}>Need a custom quote?</div>
|
||
<div style={{ fontFamily: 'var(--fd)', fontSize: '24px', fontWeight: 800, textTransform: 'uppercase', color: 'var(--white)', lineHeight: 1.1, marginBottom: '10px' }}>Talk to our<br/>supply team.</div>
|
||
<div style={{ fontSize: '12px', color: 'rgba(255,255,255,.5)', lineHeight: 1.6 }}>Bulk orders · Contractor accounts · Scheduled deliveries · Job site planning</div>
|
||
</div>
|
||
<a href="/contact" className="btn-primary" style={{ textAlign: 'center', marginTop: '20px', display: 'block' }}>Request pricing →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|