feat: add user guide comparison view

[jacobvjk]

Summary

This PR:

• Adds a new section "Step by step guides" on the "How to choose a pathway" documentation page
• The new section gains an accordion-type list that contains detailed guides for how to navigate and use TPR features
• The section gains an initial article on how to use the comparison view
• The article includes screenshots and text descriptions
• The required screenshots have been placed in a new sub directory in the public/guides

This will enable us to point users to clear help if they get lost on the page. It can be used to point an on-screen helper to, once added (see #906 )

Related issues

Closes: #905

Testing

Manually tested all acceptance criteria and added links.

Checklist

• PR is focused on a single concern
• Tests pass locally and in CI
• Docs updated for user-visible changes
• AI-assisted portions declared (see CONTRIBUTING.md)

[github-actions]

Expected version change and release notes:

1.16.0-dev.16 (v1.16.0-dev.15...documentation-sbs-user-guides ) (2026-08-19T09:25 UTC)

Features

• add user guide comparison view (0a6b947)

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-912.westus2.2.azurestaticapps.net

[Copilot]

Pull request overview

Adds a new “Step-by-step guides” section to the “How to Choose a Pathway” resource page, introducing an accordion-based user guide (initially: “How to compare pathways using the TPR”) with inline screenshots to help users navigate the Comparison View.

Changes:

• Introduces a new Step-by-step guides section with per-guide accordion behavior.
• Adds a first guide article describing how to use the pathway comparison flow, including screenshot assets referenced from /guides/....
• Adds small supporting components/types (GuideScreenshot, GuideItemBlock, Guide).

Suppressed comments (1)

src/pages/resources/ResourcesHowToChooseAPathwayPage.tsx:224

• This looks like placeholder copy ("... and pathway coverage."). Since this is user-facing documentation, it should be written out as a complete instruction.

            ... and pathway coverage.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 9 changed files in this pull request and generated no new comments.

Suppressed comments (5)

src/pages/resources/ResourcesHowToChooseAPathwayPage.tsx:207

• The sentence ends with an ellipsis ("benchmarks…"), which reads like an unfinished thought in the user guide. Consider making this a complete sentence so the step stands on its own.

          <li>
            This will open the side-by-side comparison of your selected
            pathways. Scrolling this page allows you to compare benchmarks…
            <div className="mt-3">

src/pages/resources/ResourcesHowToChooseAPathwayPage.tsx:216

• This list item still contains placeholder text ("... model assumptions ..."). Since this is user-facing documentation, it should be replaced with a concrete instruction describing what the screenshot shows.

          <li>
            ... model assumptions ...
            <div className="mt-3">

src/pages/resources/ResourcesHowToChooseAPathwayPage.tsx:183

• Minor grammar/readability: the comma in "The pathway cards below, will" is incorrect, and a couple of phrases are missing articles ("Clicking the … button"). Tightening this copy makes the step easier to read.

            The pathway cards below, will now show a button next to the{" "}
            <b>"View Details"</b> button. Clicking on <b>"Plus"</b> button on a
            pathway card will add the pathway to the comparison tray. A selected
            pathway will now show a checkmark on the pathway card. Clicking on
            the <b>"Checkmark"</b> button will remove the pathway from the

src/pages/resources/ResourcesHowToChooseAPathwayPage.tsx:224

• This list item still contains placeholder-style phrasing ("... and pathway coverage."). Consider replacing it with a full sentence so the guide reads consistently.

          <li>
            ... and pathway coverage.
            <div className="mt-3">

src/pages/resources/ResourcesHowToChooseAPathwayPage.tsx:262

• GuideItemBlock duplicates the same accordion behavior already implemented in CollapsibleRow earlier in this file (useState/useId, aria-expanded/controls, conditional panel rendering). Consider extracting a shared AccordionItem component (or making CollapsibleRow support an optional label) so styling/ARIA behavior stays consistent and future changes only need to be made once.

const GuideItemBlock: React.FC<Guide> = ({ title, content }) => {
  const [isOpen, setIsOpen] = useState(false);
  const contentId = useId();

  return (

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-912.westus2.2.azurestaticapps.net