About this block

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.

When to use

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

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

After

• A Logo Cloud to back the star rating with recognizable customer names right below the fold.
• A Feature Section to unpack what the dashboard mockup only hints at.

What you can display

The panel defaults to a revenue dashboard, but the chrome, rail, and list structure fit most data heavy products. A few directions to consider:

• Billing and revenue. Keep the defaults and rename the invoice rows and chart caption to match your own plans and pricing vocabulary.
• Project or CRM workspace. Swap the invoice rows for deals or tasks and relabel the rail icons; the chart strip becomes pipeline or velocity.
• A real product screenshot. Replace the panel body with a cropped image of your own UI once it exists; the window chrome and shadow carry over.

Tip: keep the rail icons and row labels close to your real navigation so the mockup sets accurate expectations instead of generic ones.