Added 3D hover effect to card components

[imtahirabatool]

Description

Hey there! This PR adds a cool 3D tilt hover effect to the cards. Hovering over a card makes it tilt to follow your mouse, giving clearer feedback.

What I Changed

• Added 3D perspective to cards using CSS transforms
• Built a small JS function to track mouse position and tilt the cards
• Cards now rotate smoothly as you move your mouse over them (with a slight scale for depth)
• Made sure it plays nicely with the existing filtering/sorting - the effect re-initializes when cards are shown/hidden

The Technical Stuff

I used CSS perspective and transform-style: preserve-3d to set up the 3D space, then added JavaScript to:

• Figure out where your mouse is relative to each card
• Calculate how much to tilt based on how far your cursor is from the card center
• Apply smooth transforms that feel natural
• Keep everything working even when cards get filtered or sorted

How It Works

Basically, when you hover over a card:

• Moving your mouse left/right tilts it on the Y-axis
• Moving up/down tilts it on the X-axis
• When you move away, it smoothly snaps back
• Added a tiny 1.02x scale to make the depth effect pop a bit

Testing

I tested it with:

• ✅ All the existing card features (nothing broke!)
• ✅ The hover effects that were already there (image rotation, buttons)
• ✅ Filtering and sorting operations
• ✅ Completed/hidden cards still work as expected
• ✅ All the lint checks pass

Visual Preview

GIF.mp4

A Few Notes

This is my first open source PR (exciting!), so let me know if anything needs adjusting! 😊

The implementation:

• Doesn't mess with any existing functionality
• Follows the code style I saw in the project
• Runs smoothly (60fps animations)
• Works with all the filtering, sorting, and card completion features

---

Closes #[1263]