Terminal Hero

About this block

Terminal Hero is a centered, full fold hero built for a developer tool. The copy column stacks the shared collection headline ramp, a short lede, an install command row styled like code with a muted dollar prompt and a static copy affordance, and two call to action buttons. Below the copy sits a terminal window mockup: a title bar with traffic light dots and a working directory label, then a scripted transcript of prompt lines, muted output lines, one highlighted success line in the primary color, and a resting cursor. The section fills the viewport with min-h-screen and centers everything vertically.

The transcript lives in a single typed lines array, where each entry is a command, an output line, or the success line, so scripting your own session means editing data rather than markup. The install row is plain markup with no clipboard wiring; treat the copy icon as a visual cue, or hand it a real handler in your app if you want it live. Everything is drawn with theme token classes, so the whole hero inverts cleanly between light and dark.

When to use

Reach for this block when the product is installed from a package manager and the fastest way to convince a developer is to show the exact commands they would run. It fits a deploy preview CLI particularly well: the install row answers how to get it, and the transcript below walks through init and deploy all the way to a live URL, so the visitor has effectively seen a demo before touching a single button.

A natural flow around it on a Marketing Pro page:

Before

• Nothing required. Heroes in this collection ship standalone, so the block opens the page on its own.

After

• A Feature Section to explain the platform behind the CLI once the transcript has earned attention.
• An Integrations section to show the repos, clouds, and chat tools the workflow plugs into.

What you can display

The transcript defaults to a deploy session, but the frame fits any tool that lives in the terminal. A few directions to consider:

• Package quickstart. Script an install, a config step, and a first successful run so newcomers see the entire path to a working setup.
• Test or build runner. Show a run with a few muted progress lines and a passing summary as the highlighted line to lead with reliability.
• Database or infra CLI. Walk through provisioning a resource and end on the connection string as the success line developers actually want.

Tip: keep the transcript to one screen and let the success line land last; a short session that ends on a win reads better than a long realistic one.