Problem statement

Currently, the project uses standard tags for displaying images (e.g., the hero image on the homepage). This approach does not leverage the built-in image optimization, lazy loading, and responsive features provided by Next.js. As a result, images may load slower, are not automatically optimized for different devices, and can negatively impact performance and SEO.

Proposed solution

Replace all tags in the codebase with the next/image component. This will:

Enable automatic image optimization and resizing.
Provide built-in lazy loading for better performance.
Improve responsiveness and support for different screen sizes.
Enhance SEO and accessibility with better image handling.

Screenshots / mockups (if applicable)

N/A

Additional context

N/A

Checklist

• I searched existing issues and did not find a duplicate
• I am willing to contribute or collaborate on this feature