feat(tools): add Image Comparison Viewer (Phase 1)

[Shalini828]

This PR adds the Image Comparison Tool (Phase 1).

Features implemented:

• Side-by-side comparison mode
• Interactive slider comparison mode
• Onion skin overlay mode with adjustable opacity
• Clean state-driven architecture (no direct DOM manipulation)
• Integrated with routing and metadata system

The implementation follows modular structure and supports different image dimensions using object-contain scaling.

Fixes #53

[SyedFahad7]

Please sync your PR branch with the latest develop before re-review.

Use rebase (preferred) instead of merging develop into your feature branch to keep history clean:

git fetch upstream
git rebase upstream/develop
Resolve conflicts, then run local checks (npm run lint and npm run build)
git push --force-with-lease origin <your-branch>
Notes:

No need to fix unrelated pre-existing warnings across the repo.
Do fix any errors introduced by your PR (especially in touched files).
Rebase rewrites only your PR branch history; it does not rewrite our develop branch.
Once updated, we’ll re-review quickly.

[Shalini828]

Synced my branch with the latest develop using rebase and force pushed the updates. Ready for re-review. Thank you!

[SyedFahad7]

Great progress on Phase 1, core modes are in place and working!

Before we merge:

1. Replace native file inputs/buttons
Swap out browser-default file pickers and buttons with the standard UI button/input components already used across the project. We want to keep the look consistent, no raw <input type="file"> or unstyled <button> elements.

2. Improve mode controls
The Side by Side, Slider, and Onion Skin toggles should look like proper segmented/tab controls, not plain text buttons. Match the style of similar controls elsewhere in the codebase.
Reference : https://21st.dev/community/components/hextaui/tabs/default

3. Better slider component
Use a polished slider for both Slider mode and Onion Skin opacity control. Reference:
👉 https://21st.dev/community/components/barvian/slider-number-flow/default

4. Center-handle image comparison UI
For image comparison mode, implement a draggable left/right reveal with a center handle instead of just a basic range bar. Reference:
👉 https://21st.dev/community/components/thanh/image-comparison-slider/default

5. Expand developmentToolsConstant content
The hero and supporting sections are currently too minimal. Please flesh out the page content and SEO sections properly.

6. Complete metadata wiring in developmentToolsConstant
Please wire up meta_data and the standard content sections properly — hero and supporting sections are currently too minimal.

7. Fix slider/onion rendering for different aspect ratios
Images with different aspect ratios should stay aligned within the same comparison frame. Both slider and onion skin modes handle this correctly.

8. Attach updated screenshots/GIFs
Once the above are done, please attach screen snippets for:

• Side-by-side mode
• Slider mode with center handle
• Onion skin mode with improved opacity control
• Overall controls/upload UI polish

Looking forward to seeing the polished version!