## Reference images

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

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146456-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146409864-full.webp
- Component on Kage: https://kage.design/component/meetup-feature-grid

## Before you start
Ask what the user's product does, who it serves, and what its brand personality and visual identity are. Then apply the principles below to that product rather than reproducing the reference.

Build a local-discovery section with a bold left-aligned heading containing a highlighted location or filter control and a compact “view all” link on the right. Under it, use a responsive four-column card grid that becomes two columns and then one. Each card should have a 16:9 image with a 14–18px radius, an optional floating status badge, a concise two-line title, muted date/time metadata, and a one-line organizer label. Keep cards equal-width and align all metadata baselines; use 24px column gaps and 28–36px row gaps. Use #FFFFFF or #FAFAFA background, #1F1F1F titles, #666666 metadata, #F2F2F2 badge fill, and one subtle accent for links. Make cards keyboard-focusable with a slight image zoom or shadow on hover, without layout shift.

Never: use logos, product names, copy, illustrations, or imagery from the reference.