Revamp Card UI in the Facilities Tab

[71203mayank]

Current Issues

The current card UI in the facilities tab has the following challenges:

1. Misaligned elements resulting in a cluttered appearance and uneven spacing.
2. Disjointed navigation, as links and buttons are scattered in two different locations.
3. Lack of responsiveness, leading to a poor user experience on smaller screens.

Proposed Enhancements

To resolve the above issues, the following improvements are suggested:

1. Component Grouping: Organize the card elements into four distinct components (refer to the attached image) for better readability and structure.
2. Consistent Design: Ensure proper alignment and spacing across all elements.
3. Responsive Layout: Make the cards adaptable to smaller screens for an optimized mobile experience.

Additional Improvements

1. Introduced icons for address and contact details in the hospital description section for better visual presentation.
2. Grouped all tags at the bottom-right corner, ensuring uniform spacing and alignment.
3. Centralized all clickable links at the bottom-left corner, making navigation more intuitive.
4. Incorporated spacing adjustments and alignments to give the card a polished and professional look.

Suggested card design for standard screens:

Suggested card design for smaller screens (mobile):

[71203mayank]

If you would like to proceed with my proposed UI design, could you kindly assign this issue to me?

[ayushpatil2122]

assign this issue to me

[nihal467]

@bodhish @vinutv can you review this issue and comment your thoughts

[bodhish]

We are planning to remove the facility listing page in favour of a public facility index, it will have a quite different ux, let's not work on this as it's functional

[71203mayank]

ok