✨ 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.

[jdesrosiers]

Hmm, that doesn't look great does it. I think we need more feedback. I think you should post a link to this issue in the #website channel on slack and ask for feedback.

[jagpreetrahi]

Hey @jdesrosiers , I just go through with pro-help page, so I got an 404 Not found . And I also share with you a screenshot.

[arpitkuriyal]

Hello @jagpreetrahi, here is the link to the pro-help page.

[Thund3rHawk]

Hey @jagpreetrahi, the issue would be solved after merging the pr #1376.

[jdesrosiers]

The URL changed when #1310 was merged. That's unfortunate.

[idanidan29]

@Thund3rHawk i think the design is good but it messes up the alignment a of the text, I started to redesign the page before noticing issue so i would like to suggest a bit of different direction, i would love to collaborate with you on this one if you want to.

my proposal:

it will keep the original text and links structure

[Thund3rHawk]

Hey @idanidan29! Ya sure! I’d love to collaborate on this and refine the design together. Looking forward to your ideas!

[jdesrosiers]

@idanidan29 Thanks for getting involved!

My main concern with this design is how it will work in mobile. There a several other link types (like "website", see Juan's bio) that might be presented in addition to LinkedIn and GitHub. People with more links to display and/or long names might not fit with this design, especially on mobile.

[idanidan29]

@jdesrosiers Thank you for your feedback! I was thinking on some solutions to this:

1. Restructuring the card to ensure enough space for additional links and longer names.
2. Removing link labels (e.g., "Website", "GitHub", "LinkedIn") to save space and rely on icons. (optional)

I tested with and without the names and I would very appreciate any feedback on what version would be preferred
(I think the version with the link names would be better unless at some point there will be more that 3 links)

[idanidan29]

@jdesrosiers I’ve adjusted this version multiple times based on feedback from the slack, refining the visuals, icon titles, links and sizes to ensure no issues with icon sizes. I tested it across multiple screen sizes, and it works well on both mobile and desktop, as well as in light and dark mode. I believe it meets the requirements, I’d love to hear your opinion

for regular screen:

for mobile:

[jdesrosiers]

Looks good enough to me. I'm going to assign both of you. You can workout between you how you want to provide a PR.