made the Dapp more responsive, alinged with figma and more responsive…

[Agbeleshe]

Comprehensive UI Improvements and Responsive Implementation

close: #69

Overview

This PR implements multiple UI enhancements across the application, including responsive mobile views, animations, proper styling according to the Figma design, and a new chatbot interface. These changes significantly improve the user experience on all devices while maintaining design consistency.

Changes

Responsive Design

• Added mobile card view for transaction tables and other tables to be mobile responsive
• Created the Advisory Page with cool design
• Maintained desktop table view for larger screens
• Implemented responsive design for BasicInfo and BeneficiaryInfo components
• Ensured proper styling and alignment on all device sizes

Animations

• Integrated Framer Motion for smooth animations on the home page
• Added transition effects to improve user engagement
• Implemented subtle motion design following the application's aesthetic

Styling Improvements

• Applied correct background colors site-wide according to Figma specs
• Standardized text and font sizes across the entire application
• Fixed inconsistencies in typography and spacing
• Ensured proper visual hierarchy with correct font weights

New Features

• Implemented chatbot page with the required action buttons:
  • Support
  • Inheritance plan
  • Claim
  • Swap token

Implementation Details

• Used Tailwind's responsive utilities for consistent breakpoints
• Applied Framer Motion for performant animations
• Created card-based mobile UI with improved visual hierarchy
• Maintained design system consistency across new and modified components

Testing

• Tested on multiple device sizes including mobile, tablet, and desktop
• Verified build with npm run build
• Confirmed responsive behavior matches design requirements
• Validated animations work smoothly across different browsers

Requirements Checklist

• Responsive on tablet, mobile and desktop
• Used correct background colors from Figma
• Fixed overflowing elements and modals
• Used proper font styles and sizes throughout
• Maintained icon display quality
• Properly aligned elements for small screens
• Added animations to home page with Framer Motion
• Implemented chatbot page with required action buttons
• Removed overflow from admin and user dashboard
• Used SVG format for all imported images

Screenshots

build report

user dashboard