perf(assets): optimize image pipeline and fix leaderboard linting (#630)

[shivani11jadhav]

🚀 Overview for Issue #630

This PR addresses the performance optimizations requested under Issue #630 by refactoring legacy, unoptimized native HTML components to high-efficiency asset architectures. It also cleans up regional codebase dependencies to ensure seamless pipeline executions.

🛠️ Key Technical Implementations

1. Next.js Native Asset Core Integration:

   • Identified and replaced legacy <img> tags inside active core interfaces (such as Leaderboard.tsx) with specialized Next.js <Image /> component wrappers.
   • Preserved structural aspect ratios, absolute dynamic modifiers, and component layout configurations flawlessly.

2. Cumulative Layout Shift (CLS) Safeguards:

   • Enforced structural bounds (width, height, or strict responsive bindings) on asset nodes to prevent visual displacement metrics during the page runtime hydrate cycles.

3. Pipeline Optimization & Lint Refinement:

   • Fixed historical ESLint glitches caused by legacy explicit any overrides inside modified system interfaces (src/components/gamification/Leaderboard.tsx) to guarantee an unblocked, green GitHub Actions deployment flow.

🧪 Verification Metrics

• Local execution of npm run build compiled 100% successfully across all static route matrix layers.
• Ran targeted linting verification check via npx eslint on the asset tree resulting in exactly 0 errors / 0 warnings.

[shivani11jadhav]

Hi @Aditya948351,

I have refactored the legacy image tags to Next.js <Image/> components for Issue #630

I also fixed the pre-existing linting errors in Leaderboard.tsx, so the PR pipeline will run completely green. The local build passes perfectly!

Please review and merge. Thank you! 

[devpathindcommunity-india]

issue #630