Centered With Product Image
A centered hero with a bold headline, lede, and dual CTAs above a sleek app window mockup, topped by a sticky oval navbar. A clean, modern opener for product launches.
A centered hero with a bold headline, lede, and dual CTAs above a sleek app window mockup, topped by a sticky oval navbar. A clean, modern opener for product launches.
Search blocks by description or jump to a page.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Centered With Product Image opens with a sticky oval navbar, then a centered copy column: a bold headline, a short lede paragraph, and two side-by-side call-to-action buttons. Below the copy sits a full-width app window mockup rendered entirely in markup. The window has a macOS style title bar, a left sidebar with a workspace switcher, a primary nav list with unread counts, a favorites section, and a signed-in user row. The main panel shows an issue list with priority indicators, completion checkboxes, status labels, tag pills, and assignee initials. A soft radial glow sits behind the window to lift it off the page.
All copy in the headline and lede is independent, so you can rewrite it to match your product without touching the layout. The mockup is a standalone component with its own task data defined inline, making it straightforward to swap in your own item titles, labels, or assignees. When you have a real screenshot, the component's inline comment explains how to replace the markup window with an image while keeping the border and shadow wrapper intact.
Reach for this block at the very top of a product marketing page when you need to show the interface alongside your pitch. It is especially well suited to an online education platform launching a new course management dashboard, where prospective instructors need to see the workspace before they commit. The full-width mockup makes the product feel tangible in a way a text-only hero cannot, and the centered column keeps the headline readable on every screen size.
A natural flow around it on a Modern SaaS page:
Before
After
The mockup defaults to a project tracker, but the frame fits any task-driven or content-driven product interface. A few directions to consider:
Tip: keep the sidebar nav items close to your real product navigation so the mockup sets accurate expectations rather than generic ones.