Fixes #82 fix(components): update styling for the resuable card components

[ritankarsaha]

Overview

1. This PR fixes or fixes part of #82 .
2. This PR does the following: This PR contains reusable card components for the upcoming and completed bus cards in the components folder of the src folder of the frontend folder of the project.

Essential Checklist

• [ x] The PR title starts with "Fix #bugnum: ", followed by a short, clear summary of the changes. (If this PR fixes part of an issue, prefix the title with "Fix part of #bugnum: ...".)
• [ x] "Allow edits from maintainers" is checked. (See here for instructions on how to enable it.)
• [ x] The PR is made from a branch that's not called "main/master".

Proof that changes are correct

This is the first reusable card component showing that it is responsive across all devices. this is the upcoming component.

This is the second reusable card component that is being used here. this is the completed component.

The data in these cards are not hardcoded and are rendered creating a new route path in the App.jsx file giving appropriate demo data there to display the card components successfully. The components are ready to be rendered anywhere in the project efficiently from the components folder.

Thank You

PR Pointers

• If you need a review or an answer to a question, and don't have permissions to assign people, leave a comment like the following: "{{Question/comment}} @{{reviewer_username}} PTAL".
• Never force push. If you do, your PR will be closed.

[vercel[bot]]

@ritankarsaha is attempting to deploy a commit to the Busify Team on Vercel.

A member of the Team first needs to authorize it.

[ritankarsaha]

@RISHIKESHk07 I have fixed the issue #82 and also opened a PR for the same. #82 .

[ritankarsaha]

@RISHIKESHk07 Made the necessary changes and pushed a new commit.

[ritankarsaha]

@RISHIKESHk07 Made the necessary changes to the card components.

PROOF OF WORK:-

Thank You.

[RISHIKESHk07]

@ritankarsaha a photo of the completed as well please , @Pratik2026 any changes ?

[ritankarsaha]

@ritankarsaha a photo of the completed as well please , @Pratik2026 any changes ?

@RISHIKESHk07 I have already attached the photos of the final completed cards in the previous comment. I am attaching it once more.

Screenshot of the upcoming card.

Screenshot of the completed card.

[Pratik2026]

@ritankarsaha The code looks fine but some font-sizes and font-weight are not according to the designs. You can check the properties of components in Figma itself. Try the dev mode of Figma, it will display the properties of selected components.

I have requested some changes which could have been given but I am expecting you to review yourself as well and change the properties wherever required.

[ritankarsaha]

@Pratik2026 Made all the necessary changes according to the figma design and as per as the review comments and pushed a new commit into the PR

Thank You

[ritankarsaha]

@Pratik2026 Made the necessary changes and pushed a new commit into the PR

[Pratik2026]

@ritankarsaha, The changes looks good. Just do the final change and then we can proceed further.

[ritankarsaha]

@ritankarsaha, The changes looks good. Just do the final change and then we can proceed further.

@Pratik2026 Made the necessary change and pushed a new commit into the PR

[Pratik2026]

LGTM.

[Pratik2026]

merged, thanks for contributing @ritankarsaha

[ritankarsaha]

merged, thanks for contributing @ritankarsaha

Thank You @Pratik2026