# Chicagoland House Hack — Rebuild Strategy
### Brand: Real Estate Growth Partners / Lori Wyatt

---

## 1. Site Map (rebuilt IA)

```
/                              Home
/house-hacking/                Pillar guide: "What Is House Hacking?" (hub page)
/buy/                           Buy — multifamily & house-hack search (IDX)
/sell/                          Sell / Home valuation
/mortgage-calculator/           Tools: mortgage + cash-flow calculator
/neighborhoods/                 Neighborhood hub (map + filter, replaces footer link-dump)
   /neighborhoods/[slug]/        77 individual neighborhood pages (kept, cleaned up)
/north-shore/                   North Shore hub
   /north-shore/[slug]/
/property-types/                Hub: condos, multi-family, new construction, commercial, etc.
   /property-types/[slug]/
/about/                         Lori Wyatt + team, credentials, philosophy
/guides/ (Blog)                 Investment & house-hacking education hub
   /guides/[slug]/
/closed-deals/                  Social proof: recently closed transactions
/contact/                       Contact + booking
/privacy-policy/ /terms/ /dmca/ Legal
```

**Key IA changes**
- Collapsed the 70+ item nav dump into a **Neighborhoods hub** (searchable/filterable map + list), linked once from the header. Individual neighborhood pages remain for SEO, but are no longer force-fed through every menu.
- Added a **pillar page** (`/house-hacking/`) to consolidate topical authority — every neighborhood and guide page links back to it, and it links out. This is the single biggest SEO gap on the current site: there's no canonical "what is house hacking" resource for Chicago, despite it being the entire brand name.
- "Property Type" dead `#` links replaced with real pages.

---

## 2. Design System

**Positioning:** not a generic IDX agent site — a specialist's toolkit for multifamily/house-hack buyers. Design should feel like a trusted analyst's deal sheet, not a stock listings portal.

### Color
| Token | Hex | Use |
|---|---|---|
| `ink` | `#10192B` | Headlines, nav, footer bg |
| `slate` | `#24334F` | Secondary dark panels |
| `brass` | `#B8912F` | Primary accent — CTAs, rules, active states |
| `brick` | `#A6432D` | Secondary accent — tags, hover, alerts (used sparingly) |
| `paper` | `#F4F5F1` | Page background |
| `ink/60` | `#5B6472` | Body/secondary text |
| `line` | `#E1E3DC` | Hairline borders/dividers |

Rationale: navy + brass + brick reads like Chicago graystone architecture (brick facades, brass hardware, wrought iron) rather than a generic real-estate teal or cliché cream/terracotta template.

### Type
- **Display:** Fraunces (serif, editorial weight) — headlines only, set tight.
- **Body/UI:** Inter — all paragraph copy, nav, buttons.
- **Data/mono:** IBM Plex Mono — prices, cap rates, unit counts, stats. Reinforces the "deal sheet" concept and gives numbers real authority.

Scale: 14 / 16 / 18 / 24 / 32 / 48 / 64px, 1.15 line-height for display, 1.6 for body.

### Components
- **Buttons:** solid brass on ink (primary), outline ink (secondary), underline-only (tertiary/text links).
- **Cards:** 1px `line` border, no shadow at rest, subtle lift + brass top rule on hover.
- **Ledger stat blocks:** mono numerals, thin brass rule above, small-caps label below — the site's signature visual motif, used for property stats, trust-bar numbers, and deal breakdowns.

### Signature element
A **"Deal Sheet" hero card**: a stylized ledger card (not a stock photo) showing a real anonymized house-hack breakdown — purchase price, unit rents, mortgage payment, net housing cost — set in mono type with brass rules. It visually explains the entire business model in one glance and is unique to this brand (nobody else in Chicago RE is designing around the *numbers* of the deal).

---

## 3. SEO Plan (site-wide)
- One clear H1 per page; H2s map to real content sections, not decorative labels.
- Title tag pattern: `{Primary Keyword} | {Secondary Benefit} — Real Estate Growth Partners`.
- Meta descriptions rewritten per page, 150–160 characters, action-oriented.
- Schema: `RealEstateAgent`/`LocalBusiness` sitewide, `Article` on guides, `BreadcrumbList` on all deep pages, `FAQPage` on the house-hacking pillar.
- Internal linking: every neighborhood page links to the pillar guide + 3 adjacent neighborhoods + 1 relevant guide article, instead of the current flat, undifferentiated footer dump.
- Image `alt` text describes content + neighborhood/property context, never filenames.

## 4. Accessibility
- Full keyboard navigation for mega-menu (roving tabindex, `Esc` to close, visible focus ring in brass).
- Color contrast: all text combos checked to WCAG AA minimum (ink-on-paper = 14.8:1, brass-on-ink for large text/buttons only).
- Semantic landmarks (`header`, `nav`, `main`, `footer`), skip-to-content link, form labels tied to inputs, `prefers-reduced-motion` respected for all animation.

## 5. Performance
- Rebuild removes duplicate mega-menu markup (currently rendered twice for desktop + off-canvas) — cuts DOM size significantly.
- Next.js/Tailwind stack with static generation (ISR) for neighborhood/guide pages, `next/image` for automatic AVIF/WebP + responsive sizing, font subsetting + `font-display: swap`, code-split IDX widget so it loads after first paint (it's third-party and currently likely blocking).
- Target: LCP < 2.0s, CLS < 0.05, INP < 200ms.

## 6. Recommended stack
**Next.js + React + TypeScript + Tailwind**, deployed on Vercel, MLS data via IDX Broker embed (kept, but lazy-loaded) or a proper MLS/RESO Web API integration long-term. WordPress + Elementor is what caused today's bloat and dead links; a static/ISR Next.js rebuild will be materially faster and easier to keep clean. If the client's team isn't technical, a lighter alternative is WordPress with a hand-coded block theme (no Elementor) — still far faster than the current setup.