new layout error page

src/frontend/src/components/CrashErrorComponent/index.tsx

@@ -5,34 +5,71 @@ export default function CrashErrorComponent({
   resetErrorBoundary,
 }: crashComponentPropsType): JSX.Element {
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
+    <div className="z-50 flex h-screen w-screen items-center justify-center bg-foreground bg-opacity-50">
-      <div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
+      <div className="flex h-screen w-screen flex-col  bg-background text-start shadow-lg">
-        <h1 className="mb-4 text-3xl text-status-red">
+        <div className="m-auto grid w-1/2 justify-center gap-5 text-center">
-          Oops! An unknown error has occurred.
+          <div>
+            <h1 className="text-3xl text-status-red">
+              🚀 Whoops! We've Hit a Snag.
             </h1>
+            <small>
+              Hey there, it looks like we've encountered a bit of a hiccup.
+            </small>
+          </div>
+          <div>
             <p className="mb-4 text-xl text-foreground">
-          Please click the 'Reset Application' button to restore the
+              But don't worry, it happens to the best of us! We're all about
-          application's state. If the error persists, please create an issue on
+              making things better together.
-          our GitHub page. We apologize for any inconvenience this may have
-          caused.
             </p>
-        <div className="flex justify-center">
+          </div>
-          <button
+
-            onClick={resetErrorBoundary}
+          <div>
-            className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
+            <p>
-          >
+              🔧 Quick Fix: Try hitting the{" "}
-            Reset Application
+              <span className="font-bold">'Restart the Adventure'</span> button
-          </button>
+              to get things moving again. It's like a magic wand for minor
+              glitches!
+            </p>
+          </div>
+
+          <div>
+            <p>
+              📝 Still Stuck? Let's Solve It Together: If our magic wand didn't
+              do the trick, we'd love your help to dig a bit deeper. By
+              reporting this hiccup on our{" "}
               <a
                 href="https://github.com/logspace-ai/langflow/issues/new"
                 target="_blank"
                 rel="noopener noreferrer"
-            className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
+                className="font-medium text-blue-600 hover:underline dark:text-blue-500"
               >
-            Create Issue
+                GitHub
+              </a>{" "}
+              page, you're not just fixing your own experience but also helping
+              the whole community.
+            </p>
+          </div>
+
+          <div className="mt-4 flex justify-center">
+            <button
+              onClick={resetErrorBoundary}
+              className="cursor-pointer rounded-lg border-2 border-blue-600 px-3 py-2 font-bold text-blue-600 hover:bg-blue-600 hover:text-blue-100"
+            >
+              Restart the Adventure
+            </button>
+
+            <a
+              href="https://github.com/logspace-ai/langflow/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <button className="ml-3 cursor-pointer rounded-lg border-2 border-gray-600 px-3 py-2 font-bold text-gray-600 hover:bg-gray-600 hover:text-gray-100">
+                Report on GitHub
+              </button>
             </a>
           </div>
         </div>
       </div>
+    </div>
   );
 }

src/frontend/src/pages/MainPage/index.tsx

@@ -6,7 +6,6 @@ import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
 import SidebarNav from "../../components/sidebarComponent";
 import { Button } from "../../components/ui/button";
-import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlows } from "../../utils/reactflowUtils";
@@ -70,7 +69,7 @@ export default function HomePage(): JSX.Element {
   // Personal flows display
   return (
     <PageLayout
-      title={USER_PROJECTS_HEADER}
+      title={USER_PROJECTS_HEADERdasd}
       description="Manage your personal projects. Download or upload your collection."
       button={
         <div className="flex gap-2">