Fix image sizing and perfect to look

[nimishagrawal1405]

Description:
The current implementation of image sizing within the project has inconsistencies that result in improper rendering on various devices. Some images appear stretched, pixelated, or misaligned, impacting the overall user experience.

Steps to Reproduce:

1. Navigate to <specific page or feature> where the issue is most noticeable.
2. Observe the images on screens of different resolutions or devices.
3. Note the distortion or alignment issues.

Expected Behavior:

• Images should scale proportionally without distortion.
• Proper alignment and spacing should be maintained regardless of screen size.
• Images should load in optimal resolution for the device (e.g., responsive images using srcset or similar techniques).

Actual Behavior:

• Images stretch or shrink disproportionately.
• Low-quality or high-resolution images are loaded incorrectly for certain devices.
• Margins and alignment are inconsistent.

Proposed Solution:

1. Responsive Design: Use CSS techniques such as max-width: 100%; height: auto; for scaling images proportionally.
2. Srcset Attribute: Implement the srcset and sizes attributes for responsive image loading.
3. Alignment Fixes: Adjust CSS styles to ensure proper spacing and alignment of images in the layout.
4. Testing: Test the changes across various devices and resolutions to ensure consistency.

Priority:

• Medium/High (depending on the severity and visibility of the issue in your project).

Environment Details:

• Browser: [e.g., Chrome 96, Firefox 95]
• Screen Sizes: [e.g., Desktop (1920x1080), Tablet (768x1024), Mobile (375x667)]

[github-actions]

Thank you for opening this issue! We will get back to you shortly.

[Aarzookhunger]

@nimishagrawal1405 make sure to do the implementations for all the pages.

[nimishagrawal1405]

sure working on this!