/* global React, COMMUNITIES, AGENTS, COMMUNITY_DETAIL, COPY, listingsFor, agentsFor, communityById,
HeadlineFragments, Arrow, ArrowDown, WhatsAppIcon, PinIcon, PhoneIcon, VideoIcon,
SecHead, Crumbs, ViewingForm, ValuationForm, ListingCard, AgentCard, CommunityCard, CommunitiesGrid */
// ============================================================
// PAGE: HOME
// ============================================================
function HomePage({ setRoute }) {
return (
{/* HERO */}
{COPY.en.hero.eyebrow}
{COPY.en.hero.meta}
{COPY.en.hero.blurb}
{/* TICKER */}
{/* PROPOSITION STRIP */}
{COPY.en.propStrip.eyebrow}
{COPY.en.propStrip.copy}
{COPY.en.propStrip.stats.map((s, i) => (
{s.num}
{s.label}
{s.note}
))}
{/* COMMUNITIES GRID */}
22 communities in this prototype
Click any tile to open its microsite →}
/>
setRoute({ name: "community", id })} />
{/* VALUATION BAND */}
{COPY.en.valuation.eyebrow}
{COPY.en.valuation.copy}
- ✓ Replied to within one business day
- ✓ Realistic range, not a computed figure
- ✓ Backed by comps from the last 90 days on your street
{/* AGENTS PREVIEW */}
setRoute({ name: "team" })}>
All consultants
}
/>
{AGENTS.slice(0, 4).map(a => (
setRoute({ name: "agent", id })} />
))}
{/* OVERSEAS BUYER BAND */}
Overseas buyers
Buying from abroad? Book a video viewing.
We'll walk you through the property live — in English, Arabic, Russian or Mandarin — and answer the questions a brochure can't.
);
}
// ============================================================
// PAGE: COMMUNITIES INDEX
// ============================================================
function CommunitiesPage({ setRoute }) {
const [filter, setFilter] = React.useState("All");
const filtered = filter === "All" ? COMMUNITIES : COMMUNITIES.filter(c => c.type === filter);
return (
setRoute({ name: "home" }) },
{ label: "Communities" },
]} />
{["All","Villas","Apartments","Off-plan"].map(t => (
))}
{filtered.length} of {COMMUNITIES.length}
setRoute({ name: "community", id })} layout="bento" />
);
}
// ============================================================
// PAGE: COMMUNITY MICROSITE (Arabian Ranches demo)
// ============================================================
function scrollToId(id) {
const el = document.getElementById(id);
if (!el) return;
const top = el.getBoundingClientRect().top + window.scrollY - 70;
window.scrollTo({ top, behavior: "smooth" });
}
function CommunityPage({ id, setRoute }) {
const community = communityById(id);
if (!community) return Community not found.
;
const detail = COMMUNITY_DETAIL[id] || COMMUNITY_DETAIL["arabian-ranches"];
const listings = listingsFor(id, 6);
const localAgents = agentsFor(id, 4);
return (
{/* HERO */}
Community microsite · Dubai
{community.type} · {community.agents} consultants
{community.name}
{detail.intro}
{/* CRUMBS */}
setRoute({ name: "home" }) },
{ label: "Communities", onClick: () => setRoute({ name: "communities" }) },
{ label: community.name },
]} />
{/* AREA GUIDE */}
Updated quarterly
Espace community team}
/>
{/* Stylised area map placeholder */}
{detail.paragraphs.map((p, i) =>
{p}
)}
{detail.facts.map((f, i) => (
))}
{/* MARKET SNAPSHOT */}
Market snapshot
{community.name} at a glance
attributed · refreshed quarterly
{detail.market.map((m, i) => (
))}
{detail.marketAttribution}
{/* LISTINGS */}
{COPY.en.listings.note}
}
/>
{listings.length > 0 ? listings.map(l => (
scrollToId("viewing")} />
)) : (
No live feed entries for {community.name} in this demo. In production this slice would render whatever's available in the brokerage feed today.
)}
{/* LOCAL AGENTS */}
{localAgents.map(a => (
setRoute({ name: "agent", id })} />
))}
{/* VIEWING FORM BAND */}
Book a viewing
See {community.name} in person.
Pick a slot — we'll confirm in the hour during office hours, or message us on WhatsApp for instant.
- ✓ Multiple homes in one visit, no juggling agents
- ✓ Overseas? Switch to a video viewing instead
- ✓ No price pressure — we'll bring the data
);
}
window.HomePage = HomePage;
window.CommunitiesPage = CommunitiesPage;
window.CommunityPage = CommunityPage;