Voiceflow Hero Section

Summary

A centered dark hero leading with an oversized two-line headline over a soft dot field, then a wide screenshot of the product's visual agent-builder canvas. The defining move is the detailed node-and-connector flow editor doing the work of the hero image.

Visual description

Near-black charcoal background. A slim navbar carries the Voiceflow wordmark at left, Platform / Solutions / Resources / Docs / Research centered, and Sign in plus a "Get started" arrow link at right. Centered below sits a large white two-line headline "Build AI customer support agents with complete control," then two grey sub-copy lines, then two buttons, a blue "Start building, it's free" and a dark outlined "Contact sales." A faint dot grid sits behind the type. Beneath the copy, a large dark product screenshot shows the agent-builder workspace: a left sidebar of Workflows and Components, and a canvas of connected nodes (Start, Retrieve customer information, Check User Status, options menus) wired with curved connectors, plus a floating chat-style options panel.

Key takeaway

Using a real flow-builder canvas, complete with wired nodes and branching logic, as the hero screenshot so the product's core mechanic is visible above the fold. The faint dot field behind centered type adds subtle depth on a flat dark background.

Reuse notes

Strong for no-code, automation, or agent-building tools whose value is the visual canvas itself. Needs a clean, legible builder screenshot to carry the lower half. Only works on dark; keep the two CTAs to one filled and one ghost so hierarchy stays clear.