## 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/domestika-org/a1bec580-5d19-4289-a277-048dcd6cb3c6-1789146411-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/domestika-org/a1bec580-5d19-4289-a277-048dcd6cb3c6-1789146385540-full.webp
- Component on Kage: https://kage.design/component/domestika-feature-grid

## Before you start
Ask what the user's product, catalog, and brand are, then apply these principles to that context.

Build a course-discovery section with a short introductory heading and paragraph followed by a responsive four-column card grid. Use a white background, a max-width content container, 16px gutters, and cards with soft shadows or hairline borders, 4–8px corner radius, and consistent image aspect ratios. Each card should include an optional badge, image, title, creator, concise description, social-proof metrics, offer label, price treatment, and a full-width purchase button. Use near-black text, muted gray metadata, a vivid teal action color around `#008d93`, and a small red/orange promotional label. Keep card heights aligned within each row, truncate long descriptions gracefully, and preserve strong scanability. Add a centered secondary “browse more” CTA below the grid. On mobile, collapse to one or two columns and keep actions easy to tap.

Never: copy the reference's product name, course names, creator names, exact prices, labels, copy, logos, illustrations, or imagery.