Deals 2 block design & features
Deals2 is an ecommerce bundle builder built with Shadcn UI, laid out as a two-column section with a centered intro headline and supporting paragraph above. The main area uses tabbed steps for browsing deals, adding items to a bundle, and unlocking discounts, each step showing a grid of product cards with image stacks, sale badges, prices, and add-to-bundle buttons. A sticky sidebar summarizes bundle contents with a tiered progress bar, accordion steps showing selected items in a carousel, running total, and add-all-to-cart action.
Serif centered headline contrasts with compact sans-serif product cards and a ring-outlined summary panel. Sale prices appear in rose tones, discount badges use solid red chips, and the progress track marks percentage milestones with check icons. Step tabs stick below the header on large screens, with prev and next round icon controls beside the tab list.
The block is elaborate and interaction-heavy, closer to a configurable bundle promo than a static deals strip. Tiered goals, per-step min and max item rules, and form validation make it one of the more complex deals patterns in the group. Content-driven: multiple product images per card, step labels, goal thresholds, and price data are all required for a realistic storefront demo.
On large screens the summary column stays pinned while tabs scroll; on smaller viewports the grid collapses to a single product column and the carousel summary moves below the steps.