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

## 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

https://github.com/user-attachments/assets/d53390fe-a8be-4827-8449-0fca1dab9311