Ecommerce Hero 9 block design & features
This ecommerce hero fills the viewport with four room photos arranged in a two by two grid, Living room, Armchairs, Dining and Storage, separated by thin gutters. A solid card sits where the four photos meet and holds the main heading and a one-line description. Each photo carries a small rounded label with the room name and an arrow. It is built with shadcn/ui.
Clicking a photo opens it: the tile grows from its corner until it covers the whole section, and because the photo is sized to the full section from the start, opening it reveals more of the picture rather than rescaling it. The centre card fades away and a solid card appears in the bottom corner with the room name, a heading, a short description, a shop button and an All rooms button that closes the photo again. A round close button sits in the top corner, clicking anywhere on the open photo zooms back out, and Escape also closes it, and focus moves between the tile and the open card.
The look is calm and photographic, with flat solid cards, rounded corners and no overlays on the images. The heading, description and the four rooms, each with a label, title, copy, link and photo, are props. With reduced motion the tiles open and close instantly.