Implement Withdraw Page on User Dashboard with Enhanced UI Features

[Agbeleshe]

close: #74

Pull Request: Dashboard UI Enhancements and Withdraw Page Implementation

Changes Made

• Implemented the Withdraw Page on the user dashboard according to Figma designs
• Added Framer Motion HOC animations to both user and admin dashboards for improved UX
• Fixed segment inconsistencies with the Figma design specifications
• Applied correct typography and styling across all components
• Ensured responsive design for all dashboard components
• Added padding adjustments to modals and pages for layout consistency
• Implemented withdraw stat card on the claims page
• Added disconnect wallet modal to the navbar

Technical Implementation

• Used Framer Motion HOC pattern for consistent animations throughout the application
• Verified styling with the figma.md documentation in the codebase
• Ensured all components match the design requirements
• Build runs successfully with npm run build

Screenshots / Videos

Implementation of the Withdraw stats card on user dashboard:
https://github.com/user-attachments/assets/f66ddaf0-5156-4866-9e50-68975fee5359

Added Animation to the entire User-dasboard:
https://github.com/user-attachments/assets/e38b19ba-69fa-4fd0-a4c1-859e24052f80

Added Animation to the entire Admin-dasboard:
https://github.com/user-attachments/assets/02e090aa-28e4-455c-baf5-1922bbbb009a

Made Modals display correct SVG and proper styling as in figma:

Modals.Recording.2025-04-28.035125.mp4

Added Proper Logic for the "Claim code" segment for easy implementation:
https://github.com/user-attachments/assets/e0283c8b-526a-416a-be11-dc7b153c09b4

Testing

• Tested on multiple screen sizes to ensure responsive design
• Verified all animations work as expected
• Confirmed typography and styling match the Figma specifications

[ONEONUORA]

Thank you for your contribution