Hero 109 block design & features
Hero109 is a two-column hero built with Shadcn UI where the left column shows a phone graphic with a tall screenshot clipped inside the device frame and a floating card overlapping the lower area. The card pairs a credit icon with a short worldwide-access headline and supporting sentence. The right column stacks a small fintech label, a very large gradient-filled headline, supporting paragraph, and a wide button with a trailing arrow plus a circular hover animation that expands from the corner.
Default layout is light background with muted body text and a headline that fades from muted into full foreground color. The handset and card use shadow and z-index layering so the card reads as an inset panel. On smaller breakpoints the column order flips so copy centers above the device stack.
The block reads as a product marketing or fintech landing opener with emphasis on device realism and an oversized typographic moment. Moderate complexity comes from layering and the animated button treatment rather than from extra content slots.
Narrow viewports center the text block while the phone column still anchors the visual weight below or beside depending on breakpoint rules in the section.