Enhance UI: Implement responsive card layout for Governing Board representatives and chairs (Resolves #2741)

[AnushtupGhosh5]

This PR improves the visual presentation and responsiveness of the Governing Board page by implementing a modern card-based layout system.
fixes #2741

Key Changes:

1. Representatives Section

• Implemented a flexible card layout for elected representatives
• Organized cards into distinct category groups (Community, Funder, Foundation)
• Cards display in a single row on larger screens with equal width distribution
• Added subtle visual hierarchy with gradient backgrounds and clean borders
• Improved readability with consistent typography and spacing

3. Chairs Section

• Created distinct styling for Governing Board chair vs committee chairs
• Maintained visual consistency while differentiating hierarchy
• Applied gradient backgrounds to individual chair cards
• Added subtle separators between board and committee chairs

5. Responsive Design
   • Desktop: Single row layout for representatives, grid layout for chairs
   • Tablet (≤1024px): 2-column grid layout
   • Mobile (≤767px): Single column layout with optimized spacing
   • Consistent padding and margins across all breakpoints

Technical Details:

• Used CSS Grid and Flexbox for robust layouts
• Implemented CSS custom properties for maintainable styling
• Added smooth transitions for hover states
• Optimized container and card sizing to prevent overflow
• Ensured cross-browser compatibility

Visual Improvements:

• Added subtle gradients for depth
• Consistent spacing and alignment
• Clear visual hierarchy
• Modern, clean aesthetic
• Improved content organization

Testing:

• Tested across multiple screen sizes
• Verified all content remains visible and accessible
• Checked hover states and transitions
• Ensured no horizontal scrolling on mobile
• Validated layout in major browsers

This update significantly improves the user experience while maintaining a professional and organized presentation of the Governing Board structure.

[AnushtupGhosh5]

Hi @HarHarLinks ,
I have fixed the issue raised by you. Could you please review it?

[AnushtupGhosh5]

Hey @HarHarLinks ,
Could you please review or send a review request? And please let me know if there is any other change that you want.

[HarHarLinks]

Hi @AnushtupGhosh5, this is incredible, thank you very much for this contribution! This goes far beyond what I could dream of when I wrote the ticket, I am in awe.

You have obviously spent some effort on marrying the existing rather raw design with some bells and whistles for a more modern experience. We have internally also discussed redesigning the website. Before I can accept this PR or give clearer feedback, I will have to check with the team. Unfortunately this might take some time due to the summer holiday season.

[AnushtupGhosh5]

sure, no problem @HarHarLinks. Thank you for your compliments; it means a lot.