Unify Hover Animation: Apply Consistent Hover Effect to Top Three Cards

[Kevils]

Description 📹

Loom : https://www.loom.com/share/9d52d9b8b6ea47cebe4a6a72b8bfaa9b

The purpose of this issue is to ensure that the top three cards have the same hover animation as the other cards, maintaining a consistent user experience across the platform.

Issue Details

• Current State: The first top three cards do not use the same hover animation as the other cards. This creates inconsistency in the interface.
• Proposed State: Apply the same hover animation used on the bottom cards to the top three cards, so all cards have a unified interaction.
• Design: The standard hover animation is already defined and used by the bottom cards. No new design is required.

Actions to Take

1. Fork and Branch Creation:

   • Fork the repository and create a new branch using the issue number.

2. Implementation of Changes:

   • Update the code so that the top three cards use the same hover animation as the bottom cards.
   • Ensure the animation is consistent and smooth across all cards.

3. Testing and Validation:

   • Test the hover effect on all cards (top and bottom) locally.
   • Verify that the animation works correctly and that no other styles are affected.

4. Commit and Submission:

   • Make a commit with a clear message describing the unification of the hover animation.
   • Submit a pull request closing the issue.

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. Implement Changes:
   [Insert Code snippet if needed with a mardown todo list]

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: [Short description of the fix]"

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[BlessingEmejulu]

Can I take care of this