Ecommerce Hero 11 block design & features
This ecommerce hero splits the viewport into two full-height fashion photos of the same dress, one in ivory and one in black, with a thin vertical divider and a round drag handle between them. Each half has a small solid label with its colour name. A solid product card in the bottom corner holds the product name, a short description, the price, two colour swatches and an Add to bag button. It is built with shadcn/ui.
Dragging the handle resizes the two halves, and each photo keeps its model in frame as its panel grows or shrinks. The card follows whichever colour has the larger share, so the price, the selected swatch and the button label all switch as the divider crosses the middle. Clicking a swatch glides the divider over to favour that colour, and the handle works as a slider with the arrow, Home and End keys.
The style is clean and photographic, with flat white cards, round controls and the photos left untouched. The title, description and the two colourways, each with a name, swatch colour, price and photo with a focus position, are props, so a sale price can apply to one colour only. With reduced motion the divider moves without easing.