feat: implement nft collection section, build connect wallet modal for navbar

[Nwanne-san]

Overview

Solves issue #7

This PR implements responsive design for the NFT Collections dashboard, adds animated filter interactions, and introduces a new wallet connection modal with smooth transitions across all devices.

Key Changes

Table Responsiveness

• Implemented responsive grid layout that adapts to different screen sizes
• Collection information maintains visibility and readability across devices
• Mobile view:
  • Stacks data vertically with labeled sections
  • Grid layout switches to 2-3 columns for better space utilization
  • Maintains data hierarchy with clear visual separation
• Tablet view:
  • Hybrid layout preserving most important columns
  • Optimized spacing and typography for medium screens
• Desktop view:
  • Full table layout with all columns visible
  • Optimized spacing for larger screens

Filter Animations & Interactions

• Added smooth sliding animation for time range filter selection using Framer Motion
• Implemented layoutId transition for the selected state background

Wallet Connection Modal

• Implemented new modal component for wallet connection

• Added animations for modal open/close:

• Responsive design considerations:

• Half-screen modal on mobile

• Centered modal with backdrop on tablet/desktop

• Smooth transitions between states

Layout & UI Improvements

• Enhanced table header alignment and spacing
• Implemented consistent spacing system across viewports
• Added hover states and interaction feedback

Screenshots