feat: implement leaderboard gamification (badges, streaks, tiers) Issue #839

[Tusharkhadde]

🏆 Feature: Leaderboard Gamification (Tier 2 Bounty) Issue #839

This PR implements the leaderboard gamification features including badges, dynamic tiering, and animated streaks. Since the backend does not currently resolve explicit gamification fields, they are securely and deterministically computed on the frontend using existing reputation and bountiesCompleted data.

What was added:

• 🏅 Badges (Gold/Silver/Bronze)

  • Implemented the <ContributorBadge /> visual component with a metallic SVG style.
  • Computed automatically based on bounty milestone achievements (Bronze >= 1, Silver >= 5, Gold >= 15).
  • Displayed directly on the leaderboard table next to usernames and embedded gracefully inside Podium avatars.

• 🔥 Animated Streaks

  • Created the <AnimatedStreak /> component using Framer Motion.
  • Active hot streaks (>= 3) now gently pulse and change color. Streaks "on fire" (>= 7) receive a faster, glowing red animation loop.
  • Static streak text from previous versions was replaced with this dynamic visual component.

• 🛡️ Tier Indicators

  • Implemented the <TierIndicator /> component to visually highlight contributor mastery levels.
  • Tiers scale with reputation (Novice, Adept, Master, Grandmaster).
  • They are boldly displayed on the top 3 Podium Cards and nested alongside names in the Leaderboard ranks.

Verification:

• Verified lib/gamification.ts fallback computation works smoothly without backend changes.
• Verified animated Framer Motion loops do not disrupt table layout.
• All gamification elements are fully responsive across breakpoints.

WALLET - JDkFAXAaysAradjqQkCtpu2seJZR43F9qrfHZvgPYfvL