Design governance empty-state illustrations

[afeezorobsco-cyber]

##close #503

Summary

This PR introduces branded empty-state illustrations for governance views, improving the first-time user experience with clear guidance and actionable next steps.

Changes

Governance Empty States

Designed dedicated empty states for:

• No Proposals
• No Votes Cast
• No Delegates

Each includes:

• Original SVG illustration
• PNG fallback
• Monochrome SVG variant for print
• Headline
• Supporting copy
• Primary CTA
• Contextual secondary action (where applicable)

Design System

Documented:

• Illustration anatomy
• Export formats (SVG + PNG)
• Monochrome print usage
• Responsive behavior
• Accessibility guidance
• Design token usage

Accessibility

Validated against WCAG 2.1 AA:

• Keyboard navigation
• Focus order
• Decorative image handling
• Text contrast
• Accessible CTA labels

Responsive & Theme Support

Verified layouts for:

• Desktop
• Tablet
• Mobile

Also verified:

• Dark mode
• Monochrome print rendering
• RTL compatibility (where supported)

Testing

Executed:

npm run lint

Ran component and visual tests covering:

• No proposals
• No votes cast
• No delegates
• Dark mode
• Responsive layouts
• Empty-state rendering

Review Notes

• Before/after screenshots included.
• SVG and PNG assets included.
• Accessibility (axe) validation included.
• Illustrations are original (or permissively licensed, with license information documented where applicable).

Closes #

[drips-wave]

@afeezorobsco-cyber 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

[afeezorobsco-cyber]

@thlpkee20-wq pls review and merge