// House thumbnail SVGs — stylized Dutch terraced houses // 5 variants matching the screenshots' colorways const HouseThumb = ({ variant = 'brick', size = 56 }) => { const variants = { // Warm brick row houses (Hyacinthenstraat) brick: ( {/* sky */} {/* trees */} {/* brick facade */} {/* white windows */} {/* shopfront */} {/* ground */} {/* bushes */} ), // Green front yard (Hoofdstraat) green: ( {/* sky */} {/* trees big */} {/* house peeking */} {/* hedge */} {/* pavement */} ), // Blue-toned street (Rijksweg) blue: ( {/* sky */} {/* row houses */} {/* windows */} {/* street + car */} ), // Leafy street (Cremerlaan) leafy: ( {/* big tree canopy */} {/* house behind */} {/* road */} ), // Grey/wintery (Roos en Beeklaan) grey: ( {/* trees bare */} {/* row house */} {/* sidewalk */} ), }; return (
{variants[variant] || variants.brick}
); }; // Larger version for the detail view (full width) const HouseHero = ({ variant = 'brick' }) => (
); // Better: render a larger version with more detail const HouseHeroSvg = ({ variant = 'brick' }) => { const variants = { brick: ( {/* sky */} {/* trees */} {/* facade — brick row */} {/* windows upstairs */} {[20, 80, 140, 200, 260].map(x => ( ))} {/* street sign pole */} STRAAT {/* shopfront ground */} {/* ground */} {/* bushes */} {/* parked scooter silhouette */} ), green: ( ), blue: ( {/* roofs */} {/* windows */} {[10, 65, 120, 175, 230, 285].map(x => ( ))} {/* street + parked car */} ), leafy: ( ), grey: ( {[20, 85, 150, 215, 280].map(x => ( ))} ), }; return (
{variants[variant] || variants.brick}
); }; Object.assign(window, { HouseThumb, HouseHeroSvg });