UI/UX: Establish a heading hierarchy and page-title pattern across all routes

[Baskarayelu]

Description

Heading usage is inconsistent across the app: Home.tsx, Bond.tsx, and TrustScore.tsx each have an <h1>, cards use <h2> (ActionCard, lookup/activity panels) and <h3> (EmptyState/ErrorState), but there is no shared page-header pattern (title + supporting description + optional badge/action) and no documented hierarchy rule. This causes visual drift and makes screen-reader navigation by heading inconsistent. We need a standardized page-header component and a documented heading scale.

Requirements and context

• UI/UX scope only — heading pattern and a PageHeader spec.
• Reference src/pages/*.tsx, src/components/ActionCard.tsx, and typography tokens in src/index.css.
• Define PageHeader anatomy (h1 title, lead paragraph, optional badge/action slot) used by all pages.
• Document allowed heading levels per surface (page h1 → card h2 → sub h3).

Suggested execution

• Branch: uiux/page-header-hierarchy.
• Add src/components/PageHeader.tsx spec and apply to Home/Bond/Trust.
• Deliver: heading-scale doc and PageHeader redline.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build and npm run lint pass.
• a11y checks: one h1 per page, no skipped heading levels, logical outline.

Example commit message

feat(uiux): add PageHeader pattern and standardized heading hierarchy

Guidelines

• Clear documentation of the heading scale.
• Design consistency across all routes.
• Timeframe: 96 hours