Split With Mobile App
A split hero with copy and dual CTAs beside a phone mockup of the product mobile app.
A split hero with copy and dual CTAs beside a phone mockup of the product mobile app.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Split With Mobile App is a two-column hero that fills the viewport. The left column holds a large headline, a lede paragraph, and two stacked call-to-action buttons. The right column is a phone-shaped frame built entirely from markup: a bezel, a status bar, an app header line, and a vertical list of campaign-row cards, each showing a name, a channel label, and a status badge. The phone renders with theme tokens so it reads correctly in both light and dark mode without any image asset.
The copy column and the phone column are independent. You can rewrite the headline, lede, and button labels to match your product without touching the mockup, and you can swap the campaign rows inside the phone to reflect your own content categories and status labels. The phone frame itself can be removed if you only need the copy side.
Reach for this block when you need to establish that your product has a native mobile experience right at the top of the page. It works well for a real estate marketplace where buyers and agents expect to act on listings from their phones: the phone mockup shows the workflow in context without requiring screenshots or a live demo. Compared to a centered hero or a split with a metrics panel, this layout carries a stronger "mobile first" signal and lets you hint at the in-app experience rather than describing it in prose.
A natural flow around it on a Marketing Pro page:
Before
After
The phone frame is a general purpose list mockup, not locked to campaigns. A few directions it fits naturally:
Tip: keep the phone list to four or five rows so the mockup stays readable at its compact width and the status badges remain legible.