Formatted error page

app/components/error-boundary/error.tsx

@@ -1,14 +1,17 @@
 import { Button } from "../button";
 
-export function Error({ error, children }: { error: Error; children?: React.ReactNode }) {
+export function Error() {
   return (
-    <div className="w-full flex items-center justify-center text-gray-800">
-      <div className="max-w-lg space-y-2">
-        <h1 className="text-xl font-semibold">500 Error</h1>
-        <p className="text-xl text-gray-400 pb-4 font-medium">Welp, something broke. This shouldn't be happening </p>
-        <Button className="bg-[#5865F2]">Let us know on Discord</Button>
-        {children}
-      </div>
+    <div className="w-full flex flex-col items-center justify-center text-gray-800 gap-5 mt-10">
+      <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#A0DDA9] to-[#01C2FF]">
+        Ooops!
+      </h1>
+      <p className="text-neutral-400 text-2xl font-bold">something went wrong</p>
+      <img src="/img/error.png" alt="" className="my-3" />
+      <p className="text-neutral-400 font-medium">It seems you've ventured too deep</p>
+      <Button variant="gradient" onClick={() => history.back()}>
+        Go Back
+      </Button>
     </div>
   );
 }

app/root.tsx

@@ -164,11 +164,6 @@ function App() {
 
 export default withSentry(App, {
   errorBoundaryOptions: {
-    fallback: ({ error }) => (
-      <div className="w-screen h-screen flex items-center justify-center">
-        <Blurs />
-        <ErrorBoundary error={error} />
-      </div>
-    ),
+    fallback: <ErrorBoundary />,
   },
 });