feat: improve website layout and CSS for better UX (#188)

[suryaprakash0010]

Modernize and Enhance Hospital Website UI/UX

Description

This PR introduces a comprehensive update to the hospital website's UI/UX, focusing on the Hero section, About section, and Services section. The updates include modern design elements, improved responsiveness, and better user interactions.

Changes Made

1. Hero Section

• Added smooth animations and transitions
• Improved responsive design for all screen sizes
• Enhanced visual hierarchy and call-to-action buttons
• Added dark mode support

2. About Section

• Redesigned cards with hover effects
• Added expandable content sections
• Improved typography and spacing
• Added statistics counter with animations
• Enhanced mobile responsiveness

3. Services Section

• Implemented tab-based filtering
• Added modern card design with hover effects
• Improved image handling with lazy loading
• Added smooth scrolling for mobile
• Enhanced dark mode support

Technical Details

• Used Framer Motion for animations
• Implemented CSS Grid and Flexbox for layouts
• Added responsive design with media queries
• Optimized for performance with lazy loading
• Improved accessibility with proper ARIA labels

Testing

• Tested on Chrome, Firefox, and Safari
• Verified responsive behavior on mobile and tablet
• Checked dark/light mode transitions
• Tested keyboard navigation

Related Issues

• Addresses Improve website layout and css for better user experience. #188 (Layout and CSS improvements)

Checklist

• Code follows project conventions
• Responsive design works on all screen sizes
• Dark mode support implemented
• No console errors
• Documentation updated

Additional Notes

• Performance optimizations include image lazy loading and reduced motion preferences
• Accessibility improvements include better contrast ratios and keyboard navigation
• All animations respect the user's motion preferences

[netlify]

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

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	b5b5735

[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.

[suryaprakash0010]

This PR introduces a comprehensive update to the hospital website's UI/UX, focusing on the Hero section, About section, and Services section. The updates include modern design elements, improved responsiveness, and better user interactions.