{tabs.map(t => t.id === 'create' ? (

) : (

{t.label} {active === t.id && (

)}

))}

); } function Eyebrow({ children }) { return (

{children}

); } // ───────────────────────────────────────────────────────────── // Faux London map — terracotta-toned, with activity-glyph pins // ───────────────────────────────────────────────────────────── // Each glyph is a tiny inline SVG group, designed to read at ~12-14px // inside a pin disc. Lines only — no fills — to match the brand's // editorial / line-drawn vibe. const ACTIVITY_GLYPHS = { // basketball — hoops basketball: ( ), // tennis / padel — racket shape racket: ( ), // dice / board games — three pips dice: ( ), // pencil — diagonal pencil pencil: ( ), // running shoe — simpler silhouette shoe: ( ), // knife & fork fork: ( ), // music note — 8th note note: ( ), // lotus / yoga — single bloom lotus: ( ), // wave — 3 little waves wave: ( ), // chess — pawn chess: ( ), // pint glass — tilted pint: ( ), // camera camera: ( ), }; // One pin = a teardrop body with a glyph cut out of its center. function MapPin({ x, y, color, glyph, big = false, halo = false }) { const r = big ? 13 : 11; return ( {halo && ( <> )} {/* drop shadow */} {/* teardrop body */} {/* glyph — sits in the round part */} {ACTIVITY_GLYPHS[glyph] || ACTIVITY_GLYPHS.dice} ); } function FauxMap({ width = 360, height = 200, pinCount = 9 }) { return ( ); } // ───────────────────────────────────────────────────────────── // Avatars // ───────────────────────────────────────────────────────────── function AvatarDot({ size = 24, letter = 'A', tone = 'sage', stack = false }) { const tones = { sage: '#7C8F6B', ochre: '#C68A2B', plum: '#6E4A6B', accent: '#C4502D', berry: '#9A4A5A', slate: '#5B7A85', rust: '#A85C3C', }; return (

{letter}

); } function AvatarStack({ avatars = [], size = 24 }) { return (

{avatars.map((a, i) => (

))}

); } // ───────────────────────────────────────────────────────────── // 1) Welcome screen // ───────────────────────────────────────────────────────────── function WelcomeScreen() { return (

find{' '} your people {'\n'}through
what you love.

pickup hoops, board game nights, life-drawing, salsa class — anything you're into, with people nearby.

already in? sign in →

); } // ───────────────────────────────────────────────────────────── // 2) Explore screen (the hero) // ───────────────────────────────────────────────────────────── function ExploreScreen({ neighborhood = 'belsize park' }) { return (

{/* Map */}

{/* count chip */}

27 nearby

{/* expand */}

{/* What you're into */}

WHAT YOU'RE INTO

{/* Also happening */}

ALSO HAPPENING

); } function FeaturedCard() { return (

{/* Image / swatch */}

{/* Halftone dots */}

{/* Basketball icon centered */}

{/* time pill */}

tonight 7pm

{/* Body */}

pickup hoops

sports · belsize park · 0.2mi away

{/* attendees */}

7 are in

{/* CTA row */}

I'm in

); } function MiniEventRow({ dot, title, meta, when, letter, tone }) { const tones = { sage: '#7C8F6B', ochre: '#C68A2B', plum: '#6E4A6B', accent: '#C4502D', berry: '#9A4A5A', }; return (

{title}

{meta}

{when}

); } // ───────────────────────────────────────────────────────────── // 3) Event Detail // ───────────────────────────────────────────────────────────── function EventDetailScreen() { return (

{/* Hero image */}

{/* Back */}

{/* Save */}

{/* Eyebrow */}

● ARTS · BLOOMSBURY

{/* Sheet */}

life drawing class

{/* Host row */}

amaal hosts

5 events · usually on thursdays

say hi

{/* Meta rows */}

{/* Going avatars */}

sam, mira & 7 others. 2 friends going

{/* CTA pinned */}

I'm in — see you thursday

); } function DetailRow({ icon, primary, secondary }) { const icons = { time: , pin: , users: , }; return (

{primary}

{secondary}

); } // ───────────────────────────────────────────────────────────── // 4) Chat screen // ───────────────────────────────────────────────────────────── function ChatScreen() { return (

{/* Header */}

pickup hoops

7 in · tonight 7pm · belsize park

{/* Day separator */}

· today ·

{/* Messages */}

liv joined

{/* Input */}

say something nice…

); } function ChatBubble({ from, tone, message, time, self }) { if (self) { return (

{time}

{message}

); } return (

{from}

{message}

{time}

); } function SystemMessage({ children }) { return (

{children}

); } // ───────────────────────────────────────────────────────────── // 5) Profile screen // ───────────────────────────────────────────────────────────── function ProfileScreen() { return (

{/* Identity */}

rae nightingale

belsize park · joined apr 2026

"tennis on the weekends, board games on the rainy ones, always up for a new café."

{/* Stats strip */}

{[ { num: '42', label: 'gone to' }, { num: '11', label: 'hosted' }, { num: '28', label: 'friends' }, ].map((s, i) => (

0 ? '1px solid var(--divider, #EBE1CD)' : 'none', }}>

{s.num}

{s.label}

))}

{/* Into */}

WHAT I'M INTO

{[ ['tennis', 'accent'], ['catan', 'ochre'], ['life drawing', 'plum'], ['sourdough', 'rust'], ['salsa', 'berry'], ['easy run', 'sage'], ['poker', 'slate'], ['stargazing', 'plum'], ['+12 more', 'mute'], ].map(([label, tone], i) => (

{tone !== 'mute' && (

)} {label}

))}

); } // ───────────────────────────────────────────────────────────── // 6) Onboarding — pick activities // ───────────────────────────────────────────────────────────── function OnboardingScreen() { const groups = [ { name: 'sports', tone: 'accent', items: ['tennis', 'football', 'basketball', 'climbing', 'running', 'cycling'] }, { name: 'games', tone: 'ochre', items: ['catan', 'chess', 'codenames', 'dnd', 'poker'] }, { name: 'outdoor', tone: 'sage', items: ['hiking', 'swimming', 'picnics'] }, { name: 'arts', tone: 'plum', items: ['life drawing', 'pottery', 'photography'] }, { name: 'food', tone: 'rust', items: ['supper clubs', 'wine tasting'] }, ]; return (

step 2 of 3

skip →

what are you{' '} into?

pick whatever sounds like you. tap a category to see more — we'll surface events that match.

{groups.map(g => (

{g.name}

{g.items.map((it, i) => { const picked = (g.name === 'sports' && (it === 'tennis' || it === 'running')) || (g.name === 'games' && it === 'catan') || (g.name === 'arts' && it === 'life drawing'); return (

{it}{picked ? ' ✓' : ''}

); })}

))}

4 picked · 596 more to explore

continue →

); } // ───────────────────────────────────────────────────────────── // 7) Create Event // ───────────────────────────────────────────────────────────── function CreateEventScreen() { return (

cancel

plan something

post →

sunday yoga in the park

name your event — keep it warm

); } function FieldBlock({ label, value, extra, tone, multi }) { return (

{tone &&

} {label}

{value}

{extra && (

{extra}

)}

); } // ───────────────────────────────────────────────────────────── // 8) Empty state — nothing matches yet → plan one // ───────────────────────────────────────────────────────────── function EmptyStateScreen() { return (

{/* Soft map background */}

0 nearby

{/* Hand-drawn empty illo — a sketchbook with a pencil */}

nothing matches yet —

be{' '} the spark .

adjust your filters, or start something — people nearby will see it.

plan something →

widen the radius

); } // ───────────────────────────────────────────────────────────── // 9) Filter / Discover screen // ───────────────────────────────────────────────────────────── function FilterScreen() { return (

{/* Header */}

cancel

filters

reset

{/* WHEN — segmented */} WHEN

{[ { label: 'tonight', on: true }, { label: 'tomorrow', on: false }, { label: 'this week', on: false }, { label: 'any', on: false }, ].map((c, i) => (

{c.label}

))}

{/* WITHIN — slider */}

WITHIN

2.0 mi · 12 min walk

0.5mi

10mi

{/* CATEGORIES — chip grid */} CATEGORIES

{[ { label: 'sports', tone: '#C4502D', on: true }, { label: 'games', tone: '#C68A2B', on: true }, { label: 'outdoor', tone: '#7C8F6B', on: false }, { label: 'arts', tone: '#6E4A6B', on: true }, { label: 'food', tone: '#A85C3C', on: false }, { label: 'music', tone: '#9A4A5A', on: false }, { label: 'wellness', tone: '#5B7A85', on: false }, { label: 'learning', tone: '#7C8F6B', on: false }, ].map((c, i) => (

{c.label} {c.on && ✓}

))}

{/* VIBE — pill row */} THE VIBE

{[ { l: 'beginner-friendly', on: true }, { l: 'solo-friendly', on: true }, { l: 'small group', on: false }, { l: 'free / low cost', on: false }, { l: 'no booking needed', on: false }, { l: 'outdoors', on: false }, ].map((c, i) => (

{c.l}

))}

{/* Apply CTA */}

show 27 events →

); } // ───────────────────────────────────────────────────────────── // 10) Map detail — zoomed pin with peek sheet // ───────────────────────────────────────────────────────────── function MapDetailScreen() { return (

{/* Header */}

search this area

{/* Full-bleed map */}

{/* Peek sheet */}

{/* handle */}

{/* glyph chip */}

pickup hoops

belsize courts · tonight 7pm

7 in · 3 spots left

I'm in

); } function ZoomedMap() { // Zoomed-in street view. viewBox sized close to a tall phone aspect so // content reads without slice cropping. Active pin sits in the upper- // middle so the peek sheet (bottom) doesn't cover it. return ( ); } // CreateEventScreen already defined above — re-export Object.assign(window, { WelcomeScreen, ExploreScreen, EventDetailScreen, ChatScreen, ProfileScreen, OnboardingScreen, CreateEventScreen, EmptyStateScreen, FilterScreen, MapDetailScreen, FauxMap, AvatarDot, AvatarStack, });