Search blocks by description or jump to a page.
A hero featuring a rotating 3D device mockup beside a headline and CTA. Presents your app or product with depth on a modern landing page.
With 3D Mockup is a two-column hero. The left column holds a small outline badge, a large headline, a subtext paragraph, a primary button paired with a ghost button, and a three-stat row separated by a horizontal rule. The right column shows a browser-framed screenshot tilted on all three axes to read as a perspective device, with two smaller floating UI cards angled in opposite directions to reinforce the depth.
Every piece of copy is independent. You can rewrite the headline, subtext, and button labels freely. The three stats under the CTA buttons are their own block, so you can change the figures and labels or remove the row entirely. The two floating cards are decorative skeleton panels with no live data, so swapping in a real screenshot is the only visual change that matters.
This layout works best when your product is a visual interface and you want the first thing a visitor sees to be the actual product rather than an abstract illustration. The perspective tilt gives the screenshot more weight than a flat image would, which suits a fintech or banking product where the dashboard or transaction view is the proof point. It outperforms a plain centred hero when the interface itself is the main argument, and it avoids the busy feel of a full bento grid by keeping only one primary surface with two lightweight satellite cards.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The perspective device area is built to carry a single wide screenshot, so the most natural swap is dropping in your own interface image. A few other ways to use the frame:
Tip: keep the floating cards small and abstract so they frame the main screenshot without competing with it for attention.