Hero Carrousell Many Cards

Hero Carrousel Block — Full-screen slideshow hero with tabbed navigation, auto-advance, and pause control. Each slide consists of a full-bleed background image with crossfade transition, an overlaid glassmorphism content card (tagline, title, description, and up to 2 CTAs), and a tab in the bottom navigation bar. The carousel auto-advances every 4 seconds. A progress bar animates in real time at the bottom of the hero area. The user can pause and resume the slideshow at any time using the play/pause button in the tab bar — the progress bar freezes at the exact position and resumes from there. Clicking a tab navigates directly to that slide and resets the timer. On desktop, the tab bar displays the slide label as text. On mobile, it displays a Phosphor icon per slide instead. Both variants show an active underline indicator on the selected tab. Fields: anchorId, items[] → each item has a background image (Media), a cardIcon (Phosphor icon name for mobile tabs), a cardTitle (used as the tab label), and a card group with tagline, title, description, and two CTA fields (primary and secondary). Best used as the first block on a homepage or landing page. Recommended: 4–6 items. Background images should be landscape, high resolution (min 1920×1080).