feat: Added hover effect on Hero image

[akashgupta2233]

What does this PR do?

This PR introduces a hover effect on the hero image on the homepage. Upon hovering, the image will slightly zoom in, creating an engaging and dynamic user experience. This effect is achieved using CSS transitions and transforms, which scale the image and apply a subtle shadow.

No external dependencies are introduced with this change.

Fixes #1763

temp.mp4

fixes:1763

Type of change

• New feature (non-breaking change which adds functionality)

How should this be tested?

To verify this change, please follow the steps below:

1. Navigate to the homepage of the website.
2. Hover over the hero image on the homepage.
3. Observe that the image zooms in slightly and a shadow effect is applied, creating a smooth animation.
4. Ensure that the effect works across all major browsers (Chrome, Firefox, Edge, Safari).
5. Test the responsiveness of the effect on different screen sizes (mobile, tablet, desktop).

Mandatory Tasks

Self-reviewed the code: I have reviewed my code for quality, functionality, and adherence to project standards.

Checklist

• I have read the contributing guide
• My code follows the style guidelines of this project
• I have commented my code, particularly in hard-to-understand areas
• I have checked if my PR needs changes to the documentation
• I have checked if my changes generate no new warnings
• I have added tests to prove my feature works
• I have checked if new and existing unit tests pass locally with my changes

[vercel]

@akashgupta2233 is attempting to deploy a commit to the Piyush Garg's projects Team on Vercel.

A member of the Team first needs to authorize it.