Fix heading hierarchy and duplicate H1s across Landing, Dashboard, and ApiUsage pages

[greatest0fallt1me]

Description

This is a UI/UX accessibility issue. Heading levels are inconsistent across Callora: the topbar in src/App.tsx renders an <h1 className="brand"> on every route while LandingPage also uses <h1 id="hero-title"> and src/ApiUsage.tsx renders another <h1>User Profile API</h1>. Multiple H1s and skipped levels make the document outline confusing for screen-reader users.

Requirements and Context

• Establish a single, logical H1 per page and correct the descending heading order.
• Demote or restyle the persistent topbar brand heading so it does not compete as a page H1.
• Verify the outline with an accessibility tool on Landing, Dashboard, Marketplace, ApiUsage, and ApiDetail.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/heading-hierarchy

2. Implement changes
   • src/App.tsx — adjust the brand heading level/markup
   • src/ApiUsage.tsx and other pages — normalize heading levels
3. Test and commit
   • npm run dev, inspect the heading outline per route with an a11y tool
   • Include test output and notes in the PR

Example commit message

task: normalize heading hierarchy across pages

Acceptance Criteria

• Each page has exactly one logical H1
• Heading levels descend without skips
• Topbar brand no longer competes as a page H1
• Outline verified on the listed routes

Guidelines

• Meet WCAG 2.1 AA 1.3.1 (Info and Relationships)
• Clear documentation and inline comments
• Timeframe: 96 hours