// Hand-crafted SVG / CSS "3D" art for Capital Home Solutions // Claymation-style soft rounded shapes. Navy + gold palette. // Real photo house (Unsplash) — replaces the isometric SVG const IsoHouse = ({ size = 360, variant = "rehabbed", fill = false, hero = false }) => { let src; const R = window.__resources || {}; if (variant === "distressed") src = R.distressedHouse || "assets/distressed-house.jpg"; else if (hero) src = R.heroHouse || "assets/hero-house.webp"; else src = R.rehabbedHouse || "assets/rehabbed-house.png"; if (fill) { return ( {variant==="distressed"?"Distressed ); } return (
{variant==="distressed"?"Distressed
); }; // Keep the old SVG as a fallback (not used by default now) const IsoHouseSVG = ({ size = 360, variant = "rehabbed" }) => { const isDist = variant === "distressed"; return ( {/* ground shadow */} {/* grass/yard */} {!isDist && ( <> )} {/* right wall (side) */} {/* front wall */} {/* roof */} {/* chimney */} {/* door */} {/* front window */} {/* side window */} {/* distressed details: boards, cracks, broken bits */} {isDist && ( <> {/* cracks on wall */} {/* missing roof tiles */} {/* broken window lines */} {/* overgrown grass */} )} {/* rehabbed details: clean chimney smoke, planter */} {!isDist && ( <> {/* flower box */} {/* path */} )} ); }; const CoinStack = ({ size = 220 }) => { // Photorealistic stack of $100 bills + gold coin const w = size; const h = size * 0.9; return ( {/* ground shadow */} {/* Bill stack - 6 bills stacked with subtle offset */} {[0,1,2,3,4,5].map(i => { const offY = 168 - i*9; const offX = i*1.2; return ( {/* Bill edge depth */} {/* Bill face */} {/* Top bill only: full engraving */} {i === 5 && ( <> {/* Ornamental border */} {/* Left numeral "100" */} 100 ONE HUNDRED {/* Right numeral big */} 100 {/* Portrait oval center-left */} {/* Portrait bust */} {/* Engraving guilloché lines */} {/* Corner stars */} {/* Subtle highlight */} )} {/* For lower bills, faint texture */} {i < 5 && ( )} ); })} {/* Gold strap around middle of stack */} $10,000 {/* Gold coin, leaning on stack */} {/* Coin side edge */} {/* Coin face */} {/* Inner ring */} {/* Laurel decoration */} {/* Center $ */} $ {/* Highlight */} {/* Edge ridges on visible side */} {Array.from({length:24}).map((_,k) => { const a = (k/24) * Math.PI * 2; const x1 = Math.cos(a) * 35.5; const y1 = Math.sin(a) * 35.5; const x2 = Math.cos(a) * 37; const y2 = Math.sin(a) * 37; return ; })} {/* Smaller coin in front */} $ ); }; // Real family photo (Unsplash) — replaces the illustrated scene const FamilyScene = ({ width = 520 }) => { return (
Family outside their home
); }; // Original illustrated fallback (unused) const FamilySceneSVG = ({ width = 520 }) => { return ( {/* sky */} {/* distant hills */} {/* house silhouette behind */} {/* porch / ground */} {/* Family (claymation silhouettes with warm highlights) */} {/* Dad */} {/* arm around kid */} {/* Mom */} {/* Kid */} {/* Dog */} {/* Grandma in rocking chair (for reverse mortgage callout) */} {/* chair */} {/* body */} ); }; // Mini floating key / cash / paperwork icons const KeyIcon = ({size=24,color="currentColor"}) => ( ); const CashIcon = ({size=24,color="currentColor"}) => { // Realistic US-bill inspired icon with portrait oval, corner numerals, and engraving lines return ( {/* bill body */} {/* inner ornamental border */} {/* left corner numeral */} $ {/* right corner numeral */} $ {/* center portrait oval */} {/* portrait silhouette */} {/* engraving lines left */} {/* engraving lines right */} ); }; const ClockIcon = ({size=24,color="currentColor"}) => ( ); const HouseIcon = ({size=24,color="currentColor"}) => ( ); const HandIcon = ({size=24,color="currentColor"}) => ( ); const DocIcon = ({size=24,color="currentColor"}) => ( ); const HeartIcon = ({size=24,color="currentColor"}) => ( ); const ArrowRight = ({size=16}) => ( ); const CheckIcon = ({size=16,color="currentColor"}) => ( ); const XIcon = ({size=16,color="currentColor"}) => ( ); Object.assign(window, { IsoHouse, CoinStack, FamilyScene, KeyIcon, CashIcon, ClockIcon, HouseIcon, HandIcon, DocIcon, HeartIcon, ArrowRight, CheckIcon, XIcon });