## 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/shrine/ff477ea2-1694-4783-bdc4-4322fec31da4-1792130652-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/shrine/ff477ea2-1694-4783-bdc4-4322fec31da4-1792130580085-full.webp
- Component on Kage: https://kage.design/component/shrine-gallery-2

## Before you start
Ask what environments, themes, templates, or product states the user's product offers, and ask what brand direction should shape them. Then build an original showcase section.

- Use a light, spacious section with a centered heading and short supporting paragraph before the main visual.
- Give the preview a dominant central position and preserve ample whitespace around it so it reads as the section's focal point.
- Add a labeled active variant plus a horizontal row of small thumbnails or swatches beneath it; visually separate the active item with a border, ring, or raised treatment.
- Use a soft white or warm-gray background, dark near-black type, hairline neutral dividers, and a restrained brand accent for selected states.
- Make every variant a real button with an accessible label, hover state, focus ring, and active state. On small screens, allow horizontal scrolling rather than shrinking thumbnails until they are unusable.
- Keep the heading hierarchy stronger than the selector label, and align all content to one centered max-width.

Never: use the reference's logo, product name, copy, illustrations, imagery, or exact visual assets.