perf(ui): optimize application images with next/image

[ArshVermaGit]

Description

This PR addresses the major frontend performance enhancement by migrating the extensive use of standard HTML <img> tags to Next.js's native, optimized <Image> component.

This change tackles frontend performance bottlenecks by enabling automatic WebP/AVIF compression, lazy loading out of the box, and enforcing explicit sizing to completely eliminate layout shifts as components render.

Resolved Issue

Resolves #1545

Changes Made

• Config Updates: Added github.githubassets.com to remotePatterns in next.config.mjs to allow optimized achievement badges to be served.
• Component Refactoring: Integrated next/image into:
  • src/components/BadgeSection.tsx
  • src/components/GitHubAchievements.tsx
  • src/components/FriendComparison.tsx
  • src/components/WrappedExperience.tsx
  • src/components/landing/LandingPage.tsx
• Page Refactoring: Integrated next/image into:
  • src/app/leaderboard/page.tsx
  • src/app/compare/[users]/page.tsx
• Exclusions: StatsCard.tsx and opengraph-image.tsx were intentionally left using <img> to prevent breaking the html-to-image and @vercel/og libraries which require raw DOM images.

Motivation and Context

Previously, large grids of contributor avatars, achievement badges, and OG preview cards were causing layout jumps (CLS) and heavily degrading the Largest Contentful Paint (LCP) times because the images were unoptimized original JPEGs/PNGs. This PR resolves those performance penalties.

Testing Instructions

1. Pull down the branch and start the development server (npm run dev).
2. Navigate to the /leaderboard and /compare routes and verify that user avatars load correctly without any layout snapping.
3. Check the dashboard's "GitHub Achievements" section to ensure the badges are successfully loading from github.githubassets.com.
4. Run npm run build to ensure there are no unoptimized image warnings during the build step.

[vercel]

@ArshVermaGit is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[ArshVermaGit]

Hi @Priyanshu-byte-coder ! Issue #1545 has been resolved. Please review the PR and merge it under GSSoC. Thanks!