Feat/fe payment page a11y

[AbuJulaybeeb]

What was done

Implemented PayPageShell to provide a consistent page container, a skip-to-content accessibility link, and a semantic

tag for screen readers.
Standardized text contrast across all states (Active, Expired, Paid, Refunded, Loading, Error) to support both light and dark modes out-of-the-box using the --background and --foreground theme tokens.
Replaced non-existent internal icons with lucide-react icons.
Removed generateMetadata from layout.tsx to resolve the Next.js parameter parsing crash on the server and safely refactored the page into a server-side entry point.
Created an elegant top-right NetworkBadge with theme-aware amber/emerald/blue highlighting.
Why it was done To ensure the public payment links represent QuickEx well during contributor demos, fulfilling the WCAG AA contrast standards and ensuring keyboard accessibility on the transaction pipeline.

How it was verified Added a mockState query parameter to cleanly test each payment step without depending on the backend DB. Ran an automated browser subagent through mockState=ACTIVE|EXPIRED|PAID|REFUNDED|ERROR to verify visual aesthetics and generate session screenshots/recordings. Verified local Next.js turbopack builds and completed eslint checks with exit code 0.

Closes #575

[drips-wave]

@AbuJulaybeeb Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[Cedarich]

@AbuJulaybeeb fix conflict

[Cedarich]

Fix workflow