About this block

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.

When to use

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

• Nothing required. This block is designed to open the page and works without a preceding section.

After

• A Logo Cloud to back up the headline with recognizable customer names right below the fold.
• A Features section to expand on what the mockup hints at.

What you can display

The mockup defaults to a project tracker, but the frame fits any task-driven or content-driven product interface. A few directions to consider:

• Course management dashboard. Replace the issue rows with course titles, enrollment counts, and publish status to show educators what their workspace looks like on day one.
• Editorial calendar. Swap the task list for scheduled posts, draft labels, and author initials so content teams can picture their actual workflow before signing up.
• A real product screenshot. Drop a cropped PNG of your own UI inside the window wrapper when your interface is ready; the border, shadow, and glow carry over automatically.

Tip: keep the sidebar nav items close to your real product navigation so the mockup sets accurate expectations rather than generic ones.