1  <script>
 2    import { goto } from '$app/navigation';
 3    import { onMount } from 'svelte';
 4  
 5    onMount(() => {
 6      // Redirect to the home page after a delay
 7      setTimeout(() => {
 8        goto('/');
 9      }, 500);
10    });
11  </script>
12  
13  <div class="redirect-container">
14    <div class="redirect-content">
15      <div class="loader"></div>
16      <p>Redirigiendo a la página principal...</p>
17    </div>
18  </div>
19  
20  <style>
21    .redirect-container {
22      display: flex;
23      justify-content: center;
24      align-items: center;
25      height: 100vh;
26      background-color: var(--bg-primary, #ffffff);
27    }
28  
29    .redirect-content {
30      text-align: center;
31    }
32  
33    .loader {
34      width: 40px;
35      height: 40px;
36      border: 3px solid var(--border-color, #f3f3f3);
37      border-top: 3px solid var(--primary, #3498db);
38      border-radius: 50%;
39      margin: 0 auto 20px;
40      animation: spin 1s linear infinite;
41    }
42  
43    p {
44      font-size: 16px;
45      color: var(--text-secondary, #666);
46    }
47  
48    @keyframes spin {
49      0% { transform: rotate(0deg); }
50      100% { transform: rotate(360deg); }
51    }
52  </style>