[UI/UX] Improve NFTCard visual design

[dev-fatima-24]

Priority: medium

Description

The NFTCard component displays vaccination record data in a plain list format. The card should be redesigned to clearly present vaccine name, date, issuer, and status in a scannable layout.

Acceptance Criteria

• Card has a clear visual hierarchy: vaccine name is most prominent
• Date and issuer are displayed with appropriate labels
• Card includes a status indicator (active/revoked)
• Card design is consistent with the overall color system and typography scale
• Card is visually distinct from surrounding UI elements

[GreatShinro]

@GreatShinro has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hi, can I work on this please?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @GreatShinro to this issue.

[1sraeliteX]

@1sraeliteX has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @1sraeliteX to this issue.

[Henrichy]

@Henrichy has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

My name is Henry, a fullstack software developer with experience building modern and user-friendly frontend applications using React and responsive UI design principles. I am interested in contributing to the NFTCard visual redesign enhancement in the VacciChain project.

I have experience creating clean and accessible component layouts with strong visual hierarchy, reusable styling systems, and responsive design. I can redesign the NFTCard component to make important information such as vaccine name, vaccination date, issuer, and status easier to scan and understand at a glance.

I will ensure the card includes a clear active/revoked status indicator, aligns with the project’s typography and color system, and remains visually distinct from surrounding UI elements while maintaining consistency across the application.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Henrichy to this issue.

[queentiffany1111-cloud]

@queentiffany1111-cloud has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

hello maintainer ill like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @queentiffany1111-cloud to this issue.

[drips-wave]

Congratulations, @queentiffany1111-cloud! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @queentiffany1111-cloud: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @queentiffany1111-cloud as part of the Stellar Wave Program's 5th Wave 🥳

😎 @queentiffany1111-cloud: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.