113 lines
6.6 KiB
TypeScript
113 lines
6.6 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
export default function Products() {
|
|
const products = [
|
|
{
|
|
name: "Aluminum railing",
|
|
desc: "Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.",
|
|
tags: ["Residential", "Commercial"],
|
|
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", "Commercial", "Residential"],
|
|
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 Grey"],
|
|
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", "Residential", "Commercial"],
|
|
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", "Residential"],
|
|
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: ["Stain & Seal", "Clean & Bright", "High margin"],
|
|
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 protection accessories to extend the life of any fence installation. Post caps, guards, and rot barriers.",
|
|
tags: ["Post Caps", "Post Guards", "Rot Barrier"],
|
|
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 site fencing, crowd control, and event barriers available for short or long-term rental.",
|
|
tags: ["Construction", "Events", "Rental"],
|
|
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">
|
|
<div>
|
|
<div className="section-eyebrow">Our products</div>
|
|
<h2 className="section-h2">Everything you<br />need to <span>build.</span></h2>
|
|
</div>
|
|
<p style={{ fontSize: '15px', color: 'var(--gray-600)', maxWidth: '340px', lineHeight: '1.7' }}>
|
|
Nine product lines in stock, ready for same-day or scheduled delivery to your job site anywhere in our 250km radius.
|
|
</p>
|
|
</div>
|
|
<div className="products-grid">
|
|
{products.map((product, index) => (
|
|
<Link href="/products" key={index} 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, tIndex) => (
|
|
<span key={tIndex} className="product-tag">{tag}</span>
|
|
))}
|
|
</div>
|
|
<div className="product-arrow">→</div>
|
|
</Link>
|
|
))}
|
|
|
|
<div className="product-card" style={{ background: 'var(--navy)' }}>
|
|
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
|
|
<div>
|
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: '13px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '16px' }}>Need a custom quote?</div>
|
|
<div style={{ fontFamily: 'var(--font-display)', fontSize: '26px', fontWeight: 800, textTransform: 'uppercase', color: 'var(--white)', lineHeight: 1.1, marginBottom: '12px' }}>Talk to our<br />supply team.</div>
|
|
<div style={{ fontSize: '13px', color: 'rgba(255,255,255,.55)', lineHeight: 1.6 }}>Bulk orders · Contractor accounts · Scheduled deliveries · Job site planning</div>
|
|
</div>
|
|
<a href="#quote" className="btn-primary" style={{ textAlign: 'center', marginTop: '24px', display: 'block' }}>Request pricing →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|