Stepped Image Hero

SaaS hero with left-aligned copy, one image in a rounded stepped cutout, and elegant entrance motion.

Ship better code.Together, faster.

Give your team one clear place to plan, build, and launch exceptional software without losing momentum.

Start buildingExplore the workflow
Colorful code on a monitor

Add to your project

Get All Access to copy the prompt and source code.

Source is locked

All Access is $79/year and includes every pro block.

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSS

Props

PropTypeDescription
primaryColorstringBrand color used across the section.
radiusnumberCorner radius for the stepped shape and button.
headlinestringMain heading text.
highlightedTextstringColored heading line.
subcopystringSupporting text.
ctaLabelstringPrimary action label.
ctaHrefstringPrimary action URL.
linkLabelstringSecondary link label.
linkHrefstringSecondary link URL.
imageSrcstringHero image URL.
imageAltstringHero image alt text.
imagePositionstringCSS object-position value.
classNamestringStyles for the outer section.