Treatments

Browse procedures across nine specialties, with indicative pricing and savings.

<!-- GENERATED FILE. Do not edit by hand. Source: components/help/content/. Run npm run gen:docs. -->

Purpose & Business Context

The Treatments page answers the very first question many patients have: do you even cover my procedure, and roughly what does it cost? It maps the platform's clinical breadth across nine specialties and gives an indicative all-in price and typical saving for each procedure, so a visitor can self-qualify before going near the marketplace.

Commercially it is the procedure-led entry point to the funnel. Each card is a routed hand-off: View clinics carries the visitor straight into the marketplace pre-filtered to that specialty, turning curiosity about a single procedure into a focused clinic search.

Screen Overview

A server-rendered page with the shared chrome, a teal page hero, and the client-side TreatmentsExplorer. The explorer is a specialty filter (a row of chips) over a responsive grid of procedure cards. Selecting a chip narrows the grid to that specialty; All treatments shows everything.

Each procedure card carries the procedure name and specialty, a short description, an indicative From price with the struck-through reference price and savings percent, the typical stay, the count of clinics offering it, and a View clinics link.

Controls & Components

• Page hero: eyebrow, title, subtitle and three stats (specialties, procedures, typical savings up to 93%).
• Specialty filter: an All treatments chip plus one chip per specialty (Cardiac Surgery, Orthopedics, Oncology, Cosmetic & Plastic, Dental Care, Fertility & IVF, Bariatric Surgery, Ophthalmology, Hair Restoration). The active chip is filled teal.
• Procedure cards: a specialty icon, the procedure name and specialty, a blurb, an indicative From price, the reference price (struck through), the savings percent, the stay, the clinic count, and a View clinics link.
• View clinics link: deep-links to /clinics?specialty=<key> so the marketplace opens filtered to that specialty.

Field Definitions

• Specialty: One of the nine clinical specialties used to group procedures and to filter the grid.
• From (price): The indicative starting price in USD for the procedure, for example $13,800 for CABG. Indicative, not a quote.
• Reference price: The typical home-market list price (shown struck through), used as the comparison baseline, for example a United States list price.
• Savings %: The approximate saving of the From price versus the reference price, for example ~89%.
• Stay: The typical in-country stay and trip length, for example '5 nights, 3 wks trip'.
• Clinics: How many partner clinics in the network offer that procedure, for example 5 clinics.

User Actions & Workflows

1. Read the hero to see the breadth (nine specialties, the procedure count, typical savings).
2. Press a specialty chip to filter the grid, or leave All treatments selected to browse everything.
3. Scan a procedure card for its indicative price, savings, stay and how many clinics offer it.
4. Press View clinics on a card to open the marketplace pre-filtered to that specialty.
5. From there, filter and compare clinics, or return to the nav for Pricing, Quality or Destinations.

Navigation & Relationships

Reached from: the Treatments item in the primary nav and the brand logo via Home.

Leads to: the marketplace at /clinics?specialty=<key> from every card's View clinics link, deep-linking the explorer to the chosen specialty.

Pairs with: the Pricing page, which itemises what the indicative price covers, and the Destinations page, which lists the lead specialties per country.

Business Rules & Constraints

• The specialty filter is single-select: one specialty at a time, or All treatments.
• Prices are indicative all-in starting prices; a final quote follows a medical review of the patient's records.
• Savings are computed against a stated home-market reference price and framed as approximate.
• Every card routes to the same marketplace; the page itself does not handle quotes or sign-in.
• Public screen: fully browsable without an account.

Data Dependencies

The hero reads specialties and procedures for its counts. The explorer reads procedures (cards), specialties (filter chips) and specialtyByKey (to resolve each procedure's specialty name and icon) from lib/data.

• procedures: the procedure cards with price, savings, stay and clinic count
• specialties: the filter chips and counts
• specialtyByKey: resolves a procedure's specialty label and icon

Error Handling & Edge Cases

• A specialty with no procedures simply shows an empty grid under that chip; the page does not error.
• Being static aside from the filter, there are no loading or fetch-failure states for the visitor.
• The View clinics deep link is resilient: if the marketplace cannot match the specialty it falls back to showing all clinics.
• Mobile: the chip row wraps and the procedure grid reflows to a single column.

User Roles & Permissions

• Public (no sign-in required): Anyone can browse and filter procedures. Signed-out visitors use the page freely.
• Get started / Sign in: The header CTAs lead into the authentication flow and the patient portal; the Treatments page itself requires no account.

Related Features & Functionalities

The marketplace (/clinics, the deep-link target), the Pricing page (itemised cost breakdowns for several of these procedures), the Quality page (the accreditations behind the clinics that offer them), and the Destinations page (which specialties lead in which country).

Flow & Screenshots

flowchart LR
  Treatments[Treatments] --> Hero[Page hero]
  Treatments --> Filter[Specialty filter]
  Filter --> Grid[Procedure cards]
  Grid -->|View clinics| Clinics[Find Care: filtered by specialty]
  Treatments -->|nav| Pricing[Pricing]
  Treatments -->|nav| Destinations[Destinations]

Guided Walkthrough Steps

The in-app walkthrough for this screen has 5 steps (auto-advances every 5 seconds; Prev / Pause / Next; click outside to exit):

1. Procedures across nine specialties ([data-tour="treatments.hero"])

From cardiac surgery to dental implants and hair restoration, this page maps what we coordinate, with indicative all-in pricing and typical savings.

1. Filter by specialty ([data-tour="treatments.filter"])

Pick a specialty to narrow the grid, or leave All treatments selected to browse everything we cover.

1. Read a procedure card ([data-tour="treatments.grid"])

Each card shows an indicative From price against the home-market reference, the typical savings and stay, and how many clinics offer it.

1. Compare context ([data-tour="site.nav"])

Use the nav to cross-check Pricing for an itemised breakdown, or Destinations to see which countries lead in your specialty.

1. Ready to go further ([data-tour="site.cta"])

View clinics on any card opens the marketplace filtered to that specialty. When you want a quote, Get started leads into the patient portal.