Case study · Self-initiated demonstration
Counsel Path
Counsel Path is a self-initiated Heavenkeys frontend demonstration focused on legal information. A legal information website needs to explain enquiry categories without asking people to upload confidential evidence. We built a responsive interface that lets a visitor browse fictional entries, narrow the collection and open a focused detail view. This case study documents the implemented interface and its tested browser behaviour.
Try the interactive demonstration ↗- Project type
- Legal information
- Work completed
- Responsive frontend, filtering, detail views and local review controls
- Company
- Heavenkeys · Self-initiated project
- Release
- October 10, 2026 · Browser demonstration
The problem and the collection we built
A legal information website needs to explain enquiry categories without asking people to upload confidential evidence.
The demonstration organises practice areas around four concrete entries: Business agreements, Property information, Employment questions and General consultation. Each entry has a title and a category so the collection can be scanned before opening a detail.
The categories are business, property, workplace, enquiries. The category selector and text search work together: choosing a category limits the visible entries, while typing a title narrows that result. An empty result has its own explanation, so the visitor can recover by changing the search.
Practice-area filtering and a non-submitting enquiry planner. The desktop layout gives the collection room to breathe and keeps controls separate from the entries they affect.
A mobile view built around the same task
The mobile screen shows the same practice areas rather than a reduced screenshot of the desktop page. The layout moves into a single column and the controls wrap into the available width. Entry actions remain directly reachable.
We checked the demonstration at a 390-pixel viewport. The page has no horizontal overflow, and the category and search controls continue to operate on the same underlying collection. The detail button carries the entry title in its accessible name.
The mobile capture uses the fictional collection in its initial state. It is an actual browser capture of this demonstration, rather than a generated picture of an application.
From finding an entry to reviewing it
Opening an entry changes the page to a focused detail view. The title, category and explanation remain connected to the selected item. A back control returns to the collection, and the selected entry is represented in the URL so the detail can be opened directly.
The review area supports three stages: Draft, In review and Approved. A visitor can add a fictional planning note and save it in that browser. Reloading restores the selected entry and its saved note. This is local demonstration storage, with no account or server behind it.
An export control downloads the fictional entries and local review notes as JSON. A reset control clears those demonstration notes. The captured detail view shows a fictional review note used during verification.
What was tested
Each demonstration passed checks for title search, category filtering, the empty state, entry details, saving and restoring local notes, changing review stages, exporting the demonstration data and resetting notes. The browser checks also found no application console errors or horizontal overflow at the mobile width.
Scope and source
This is a frontend demonstration using fictional records. It is not a commissioned client engagement, a deployed organisational system or evidence of client outcomes. No payments, live records, email submission, AI model, authentication or external business integration is connected.
The selected template reference was Law firm. Heavenkeys authored this browser demonstration separately; it does not run the original application stack. The source library retains its Custom-README-permission licence record. Upstream photography, logos, testimonials and private product assets were not published.
For a commissioned implementation, discovery would define the data model, permissions, content ownership and integrations that belong behind this interface. The demonstration makes the frontend decisions reviewable without presenting those future integrations as completed work.
Website design and development · Web application development · Product design
Discuss your project ↗