chore: improve 404 page

apps/classroomio-com/src/lib/NotFound/NotFound.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { goto } from '$app/navigation';
+
+  export let isOrg = false;
+  export let className = '';
+
+  function handleClick() {
+    if (!isOrg) {
+      return goto('/');
+    }
+
+    return goto('https://classroomio.com');
+  }
+</script>
+
+<div class="{className} min-h-[80vh] flex items-center justify-center flex-col w-screen">
+  <img src="https://brand.cdn.clsrio.com/404.png" alt="classroomio_error_image" />
+
+  <div class="flex flex-col items-center justify-center dark:text-white gap-3 w-4/5 lg:w-2/5">
+    <p class="text-4xl dark:text-white font-semibold mb-5">
+      {#if isOrg}
+        Organization doesn't exist!
+      {:else}
+        Page not found
+      {/if}
+    </p>
+    <p class=" text-gray-700 text-lg text-center dark:text-white mb-5">
+      The page you are looking for doesn't exist or has been moved. Please go back to the homepage.
+    </p>
+
+    <button
+      class="text-base rounded-md bg-black transition-all delay-100 hover:shadow-xl hover:scale-95 px-6 py-4 font-semibold text-white lg:px-7 lg:py-3 lg:text-lg"
+      on:click={handleClick}
+    >
+      Go to Home
+    </button>
+  </div>
+</div>

apps/classroomio-com/src/routes/+layout.svelte

@@ -1,7 +1,9 @@
 <script>
+  import { page } from '$app/stores';
   import Navigation from '$lib/Navigation/Navigation.svelte';
   import Footer from '$lib/Footer/Footer.svelte';
   import PageTransition from './transition.svelte';
+  import NotFound from '$lib/NotFound/NotFound.svelte';
 
   import '../app.css';
 
@@ -12,7 +14,11 @@
   <Navigation />
 
   <PageTransition url={data.url}>
-    <slot />
+    {#if $page.status === 404}
+      <NotFound className="mt-5" />
+    {:else}
+      <slot />
+    {/if}
   </PageTransition>
 
   <Footer />

apps/dashboard/src/lib/components/NotFound/NotFound.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { goto } from '$app/navigation';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  export let isOrg = false;
+
+  function handleClick() {
+    if (!isOrg) {
+      return goto('/');
+    }
+
+    return goto('https://classroomio.com');
+  }
+</script>
+
+<div class="min-h-[80vh] flex items-center justify-center flex-col w-screen">
+  <img src="https://brand.cdn.clsrio.com/404.png" alt="classroomio_error_image" />
+  <div class="flex flex-col items-center justify-center dark:text-white gap-3 w-4/5 lg:w-2/5">
+    <p class="text-4xl dark:text-white font-semibold mb-5">
+      {#if isOrg}
+        Organization doesn't exist!
+      {:else}
+        Page not found
+      {/if}
+    </p>
+    <p class=" text-gray-700 text-lg text-center dark:text-white mb-5">
+      The page you are looking for doesn't exist or has been moved. Please go back to the homepage.
+    </p>
+    <PrimaryButton
+      variant={VARIANTS.CONTAINED_DARK}
+      label="Go to Home"
+      className="text-lg"
+      onClick={handleClick}
+    />
+  </div>
+</div>

apps/dashboard/src/routes/404/+page.svelte

@@ -1,59 +1,10 @@
 <script>
   import { page } from '$app/stores';
-  import { goto } from '$app/navigation';
 
-  import { globalStore } from '$lib/utils/store/app';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import NotFound from '$lib/components/NotFound/NotFound.svelte';
 
-  const src = './bg-404.png';
-  let query = new URLSearchParams($page.url.search);
-  let isOrg = query.get('type') === 'org';
-
-  function handleClick() {
-    if (!isOrg) {
-      return goto('/');
-    }
-
-    return goto('https://classroomio.com');
-  }
+  $: query = new URLSearchParams($page.url.search);
+  $: isOrg = query.get('type') === 'org';
 </script>
 
-<div
-  style={$globalStore.isDark ? `background-image:url(${src})` : ''}
-  class={`error bg-gray-200 bg-no-repeat bg-cover flex items-center justify-center w-screen gap-20`}
->
-  <div class=" dark:text-white gap-3 w-4/5 lg:w-2/5">
-    <p class="text-3xl dark:text-white font-semibold mb-5">
-      {#if isOrg}
-        Oops😕, this organization doesn't exist!
-      {:else}
-        Oops😕,where did the page go?
-      {/if}
-    </p>
-    <p class="text-base text-gray-600 dark:text-white mb-5">
-      We're sorry, but something went wrong and we can't show you the page you're looking for. In
-      the meantime, here's a joke to make you laugh:<br />
-      What do you call a fish with no eyes? Fsh!
-    </p>
-    <PrimaryButton label="Go to Home" className="rounded-md" onClick={handleClick} />
-  </div>
-
-  <img src="/classroom-404.png" alt="classroomio_error_image" class="errorImg" />
-</div>
-
-<style>
-  .error {
-    height: calc(100vh - 57px);
-  }
-
-  @media (max-width: 920px) {
-    .error {
-      flex-direction: column-reverse;
-      gap: 20px;
-    }
-    .errorImg {
-      width: 160px;
-      height: 160px;
-    }
-  }
-</style>
+<NotFound {isOrg} />