UI/UX: Define active/current-page indication for header navigation links

[Baskarayelu]

Description

The header nav in src/components/Layout.tsx uses plain <Link to="/bond">/<Link to="/trust"> with no active-state styling, so users cannot tell which section they are currently in. React Router's NavLink and aria-current are not used. We need to design the active/current-page indication (underline, weight, or accent bar) and apply it consistently, including hover and focus interplay.

Requirements and context

• UI/UX scope only — nav link state styling.
• Reference src/components/Layout.tsx nav region and the --credence-color-primary* tokens.
• Define default, hover, focus-visible, and active/current states for nav links.
• Use aria-current="page" semantics for the active route.

Suggested execution

• Branch: uiux/nav-active-state.
• Swap Link for NavLink in Layout.tsx; add nav link CSS.
• Deliver: nav state redlines and aria-current mapping.

Test and commit

• Visual QA at 375px and 1280px across routes.
• npm run build and npm run lint pass.
• a11y checks: aria-current="page" on active link, focus ring visible.

Example commit message

feat(uiux): add active-page indication to header navigation

Guidelines

• Clear documentation of nav states.
• Design consistency with primary token usage.
• Timeframe: 96 hours