1 files changed, 76 insertions, 0 deletions
diff --git a/packages/ui/src/pages/index.tsx b/packages/ui/src/pages/index.tsx
new file mode 100644
index 0000000..54cfc1e
--- /dev/null
+++ b/packages/ui/src/pages/index.tsx
@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+import { Outlet, useLocation } from "react-router";
+import { ParticleBackground } from "@/components/particle-background";
+import { Sidebar } from "@/components/sidebar";
+import { useAuthStore } from "@/models/auth";
+import { useSettingsStore } from "@/models/settings";
+
+export function IndexPage() {
+  const authStore = useAuthStore();
+  const settingsStore = useSettingsStore();
+
+  const location = useLocation();
+
+  useEffect(() => {
+    authStore.init();
+    settingsStore.refresh();
+  }, [authStore.init, settingsStore.refresh]);
+
+  return (
+    <div className="relative h-screen w-full overflow-hidden bg-background font-sans">
+      <div className="absolute inset-0 z-0 bg-gray-100 dark:bg-[#09090b] overflow-hidden">
+        {settingsStore.config?.customBackgroundPath && (
+          <>
+            <img
+              src={settingsStore.config?.customBackgroundPath}
+              alt="Background"
+              className="absolute inset-0 w-full h-full object-cover transition-transform duration-[20s] ease-linear"
+              onError={(e) =>
+                console.error("Failed to load main background:", e)
+              }
+            />
+            {/* Dimming Overlay for readability */}
+            <div className="absolute inset-0 bg-black/50" />
+          </>
+        )}
+
+        {!settingsStore.config?.customBackgroundPath && (
+          <>
+            {settingsStore.theme === "dark" ? (
+              <div className="absolute inset-0 opacity-60 bg-linear-to-br from-emerald-900 via-zinc-900 to-indigo-950"></div>
+            ) : (
+              <div className="absolute inset-0 opacity-100 bg-linear-to-br from-emerald-100 via-gray-100 to-indigo-100"></div>
+            )}
+
+            {location.pathname === "/" && <ParticleBackground />}
+
+            <div className="absolute inset-0 bg-linear-to-t from-zinc-900 via-transparent to-black/50 dark:from-zinc-900 dark:to-black/50"></div>
+          </>
+        )}
+
+        {/* Subtle Grid Overlay */}
+        <div
+          className="absolute inset-0 z-0 dark:opacity-10 opacity-30 pointer-events-none"
+          style={{
+            backgroundImage: `linear-gradient(${
+              settingsStore.config?.theme === "dark" ? "#ffffff" : "#000000"
+            } 1px, transparent 1px), linear-gradient(90deg, ${
+              settingsStore.config?.theme === "dark" ? "#ffffff" : "#000000"
+            } 1px, transparent 1px)`,
+            backgroundSize: "40px 40px",
+            maskImage:
+              "radial-gradient(circle at 50% 50%, black 30%, transparent 70%)",
+          }}
+        />
+      </div>
+
+      <div className="size-full flex flex-row p-4 space-x-4 z-20 relative">
+        <Sidebar />
+
+        <main className="size-full overflow-hidden">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}