Enhancement: Added Framer Motion animations and interactive mouse poi…

[suryaprakash0010]

PR: Add Framer Motion Animations + Interactive Mouse Pointer Effect #118

Description

This PR introduces smooth animations and an interactive custom cursor to enhance the user experience. The changes include Framer Motion animations for page transitions, component entrances, and hover effects, along with a custom cursor that provides visual feedback.

Changes Made

1. Custom Cursor

• Added interactive cursor with hover and click effects
• Smooth transitions and animations
• Touch device detection to disable on mobile
• Visual feedback for interactive elements

2. Page Transitions

• Smooth page transitions using AnimatePresence
• Fade and slide animations between routes
• Optimized performance with [useIsTouchDevice]

3. Hero Section Animations

• Staggered entrance animations
• Hover effects on images and buttons
• Scroll-triggered animations with useInView

4. Global Styling

• CSS variables for theming (light/dark mode support)
• Smooth transitions and animations
• Improved typography and spacing
• Responsive design improvements

5. Performance Optimizations

• Reduced motion support
• Optimized animations for 60fps
• Lazy loading for animations
• Memoized components where needed

Testing

• Tested on desktop with mouse
• Verified touch device behavior
• Checked reduced motion preferences
• Tested dark/light mode transitions
• Verified performance on low-end devices

Related Issues

• Closes 🎨 [Enhancement] Add Framer Motion Animations + Interactive Mouse Pointer Effect #118

Deployment Notes

• Requires Framer Motion v10+ and react-intersection-observer
• No breaking changes to existing functionality
• Backward compatible with current implementation

How to Test

1. Navigate through different pages to see smooth transitions
2. Hover over interactive elements to see cursor effects
3. Test on both desktop and mobile devices
4. Enable "Reduce Motion" in system preferences to verify accessibility

Known Issues

• Custom cursor may have minor visual glitches in some browsers
• Some animations may not trigger properly on initial page load in development mode (works fine in production)

Future Improvements

• Add more micro-interactions
• Implement scroll-based animations
• Add loading states with skeleton screens
• Optimize animations for lower-end devices

[vercel]

@suryaprakash0010 is attempting to deploy a commit to the Samar Sajad's projects Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

👷 Deploy request for mc-hospital-management pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	dba6ca1