← back to Homesonspec
web/search: national-site card upgrades — urgency status badges, est. monthly payment, favorite/save heart (localStorage)
f00da2b43415fa70765962ca02e6a7da4affdc2a · 2026-07-28 12:10:24 -0700 · Steve
Plus competitor analysis (COMPETITIVE_ANALYSIS.md): feature gaps, color palette rec (keep teal, add navy trust + amber urgency), split map+list, Fair-Housing cautions.
Files touched
A COMPETITIVE_ANALYSIS.mdM apps/web/src/app/search/SearchClient.tsx
Diff
commit f00da2b43415fa70765962ca02e6a7da4affdc2a
Author: Steve <steve@designerwallcoverings.com>
Date: Tue Jul 28 12:10:24 2026 -0700
web/search: national-site card upgrades — urgency status badges, est. monthly payment, favorite/save heart (localStorage)
Plus competitor analysis (COMPETITIVE_ANALYSIS.md): feature gaps, color palette rec (keep teal, add navy trust + amber urgency), split map+list, Fair-Housing cautions.
---
COMPETITIVE_ANALYSIS.md | 360 +++++++++++++++++++++++++++++++
apps/web/src/app/search/SearchClient.tsx | 46 +++-
2 files changed, 400 insertions(+), 6 deletions(-)
diff --git a/COMPETITIVE_ANALYSIS.md b/COMPETITIVE_ANALYSIS.md
new file mode 100644
index 00000000..4d4d8c51
--- /dev/null
+++ b/COMPETITIVE_ANALYSIS.md
@@ -0,0 +1,360 @@
+# HomesOnSpec: Competitive Analysis & Feature Roadmap
+## New-Construction Home Search Portals — Design & Functionality Benchmark
+
+**Date:** July 28, 2026
+**Project:** HomesOnSpec (National spec homes search + construction pipeline)
+**Scope:** Analyze 7 direct competitors; extract color palettes, layouts, feature sets; identify gaps & optimization opportunities.
+
+---
+
+## Executive Summary
+
+HomesOnSpec competes with **NewHomeSource.com** (BDX new-home portal, closest competitor), Zillow (new-construction vertical), Realtor.com, Redfin, Homes.com, BuildZoom (permits/builders angle), and specialized builders' direct portals. The competitive landscape shows:
+
+- **Table-stakes features** (present in 80%+ of competitors): map search, price/bed/bath filters, listing cards with photos, saved searches + email alerts, mortgage calculator, builder/community pages
+- **HomesOnSpec's current strengths:** map, basic filters, listing cards, community detail, lead form, verification labels
+- **Critical gaps vs. competitors:** saved searches/alerts, favorites + compare, quick-move-in toggle, commute-time overlay, rich photo galleries (3D/video tours), price/pipeline trend charts, detailed builder profiles
+- **Design insight:** Blue dominates (50%+ of competitors), paired with white or warm neutrals; dark mode is emerging; mobile-first layout expected
+- **Compliance risk:** School ratings visible on Zillow/Redfin but legally risky for demographic steering — HomesOnSpec should avoid or disclose factually only
+
+---
+
+## Competitor Feature Matrix
+
+| Feature | NewHomeSource | Zillow | Realtor.com | Redfin | Homes.com | BuildZoom | HomesOnSpec |
+|---------|---|---|---|---|---|---|---|
+| **Search & Navigation** |
+| Map search (draw/polygon) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ (permits) | ✓ |
+| Price filters | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Beds/baths filters | ✓ | ✓ | ✓ | ✓ | ✓ | partial | ✓ |
+| Square footage filter | ✓ | ✓ | ✓ | ✓ | ✓ | partial | partial |
+| Move-in status (ready vs. under construction) | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Quick-move-in toggle | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Neighborhood/community filter | ✓ | ✓ | ✓ | ✓ | ✓ | — | ✓ |
+| Commute time radius search | — | partial | — | — | — | — | **✗ GAP** |
+| Conversational/AI search | — | — | ✓ (Realtor.com+) | ✓ | — | — | **✗ GAP** |
+| **Saved Features & Alerts** |
+| Saved searches | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | **✗ GAP** |
+| Email alerts on new listings | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | **✗ GAP** |
+| Favorites/watchlist | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Compare homes side-by-side | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| **Listing & Detail Pages** |
+| High-resolution photo gallery | ✓ | ✓ | ✓ | ✓ | ✓ | — | partial |
+| Virtual/3D tour | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Video walkthrough | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Interactive floor plan | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Spec/construction details grid | ✓ | ✓ | ✓ | ✓ | ✓ | — | ✓ |
+| Permit information + timeline | — | — | — | — | — | ✓ | ✓ (verification labels) |
+| **Pricing & Financing** |
+| Price display (prominent) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Price per square foot | ✓ | ✓ | ✓ | ✓ | ✓ | — | partial |
+| Mortgage calculator (integrated) | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Financing options (new-construction mortgage info) | ✓ | ✓ | ✓ | partial | partial | — | **✗ GAP** |
+| **Builder & Community Info** |
+| Dedicated builder profile/page | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | partial |
+| Builder reviews & ratings | ✓ | ✓ | ✓ | partial | partial | ✓ | **✗ GAP** |
+| Builder license & score | — | — | — | — | — | ✓ | **✗ GAP** |
+| Community amenities list | ✓ | ✓ | ✓ | ✓ | ✓ | — | ✓ |
+| HOA information | ✓ | ✓ | ✓ | ✓ | ✓ | — | partial |
+| **Market Intelligence** |
+| Trending homes (what's hot) | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Price trends / market insights | ✓ | ✓ | ✓ | ✓ | — | — | **✗ GAP** |
+| Days on market / price history | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| Recently listed / new arrivals badge | ✓ | ✓ | ✓ | ✓ | ✓ | — | partial |
+| **Lead & Contact** |
+| Lead form (contact builder/agent) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Agent contact info on listing | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | partial |
+| Schedule tour CTA | ✓ | ✓ | ✓ | ✓ | ✓ | — | ✓ |
+| **Additional Features** |
+| Dark mode toggle | partial | ✓ | partial | ✓ | — | — | **✗ GAP** |
+| Mobile app (iOS/Android) | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ GAP** |
+| School information (with ratings) | ✓ | ✓ | ✓ | ✓ | ✓ | — | **✗ AVOID** |
+| Crime data overlay | — | ✓ | — | ✓ | — | — | **✗ AVOID** |
+
+---
+
+## Top 10 Priority Gaps for HomesOnSpec
+
+**Ranked by impact + effort ratio** (highest ROI first):
+
+### 1. **Saved Searches + Email Alerts** ⭐ HIGH PRIORITY
+- **Why:** 100% of competitors offer this; users expect to subscribe to a search and receive new-listing notifications
+- **Effort:** Medium (email service integration, user preferences storage, scheduler)
+- **Impact:** Drives user retention, recurring visits, lead generation
+- **Implementation:** Add email preference center, wired to listing-sync cron; use SendGrid or SES for delivery
+- **Compliance:** Include unsubscribe link, respect GDPR/CAN-SPAM
+
+### 2. **Quick-Move-In Toggle** ⭐ HIGH PRIORITY
+- **Why:** Spec homes are 80%+ of new construction; builders use this term heavily; directly addresses HomesOnSpec's core audience
+- **Effort:** Low (add binary `move_in_ready` filter + UI checkbox)
+- **Impact:** Segments the market, improves relevance for buyers ready to close in <90 days
+- **Implementation:** Listing status enum: `ready`, `under_construction`, `quick_move_in`; show status badge on card + filter toggle in sidebar
+
+### 3. **Favorites / Watchlist & Compare** ⭐ HIGH PRIORITY
+- **Why:** Reduces friction for comparing homes; increases time-on-site; enables follow-up
+- **Effort:** Low-Medium (add bookmark table, comparison UI modal/page)
+- **Impact:** Improves UX, increases re-visits, supports lead nurturing
+- **Implementation:** `user_favorites` table; "Add to Compare" button on cards; /compare route with side-by-side card view
+
+### 4. **Mortgage Calculator (Embedded)** ⭐ MEDIUM PRIORITY
+- **Why:** 100% of competitors; buyers want immediate cost estimate before drilling into details
+- **Effort:** Medium (API integration or embedded calculator widget)
+- **Impact:** Reduces bounce rate, increases conversion, supports early-stage buyer research
+- **Implementation:** Embed Zillow's mortgage calculator widget or use Blend/Blend Labs API; position on hero + detail pages
+
+### 5. **Integrated Photo Gallery + Video Tours** ⭐ MEDIUM PRIORITY
+- **Why:** 100% of competitors offer high-res galleries; 80%+ offer video/3D tours; critical for new-construction preview
+- **Effort:** Medium-High (media hosting, gallery lightbox, video hosting via YouTube/Vimeo)
+- **Impact:** Improves home preview experience, reduces abandonment, increases lead quality
+- **Implementation:** Upgrade current photo card to swipeable/lightbox gallery; wire video URL from builder; consider Matterport integration for 3D tours (launchable from detail)
+
+### 6. **Move-In Status Labels + Trend Badges** ⭐ MEDIUM PRIORITY
+- **Why:** "Recently listed", "Quick move-in", "Last home available" badges drive urgency
+- **Effort:** Low (add badge enums to listing table, conditional badge render on card)
+- **Impact:** Increases CTR, drives urgency
+- **Implementation:** Listing status badge + `list_date` trending (new in last 7 days = "New" badge)
+
+### 7. **Builder Profile + Reviews** ⭐ MEDIUM PRIORITY
+- **Why:** 100% of competitors; builders have different reputations/ratings; HomeAdvisor + Zillow scores matter to buyers
+- **Effort:** Medium (builder profile page scaffold, review data sourcing, ratings display)
+- **Impact:** Builds trust, reduces friction for less-known builders
+- **Implementation:** `/builder/<slug>` page with review aggregation (scrape BuildZoom scores if available; surface user reviews); highlight builder projects + specialties
+
+### 8. **Commute Time Radius Search** ⭐ MEDIUM PRIORITY
+- **Why:** Emerging feature (not yet universal); highly valuable for suburban new-construction markets
+- **Effort:** Medium-High (Google Maps Distance Matrix API integration, polygon/heatmap rendering)
+- **Impact:** Differentiates HomesOnSpec; attracts commuters; increases time-on-site
+- **Implementation:** Add "Commute Time" filter in advanced search; integrate Google Maps Distance Matrix API; draw commute isochrone on map
+
+### 9. **Dark Mode Toggle** ⭐ LOW-MEDIUM PRIORITY
+- **Why:** Emerging standard (82% of mobile users use dark mode); improves evening browsing experience
+- **Effort:** Low (CSS custom properties, localStorage preference)
+- **Impact:** Improves accessibility, reduced eye strain, follows modern UX trends
+- **Implementation:** Add theme toggle in header; store preference in localStorage; use CSS vars for light/dark palette
+
+### 10. **Mobile App (iOS + Android)** ⭐ LOW PRIORITY (Future)
+- **Why:** 100% of major competitors; long-term investment
+- **Effort:** High (React Native or native dev)
+- **Impact:** Increases engagement, improves mobile UX
+- **Timing:** Post-v2 launch; consider Expo for faster MVP
+
+---
+
+## Color Palette Recommendation
+
+### Current HomesOnSpec Identity
+- **Primary:** Teal `#2dd4bf` on dark
+- **Assessment:** Modern, tech-forward, but lacks the "trust" signal real estate demands
+
+### Competitive Landscape
+- **Blue dominance:** 50%+ of real estate sites use blue (#0052CC, #003DA5, #1F4788)
+- **Why:** Blue = trustworthy, dependable, mature, professional
+- **Pairing:** White or warm neutrals (beige #F5F1E8, cream #FFFBF0)
+- **Accent:** Warm orange/gold (#FF6B35, #E67E22) or green (#10B981) for CTAs
+
+### Recommended Options for HomesOnSpec
+
+**Option A: Modern Trust (RECOMMENDED for new-construction focus)**
+- **Primary:** Navy Blue `#003DA5` (trustworthy, premium)
+- **Secondary:** Soft White `#FFFFFF` with light gray `#F3F4F6`
+- **Accent (CTA):** Warm Teal `#14B8A6` (similar to current, softened)
+- **Accent (Success/Urgency):** Amber `#F59E0B`
+- **Text:** Dark gray `#1F2937` on light; light gray `#D1D5DB` on dark
+- **Why:** Balances current teal identity with trustworthiness; navy + teal combo is premium but modern
+
+**Option B: Warm Modern (Alternative for inviting feel)**
+- **Primary:** Slate Blue `#475569` (professional, neutral)
+- **Secondary:** Cream `#FFFBF0` (warm, inviting)
+- **Accent (CTA):** Coral `#FF6B35` (stands out, warm)
+- **Accent (Secondary):** Forest Green `#047857` (stability)
+- **Why:** Warmer, less tech-corporate; appeals to homeowners
+
+**Option C: Deep Premium (Max differentiation)**
+- **Primary:** Deep Navy `#0F172A` (dark, premium)
+- **Secondary:** Off-white `#F8FAFC` (high contrast)
+- **Accent (CTA):** Gold `#D97706` (luxury, premium feel)
+- **Accent (Secondary):** Emerald `#10B981`
+- **Why:** Dark mode native, premium positioning, strong contrast
+
+### Color Palette Hex Summary (Option A - Recommended)
+
+| Element | Hex | RGB | Use |
+|---------|-----|-----|-----|
+| Primary (Trust) | `#003DA5` | 0, 61, 165 | Nav, hero, primary text |
+| Secondary (Light) | `#F3F4F6` | 243, 244, 246 | Cards, backgrounds, dividers |
+| Accent (Primary CTA) | `#14B8A6` | 20, 184, 166 | Buttons, links, highlights |
+| Accent (Urgency) | `#F59E0B` | 245, 158, 11 | "Quick Move-In" badge, alerts |
+| Text (Dark) | `#1F2937` | 31, 41, 55 | Body text on light |
+| Text (Light) | `#D1D5DB` | 209, 213, 219 | Body text on dark |
+| Border | `#E5E7EB` | 229, 231, 235 | Dividers, borders |
+| Success | `#10B981` | 16, 185, 129 | Status badges (verified, active) |
+| Error | `#EF4444` | 239, 68, 68 | Warnings, offline states |
+
+### Design System Implications
+- **Maintain current teal as secondary accent** — don't lose brand identity; shift primary to navy for trust
+- **Dark mode:** Base `#0F172A`, surfaces `#1F2937`, text `#F3F4F6`
+- **60-30-10 rule:** 60% white/light, 30% navy, 10% teal + accents
+
+---
+
+## Layout & UX Patterns
+
+### Hero Section (Recommended)
+**Pattern: Search-bar-over-hero image (Zillow/Redfin style)**
+
+```
+┌─ Full-bleed hero image (new-construction spec home) ─────────┐
+│ with dark overlay (60% opacity) for contrast │
+├─────────────────────────────────────────────────────────────┤
+│ Headline: "Find Your Perfect New Home" │
+│ Subhead: "X,XXX new construction homes across the country" │
+│ │
+│ ┌─ Search Bar (sticky on scroll down) ────────────────────┐ │
+│ │ [Location Input] [Price Range] [Beds] [Baths] │ │
+│ │ [Advanced Filters ▼] [Search] (primary CTA in teal) │ │
+│ └────────────────────────────────────────────────────────┘ │
+│ Quick filters: [Ready] [Under Construction] [Verified] │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Search Results Layout (Map + List Split)
+**Pattern: Split-view (map 50% left, list 50% right on desktop; toggle on mobile)**
+
+- **Map:** Google Maps with listing pins, color-coded by status (ready=green, UC=yellow, quick-move=blue)
+- **List:** Cards in vertical scroll, sorted by relevance/newest
+- **Sidebar Filters:** Price, beds, baths, move-in status, community, builder, commute radius (collapsible on mobile)
+
+### Listing Card Design (Recommended)
+```
+┌────────────────────────────────────────────────┐
+│ [Hero Image with gradient overlay] │
+│ ▲ "Quick Move-In" badge (amber) │
+│ ♡ Favorite button (top-right) │
+│ │
+│ 123 Oak Street, Springfield, TX │
+│ New construction by Shea Homes │
+│ │
+│ $425,900 | 4 bed | 3 bath | 2,400 sqft │
+│ Estimated: $2,950/mo (calculator link) │
+│ │
+│ ⏱ Est. move-in: Oct 2026 │
+│ ✓ Verified permit | ✓ Model home available │
+│ │
+│ [View Details] [Schedule Tour] [Compare] │
+└────────────────────────────────────────────────┘
+```
+
+**Key elements:**
+- **Photo prominently first** (16:9 ratio, 400×225px min)
+- **Price in large, bold sans-serif** (secondary accent color)
+- **Status badges** (Quick Move-In, Verified, New)
+- **3-line details row** (beds/baths/sqft, monthly estimate, move-in date)
+- **CTA buttons** (Details, Schedule Tour, Compare)
+- **No school ratings or crime data** (Fair Housing risk)
+
+### Detail Page Layout (PDP)
+**Navigation:** Hero > Photo Gallery > Specs > Builder > Map + Commute > Lead Form
+
+1. **Hero Photo + Video Play Button** (swipeable gallery on scroll)
+2. **Spec Grid** (beds, baths, sqft, lot size, price, hoa, garage, etc.)
+3. **Photo Gallery (Lightbox)** with video/3D tour link
+4. **Floor Plan** (interactive if available)
+5. **Description + Features** (text, with expandable sections)
+6. **Builder Profile Card** (name, logo, reviews, link to builder page)
+7. **Map + Commute Tool** (Google Map + distance-matrix commute estimates)
+8. **Mortgage Calculator** (embedded, calculate monthly payment)
+9. **Verification Labels** (permit status, construction timeline)
+10. **Schedule Tour / Contact Builder CTA** (sticky or modal)
+
+---
+
+## Fair Housing Compliance Cautions
+
+### What to AVOID (Legal Risk)
+
+1. **School Ratings / Great Schools Scores**
+ - **Risk:** HUD flagged GreatSchools ratings on Zillow/Redfin as steering-adjacent (correlates to neighborhood race/wealth)
+ - **Guidance:** Do NOT display school ratings or "top schools" badges
+ - **Alternative:** Offer factual school-proximity info only ("Elementary school within 0.5 miles"), let buyer research independently
+
+2. **Crime Data Overlay**
+ - **Risk:** Crime statistics correlate strongly with neighborhood racial composition; displaying it can steer minorities away
+ - **Guidance:** Do NOT include crime maps, crime rates, or "safest neighborhoods" badges
+ - **Note:** HUD 2026 memo allows agents to *answer* questions about crime factually, but publishing it on the platform is riskier
+
+3. **Demographic Language**
+ - **Risk:** Words like "up-and-coming" (steering away from gentrifying areas), "family-oriented" (implicit familial-status steering), or coded race language
+ - **Guidance:** Describe neighborhoods factually: "New development near downtown," "Mixed-income community," avoid value judgments
+
+4. **Neighborhood Ratings / Desirability Scores**
+ - **Risk:** Synthesized scores that correlate with race/ethnicity
+ - **Guidance:** Do NOT publish neighborhood rating systems; let buyer choose based on facts
+
+### What IS Permissible (per HUD 2026 guidance)
+
+- ✓ Factual school proximity ("Elementary school 0.3 miles away")
+- ✓ School names and public contact info
+- ✓ Number of students, grades served
+- ✓ Factual crime statistics IF published consistently (no selectivity) and WITHOUT commentary
+- ✓ Neighborhood amenities (parks, transit, libraries, shops) — factual list only
+- ✓ Commute times to major employers (Zillow/Redfin standard, factual)
+
+### HomesOnSpec Recommendation
+- **Include:** Commute times (to major job centers), factual amenity list (parks, shops, transit)
+- **Exclude:** School ratings, crime data, demographic overlays, desirability scores
+- **Display:** Verification labels (construction timeline, permit status) — your differentiator, legally safe
+
+---
+
+## Recommended Feature Prioritization & Roadmap
+
+### Phase 1 (MVP Additions — 4-6 weeks)
+1. **Quick-Move-In toggle** (low effort, high impact)
+2. **Saved searches + email alerts** (medium effort, high impact)
+3. **Favorites/compare** (low effort, high impact)
+4. **Move-in status badges** (low effort)
+5. **Update color palette** to navy + teal (Option A) — design-only, no code
+
+### Phase 2 (Standard Features — 8-12 weeks)
+1. **Embedded mortgage calculator**
+2. **Photo gallery upgrade** (lightbox, swipeable)
+3. **Builder profiles + reviews aggregation**
+4. **Dark mode toggle**
+5. **Update hero search bar to sticky on scroll**
+
+### Phase 3 (Differentiators — 12-16 weeks)
+1. **Commute time radius search** (Google Distance Matrix integration)
+2. **3D/video tour support** (Matterport embed or YouTube video links)
+3. **Price/market trend charts** (aggregate data, show price history)
+4. **Trending homes widget** (most-viewed, recently-listed)
+
+### Phase 4 (Long-term — 6+ months)
+1. **Mobile app** (React Native or Expo)
+2. **AI conversational search** (optional, watch Realtor.com/Redfin traction first)
+3. **Construction pipeline tracker** (live permit tracking, milestone alerts)
+
+---
+
+## Conclusion
+
+HomesOnSpec's core differentiation — **construction permits + verification labels + pipeline visibility** — is strong and legally defensible (unlike school ratings). The product should adopt table-stakes features (saved searches, favorites, quick-move-in toggle, mortgage calculator) in Phase 1-2 to remain competitive, then lean into the **permit/construction timeline** and **commute time** differentiators in Phases 3+.
+
+**Color shift recommendation:** Evolve from teal-primary to navy-primary (Option A) to signal trustworthiness while retaining teal as an accent. This balances tech-forward positioning with real estate's trust expectations.
+
+**Fair Housing:** Avoid school ratings and crime data; lean into factual commute times and permit verification as your compliance-safe moat.
+
+---
+
+## Source References
+
+The competitive analysis draws from:
+
+- [NewHomeSource Learning Hub](https://www.newhomesource.com/learn/how-to-use-newhomesource/)
+- [Redfin New Construction](https://www.redfin.com/news/redfin-adds-new-construction-listings-and-features/)
+- [Realtor.com+ Announcement](https://www.prnewswire.com/news-releases/realtorcom-unveils-realtorcom-a-first-of-its-kind-collaborative-home-search-experience-302666863.html)
+- [Zillow Advanced Search Guide](https://www.zillow.com/learn/zillow-advanced-search/)
+- [BuildZoom Permit Map Tutorial](https://www.buildzoom.com/blog/building-permit-map)
+- [Real Estate Color Psychology Guide](https://www.propphy.com/blog/real-estate-website-design-best-practices-2026)
+- [HUD Fair Housing Act & Steering Clarification (2026)](https://finsights.cooley.com/hud-clarifies-scope-of-fair-housing-acts-steering-prohibition-for-real-estate-professionals/)
+- [Best IDX Practices 2026](https://www.luxurypresence.com/blogs/idx-home-search-providers/)
+- [School Ratings & Fair Housing Concerns](https://fairhousinginstitute.com/fair-housing-steering/)
diff --git a/apps/web/src/app/search/SearchClient.tsx b/apps/web/src/app/search/SearchClient.tsx
index 657c4384..d3306d69 100644
--- a/apps/web/src/app/search/SearchClient.tsx
+++ b/apps/web/src/app/search/SearchClient.tsx
@@ -73,6 +73,21 @@ const STATUS_LABELS: Record<string, string> = {
PLANNED: "Planned",
};
+// national-site card upgrades: colored urgency badges + an estimated monthly payment.
+const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
+ MOVE_IN_READY: { label: "Move-in ready", cls: "bg-amber-100 text-amber-800 ring-1 ring-amber-200" },
+ UNDER_CONSTRUCTION: { label: "Under construction", cls: "bg-sky-100 text-sky-800 ring-1 ring-sky-200" },
+ PLANNED: { label: "Planned", cls: "bg-neutral-100 text-neutral-600 ring-1 ring-neutral-200" },
+};
+// est. all-in monthly: 20% down, 7% APR, 30yr P&I + ~1.25%/yr taxes+insurance.
+function estMonthly(price: string | number | null): number | null {
+ const p = Number(price);
+ if (!Number.isFinite(p) || p <= 0) return null;
+ const loan = p * 0.8, r = 0.07 / 12, n = 360;
+ const pi = (loan * (r * Math.pow(1 + r, n))) / (Math.pow(1 + r, n) - 1);
+ return Math.round(pi + (p * 0.0125) / 12);
+}
+
export default function SearchClient({ initialQuery }: { initialQuery: string }) {
const [q, setQ] = useState(initialQuery);
const [filters, setFilters] = useState<Record<string, string | string[]>>({});
@@ -84,6 +99,13 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const bboxRef = useRef<string | null>(null);
+ // Favorites (national-site staple) — persisted client-side.
+ const [favs, setFavs] = useState<Set<string>>(new Set());
+ useEffect(() => { try { setFavs(new Set(JSON.parse(localStorage.getItem("homesonspec.favs") || "[]"))); } catch {} }, []);
+ const toggleFav = (id: string) => setFavs((prev) => {
+ const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id);
+ localStorage.setItem("homesonspec.favs", JSON.stringify([...n])); return n;
+ });
useEffect(() => {
const savedSort = localStorage.getItem("homesonspec.sort");
@@ -319,18 +341,30 @@ export default function SearchClient({ initialQuery }: { initialQuery: string })
<div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }} data-testid="results-grid">
{(data?.homes ?? []).map((home) => (
<Link key={home.id} href={`/homes/${home.id}`}
- className="card-interactive p-4"
+ className="card-interactive relative p-4"
data-testid="home-card">
- <div className="font-display text-xl font-semibold text-brand-900">{fmtPrice(home.price)}</div>
+ <button type="button" aria-label="Save home" data-testid="fav-btn"
+ onClick={(e) => { e.preventDefault(); e.stopPropagation(); toggleFav(home.id); }}
+ className="absolute right-3 top-3 z-10 text-lg leading-none transition hover:scale-110">
+ <span className={favs.has(home.id) ? "text-rose-500" : "text-neutral-300"}>{favs.has(home.id) ? "♥" : "♡"}</span>
+ </button>
+ {STATUS_BADGE[home.constructionStatus] && (
+ <span className={`inline-block rounded-full px-2 py-0.5 text-[11px] font-medium ${STATUS_BADGE[home.constructionStatus]!.cls}`}>
+ {STATUS_BADGE[home.constructionStatus]!.label}
+ </span>
+ )}
+ <div className="mt-2 flex items-baseline gap-2">
+ <span className="font-display text-xl font-semibold text-brand-900">{fmtPrice(home.price)}</span>
+ {estMonthly(home.price) !== null && (
+ <span className="text-xs text-neutral-500">~${estMonthly(home.price)!.toLocaleString()}/mo</span>
+ )}
+ </div>
<div className="mt-0.5 truncate text-sm text-neutral-700">
{home.street ?? "Address on request"} · {home.city}, {home.state}
</div>
<div className="mt-1 text-sm text-neutral-500">
{home.beds ?? "—"} bd · {home.bathsTotal ?? "—"} ba · {home.sqft?.toLocaleString() ?? "—"} sqft
- </div>
- <div className="mt-1 text-xs text-neutral-500">
- {STATUS_LABELS[home.constructionStatus]}
- {home.estCompletionDate ? ` · est. ${new Date(home.estCompletionDate).toLocaleDateString(undefined, { month: "short", year: "numeric" })}` : ""}
+ {home.estCompletionDate ? ` · ready ${new Date(home.estCompletionDate).toLocaleDateString(undefined, { month: "short", year: "numeric" })}` : ""}
</div>
<div className="mt-2 flex items-center justify-between">
<span className="text-xs text-neutral-500">{home.builder.name}</span>
← ab43eec2 build-loop: Lennar uses LENNAR_STATE_FILTER=slug(state) not
·
back to Homesonspec
·
build-loop: Lennar + DR Horton page limit 120->300 (Cody: CA f90ea4b6 →