Add a Custom 500 Server Error Page (Enhancement)

[Adithyakp86]

Description

The project currently has a custom 404.js page for "Not Found" errors, which is great! However, we are missing a custom 500.js page. If the server encounters an unexpected error, users will see the default Next.js server error page, which breaks the immersion and design consistency of HEALCONNECT.

Expected Behavior

When a server-side error occurs, the user should be redirected to a custom 500 error page that matches the theme of HEALCONNECT. It should include a friendly error message and a button to return to the Home page or Dashboard.

Tasks

• Create a pages/500.js file.
• Design the 500 page to be consistent with the 404.js styling and overall branding.
• Include an illustration/icon, a user-friendly error message, and a "Go Back Home" button.
• Ensure the page looks good on both Light and Dark modes.
• Ensure the page is fully responsive.

Tech Stack

• Next.js
• Tailwind CSS / SCSS

Additional Context

You can reference the existing pages/404.js to see how the layout and styling are currently structured.

[github-actions]

Thanks for opening this issue! 🚀

Please adhere to Apertre'26 Rules:

1. Do NOT create a PR until this issue is assigned to you.
2. Include apertre3.0 tag.
3. Provide ONE Difficulty Tag (easy / medium / hard).
4. Include screenshots if it's UI-related.

A mentor will review and assign this issue soon.

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊