Preview image. Unlock full-res
Numbered four-step accordion with active step detail and product config mockup on grid.
Summary
Numbered four-step accordion with active step detail and product config mockup on grid.
Visual description
Section labeled [01] HOW IT WORKS with large serif headline Don't just solve support. Solve your business. and grey subcopy on insights and automation. Left column lists four numbered steps with icons; step one highlighted in light blue with expanded description on building a no-code agent. Right column shows grey dot-grid workspace with open Model dropdown listing flagship and fast AI models with logos, dark prompt editor with green terminal text, three toggle settings, and small painting preview thumbnail.
Key takeaway
Accordion steps tied to a live config mockup show abstract onboarding as concrete UI. Highlighting one step in brand blue while keeping others collapsed maintains scan speed across a long flow.
Reuse notes
Best for products with multi-step setup stories. Mockup must update when step changes if implemented interactively. Model names in dropdown will need maintenance.
