feat(404): add 404 page with i18n support

src/i18n/translations.ts

@@ -50,6 +50,11 @@ export interface Translations {
   resizeSidebar: string
   resizeCodePanel: string
 
+  // 404
+  notFoundTitle: string
+  notFoundDescription: string
+  backToHome: string
+
   // Graph visualizer
   queue: string
   stack: string
@@ -102,6 +107,10 @@ export const translations: Record<Locale, Translations> = {
     resizeSidebar: 'Resize sidebar',
     resizeCodePanel: 'Resize code panel',
 
+    notFoundTitle: '404 — Page not found',
+    notFoundDescription: "The page you're looking for doesn't exist or has been moved.",
+    backToHome: 'Back to home',
+
     queue: 'Queue',
     stack: 'Stack',
     empty: 'empty',
@@ -141,7 +150,7 @@ Rules of Big O:
   2. Drop lower-order terms: O(n² + n) → O(n²)
   3. Focus on the dominant term as n grows large`,
 
-      'recursion': `Recursion
+      recursion: `Recursion
 
 Recursion is a programming technique where a function calls itself to solve smaller instances of the same problem. It's one of the most powerful concepts in computer science.
 
@@ -168,7 +177,7 @@ Pitfalls:
 Recursive algorithms in this visualizer:
   Quick Sort, Merge Sort, DFS, N-Queens, Sudoku Solver, Tower of Hanoi`,
 
-      'stack': `Stack
+      stack: `Stack
 
 A Stack is a linear data structure that follows the LIFO principle — Last In, First Out. Like a stack of plates: you add and remove from the top only.
 
@@ -188,7 +197,7 @@ Applications:
 
 Space Complexity: O(n) for n elements`,
 
-      'queue': `Queue
+      queue: `Queue
 
 A Queue is a linear data structure that follows the FIFO principle — First In, First Out. Like a line at a store: the first person in line is served first.
 
@@ -263,7 +272,7 @@ Examples:
   O(n): Merge Sort (temporary arrays), hash tables
   O(n²): DP tables, adjacency matrices`,
 
-      'memoization': `Memoization
+      memoization: `Memoization
 
 Memoization is an optimization technique that stores the results of expensive function calls and returns the cached result when the same inputs occur again.
 
@@ -364,7 +373,7 @@ Where h = height of the tree:
 
 Applications: ordered data storage, range queries, priority queues (with balancing)`,
 
-      'heap': `Heap (Min Heap)
+      heap: `Heap (Min Heap)
 
 A Heap is a complete binary tree where every parent is smaller (min-heap) or larger (max-heap) than its children. It's stored as an array.
 
@@ -1034,6 +1043,10 @@ The puzzle was invented by mathematician Édouard Lucas in 1883. Legend says mon
     resizeSidebar: 'Redimensionar barra lateral',
     resizeCodePanel: 'Redimensionar panel de código',
 
+    notFoundTitle: '404 — Página no encontrada',
+    notFoundDescription: 'Lo sentimos, no pudimos encontrar la página que estás buscando.',
+    backToHome: 'Volver al inicio',
+
     queue: 'Cola',
     stack: 'Pila',
     empty: 'vacía',
@@ -1073,7 +1086,7 @@ Reglas de Big O:
   2. Eliminar términos de menor orden: O(n² + n) → O(n²)
   3. Enfocarse en el término dominante cuando n crece`,
 
-      'recursion': `Recursión
+      recursion: `Recursión
 
 La recursión es una técnica de programación donde una función se llama a sí misma para resolver instancias más pequeñas del mismo problema. Es uno de los conceptos más poderosos en las ciencias de la computación.
 
@@ -1100,7 +1113,7 @@ Errores comunes:
 Algoritmos recursivos en este visualizador:
   Quick Sort, Merge Sort, DFS, N-Queens, Sudoku Solver, Torre de Hanoi`,
 
-      'stack': `Pila (Stack)
+      stack: `Pila (Stack)
 
 Una Pila es una estructura de datos lineal que sigue el principio LIFO — Último en Entrar, Primero en Salir. Como una pila de platos: solo puedes añadir y quitar del tope.
 
@@ -1120,7 +1133,7 @@ Aplicaciones:
 
 Complejidad Espacial: O(n) para n elementos`,
 
-      'queue': `Cola (Queue)
+      queue: `Cola (Queue)
 
 Una Cola es una estructura de datos lineal que sigue el principio FIFO — Primero en Entrar, Primero en Salir. Como una fila en una tienda: el primero en llegar es atendido primero.
 
@@ -1195,7 +1208,7 @@ Ejemplos:
   O(n): Merge Sort (arreglos temporales), tablas hash
   O(n²): tablas de DP, matrices de adyacencia`,
 
-      'memoization': `Memoización
+      memoization: `Memoización
 
 La memoización es una técnica de optimización que almacena los resultados de llamadas a funciones costosas y devuelve el resultado cacheado cuando se repiten las mismas entradas.
 
@@ -1296,7 +1309,7 @@ Donde h = altura del árbol:
 
 Aplicaciones: almacenamiento de datos ordenados, consultas por rango, colas de prioridad (con balanceo)`,
 
-      'heap': `Montículo (Heap)
+      heap: `Montículo (Heap)
 
 Un Heap es un árbol binario completo donde cada padre es menor (min-heap) o mayor (max-heap) que sus hijos. Se almacena como un arreglo.
 
@@ -1941,7 +1954,11 @@ export function getCategoryName(locale: Locale, categoryKey: string): string {
   return translations[locale].categories[categoryKey] || categoryKey
 }
 
-export function getAlgorithmMetaTitle(locale: Locale, algorithmId: string, fallbackName: string): string {
+export function getAlgorithmMetaTitle(
+  locale: Locale,
+  algorithmId: string,
+  fallbackName: string,
+): string {
   const desc = translations[locale].algorithmDescriptions[algorithmId]
   if (!desc) return `${fallbackName} | alg0.dev`
   const firstLine = desc.split('\n')[0].trim()

src/pages/404.astro

@@ -0,0 +1,38 @@
+---
+import Layout from "@layouts/Layout.astro"
+import { translations, defaultLocale, type Locale, locales } from "@i18n/translations"
+
+const pathName = Astro.url.pathname
+const locale = pathName.split("/")[1] as Locale
+const t = locales.includes(locale) ? translations[locale] : translations[defaultLocale]
+---
+
+<Layout title="404 — Page not found">
+  <div class="h-screen flex flex-col items-center justify-center gap-6 bg-black text-white px-4">
+
+    <div class="w-12 h-12 rounded-xl bg-white/4 flex items-center justify-center border border-white/8">
+      <svg class="w-6 h-6 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+      </svg>
+    </div>
+
+    <div class="text-center max-w-sm">
+      <p class="text-xs text-neutral-600 font-mono mb-2 tracking-widest uppercase">Error 404</p>
+      <h1 class="text-xl font-semibold text-white mb-3 font-heading">{t.notFoundTitle}</h1>
+      <p class="text-sm text-neutral-500 leading-relaxed">
+        {t.notFoundDescription}
+      </p>
+    </div>
+
+    <a
+      href={locales.includes(locale) ? `/${locale}` : `/${defaultLocale}`}
+      class="flex items-center gap-2 px-4 py-2 rounded-lg bg-white/6 border border-white/10 text-sm text-neutral-300 hover:text-white hover:bg-white/10 transition-colors"
+    >
+      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+      </svg>
+      {t.backToHome}
+    </a>
+
+  </div>
+</Layout>

tsconfig.json

@@ -3,6 +3,7 @@
   "include": [".astro/types.d.ts", "**/*"],
   "exclude": ["dist"],
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],