better login pages, 404 page

src/routes/+error.svelte

@@ -0,0 +1,19 @@
+<main class="w-screen h-screen bg-gradient-to-b  flex items-center justify-center overflow-hidden from-blue-950 to-gray-900">
+
+<!-- from-blue-950 to-gray-900 -->
+<div class=' bg-slate-600 p-4 rounded-2xl shadow-xl'>
+    <div class="w-96"> <!-- Change bg-base-100 to bg-blue-100 or any other color -->
+        <h2 class="text-xl font-bold text-gray-300">Oops, looks like this page doesn´t exist</h2>
+        <figure class="px-10 pt-6 ">
+            <img src="../images/itsfine.gif" alt="gif" class="rounded-xl" />
+        </figure>
+
+        <div class="card-body items-center text-center">
+            <p class='text-secondary'>It's ok it sometimes happens to everyone</p>
+            <div class="card-actions">
+                <a class="mx-6 mt-2 flex items-center justify-center h-6 rounded-lg bg-blue-600 text-lg hover:bg-blue-500 transition-all text-white font-bold" href="/">Go back to the landing page</a>
+            </div>
+        </div>
+    </div>
+</div>
+</main>

src/routes/+layout.ts

@@ -1 +1,16 @@
 export const ssr = false;
+
+import { redirect } from '@sveltejs/kit';
+import getLocalDB from '$lib/utils/localDB/manager';
+
+const loginLock = ['/interface'];
+//redirect to login in locked pages
+export const load = async ({ url }) => {
+	const db = getLocalDB();
+	if (loginLock.includes(url?.pathname) && !db.userID) {
+		throw redirect(302, '/auth/login');
+	}
+	return {
+		user: db?.userID || null
+	};
+};

src/routes/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	export let data;
+	const {user} = data
 </script>
 
 <main class="overflow-x-hidden">
@@ -30,11 +32,24 @@
 					<p>Build intuitive Discord Bots using visual scripting extremely similar to Scratch.</p>
 				</div>
 				<div class="flex items-center justify-center mt-10">
+					{#if user}
+					<a
+					href="/interface"
+					class="mr-2 w-40 flex items-center justify-center h-12 rounded-lg bg-blue-600 text-lg hover:bg-blue-500 transition-all text-white font-bold"
+					>Home</a
+				>
+				<a
+					href="/editor?id=0"
+					class="mr-2 w-40 flex items-center justify-center h-12 rounded-lg bg-blue-600 text-lg hover:bg-blue-500 transition-all text-white font-bold"
+					>Workspace</a
+				>
+					{:else}
 					<a
 						href="/interface"
 						class="mr-2 w-40 flex items-center justify-center h-12 rounded-lg bg-blue-600 text-lg hover:bg-blue-500 transition-all text-white font-bold"
 						>Getting Started</a
 					>
+					{/if}
 					<a
 						href="/docs/getting-started"
 						class="ml-2 w-40 flex items-center justify-center h-12 rounded-lg bg-slate-600 text-lg hover:bg-slate-500 transition-all text-white font-bold"

src/routes/interface/+page.svelte

@@ -2,20 +2,13 @@
 	import Home from "$lib/components/Interface/SideBar/SidebarComponents/Home.svelte";
 	import Sidebar from "$lib/components/Interface/SideBar/Sidebar.svelte";
 	import Workspaces from "$lib/components/Interface/SideBar/SidebarComponents/Workspaces.svelte";
-	import getLocalDB from "../../lib/utils/localDB/manager";
 	import "./interface.css";
 	import { Button } from "$lib/components/ui/button";
 	import ChevronLeft from "lucide-svelte/icons/chevron-left";
 	import Account from "$lib/components/Interface/SideBar/SidebarComponents/Account.svelte";
 
 	let currentPage: "home" | "workspace" | "account" = "home";
 	let isShowing = false;
-
-	const db = getLocalDB();
-
-	if (!db.userID) {
-		window.location.replace("/");
-	}
 </script>
 
 <main class="w-screen h-screen bg-slate-800">