Deals 6 block design & features
Deals6 is an ecommerce special-offers block built with Shadcn UI, triggered by a fixed vertical tab on the screen edge with a badge showing the deal count. Opening it reveals a scrollable dialog with a title, description, and a radio group of selectable deal rows. Each row shows a product thumbnail, title, savings badge, subtext for a free gift, price, and an optional collapsible bundle section with bundled item carousel and gift icon label. Hovering a row surfaces an expert advice card with avatar, name, and advice link.
Muted item rows use ring borders, with the most popular option highlighted by a primary ring and a top badge ribbon. Bundle previews mix inline pricing, gift badges, and small product thumbnails with check marks. The side tab rotates to read vertically along the viewport edge, keeping the entry point visible while browsing.
The block is elaborate for a deal picker because it combines selection state, hover previews, and nested bundle disclosure in one panel. Skincare-oriented sample copy and expert avatars give it a beauty retail tone, though the structure works for any tiered offer set. Mixed complexity: product images, prices, optional bundle items, and expert metadata are all needed for a full pass.
The dialog scrolls within a max height on small screens; the side tab stays fixed so the offers entry point remains reachable while the page scrolls.