[UI] Misaligned and Unsymmetrical Cards in "Support Us for Donation" Section

[TejasMore477]

Description

The cards displayed in the "Support Us for Donation" section are not symmetrical, and the buttons within the cards are not aligned uniformly. This misalignment impacts the overall visual consistency and detracts from the user interface experience. Minor UI inconsistencies like these can have a significant impact on user perception and the usability of the donation section.

How to Reproduce the Issue

Open the website.
Scroll down to the "Support Us for Donation" section.
Observe the unsymmetrical layout of the cards, along with the misaligned buttons.

Screenshot of the Issue

What and How It Should Be

Issue:

The current layout of the cards in the "Support Us for Donation" section is unsymmetrical, and the buttons are not aligned consistently.

Desired Solution:

The section should be made symmetrical by applying Flexbox or CSS Grid to ensure that:
All cards are of equal size.
The buttons inside the cards are aligned on the same line across all cards.
This will enhance the visual harmony of the section and improve the user experience, making the donation interface more user-friendly and appealing.

Additional Notes

Using Flexbox or CSS Grid can ensure responsive and consistent layouts across various screen sizes.
Correcting these minor alignment issues can make a substantial difference in the overall user interface and enhance user engagement.

[github-actions]

Thank you for creating this issue! 🎉 Your issue will soon be reviewed by Project Maintainers. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.

[github-actions]

Thanks for creating the issue in WildGuard!
Before you start working on your PR, please make sure to:

• ⭐ Star the repository if you haven't already.
• Pull the latest changes to avoid any merge conflicts.
• Attach before & after screenshots in your PR for clarity.
• Include the issue number in your PR description for better tracking.
  Don't forget to follow @anuragverma108 – Project Maintainer – for more updates!

We're excited to see your contribution as part of Hacktoberfest 2024! 🎉
Happy open-source contributing!