✨ Enhancement: Revamp the UI for pro-help page

[Thund3rHawk]

Is your feature request related to a problem? Please describe

Revamp the UI for pro-help page

Describe the solution you'd like

The current card design needs improvement to enhance visual appeal and user experience. This issue aims to revamp the style of the cards, making them more modern, engaging, and visually attractive.

Describe alternatives you've considered

No response

Additional context

No response

Are you working on this?

Yes

[jdesrosiers]

@Thund3rHawk Let's get specific about what needs to improve on this page. Start a conversation. Make a proposal. Collaborate on designing a solution. Once there's consensus on what changes we want to make, then some one can be assigned to do the work.

I'll start. I think this page should more closely match the look and feel of the rest of the site. I think the main thing that makes this page look different to me is the text size being smaller on this page than in other places.

[Thund3rHawk]

Also this, I think the card components should be more compact, displaying only the most valuable details along with the person's name as the heading. A "View More" button should be included, which, when clicked, opens a modal containing the full bio and relevant links.

If the number of members increases, large cards may appear cluttered and unorganised, especially on mobile devices. This optimised design will ensure a cleaner and more responsive layout.

[jdesrosiers]

I think the card components should be more compact, displaying only the most valuable details along with the person's name as the heading. A "View More" button should be included, which, when clicked, opens a modal containing the full bio and relevant links.

I don't know. I'm personally not a fan of "view more" buttons and I think the card are already pretty simple. I don't see this list growing too much. Maybe that's a problem we consider if we come to it.

However, the mobile view could definitely use some attention. Links don't flow well.

[Thund3rHawk]

That makes sense! If the list isn’t expected to grow much, keeping everything visible might work well for now. My main concern is the mobile experience—right now, the links don’t flow well, and readability could be improved. Maybe we can focus on optimising that first? I’d be happy to help refine the layout for better responsiveness!

[jdesrosiers]

I'm not one of the website maintainers. I'd like to hear from them about this. But, I think the next step is for you (@Thund3rHawk) to share a mock up of what the changes would look like on mobile and desktop.

[Thund3rHawk]

I’m trying to make this section more like a card that combines both the About section and the Project Links for better consistency and readability.

Here’s a mock-up of how it would look on desktop:

[jdesrosiers]

Looks much nicer. I'm not a web designer, so I don't know what I'm talking about, but here are my impressions ...

I like the rounded edges. It definitely softens the harshness of the original.

Did you increase the text size to match the rest of the site? It's hard to tell from the mock-up, but the text still looks smaller than I would expect.

I'm not sure how I feel about the links being in a separate tab. It makes it seem hidden to me. I wonder if people are actually going to click it.

There's a lot of unused space in the top right corner that feels awkward to me. That seems like a waste of space considering we're hiding the links to save space.

[Thund3rHawk]

Noted, I'm going with an another design to focusing on the compactness, increasing the text size and trying to make the contents on a single card without hiding anything.

[Thund3rHawk]

Just change the design from the past card component and here's a mock-up.

[jdesrosiers]

I like it. The only part that looks off is that the links don't line up with the bio text. Is text wrapping too out of style? If the text wraps into the empty space below "Reach out", then the links wouldn't look weird because it would line up with the bio text and it would be fully using the space available.

[Thund3rHawk]

Here is the mock-up design along with the changes you suggested.