Design investor dashboard hero experience

[afeezorobsco-cyber]

##close #487

Summary

This PR introduces a redesigned Investor Dashboard Hero to improve visibility into portfolio performance and provide a clearer first-action experience.

Changes

Hero Section

Designed a new hero band containing:

• Total Value KPI
• Realized Gains KPI
• Upcoming Payouts KPI
• Pending Actions KPI
• Portfolio sparkline
• Primary Explore Offerings CTA
• Secondary action following existing dashboard patterns

Responsive Design

Implemented layouts for:

• Desktop
• Tablet
• Mobile

The hero adapts responsively while preserving hierarchy and readability.

Component States

Defined UI variants for every KPI tile:

• Normal
• Empty
• Error
• Loading (where applicable)

Covered scenarios including:

• New investor with no holdings
• Negative portfolio performance
• Missing data
• Service errors

Accessibility

Validated against WCAG 2.1 AA:

• Keyboard navigation
• Focus visibility
• Semantic structure
• Accessible labels
• Contrast compliance

Dark Mode

Verified:

• KPI tiles
• Sparkline
• CTA buttons
• Typography
• Background contrast

Documentation

Added design documentation covering:

• Hero anatomy
• Desktop/mobile layouts
• Tile variants
• Accessibility guidance
• Responsive behavior

Testing

Executed:

npm run lint

Ran component and visual tests covering:

• New investor
• Negative returns
• Empty state
• Error state
• Dark mode
• Responsive layouts

Review Notes

• Before/after screenshots included.
• Accessibility (axe) validation included.
• Design follows existing component patterns and design tokens.

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