About this block

Three Columns with App Mockup says what the product does and then shows it. A two line heading opens the section, three columns follow, each a line icon over a one word title and a three line blurb, and below them sits a contract review app window in a muted inset tray that closes around it with the same 8px on every side.

The window carries a sidebar, an agent banner on the primary surface, three chart tiles (a risk donut, clause progress bars and a review trend line), filter pills and two grouped lists of agreements with status, notes and actions. The charts are inline SVG and the rest is plain markup, all drawn from theme tokens, so the mockup follows light, dark and any theme you install.

When to use

Use it as the first feature section on a page for a workflow product, where three verbs describe the job and one screen proves it. It suits legal and contract tools, review and approval flows, and any product whose value is a queue of work sorted for a person to act on.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to state the promise
• Logo Clouds to establish trust before the detail

After

• Testimonials to let customers speak to the workflow you just showed
• Pricing to move the reader toward a plan

What you can customize

• Columns. Edit the columns array: an icon, a title and a blurb each. Keep the blurbs to the same length so the three columns end together.
• The window. Navigation, chart values, filters and list rows are plain arrays in the file. The chart tiles are illustrative; swap in the shadcn chart primitives if you want them driven by real data.
• Responsive panels. The sidebar hides below xl, the third and second tiles below lg and sm, and the note and status columns below lg and md.

Tip: if your product has no single hero screen, a focused view works better than a crowded one. Trim the lists to the few rows that tell the story.