Evolve Estates Site

Problem

A Central Florida brokerage needed a production site that could carry buyer and seller journeys, an AI assistant, an interactive relocation tool, and international-buyer funnels in multiple languages, without taking on a framework, a build pipeline, or a CMS the small team would have to maintain directly. The team is small enough that "maintainable" meant one person being able to open a file, find the section, and edit it, not a CI pipeline or a CMS dashboard someone has to be trained on. Prior iterations (a static export in a sibling repo, a single index.html with no server logic) had none of the surface area this needed: no forms wired to real backends, no i18n, no chat, no deploy automation, and no path for a Central Florida buyer/seller funnel to also serve Spanish- and Portuguese-speaking international buyers. Every one of those gaps — 14 distinct page routes, six lead-capture backends, an AI chat surface, 11 languages — had to land in a single Git-pushed deploy with no staging environment and no CI gate standing between a commit and evolveestatesgroup.ai.

What was built

A single ~300KB, ~1,805-line index.html file that behaves like a full application: client-rendered page routing (go(slug) toggling .pg sections) across 14 distinct routes — home, team, buy, sell, invest, sold, communities, valuation, university, studio, monarch, blog, relocate, and gear — an 11-language translation layer driven by data-t attributes, a Monarch AI chat panel backed by a Cloudflare Pages Function calling Claude, an interactive Leaflet map of Florida utility providers on the relocation page, and lead capture wired through three distinct booking functions (openCal() for buyer/seller consultations, openCalStudio() for Studio creative sessions, openCalAgent() for agent recruitment calls) plus Flodesk email capture and a Formspree contact form. Monarch chat responses can emit [book:label] tokens that the front-end converts into inline booking buttons in the chat panel itself, so a conversation with the AI can end in a scheduled call without leaving the chat surface. It also ships an IDX (property search) pipeline in mock mode, buyer tools including a home valuation flow that routes submissions to a human for follow-up rather than running a live valuation engine, and an international buyer funnel with parallel English/Spanish/Portuguese page trees. A tel: link gives visitors a phone fallback for anyone who doesn't want to use Calendly. The whole thing deploys by pushing to main — Cloudflare Pages Git-integration ships it live with no build step and no CI gate, and no wrangler.toml because it's a Git-integration project rather than CLI-deployed.

Technical approach

The architecture is a deliberate single-file SPA: no framework, no bundler, no package manager. Every route is a <div class="pg" id="p-{slug}"> present in the DOM at all times, toggled by a hand-written router (go()) that also handles hash-based deep links and lazy-inits heavier features (the Leaflet map only initializes when the Relocate page becomes active, guarded against re-init). The i18n system is a single TK object keyed by namespace and language code, resolved at render time from data-t attributes — adding a string means adding a key and an attribute, no rebuild. The Monarch chatbot is the most engineered piece: a Cloudflare Pages Function (functions/api/monarch.js) that proxies Anthropic's Claude Sonnet with nine distinct security layers — origin allowlisting, per-IP rate limiting via Cloudflare KV (falling back to an in-memory Map when unbound), a 4,000-char input cap, a 20-turn history cap, message-role whitelisting, 13 regex-based prompt-injection heuristics, PII scrubbing for SSNs and credit-card patterns, an output token cap, and proper 429/Retry-After handling. Because the underlying Anthropic call isn't streamed, the function manually reformats the full response into SSE chunks so the front-end can reuse a single streaming reader code path either way. Six live Cloudflare Pages Functions handle real lead flows (buyer-lead, valuation, idx-inquiry, idx-search, intl-lead, monarch) — each sends real email via Resend and can write real Flodesk opt-ins, so they are treated as production endpoints, not fixtures, even in a repo with no staging environment. A documented CSS gotcha: .pg.on deliberately avoids a non-none transform because any transform creates a new CSS containing block that breaks position:fixed descendants — this once trapped a modal half off-screen, and the team modal is now re-parented to <body> at init to sidestep the same class of bug. IDX search currently runs against a committed mock fixture (data/idx-mock-listings.json) rather than a live MLS Grid feed. A voice-guard convention (no em/en dashes in HTML) is enforced by grep before every push because the Pages deploy silently fails on those characters.

Creative approach

Craft

The visual identity is dark-and-gold, defined entirely through CSS custom properties with no external design-token file: a near-black #050508 background, a gold accent pair (#c9a84c base, #e0be5e hover) used sparingly for CTAs and highlights, Inter (bold weight 700-800, uppercase, 0.1-0.2em letter-spacing) for headings, stats, labels, and navigation, and Urbanist for body copy and conversational text. A small set of layout primitives (.s/.sf sections, .si content wrapper capped at 1200px, .g3 three-column grid, .gs image/text split, .hero full-viewport video hero) and card types (.sc standard, .tq testimonial, .hc2 community image, .ac action) repeat across all 14 pages rather than each page inventing its own layout, which is what makes a 300KB hand-written file read as one product instead of 14 loosely related ones. Cards use a border-bottom that transitions from a neutral line color to gold on hover — a restrained hover language reused everywhere buttons and cards appear, rather than per-component effects. Scroll-triggered reveals use a single IntersectionObserver pattern (.rv/.vi classes, 24px translateY, staggered 0.1s-increment delay classes applied to sibling elements for a cascading entrance) applied consistently across every section rather than bespoke animation per page, which keeps ~300KB of hand-written HTML visually coherent without a component library enforcing it. The design system page in the repo's own wiki spells out a voice-times-design coupling: the formal, no-contraction house voice is treated as co-equal with the gold token and enforced the same way, as a constraint on any new text or component rather than a suggestion.

Reframe

The non-obvious call was refusing a framework at all. A brokerage site with this much surface area — 11 languages, AI chat, an interactive map, multi-step buyer/seller journeys, six live backend endpoints — reads like it needs Next.js and a CMS. Instead it stays one file the owner can open, search, and edit directly, with the router, i18n, and animation systems each implemented as a few dozen lines of vanilla JS rather than a dependency. The tradeoff bought zero dependency-chain breakage in exchange for a large file that requires discipline; that tradeoff is explicit in the repo's own operating rules, not accidental.

Process and what failed

The .pg.on transform bug — a modal trapped half off-screen because a non-none transform on the active page created an unintended CSS containing block — is documented as a real production incident that shaped a standing rule (.pg.on must use transform:none) and a structural fix (re-parenting the team modal to <body>). A dedicated accessibility sweep found and fixed real WCAG failures (heading skips, landmark violations across all 13 pages) after initial ship, tracked commit-by-commit rather than deferred to a general cleanup. Credential and certification claims (a 'REO Certified' badge, a 'Certified Relocation Specialist' credential) were removed from live copy after being flagged as unsubstantiated — the commit history shows the team walking back overclaiming rather than letting it ride.

Outcome

Live in production at evolveestatesgroup.ai, deployed by direct push to main via Cloudflare Pages Git integration with no CI gate. The commit history runs 134 commits from the initial commit in April 2026 through late July 2026 and shows sustained iteration after initial ship rather than a single launch-and-stop: a dedicated accessibility sweep landed in multiple passes — "0 heading skips, and three real WCAG failures fixed," followed by a second commit explicitly titled "Close the last landmark violations: 13/13 pages now scan completely clean" — plus SEO tracking additions (og:image:alt/twitter:image:alt for share accessibility, a tracked-pages log, Google Search Console submission), an IDX home-search widget and inquiry-capture flow shipped as its own feature, a seller-lead conversion pass on the Home Value flow, and two separate copy corrections that removed unverified credential claims (a "REO Certified" badge and a "Certified Relocation Specialist" claim) once flagged. IDX search remains in mock mode pending a live MLS Grid feed. No verified visitor, lead, or conversion metrics were available to cite for this pass.