City Page Layout & Navigation
Exploration1 min readΒ·Updated today
Guide to the city page UI β layout, navigation, and interactive elements.
Overview
This guide explains the layout and sections of the city page.
City Page Structure
The city page uses a vertical scrollable layout with sections that appear based on available content:
- CityHero: Hero banner with city image, name, and key stats (places, trails, campaigns)
- How It Works: Visual 3-step guide for first-time visitors (guests only, on claimed cities)
- Explorer Dashboard: Personal progress card with visit count and percentage (logged-in users)
- Active Campaigns: Campaign banners with countdowns (when campaigns exist)
- Trails: Curated trails with progress indicators
- Community Section: Local community activity and alerts
- Places Grid: All places with category filters and "show more" pagination
- Nearby Cities: Links to neighboring city pages
Map
The interactive map is a separate page (linked from the city hero), not a tab on the city page. It shows all places, trails, and community alerts with category filtering.
Responsive Design
The city page is fully responsive. On mobile, sections stack vertically and the places grid switches to a single column.
Organization Theming
Cities with organization branding use the OrganizationThemeContext to apply custom colors and styling. The city hero section, buttons, and badges adapt to the organization's color scheme.