Split App Panel
A split hero pairing headline, lede, dual CTAs, and an avatar star rating with a markup app window of icon rail, chart strip, and invoice rows.
A split hero pairing headline, lede, dual CTAs, and an avatar star rating with a markup app window of icon rail, chart strip, and invoice rows.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Split App Panel is a full fold hero divided into two balanced columns. The
left column carries the pitch: the shared collection headline ramp, a short
lede, primary and secondary call to action buttons, and a trust line made of
three overlapping persona avatars beside a five star rating with a customer
count. The right column is a detailed revenue dashboard mockup rendered
entirely in markup: a window bar with traffic light dots and an address pill,
a slim icon rail with one active item, a chart strip of twelve tinted bars,
and a short list of invoice rows with amounts and status pills. The section
fills the viewport with min-h-screen and centers both columns vertically.
Every part of the mockup is drawn with theme token classes, so the whole hero
inverts cleanly between light and dark without any image files. The rail
icons, chart bars, and invoice rows all live in small typed arrays at the top
of the file, so reshaping the panel around your own product is a matter of
editing data rather than markup. When you have a real screenshot, keep the
rounded border and shadow wrapper and drop an img inside in place of the
panel body.
Reach for this block at the top of a landing page when the product itself is the strongest argument and you want it on screen from the first second. It suits a billing analytics platform pitching finance teams especially well: the left column makes the promise while the panel on the right shows the exact dashboard a buyer would live in, chart, invoices, and all. The trust line closes the loop with social proof before the visitor has scrolled once.
A natural flow around it on a Marketing Pro page:
Before
After
The panel defaults to a revenue dashboard, but the chrome, rail, and list structure fit most data heavy products. A few directions to consider:
Tip: keep the rail icons and row labels close to your real navigation so the mockup sets accurate expectations instead of generic ones.