## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Full page: https://kage-design-assets.t3.tigrisfiles.io/screenshots/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146409864-full.webp
- Above the fold: https://kage-design-assets.t3.tigrisfiles.io/screenshots/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146405733.webp
- Design on Kage: https://kage.design/designs/meetup-landing-page

## Before you start
Ask the user what product they are building, who it is for, and what brand assets they already have (name, logo, colours, typefaces). Wait for the answers before writing any code — every rule below is applied to *their* product, not to the reference site.

## Page structure
1. **Top nav** — logo left; centred composite search bar (query input + divider + location input + magnifier button); right side: language selector, "Log in" text link, dark pill "Sign up" button. Single row, generous height, white background.
2. **Hero** — centred display headline (3 lines) with small inline icon chips embedded in the sentence; one-line subcopy; single dark pill CTA. Flanked left and right by organic blob-masked lifestyle photos with handwritten caption labels, squiggle shapes, stars and music-note doodles.
3. **Local events grid** — heading "Events near <City>" where the city is a purple italic link, plus right-aligned "See all events" text link. 4-column responsive grid of photo cards: image with "Free" pill top-left, title, date/time, "by <organizer>" byline.
4. **Online events grid** — identical card language with an "Online" pill variant and illustration-style covers; a centred handwritten annotation + star doodle closes the section.
5. **Join CTA panel** — large rounded panel with soft pastel gradient corners, floating circular avatar stickers and small doodles scattered around an otherwise centred heading + copy + dark pill button.
6. **Category tiles** — heading plus a horizontal row of 5 white cards; each card has a title, corner arrow icon and a small colourful icon at the bottom, cards slightly varied in height.
7. **Popular cities** — heading, one-line subcopy, handwritten "We're everywhere!" note; row of 5 city photo tiles whose bottom edges are scalloped/wavy, city name centred beneath.
8. **How it works** — centred heading; three step cards (icon, title, copy, small text link) laid out asymmetrically on a staggered zig-zag, connected by dotted curved lines; one handwritten annotation in brand colour.
9. **Editorial strip** — two-column intro (big heading left, paragraph right), then 3 article cards: rounded photo (one with gradient border), bold title, short blurb.
10. **Footer** — full-width dark charcoal rounded panel: brand line + "Create your own group. Get Started →"; link columns (account, discovery, company), social icon row, app-store badges; bottom legal row of tiny links with a "Made with ♥" sign-off.

## Design language
- **Hierarchy**: exactly one dark pill CTA per section; section headings are bold display type; secondary actions are purple text links; tertiary metadata is 12px grey. Nothing competes with the card grids.
- **Rhythm & density**: alternate dense 4-column card grids with airy, centred, heavily-whitespaced panels (96–128px section gaps). Card sections are information-dense (photo, pill, title, two meta lines); interludes are nearly empty with doodles carrying the mood.
- **Colour**: white canvas `#FFFFFF`, ink `#212126`, charcoal buttons/footer `#2E2E36`, brand accent hot pink `#E5347B` used sparingly (logo, wordmark, key phrases), purple links `#7C3AED`, meta grey `#6B6B72`. Pastel accents — mint `#BFE8D9`, sky `#A9D9F5`, peach `#F6A46B`, butter `#F7D873`, lavender `#B39DDB` — appear only in doodles, icon chips and gradient corners, never as UI surfaces.
- **Type**: one geometric grotesque sans throughout: 44–56px extrabold display with tight leading for the hero, 28–32px bold section headings, 15–16px semibold card titles, 14px body, 12px meta. A handwritten script font is reserved for annotations and never used for UI copy.
- **Shape & depth**: radius language is 12–16px cards, fully-pill buttons, ~32px footer panel; hairline `#ECECEE` borders; shadows almost invisible (`0 2px 8px rgba(0,0,0,.08)`) and only on hover. Photos are masked into organic blobs with thin offset outlines; city tiles get scalloped bottom edges.
- **Motion**: card hover lifts 2–4px with soft shadow; text links underline on hover; sticky nav; no heavy scroll animation — the playfulness comes from static doodles and shapes, not motion.
- **Imagery**: candid, warm, real-people lifestyle photography; never sterile stock or corporate renders.

## Never
Never copy the reference brand: no Meetup logo, wordmark, "The people platform" copy, event titles, group names, photography, illustration or doodle assets. Never present the result as Meetup or reuse its city/organizer content. Build the same design language for the user's own product with their own name, colours and imagery.