Store Locator 5 block design & features
A multi-city store locator made with Shadcn UI. A heading and short description sit beside a row of city tabs for New York, Paris, Kyiv and Singapore. Below them a wide, calm grey interactive street map shows a labelled pin for each store in the selected city, and a row of three store columns lists each shop's name, street address, today's opening hours, a phone link and a Get directions link.
Choosing a city moves the map to that city behind a brief fade, frames its stores, and fades the store columns across to the new addresses. Hovering, focusing or clicking a pin expands its label into a small card with a storefront photo, the address and today's hours, and the pin turns the primary colour. Clicking pins a card open and Escape closes it. The selected tab is marked with an underline that draws in from the left, and arrow keys move between tabs. The styling around the map is quiet and flat, with a bordered frame, hairline rules above each store and small text. Transitions are removed when reduced motion is preferred.
The block feels like a calm, international retail directory where a live map does most of the visual work. It is moderately complex and mixed in how it is built, relying on a quiet light-grey vector tile map with building outlines hidden plus structured store data with coordinates and photos. The map can be dragged and zoomed but doesn't capture page scrolling. On mobile the map becomes a taller crop, the tabs scroll sideways and the stores stack in one column.