Stepped Image Hero
SaaS hero with left-aligned copy, one image in a rounded stepped cutout, and elegant entrance motion.
Add to your project
Source is locked
All Access is $79/year and includes every pro component and block.
Works with your AI tools
Claude*
Codex*
Lovable
Base44
Figma Make
Replit*
Cursor*
v0* Compatible with most projects that use the default React/Next.js framework.
Built With
React
Tailwind CSSProps
| Prop | Type | Description |
|---|---|---|
primaryColor | string | Brand color used across the section. |
radius | number | Corner radius for the stepped shape and button. |
headline | string | Main heading text. |
highlightedText | string | Colored heading line. |
subcopy | string | Supporting text. |
ctaLabel | string | Primary action label. |
ctaHref | string | Primary action URL. |
linkLabel | string | Secondary link label. |
linkHref | string | Secondary link URL. |
imageSrc | string | Hero image URL. |
imageAlt | string | Hero image alt text. |
imagePosition | string | CSS object-position value. |
className | string | Styles for the outer section. |