Terminal Hero
A centered developer tool hero with an install command row, dual CTAs, and a terminal window mockup of prompt, output, and success lines.
A centered developer tool hero with an install command row, dual CTAs, and a terminal window mockup of prompt, output, and success lines.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
The transcript defaults to a deploy session, but the frame fits any tool that lives in the terminal. A few directions to consider:
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.