Enhance Card Interaction: Auto-Flip on Hover

[neeru24]

This PR introduces an enhancement to the card interaction, making it more intuitive and user-friendly. Previously, users had to manually click on a card to view its details. Now, cards will automatically flip on hover, providing a smoother and more engaging experience.

Key Changes:

1. Auto-Flip on Hover: Implemented a CSS-based solution to automatically flip cards when the user hovers over them.
2. JavaScript Control: Added JavaScript logic to ensure only one card is open at a time, preventing overlapping animations.
3. Clearer Visual Cues: Enhanced the visual cues for card flipping to make the interaction more noticeable.
4. Optimized Transition: Fine-tuned the transition duration and easing to create a seamless and visually appealing flip animation.
5. Cross-Browser Compatibility: Thoroughly tested the implementation across different browsers to ensure consistent behavior.
6. Performance Optimization: Optimized the code to minimize performance impact, especially on devices with lower processing power.
7. Unit Testing: Added unit tests to verify the correct behavior of the auto-flip functionality and to prevent regressions in future changes.
8. Code Clarity and Maintainability: Improved code readability and maintainability by using clear variable names, comments, and consistent formatting.

• By implementing these changes, we aim to significantly improve the user experience and overall engagement with the card component.

Kindly merge this PR with LEVEL 2 as level 1 is given to minor changes like for documentation changes, readme changes.

fixes: #4481

Recording.2024-11-03.140314.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
swapreads	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 3, 2024 8:30am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[netlify]

✅ Deploy Preview for swapreadsconnect ready!

Name	Link
🔨 Latest commit	fdc5bf9
🔍 Latest deploy log	https://app.netlify.com/sites/swapreadsconnect/deploys/672734a17238cd0008e5a267
😎 Deploy Preview	https://deploy-preview-4493--swapreadsconnect.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.