Neighborhood Guide Page

Create an interactive neighborhood guide page for a real estate platform called "HomeScope Realty" that helps homebuyers explore and compare neighborhoods. Include these sections:

1. HERO SECTION
- Full-width aerial/drone-style image of a suburban neighborhood
- Headline: "Find the Neighborhood That Fits Your Life"
- Subheadline: "Explore local schools, commute times, amenities, and more — all in one place"
- Search bar with placeholder: "Enter a neighborhood, city, or ZIP code"
- Autocomplete dropdown with popular neighborhoods
- Background overlay gradient from dark at top to transparent

2. FEATURED NEIGHBORHOODS (horizontal scroll cards)
- 6 neighborhood cards, each showing:
  - Hero image of the area (parks, streetscape, or landmark)
  - Neighborhood name and city
  - Median home price: e.g., "$485,000"
  - Walk Score badge: e.g., "Walk Score: 82"
  - 3 quick tags: e.g., "Family-Friendly", "Great Schools", "Quiet Streets"
  - "Explore" link arrow
- Cards have rounded corners (12px), subtle shadow, and slight scale-up on hover

3. NEIGHBORHOOD DETAIL TEMPLATE (main content area for a selected neighborhood — use "Maplewood Heights" as example)
- Breadcrumb: Home > Neighborhoods > Maplewood Heights
- Area overview header:
  - Large neighborhood name with city/state
  - 1-paragraph description: "Maplewood Heights is a tree-lined residential neighborhood known for its top-rated schools, community parks, and charming downtown strip. Popular with young families and professionals, it offers a perfect balance of suburban tranquility and urban convenience."
  - Key stats row: Population: 28,400 | Median Income: $94,000 | Median Home Price: $485,000 | Avg Rent: $2,100/mo

4. SCORES & RATINGS (4-column grid of circular progress indicators)
- Walk Score: 82/100 (Very Walkable) — teal color
- Transit Score: 65/100 (Excellent Transit) — blue color
- Bike Score: 71/100 (Very Bikeable) — green color
- Safety Score: 88/100 (Very Safe) — purple color
- Each score is a circular progress ring with the number centered, label below, and a brief descriptor

5. LOCAL AMENITIES MAP
- Interactive map placeholder (Mapbox/Google Maps style) showing the neighborhood boundary
- Filterable map pins by category:
  - Schools (yellow pins): Maplewood Elementary (9/10), Lincoln Middle (8/10), Westview High (8/10)
  - Parks (green pins): Maplewood Central Park, Riverside Trail, Community Playground
  - Dining (orange pins): 42 restaurants within 1 mile
  - Shopping (blue pins): Maplewood Town Center, Farmers Market (Saturdays)
  - Healthcare (red pins): Maplewood Medical Center, 3 urgent care clinics
- Sidebar list that syncs with map, showing name, category icon, distance, and rating

6. SCHOOLS SECTION
- Headline: "Schools in Maplewood Heights"
- Table or card list:
  - Maplewood Elementary — K-5 — Rating: 9/10 — 0.4 mi — 380 students
  - Lincoln Middle School — 6-8 — Rating: 8/10 — 1.1 mi — 620 students
  - Westview High School — 9-12 — Rating: 8/10 — 1.8 mi — 1,200 students
  - Little Acorns Montessori (Private) — Pre-K-3 — Rating: 9/10 — 0.6 mi — 85 students
- Source attribution: "Ratings from GreatSchools.org"
- Color-coded rating badges (green for 8+, yellow for 6-7, red for below 6)

7. COMMUTE TIMES
- Headline: "Getting Around from Maplewood Heights"
- Visual commute cards (icon + time + mode):
  - Downtown: 22 min by car, 35 min by transit
  - Airport: 40 min by car
  - Tech District: 18 min by car, 28 min by transit
  - University: 15 min by car, 20 min by bike
- Small note: "Estimates based on average weekday conditions"

8. HOUSING MARKET SNAPSHOT
- Headline: "Maplewood Heights Market Trends"
- Key metrics in a 2x2 grid:
  - Median Sale Price: $485,000 (+4.2% YoY) with small up-arrow indicator
  - Days on Market: 18 days (-3 days YoY)
  - Price per Sq Ft: $245
  - Homes Sold (Last 30 Days): 24
- Mini line chart showing 12-month median price trend
- CTA: "View All Maplewood Heights Listings"

9. RESIDENT REVIEWS
- 3 reviews from area residents:
  - "We moved here for the schools and stayed for the community. Block parties every summer!" — The Martinez Family, 6 years in Maplewood Heights — 5 stars
  - "Great walkability — I can get to the grocery store, gym, and coffee shop without my car." — Sarah T., 2 years — 4 stars
  - "Quiet neighborhood with beautiful tree-lined streets. The farmers market is a weekend highlight." — James W., 10 years — 5 stars
- Average rating displayed: 4.7/5 from 156 reviews

10. COMPARE NEIGHBORHOODS CTA
- Side-by-side comparison teaser showing Maplewood Heights vs. 2 nearby neighborhoods
- Quick comparison: median price, walk score, school rating, commute to downtown
- CTA button: "Compare Neighborhoods Side by Side"

11. CONTACT / CTA SECTION
- Headline: "Ready to Explore Maplewood Heights?"
- Agent card: photo, name, phone, email of a local specialist agent
- CTA: "Schedule a Neighborhood Tour"
- Secondary: "Get Market Alerts for This Area" with email input

Design: Clean, map-centric layout. Primary color: deep blue (#1E3A5F) for headers and navigation, white (#FFFFFF) content areas, teal (#0D9488) for scores and interactive elements, warm gray (#F8FAFC) section backgrounds. Typography: DM Sans for headings, Inter for body. Cards with 10px border-radius, 1px border (#E2E8F0), hover shadow transition. Responsive: map becomes full-width with collapsible sidebar on tablet; single-column stack on mobile with swipeable cards.