🐛 Bug: Replace <img> Tags with next/image for Better Optimization

[cbum-dev]

Describe the bug

Currently, the codebase uses regular tags for displaying images in several places. While functional, this approach does not take advantage of the optimization features provided by next/image in Next.js, such as automatic resizing, lazy loading, and format selection. This could lead to slower page load times and a less optimized user experience.

Steps To Reproduce

Go through the codebase and inspect image implementations.
Observe that many images are implemented using the standard tag.

Expected Behavior

All images should use next/image to leverage its built-in optimizations, including:

Lazy loading.
Responsive image resizing.
Format conversion for better performance.

Screenshots

No response

Device Information [optional]

- OS:Linux(fedora)
- Browser:Firefox
- version:

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

Yes