[Enhancement]: Add auto-play functionality to hero banner carousel

[Pranav-IIITM]

Description

The hero banner on the landing page currently contains multiple slides but requires manual interaction via arrow buttons to navigate between them. Adding an auto-play feature with a fixed time interval will make the banner more dynamic and engaging without requiring any user interaction.

Current Behavior

• Slides only change when the user manually clicks the left/right arrow buttons
• The carousel remains static if the user does not interact with it

Proposed Changes

1. Auto-play — Automatically advance to the next slide every 4–6 seconds using setInterval
2. Pause on hover — Pause the auto-play when the user hovers over the banner (onMouseEnter) to avoid interrupting intentional reading
3. Resume on mouse leave — Restart the interval when the user moves their cursor away (onMouseLeave)
4. Seamless loop — After the last slide, loop back to the first slide automatically

Implementation Approach

• Use setInterval to trigger the existing next-slide logic at a fixed interval
• Clear the interval on onMouseEnter and restart it on onMouseLeave
• Reuse the existing arrow button navigation logic — just call it programmatically
• Use useEffect with proper cleanup to avoid memory leaks

Screen Recording

Kmesh-Video.1.mp4

[Pranav-IIITM]

/assign