# Home page design

The home page must be **appealing to parents and easy to use — not a blank
list**. A parent arrives thinking *"it's Saturday, it might rain, what's near
us the kids will like?"* — the page answers exactly that with **search +
categories + curated filter-rows**, each row backed by a real filter.

## Mockup (mobile-first; scales up to desktop multi-column)

```text
┌────────────────────────────────────────────────────────┐
│  ☀️ Days Out For The Family        ❤️ Favorites · Sign in│
├────────────────────────────────────────────────────────┤
│        Find your next family day out 🎈                 │
│     Great places to take the kids — near you            │
│   ┌──────────────────────────────┐  ┌──────────────┐    │
│   │ 🔍 Town, postcode or place…  │  │ Find days out│    │
│   └──────────────────────────────┘  └──────────────┘    │
│              📍 Use my location                          │
│   [ Indoor ] [ Buggy-friendly ] [ Free ] [ Under 5s ]   │
├────────────────────────────────────────────────────────┤
│  Browse by type                                         │
│  🦒 Zoos &  🏰 Soft  🌳 Parks  🏛️ Museums  🏖️ Beaches    │
│     Farms     Play                                      │
├────────────────────────────────────────────────────────┤
│  📍 Near you                                  see all → │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐                    │
│  │ [photo] │ │ [photo] │ │ [photo] │   ← horizontal      │
│  │Willows  │ │Sea Life │ │Ape Park │     swipe on mobile │
│  │⭐4.6·2mi │ │⭐4.8·5mi │ │⭐4.3·8mi │                    │
│  │👶🏠💷free │ │🏠 indoor │ │🌳outdoor │                    │
│  │      ❤️ │ │      ❤️ │ │      ❤️ │                     │
│  └─────────┘ └─────────┘ └─────────┘                    │
├────────────────────────────────────────────────────────┤
│  🌧️ Rainy day ideas (indoor)                  see all → │
│  💷 Free days out                             see all → │
│  👶 Great with a buggy                        see all → │
│  ⭐ Top rated near you                        see all → │
├────────────────────────────────────────────────────────┤
│  🏛️ Run an attraction? Claim your free listing →         │
└────────────────────────────────────────────────────────┘
```

## Design principles
- **One clear action**: search + "use my location" front and centre.
- **Curated rows = personas, surfaced editorially**: Rainy-day/indoor (Sam,
  Tom), Free (Tom), Buggy-friendly (Priya), Top rated (trust). Always feels
  alive — never a blank list.
- **Scannable cards**: photo · ⭐rating (slot, filled in v2) · **distance** ·
  facility icons (👶 buggy · 🏠 indoor · 💷 free) · ❤️ favourite. A parent
  decides at a glance.
- **Mobile-first**: rows swipe horizontally; filters open as a bottom-sheet;
  big tap targets. See design/mobile.md.
- **Warm, friendly tone**: emojis, plain language, reassuring.
- **Designed-for-v2**: rating + upvote slots present now so reviews/votes
  fill them later with no redesign.

## Card anatomy (reused on home rows, search results, favourites)
photo · name · ⭐rating · category · 📍distance · facility icons · ❤️


## Design language v3 (locked after operator review rounds)
- **Canvas: pure white** (cream rejected — looked off); borders `#DDD` +
  stronger shadows so pills/chips read on white.
- **Copy never sits on photos.** Hero = **offset split**: text left, rounded
  photo right (asymmetric, photo gets a soft organic corner).
- **Alternating rhythm:** the operator band mirrors the hero — **photo left,
  copy right**; newsletter is a slim inline row, not a boxed banner.
- **Photo-led Airbnb cards:** borderless, image-top, text below (name + ★,
  muted meta, price/Free line), heart sits on the photo.
- **Category icons: thin-line on pure white** (tinted/boxed icons clashed).
- **Preview suite:** preview.html (home) · detail.html (listing) ·
  operator.html (owner dashboard) · parents.html (favourites) — all linked.