Multi-brand ordering app
Tap a card body → highlights it on the map (zoom + pin info window). Tap the View Menu button → commits and goes to that store's menu. Card click and pin click do the same thing — preview. Only the button commits. This lets users explore the map before deciding.
Auto-triggered modal · Click to interact
Try: tap a card → map zooms in and the card highlights. Tap the (ⓘ) info icon next to "Open" → mobile: bottom sheet slides up · desktop: popup appears over the page. Tap (×) or the backdrop to dismiss.
User types "wicker." List filters in real time. Map auto-pans/zooms to fit results. Clear (×) button surfaces a quick reset.
Search active · Results filtered · Map fit to results
Search yields zero matches. Empty-state pattern (§7.3.7-style): icon, title, body, secondary CTA. Map remains at last view.
Empty state · No locations match search
Desktop: the site defaults to the Locations tab. Click the Home or Menu tab to navigate; click the location pill in the header (visible on Home) or the "Change" button on the store-card aside to come back to Locations. Confirming a store jumps to Home and shows a toast. No modal on desktop. Mobile: the top-left "Dine In · address" header opens the full-screen modal (unchanged).
Desktop: tab navigation · Mobile: entry-point modal