<!-- [DEF:HomePage:Page] -->
<script>
  /**
   * @TIER: CRITICAL
   * @PURPOSE: Redirect to Dashboard Hub as per UX requirements
   * @LAYER: UI
   * @INVARIANT: Always redirects to /dashboards
   *
   * @UX_STATE: Loading -> Shows loading indicator
   * @UX_FEEDBACK: Redirects to /dashboards
   *
   * @TEST_CONTRACT Page_Home ->
   * {
   *   required_props: {},
   *   optional_props: {},
   *   invariants: [
   *       "Redirects to /dashboards on mount"
   *   ]
   * }
   * @TEST_FIXTURE init_state -> {}
   * @TEST_INVARIANT correct_redirect -> verifies: [init_state]
   */

  import { onMount } from "svelte";
  import { goto } from "$app/navigation";

  onMount(() => {
    // Redirect to Dashboard Hub as per UX requirements
    goto("/dashboards", { replaceState: true });
  });
</script>

<div class="flex items-center justify-center min-h-screen">
  <svg
    class="animate-spin h-8 w-8 text-blue-600"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle
      class="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      stroke-width="4"
    ></circle>
    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
</div>

<!-- [/DEF:HomePage:Page] -->
