Skip to main content

WiseAI Realtor — Pro Website Template De-overwhelm, Phase 2

Source: Terry Beckett (real paying customer, wiseaiagency.com/s/terry-and-sheri and teambeckett.ca) — "packed full of valuable... information... somewhat overwhelming." C:\dev\BECKETT_UX_REVIEW_2026-09-10\REVIEW.md + RECOMMENDATIONS.md items 7–10 (MEDIUM tier). Every guardrail below is binding: remove no content — every guide, review, listing, and language option stays reachable; only presentation/pacing changes.

1. Consolidated "talk to us" launcher (item 7)​

Before: four to six separate "talk to us" mechanisms on the homepage — Hero's language-CTA row (English AI + Hindi/Punjabi AI tel/browser-call buttons) + a plain office tel: button, the mid-page AiBandSection ("Ask our AI assistant") repeating the SAME three buttons, and the floating ChatWidgetStream "Talk" pill (voiceAnchorHref, plain scroll-to-anchor link) above the chat FAB.

After:

  • Hero's language-CTA row is removed entirely (0 inline instances). The search bar remains the hero's one job.
  • AiBandSection keeps exactly ONE inline instance: a single Disclosure control whose SUMMARY LINE itself names both languages ("Choose how to talk to us — English AI, Hindi AI, or call the office directly"), so English/Hindi availability is discoverable at a glance without opening anything. Opening it reveals the same three choices via the shared TalkChoices component.
  • A new persistent floating TalkLauncher (bottom-left, mirroring the existing chat FAB's bottom-right corner and --cwa-fab-offset so it also lifts above the mobile sticky CTA bar) replaces the plain "Talk" pill on the homepage only (RealEstateSiteTemplate no longer passes voiceAnchorHref to ChatWidgetStream). Clicking it opens a menu offering the same TalkChoices: Speak to English AI, Speak to Hindi AI (or whatever getAiLanguageCtas returns for the tenant), and Call the office.
  • Subpages (guides, listings, etc.) are unchanged — RealEstateHeader and RealEstateScanView keep passing voiceAnchorHref to the shared ChatWidgetStream pill exactly as before (out of scope; those pages had no duplicate cluster to consolidate).
  • AiBandSection's id="talk-to-aria" + scroll-mt-24 anchor is UNCHANGED (still the landing target those subpage pills link to).

Reachability rule (Playwright-verified): from page load, on the homepage, both the office call and BOTH AI languages must be reachable within two clicks via the floating TalkLauncher (click 1: open launcher: click 2: select a choice). AiCallCta/WebRTCDemoButton/DirectorTransferDemo internals are untouched — only where AiCallCta is mounted changed.

2. Homepage sticky mini-nav with scroll-spy (item 8)​

A HomeMiniNav renders fixed just below the main header, appears (fade + slide) once the hero (#top) scrolls out of view, and offers four jumps: Listings (#listings), Guides (#resources — the existing "Guides, tools & answers" section), Reviews (#reviews), Contact (#contact). All four ids already exist on the homepage (FeaturedListingsSection, ResourcesSection, TestimonialsSection, ContactSection) — no new ids were needed. An IntersectionObserver highlights whichever section is currently in view (aria-current="true" + accent color) as the visitor scrolls.

3. Home value: CTA + modal, form unchanged (item 9)​

HomeValueSection's benefits copy + headline stay inline; the full name/email/phone/address/photo-upload form (HomeValueForm — internals byte-for-byte unchanged, per the task's hard constraint) now renders inside a modal/drawer opened by a single "Start my free home evaluation" CTA button, rather than being mounted inline mid-scroll. id="home-value" stays on the section (nav "What's my Home worth", the mobile sticky CTA bar, and the Buy/Sell dropdown's "What's my home worth?" link all still scroll here and land on the CTA). home-value-honesty.contract.test.ts is unaffected — it only asserts on source strings inside HomeValueSection.tsx, all of which remain present in the file regardless of the modal wrapper.

4. Guides index filter chips (item 10)​

GuidesFilterChips (client component) adds a row of toggleable chips — Buyer, Seller, Investor, Local area, Multilingual — above the existing Buy/Sell/ Resources hub grouping on /s/[slug]/guides. Categories are DERIVED at render time from each guide's existing tag string, hub, lang, and translations fields (no schema change, no new content, no guides.ts edits). Filtering is OR across active chips; with zero chips active every guide shows (today's behavior, unchanged default). Non-matching cards are hidden via a hidden class (display:none), never removed from the DOM or excluded from the server-rendered HTML — the same "hide, don't slice" pattern ReviewsLoadMore.tsx already established for /reviews (quick wins, PR #1592), so every guide stays crawlable/citable regardless of filter state. A hub section with zero currently-visible guides is hidden the same way, and an "no guides match — clear filters" note appears when nothing across all three hubs matches.

Guardrails (binding)​

  • No guide, review, listing, or language option is removed or hidden from the DOM/HTML — only presentation changes (collapse/cap/filter/modal), matching RECOMMENDATIONS.md's "Explicitly NOT recommended" list.
  • BrowserCallButton.tsx, WebRTCDemoButton.tsx, and DirectorTransferDemo.tsx internals are untouched (a parallel PR is editing their audio-autoplay behavior) — only where/how AiCallCta (which wraps WebRTCDemoButton) is mounted changed.
  • testimonial-truncation.contract.test.ts is unaffected (this phase does not touch TestimonialsSection.tsx or /reviews).
  • Team Beckett's live data (00000000-0000-4000-a000-000000000c01) is read via the existing getRealEstateSiteConfig/resolvePublicGuides calls only — no writes.

Verification​

  • Unit/contract: home-value-honesty.contract.test.ts, ai-language-cta.contract.test.ts, ChatWidgetStream.voice-anchor.contract.test.tsx, testimonial-truncation.contract.test.ts all green, unmodified.
  • Playwright against the Vercel PREVIEW (desktop + ~400px mobile width, prefers-reduced-motion: reduce emulated):
    1. Mini-nav is absent/invisible at page load, appears after scrolling past the hero, and highlights the section currently in view.
    2. The home-value CTA opens the form in a modal/drawer; the form fields are the same ones that used to render inline.
    3. Guides filter chips filter the visible cards client-side; clearing chips restores the full list.
    4. From page load, the floating TalkLauncher reaches the office call, the English AI, and the Hindi AI each within two clicks.
  • Real-host follow-up (not run by the builder; noted for the founder/lead): wiseaiagency.com/s/terry-and-sheri and teambeckett.ca — Pro Website /s/[slug] is host-aliased, so the Vercel preview host skips the hostname-rewrite middleware even though the template code is identical.