[Feature Request]: Add Contributor Spotlight & Top Contributors Section and Animate Contributor Cards for contributor page

[dipexplorer]

🔍 Is there an existing issue for this?

• I have searched the existing issues

📝 Feature Description

Use the first few grids (top 1–2 rows) to spotlight standout contributors with appreciation messages.

• Use a grid layout to showcase contributors:
  • First row & Second row's:* 1st–2nd grid block used to add spotlight on random contributor for 30 sec with appreciation or congratulatory messages.
  • *First row 's" remaining grid block used to show up top contributors based on contributions.
  • Remaining grids: display all other contributors.
• Reference Image: Provided for UI inspiration only — final output should be visually attractive, incorporating custom graphics, icons, animations, and modern styles.
• Ensure the section is dynamic, responsive, and interactive for enhanced user engagement.
• Each card should include:
  • Profile picture
  • Username
  • Total contributions
  • View Profile button (redirects to GitHub profile)
  • Flip animation: back side shows contributor’s about section, LinkedIn or other profiles
  • Optional: Joined date or role (if available)
• Add hover effects, shadows, and subtle animations for interactivity.

💡 Expected Improvements

• Highlights contributor achievements and encourages participation.
• Establishes visual hierarchy to draw attention to top contributors.
• Enhances the page’s visual appeal, modernity, and engagement.
• Add hover effects, shadows, and subtle animations to enhance interactivity and modern UI aesthetics.
• Ensure cards are responsive and visually appealing across all devices.
• Smooth 3D flip animation
• Hover/Click triggers card flip.
• Consistent sizing and layout for all cards.
• Fully responsive (grid-based layout).

Important Notes / Guidelines

1. Reference image is guidance only — the final design should be original and attractive.
2. Include graphics, icons, and subtle animations to make the section engaging.
3. Ensure responsiveness on mobile, tablet, and desktop devices.
4. Maintain accessibility standards: readable fonts, proper contrast, and screen-reader-friendly labels.
5. Avoid clutter; prioritize clarity, hierarchy, and visual distinction for spotlighted contributors.
6. Keep the rest of the page intact — changes should be limited to this section.

📸 Add Screenshots (Optional)

🚦 Priority Level

High

✅ Confirmation

• I have read the Contributing Guidelines
• I'm a GSSoC'24 contributor
• I have starred the repository