## 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/sweetgreen-com/33a74ca8-f609-4778-a60f-a45f3e4cc9aa-1789146472-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sweetgreen-com/33a74ca8-f609-4778-a60f-a45f3e4cc9aa-1789146430759-full.webp
- Component on Kage: https://kage.design/component/sweetgreen-feature-grid

## Before you start
Ask what the user's product catalogue is, what categories it needs, and which product metadata customers need before purchase. Adapt this component to the user's brand.

Build a menu section on a warm ivory background. Start with a centered horizontal category selector using large editorial labels, one dark active item, muted inactive items, and a small active indicator underneath. Below it, create a three-column responsive card grid with equal widths and generous gaps. Each card should include a softly rounded square image area, an optional compact badge, an uppercase or small-caps product title, a short description, dietary/allergen metadata, and a lightweight text link with an arrow. Keep card interiors open rather than boxed, align text consistently, and use approximately 24px vertical spacing between image, title, description, metadata, and action. On mobile, make categories horizontally scrollable and stack cards.

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