[UI/UX Enhancement]: Implement an Error Boundary with a Fallback UI to prevent blank screens

[Xploit-Ghost]

Description

Currently, when the application encounters a fatal rendering error or fails to load specific data, it completely crashes and displays a blank white screen. This creates a confusing and poor user experience, as there is no visual feedback indicating that something went wrong.

Reproduction Steps

1. Navigate to the live deployment link (https://dev-card-web.vercel.app/).
2. Observe that if the initial data fetch fails or encounters an error, the entire DOM fails to render, leaving the user with a completely blank page.

Expected Behavior

Instead of crashing to a white screen, the application should gracefully catch the error and display a visually appealing "Fallback UI" (e.g., a card that says "Oops! Something went wrong while loading this developer card") with a button to refresh the page.

Proposed Changes

1. Error Boundary Component: Implement a global Error Boundary wrapper around the main application or specific routes.
2. Fallback UI Design: Create a clean, responsive UI component (matching the site's design system) that renders whenever an error is caught.
3. Actionable Button: Include a "Try Again" or "Refresh" button within the fallback UI to allow users to reload the state without manually refreshing the browser.

This is a purely frontend UI/UX enhancement that will make the application much more robust and user-friendly.

I would love to work on this! Please assign this to me.

[github-actions]

👋 Thanks for opening your first issue, @Xploit-Ghost!

We appreciate your contribution and are excited to have you here. Please make sure to follow the contribution guidelines and provide as much detail as possible.

To stay updated, ask questions, and connect with maintainers and contributors, please join our Discord community:
https://discord.gg/QueQN83wn

Looking forward to collaborating with you!

[Harxhit]

@Xploit-Ghost I have assigned this issue to you.