Spara how-it-works with demo video and step row

Summary

A light how-it-works section that leads with a large composite product mockup, an analytics dashboard beside a live AI chat panel with a playing demo video, then explains the flow in a four-step icon row beneath. The realistic split mockup with a visible video scrubber anchors the whole block.

Visual description

White background. A centered headline reads "How Spara AI converts more inbound leads" with "inbound leads" inside a soft beige highlighter swatch. Below sits a wide rounded product window: the left two-thirds shows a line chart over a month axis and an invoices table with dollar amounts, while the right third is a chat panel ("Rob Jones, AI Demo Assistant") with assistant and user bubbles, a blue selected message, and a "Demo / Now playing..." chip. A play-progress bar (00:14 / 01:44) runs along the bottom of the mockup. A four-column step row follows, each with a small blue icon and a bold title (Engage website visitors, Extract actionable data, Pre-qualify in real-time, Drive outcomes) plus two muted lines; the first step has a blue underline marking it active.

Key takeaway

Showing the product and a chat transcript side by side in one frame demonstrates the outcome and the interaction at once. The visible video scrubber signals there is a real demo to watch, and the underlined first step implies the row is a steppable sequence.

Reuse notes

Strong for an AI sales or chat product where seeing the conversation is the proof. The four-step row turns the screenshot into a narrative. Because a step is underlined and the mockup shows a scrubber, treat motion as real only if you actually wire up the steps or playback.