## 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-1789146457-7.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-4

## 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.

Design a three-step “how it works” section with a centered title and an airy, alternating layout. Each step needs a small icon, a concise bold title, two lines of explanation, and a short text link or action. Arrange the steps as a visual journey with thin curved connector lines or arrows between them on desktop; remove the connectors and stack the steps in numbered order on mobile. Use 20–24px card padding, restrained shadows, generous 56–80px vertical spacing, 16px body type, and 20–24px step titles. Approximate colours: #FFFFFF canvas, #202020 text, #6A6A6A body, #8B78E8 and #F2A86E accents, and #EDEDED connector lines. Ensure the sequence remains understandable without decorative lines.

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