[BUG] Implement Card Design for project cards

[saloni911]

Description

We propose adopting a card-based design similar to Airbnb's layout to display projects on our website. This design is visually appealing and user-friendly, allowing for an engaging presentation of projects while keeping the content organized and easily scannable.

Proposed Functionality:

Each project will be displayed in a card format, with the following key elements: Project image as the header of the card. Project name, brief description, and key details (e.g., project status, team members) below the image. A clear "View Project" or "Learn More" button to encourage interaction. The cards will be responsive and optimized for both desktop and mobile screens, ensuring a seamless user experience across devices. The layout will support multiple cards in a grid format, with appropriate spacing and padding to maintain visual clarity.

Screenshots

can refer to such UI

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I'm a GSSoC'24-Extd contributor
• [X] I'm a Hacktoberfest'24 contributor
• [X] I am willing to work on this issue (optional)

[github-actions[bot]]

👋 Thank you @saloni911 for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!

[saloni911]

Hi @beRajeevKumar @KiranBaliga ,

I noticed the bug in the card component and wanted to offer my help in fixing it. I've worked on a similar project involving card components, so I'm confident I can resolve this issue. Could you please assign this to me?

Thanks!

[KiranBaliga]

@saloni911 I am not the project owner. Rajeev will be reviewing it.