Shadcn UI Hero Block
Hero266 is a full-width hero built with shadcn/ui, featuring a headline and description on the left with two CTA buttons aligned to the right on the same row on desktop. Below that sits a large masked image area that auto-cycles through architecture photographs with a zoom-in crossfade effect. Three floating pills overlay the image: a location label at bottom-left, a project-count badge at bottom-right, and a dot-style slide indicator at top-right.
The mask shape is highly asymmetric with multiple step-cutouts and rounded segments along the top edge and left side, creating a complex, architectural silhouette. Images transition every four seconds with a subtle scale-down animation as they fade in. The overlay pills use frosted-glass styling with backdrop blur and semi-transparent backgrounds. On desktop the headline row and CTAs share a single baseline; on mobile they stack.
This has a bold, portfolio-showcase feel appropriate for architecture, real estate, or design firms. The mask shape itself echoes architectural forms, reinforcing the content theme. Complexity is moderate to high: the mask is CSS-driven, the cycling is code-driven, and the overlay badges add interactive flair. The clickable dot indicators let users jump directly to any slide on desktop.
On mobile the overlay badges hide and a row of clickable thumbnail strips appears below the masked image, letting users tap through slides. The headline and buttons stack vertically.