## 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/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789193036-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789192903236-full.webp
- Component on Kage: https://kage.design/component/jackalope-hero

## Before you start
Ask what the user's product does, who the audience is, and what visual brand direction they want. Build a bespoke hero using these principles, not the reference's content.

Create a wide split hero directly below the navigation. On the left, place a large two-line headline with one line in the primary text color and an emphasis line in electric indigo, followed by a readable 16px paragraph and a primary CTA beside a low-emphasis video/demo link. On the right, show a framed product or workflow preview inside a rounded white browser-like card. Use an airy, pale lavender background with abstract flowing forms or a soft mesh treatment, approximately #f4f3fb with #b7b0f2 and #5144ed accents. Keep a max-width around 1100px, align both columns vertically around the center, use a 64–72px headline with tight line-height, 16px body copy, 14–16px buttons, 10–14px radii, and generous 72–112px section padding. Add subtle elevation to the preview and make the demo link and CTA interactive.

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