fix: Update UI component for improved design

[Codexnever]

Description

This PR updates the UI of the card component to improve layout and responsiveness. Additionally, the button within the card is positioned at the bottom for better usability and visual appeal. Please note that the deploy preview link is currently not working, but the changes have been tested locally and are functioning as expected.

Related Tickets & Documents

Closes #243

Mobile & Desktop Screenshots/Recordings

Before

After

Steps to QA

1. Pull the latest changes.
2. Run the project locally.
3. Verify that the card layout is responsive and the button is correctly positioned at the bottom.
4. Ensure no issues arise with other components.

Tier (staff will fill in)

• Tier 1
• Tier 2
• Tier 3
• Tier 4

[optional] What gif best describes this PR or how it makes you feel?

[github-actions]

PR Compliance Checks Passed!

[netlify]

✅ Deploy Preview for learn-opensauced ready!

Name	Link
🔨 Latest commit	83d11ca
🔍 Latest deploy log	https://app.netlify.com/sites/learn-opensauced/deploys/671a8dd80f44bb00092623dc
😎 Deploy Preview	https://deploy-preview-249--learn-opensauced.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.

[adiati98]

Hi @Codexnever, please don't delete sections in the PR template.

You must complete the template, and when a section is not related to your PR, you can leave it blank.

Have you read all the comments in the PR template?
One of it says:

<!-- note: PRs with deleted sections will be marked invalid -->

That being said, please fix your PR template before we review your PR. Alternatively, you can close this PR and create a new one.

Thank you. 🙂

[Codexnever]

Hi @Codexnever, please don't delete sections in the PR template.

You must complete the template, and when a section is not related to your PR, you can leave it blank.

Have you read all the comments in the PR template? One of it says:

<!-- note: PRs with deleted sections will be marked invalid -->

That being said, please fix your PR template before we review your PR. Alternatively, you can close this PR and create a new one.

Thank you. 🙂

Hi @adiati98,

Thank you for your feedback! I apologize for the oversight and for deleting sections of the PR template. I will update the PR template to ensure that all sections are retained and follow the guidelines correctly

Thanks again for your understanding! 🙂

[adiati98]

Do let me know once you've fixed it, @Codexnever. 👍🏼
You can take a look at closed PRs to see what you've removed.

[adiati98]

@Codexnever your PR should look like this.

[Codexnever]

@Codexnever your PR should look like this.

Hey @adiati98 ,

Sorry for submitting the wrong template earlier. Now i corrected you can check

Thanks for understanding!

Best,
Chaitanya

[adiati98]

Thank you for your contribution, @Codexnever! ✨