🐛 UI Enhancement Issue: Improve Contributors Page Layout & Responsiveness

[arpit2006]

📖 Description

The current Contributors Page has a clean structure, but several UI/UX improvements can enhance visual consistency, responsiveness, and overall user engagement.

This issue focuses on refining the contributor cards layout, spacing, responsiveness, and accessibility while maintaining the existing design language.

---

🤔 Problems Identified

📐 Layout & Spacing

• Cards have excessive empty vertical space.
• Inconsistent spacing between avatar, username, contribution count, and button.
• Card heights feel larger than necessary.

---

📱 Responsiveness

• Grid spacing could be optimized for tablet and mobile screens.
• Contributor cards may appear too stretched on larger displays.

---

🎨 Visual Consistency

• Avatar sizes vary visually because of image cropping.
• Button alignment is inconsistent across cards.
• Typography hierarchy can be improved.

---

♿ Accessibility & UX

• Buttons lack hover/focus feedback consistency.
• Some text contrast appears slightly low.
• Contributors section could feel more interactive.

---

✅ Suggested Improvements

🧩 Card Design

• Reduce unnecessary padding inside contributor cards.
• Add consistent card height.
• Improve border radius and shadow styling.
• Add smooth hover transition effects.

---

🖼️ Avatar Improvements

• Use consistent avatar sizing (w-24 h-24 or similar).
• Apply object-cover for proper image cropping.
• Add subtle border or ring effect.

---

✍️ Typography

• Improve spacing between username and contribution count.
• Use clearer font hierarchy:
  • Username → bold
  • Contribution count → smaller muted text

---

🔘 Buttons

• Align buttons consistently at the bottom.
• Add hover animation and better focus states.
• Improve button padding and icon alignment.

---

📱 Responsive Layout

Improve grid responsiveness:

grid-cols-1
sm:grid-cols-2
lg:grid-cols-3
xl:grid-cols-4

• Add better spacing between cards.

---

✨ Optional Enhancements

• Add contributor ranking badges.
• Add search/filter contributors feature.
• Add loading skeleton animation.
• Add contribution statistics summary at top.

---

🎯 Expected Outcome

• Cleaner and more compact contributor cards
• Better mobile responsiveness
• Improved accessibility and visual consistency
• More engaging contributor showcase section

---

🛠️ Tech Stack

• React / Next.js
• Tailwind CSS

---

📌 Acceptance Criteria

• Contributor cards are visually balanced
• Responsive layout works smoothly on all screen sizes
• Buttons and avatars are consistently aligned
• Hover/focus states are improved
• Spacing and typography are refined
• No UI overlap or excessive whitespace

---

📷 Reference

---

🚀 I am a GSSoC Contributor and would like to work on improving the Contributors Page UI/UX for a cleaner, more responsive, and accessible experience.

please assign this issue to under GSSoC!