Add hover effects to statistics cards for improved engagement and visual feedback

[nishitha011]

Hi @Dhanika-Bhat, I'm GSSOC'26 contributor. Kindly consider assigning me this issue.

Description

The statistics cards currently display key platform metrics effectively, but they remain static when users interact with them. Adding hover effects would make the cards feel more interactive, improve user engagement, and provide a more polished and modern user experience.

Current Behavior

• Statistics cards have no visual response on hover.
• Users receive no feedback indicating interactivity.
• The section appears static despite being a prominent visual element on the page.

Expected Behavior

• Cards should provide subtle visual feedback when hovered.
• Hover animations should enhance the appearance without being distracting.
• The effect should be consistent with the application's overall design language.

Suggested Enhancements

• Add a slight lift effect using transform: translateY(-5px).
• Apply a subtle box-shadow increase on hover.
• Smoothly animate transitions for shadow, transform, and border colors.
• Slightly scale the icon container or icon itself.
• Add a soft accent-colored border glow on hover.
• Highlight the statistics number with a subtle color transition.

Steps to Reproduce

• Navigate to the statistics/metrics section.
• Hover over any statistics card.
• Observe that the card appearance remains unchanged.

Actual Result

The cards remain static and provide no visual feedback during hover interactions.

Expected Result

The cards should respond visually to hover actions, making the interface feel more interactive and engaging.

Screenshots