empty states

apps/client/src/pages/page/page.tsx

@@ -13,6 +13,10 @@ import {
 } from "@/features/space/permissions/permissions.type.ts";
 import { useTranslation } from "react-i18next";
 import React from "react";
+import { EmptyState } from "@/components/ui/empty-state.tsx";
+import { IconFileOff } from "@tabler/icons-react";
+import { Button } from "@mantine/core";
+import { Link } from "react-router-dom";
 
 const MemoizedFullEditor = React.memo(FullEditor);
 const MemoizedPageHeader = React.memo(PageHeader);
@@ -39,9 +43,27 @@ export default function Page() {
 
   if (isError || !page) {
     if ([401, 403, 404].includes(error?.["status"])) {
-      return <div>{t("Page not found")}</div>;
+      return (
+        <EmptyState
+          icon={IconFileOff}
+          title={t("Page not found")}
+          description={t(
+            "This page may have been deleted, moved, or you may not have access.",
+          )}
+          action={
+            <Button component={Link} to="/home" variant="default" size="sm" mt="xs">
+              {t("Go to homepage")}
+            </Button>
+          }
+        />
+      );
     }
-    return <div>{t("Error fetching page data.")}</div>;
+    return (
+      <EmptyState
+        icon={IconFileOff}
+        title={t("Error fetching page data.")}
+      />
+    );
   }
 
   if (!space) {