Phone hero for a landing page

The web team remakes this hero whenever the app UI changes. The phone on the landing page has to show the real product, not last quarter’s screenshot. A screenshot goes stale silently. This one is regenerated by a command.

The people doing this already have the app screens in React. Inbox, settings, detail. They should not photograph a device and paste it into a design file every time the inbox count or the settings row changes.

The job is one portrait image of a phone frame with a real app screen inside it. You pick which screen, which user, which count. You export. When the product updates, you export again. The frame stays. The screen is components with props.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, data swapped, next image. There is no batch product, no queue, no orchestrator.

The component is .lerret/marketing/phone-hero.jsx. It is a phone frame with the real app screen composed in React. The screen is not a pasted photo. It is components with props. The file lives under .lerret/marketing/. Swap screen and the frame shows a different real surface.

Data is { screen: "inbox" | "settings" | "detail", user, count } swapped via --data. That is the first of the four bulk patterns: re-run export with a different --data file. Same component, new screen or new count, new image. --data applies to every artboard in the run and is never written back into .lerret/. The default hero stays clean. Inbox, settings, and detail are the three screen values the catalog names.

The image is a PNG at 1200×1500, the shipped phone-hero size.

You use Lerret because the phone screen is real components with real props, so the hero updates when the product updates. A screenshot goes stale silently. This one is regenerated by a command. A design file with a pasted device shot will keep showing the old inbox after the product ships the new one.

npx @lerret/cli@latest export --data

Start a project with npx create-lerret@latest. More in the use cases index.