feat:add carousel in recent event and update the js applicable for al…

[aayush105]

Title: Implement Carousel Effect for Recent event section

Description:

This PR introduces a carousel effect for the Recent event section component. Previously static, the events now dynamically cycle, enhancing user engagement.
Also resolves #131 for recent event section only.

Key Changes:

• Added carousel functionality for recent event section.
• On smaller screen: displays 1 metric at a time.
• The event card will be shown for 5s

---

Before and After Preview

Before:

• Static display of events without interactivity.

After:

• Dynamic carousel showcasing events, improving engagement.

Screen.Recording.2024-10-28.173655.mp4

[netlify]

✅ Deploy Preview for dainty-scone-61e301 ready!

Name	Link
🔨 Latest commit	e8d2dd7
🔍 Latest deploy log	https://app.netlify.com/sites/dainty-scone-61e301/deploys/671f7d3fc820f500087e353e
😎 Deploy Preview	https://deploy-preview-137--dainty-scone-61e301.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[gaurovgiri]

Can you add buttons like this to navigate around the events through carousel.

[prabhavpokharel]

I have the same thoughts as @gaurovgiri.

[BISHALTWR]

I feel the same as @gaurovgiri regarding the navigation option.

Also, sizes of upcoming events and recent events doesn't seem to match.
Can you please either solve that yourself or create a new issue to fix that.