## 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/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152086-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152039794-full.webp
- Component on Kage: https://kage.design/component/tryobra-gallery

## Before you start
Ask what finished artifact the user's product creates, what proof customers need to see, and which before/after states are meaningful. Build a showcase for that product.

Create a warm ivory showcase section with a chapter label, bold headline, and short supporting copy. Center a large framed browser or product preview with a clear project title, progress/status metadata, and a prominent before/after visual comparison. Add a small thumbnail rail, a timeline or latest-update panel, and an overlapping mobile preview only if responsive output is central to the product. Use thin dark borders, orange dividers and progress accents, subtle shadows, and carefully aligned editorial annotations. Keep imagery as replaceable placeholders or generated product UI, and make the gallery keyboard navigable.

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