🐛 [Bug report]: Cards need a UI improvement

[aayu5hgit]

Descrcibe the bug?

These cards are not looking intuitive and needs an improvement in the UI

Steps to reproduce the bug?

1. I can implement code to change the card UI

Expected behavior

• Improving the user interface (UI) of the cards will lead to a better User Experience (UX).
• Establish a clear hierarchy by making the Project Title the most prominent element and cleanly segregating secondary data (author name and interaction icons) into a dedicated area.

Desktop (Please provide your system information)

• OS: MacOS
• Browser: Chrome

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

Relevant log output

No response

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue
• I am a Hacktoberfest contributor

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Hey! contributor, thank you for opening an Issue 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[priyankarpal]

good idea @aayu5hgit could you share a demo card ui so that we can finalize here?

[aayu5hgit]

@priyankarpal sure, will share the same in a few!

[aayu5hgit]

@priyankarpal could you help me providing a sample JSON for the details that we're showing on the card?

[priyankarpal]

@priyankarpal could you help me providing a sample JSON for the details that we're showing on the card?

we are using following details: Image, project_title, user_pfp and user_name. You can check the cards as well. Not mentioning other stuffs(likes, languages etc)

[aayu5hgit]

@priyankarpal
I've designed something like this:

[priyankarpal]

Now card looks good with detailed info. Just need few fixes replace the share button to the share icon, & remove the play button. when a user hovers over the card they should able to open the play just like we have.

A few plays don’t have descriptions. Please make sure it doesn’t fail because of that @aayu5hgit

[aayu5hgit]

@priyankarpal Yep; got it.
Also, that's just a Figma design for now; I'll need you to assign me this in order to start the code revamp of the card UI.