Ecommerce - Hero

The hero blocks take plain props for the headline, description and images, so you can reword them or pass your own photos without touching the markup. The spotlight block takes a typed product object with name, price, an optional compareAt price, rating, reviews, colors and image, and keeps its color and wishlist state locally.

The photos are placeholders from Unsplash and the store is fictional. Replace the image URLs with your own, and swap the add to cart handler for a call to your cart.

Style One

Headline and calls to action on the left with three staggered product photos, a floating customer rating card and a row of shipping, returns and warranty perks.

Style Two

Centered headline with a promo pill and two buttons, followed by four image tiles that link straight into your main categories.

Style Three

Edge to edge photo with a dark gradient scrim so the headline stays readable on any image. Includes a small promo ribbon and a scroll cue.

Style Four

Product of the week spotlight with a large photo, discount tag, rating, compare at price, color swatches, add to cart with confirmation and a wishlist toggle.

Style Five

Dark sale panel with a live countdown that ticks every second. Pass an ISO date as endsAt. Screen readers get a single summary instead of a ticking clock.

Style Six

Promo slider that rotates on its own. It pauses on hover, on focus and with a play and pause button, respects reduced motion and has arrows and dot navigation.