115 lines
7.3 KiB
TypeScript
115 lines
7.3 KiB
TypeScript
import Link from 'next/link';
|
||
|
||
export default function Territory() {
|
||
const cities = [
|
||
{ type: 'home', name: 'Kitchener · Waterloo · Cambridge', sub: 'Home base — priority service area', dist: '0km', link: null },
|
||
{ type: 'near', name: 'Guelph', sub: 'High residential & commercial growth', dist: '~30km', link: "https://vgfence.com/fence-supply-guelph" },
|
||
{ type: 'near', name: 'Brantford', sub: 'Contractors, builders, industrial', dist: '~50km', link: "https://vgfence.com/fence-supply-brantford" },
|
||
{ type: 'near', name: 'Hamilton', sub: 'Industrial, commercial, property managers', dist: '~75km', link: "https://vgfence.com/fence-supply-hamilton" },
|
||
{ type: 'home', name: 'Toronto / GTA', sub: 'Commercial builders, developers, high volume', dist: '~110km', link: "https://vgfence.com/fence-supply-toronto" },
|
||
{ type: 'home', name: 'London', sub: 'Large market, residential & commercial', dist: '~120km', link: "https://vgfence.com/fence-supply-london-ontario" },
|
||
{ type: 'far', name: 'Windsor', sub: 'Southwest Ontario hub', dist: '~230km', link: "https://vgfence.com/fence-supply-windsor" },
|
||
{ type: 'far', name: 'Barrie', sub: 'Extended service area', dist: '~160km', link: "https://vgfence.com/fence-supply-barrie" },
|
||
{ type: 'far', name: 'Niagara · Owen Sound', sub: 'Delivery available', dist: '~150–175km', link: null },
|
||
];
|
||
|
||
return (
|
||
<section className="territory-section" id="territory">
|
||
<div className="reveal">
|
||
<div className="section-eyebrow">Service territory</div>
|
||
<h2 className="sh">Based in <span>KWC.</span><br />Delivering everywhere.</h2>
|
||
</div>
|
||
|
||
<div className="territory-layout">
|
||
<div className="map-card reveal">
|
||
<div className="radius-label">250km radius</div>
|
||
<svg viewBox="0 0 500 360" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%' }}>
|
||
<rect width="500" height="360" fill="#EEF3F8" rx="8" />
|
||
<circle cx="250" cy="190" r="165" fill="none" stroke="#1B3A6B" strokeWidth="1.5" strokeDasharray="8 5" opacity=".25" />
|
||
<circle cx="250" cy="190" r="110" fill="none" stroke="#1B3A6B" strokeWidth="1" strokeDasharray="4 4" opacity=".15" />
|
||
<circle cx="250" cy="190" r="55" fill="#1B3A6B" opacity=".06" />
|
||
<circle cx="250" cy="190" r="10" fill="#E8572A" />
|
||
<circle cx="250" cy="190" r="5" fill="white" />
|
||
<circle cx="250" cy="190" r="22" fill="none" stroke="#E8572A" strokeWidth="1.5" opacity=".4" />
|
||
<text x="250" y="218" textAnchor="middle" fontSize="11" fontWeight="700" fill="#0F2444" fontFamily="'Barlow Condensed',sans-serif" letterSpacing="1">KWC</text>
|
||
|
||
<circle cx="320" cy="148" r="5" fill="#1B3A6B" opacity=".75" />
|
||
<text x="330" y="144" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Guelph</text>
|
||
<text x="330" y="155" fontSize="9" fill="#888" fontFamily="sans-serif">~30km</text>
|
||
|
||
<circle cx="350" cy="185" r="5" fill="#1B3A6B" opacity=".75" />
|
||
<text x="360" y="181" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Hamilton</text>
|
||
<text x="360" y="192" fontSize="9" fill="#888" fontFamily="sans-serif">~75km</text>
|
||
|
||
<circle cx="390" cy="158" r="7" fill="#E8572A" opacity=".85" />
|
||
<text x="400" y="154" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Toronto / GTA</text>
|
||
<text x="400" y="165" fontSize="9" fill="#888" fontFamily="sans-serif">~110km</text>
|
||
|
||
<circle cx="320" cy="230" r="5" fill="#1B3A6B" opacity=".75" />
|
||
<text x="330" y="227" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Brantford</text>
|
||
<text x="330" y="238" fontSize="9" fill="#888" fontFamily="sans-serif">~50km</text>
|
||
|
||
<circle cx="185" cy="228" r="5" fill="#1B3A6B" opacity=".75" />
|
||
<text x="100" y="225" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Stratford</text>
|
||
<text x="100" y="236" fontSize="9" fill="#888" fontFamily="sans-serif">~45km</text>
|
||
|
||
<circle cx="142" cy="190" r="7" fill="#E8572A" opacity=".85" />
|
||
<text x="55" y="186" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">London</text>
|
||
<text x="55" y="197" fontSize="9" fill="#888" fontFamily="sans-serif">~120km</text>
|
||
|
||
<circle cx="195" cy="142" r="5" fill="#1B3A6B" opacity=".6" />
|
||
<text x="115" y="138" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Owen Sound</text>
|
||
<text x="115" y="149" fontSize="9" fill="#888" fontFamily="sans-serif">~175km</text>
|
||
|
||
<circle cx="248" cy="105" r="5" fill="#1B3A6B" opacity=".6" />
|
||
<text x="257" y="100" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Barrie</text>
|
||
<text x="257" y="111" fontSize="9" fill="#888" fontFamily="sans-serif">~160km</text>
|
||
|
||
<circle cx="375" cy="235" r="5" fill="#1B3A6B" opacity=".6" />
|
||
<text x="385" y="232" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Niagara</text>
|
||
<text x="385" y="243" fontSize="9" fill="#888" fontFamily="sans-serif">~150km</text>
|
||
|
||
<circle cx="88" cy="190" r="6" fill="#E8572A" opacity=".8" />
|
||
<text x="22" y="186" fontSize="10" fontWeight="600" fill="#1B3A6B" fontFamily="sans-serif">Windsor</text>
|
||
<text x="22" y="197" fontSize="9" fill="#888" fontFamily="sans-serif">~230km</text>
|
||
|
||
<circle cx="30" cy="330" r="5" fill="#E8572A" />
|
||
<text x="40" y="334" fontSize="9" fill="#666" fontFamily="sans-serif">Major hub</text>
|
||
<circle cx="105" cy="330" r="4" fill="#1B3A6B" opacity=".7" />
|
||
<text x="115" y="334" fontSize="9" fill="#666" fontFamily="sans-serif">Regional city</text>
|
||
<line x1="195" y1="330" x2="220" y2="330" stroke="#1B3A6B" strokeWidth="1.5" strokeDasharray="6 4" opacity=".35" />
|
||
<text x="226" y="334" fontSize="9" fill="#666" fontFamily="sans-serif">250km radius</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="city-list reveal">
|
||
<div className="home-base-pill">📍 Home base: Kitchener · Waterloo · Cambridge</div>
|
||
{cities.map((city, index) => (
|
||
city.link ? (
|
||
<Link key={index} href={city.link}>
|
||
<div className="city-item">
|
||
<div className={`city-dot ${city.type}`}></div>
|
||
<div className="city-info">
|
||
<div className="city-name-txt">{city.name}</div>
|
||
<div className="city-sub-txt">{city.sub}</div>
|
||
</div>
|
||
<div className="city-dist-badge">{city.dist}</div>
|
||
</div>
|
||
</Link>
|
||
) : (
|
||
<div key={index} className="city-item no-link">
|
||
<div className={`city-dot ${city.type}`}></div>
|
||
<div className="city-info">
|
||
<div className="city-name-txt">{city.name}</div>
|
||
<div className="city-sub-txt">{city.sub}</div>
|
||
</div>
|
||
<div className="city-dist-badge">{city.dist}</div>
|
||
</div>
|
||
)
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|