[Frontend] Auth Home: Upcoming Events (Empty State)

[OSEH-svg]

NOTE: This issue depends on Issue #283.

🎨 Task Description

Implement the interactive "Empty State" for the Upcoming events category in the dashboard.

🔎 Implementation Details

• File Path: Modify apps/web/app/home/page.tsx
• Figma file: https://www.figma.com/design/cpRUhrSlBVxGElm18Fa2Uh/Agora-event?node-id=813-2162&t=b2Z3ecqdpFLOHIFA-4
• Visuals: Implement the high-fidelity empty state view for "Upcoming" as defined in the design issues. Use branded illustrations and an engaging placeholder.
• Animation: Use Framer Motion for a graceful entrance transition when the empty state is triggered.

✅ Acceptance Criteria

• Changes implemented in: apps/web/app/home/page.tsx.
• When upcomingEvents is empty, the designed Empty State UI is shown — not a blank space.
• Empty state matches the Figma design exactly.
• CTA button correctly switches view or redirects.
• PR includes a screenshot showing the change made.
• When opening your PR, ensure you link this issue so it is automatically closed on merge. In the PR description, include the line Closes # (e.g. Closes [Frontend] Auth Home: Upcoming Events (Empty State) #284)

💡 Questions?

Reach out on Telegram: @divine_oseh
Note: Spam messages will be blocked

[AbdulmalikAlayande]

@AbdulmalikAlayande has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi repo maintainer, I will like to implement the Upcoming Events empty state to match the Figma design precisely, plus Framer Motion animation and CTA behavior.

I have experience building responsive Next.js UIs with clean state handling and design-accurate component implementation.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbdulmalikAlayande to this issue.

[drips-wave]

Congratulations, @AbdulmalikAlayande! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @AbdulmalikAlayande: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊