Feat/404 page mario yellowy 75

src/i18n/keys/en.keys.ts

@@ -289,8 +289,11 @@ export const en_keys = {
 
 	// 404 Page
 	"404.title": "404 — Page not found",
+	"404.title_description": "OOPS! We had a memory leak",
+	"404.c_reference": "Just kidding, we aren't C",
+	"404.problem": "But we did have a problem finding this page",
 	"404.image_alt": "404 - Page not found",
-	"404.back_home": "Home",
+	"404.back_home": "Back to home",
 
 	// Login Page
 	"login.title": "Sign in — RustLings",

src/i18n/keys/es.keys.ts

@@ -296,8 +296,11 @@ export const es_keys = {
 
 	// 404 Page
 	"404.title": "404 — Página no encontrada",
+	"404.title_description": "OOPS! Tuvimos un fallo de memoria",
+	"404.c_reference": "Es broma, no somos C",
+	"404.problem": "Pero sí tuvimos un problema en encontrar esta página",
 	"404.image_alt": "404 - Página no encontrada",
-	"404.back_home": "Inicio",
+	"404.back_home": "Regresar a inicio",
 
 	// Login Page
 	"login.title": "Iniciar sesión — RustLings",

src/pages/[lang]/404.astro

@@ -0,0 +1,62 @@
+---
+import { getLangFromUrl, useTranslations } from "~/i18n/utils"
+import Layout from "~/layouts/Layout.astro"
+import IconLeft from "~icons/tabler/arrow-big-left-lines-filled"
+
+export { getStaticPaths } from "./index.astro"
+
+export const prerender = true
+
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang)
+---
+
+<Layout title={t("404.title")}>
+  <main class="relative flex-1 flex flex-col items-center justify-center px-4 overflow-hidden bg-primary">
+
+    <div class="absolute top-1/4 -left-20 w-72 h-72 bg-yellow/10 rounded-full blur-[120px] pointer-events-none"></div>
+    <div class="absolute bottom-1/4 -right-20 w-96 h-96 bg-secondary/5 rounded-full blur-[150px] pointer-events-none"></div>
+
+    <div class="z-10 flex flex-col items-center text-center max-w-2xl gap-10">
+
+      <div class="relative group">
+        <div class="absolute -inset-1 bg-yellow/20 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
+        <a href="https://rustlang-es.org/" target="_blank" rel="noopener noreferrer">
+        <img 
+          src="/Rust_Lang_ES_Logo_Blanco_color.svg" 
+          alt={t("404.image_alt")}
+          width="200"
+          class="relative hover:scale-105 transition-transform duration-500 ease-out"
+        ></a>
+
+      </div>
+
+      <div class="space-y-4">
+        <h1 class="text-5xl md:text-7xl font-black text-secondary tracking-tighter italic">
+          404 <span class="text-yellow not-italic">_</span>
+        </h1>
+
+        <h2 class="text-xl md:text-2xl font-medium text-secondary/80">
+          {t("404.title_description")}
+        </h2>
+
+        <div class="flex flex-col gap-2 text-secondary/50 font-mono text-sm md:text-base italic">
+          <p>{t("404.c_reference")}</p>
+          <p class="text-yellow/60 border-t border-secondary/10 pt-4 mt-2">
+            // {t("404.problem")}
+          </p>
+        </div>
+      </div>
+
+      <a
+        href={`/${lang}/`}
+        class="group relative flex items-center gap-3 px-8 py-3 bg-secondary/5 border border-secondary/10 rounded-full text-secondary/80 font-semibold backdrop-blur-sm hover:border-yellow hover:text-yellow hover:bg-yellow/5 transition-all duration-500"
+      >
+        <IconLeft class="group-hover:-translate-x-1 transition-transform duration-300" font-size={24} />
+        {t("404.back_home")}
+      </a>
+    </div>
+
+    <div class="absolute inset-0 bg-[radial-gradient(#ffffff05_1px,transparent_1px)] [background-size:20px_20px] pointer-events-none"></div>
+  </main>
+</Layout>

src/pages/[lang]/[slug].astro

@@ -15,18 +15,17 @@ import IconGripVertical from "~icons/tabler/grip-vertical"
 import IconTerminal from "~icons/tabler/terminal-2"
 
 const { lang, slug } = Astro.params
-
-if (!Astro.locals.user) {
-	return Astro.redirect(`/${lang}/login`)
-}
-
 const lessons = getLessonsByLang(lang ?? "es")
 const lessonIndex = lessons.findIndex((l) => l.meta.slug === slug)
 
 if (lessonIndex === -1) {
 	return Astro.redirect(`/${lang}/404`)
 }
 
+if (!Astro.locals.user) {
+	return Astro.redirect(`/${lang}/login`)
+}
+
 const lesson = lessons[lessonIndex]
 const previousLesson = lessons[lessonIndex - 1]
 const nextLesson = lessons[lessonIndex + 1]

src/pages/[lang]/login.astro

@@ -2,6 +2,7 @@
 import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import Layout from "~/layouts/Layout.astro"
 import JamGithub from "~icons/jam/github"
+import IconLeft from "~icons/tabler/arrow-big-left-lines-filled"
 
 if (Astro.locals.user) {
 	return Astro.redirect(`/${getLangFromUrl(Astro.url)}/aprender`)
@@ -19,8 +20,13 @@ const errorMessages: Record<string, string> = {
 ---
 
 <Layout title={t("login.title")}>
-  <main class="min-h-screen flex items-center justify-center px-4 bg-primary">
-    <div class="w-full max-w-md">
+  <main class="min-h-screen grid items-center justify-center px-4 bg-primary">
+    <a
+      href={`/${lang}/`}
+      class="absolute top-0 left-0 m-8 flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-secondary/60 border border-transparent rounded-lg hover:border-yellow hover:text-yellow transition-all duration-300">      <IconLeft font-size={20} />
+      {t("404.back_home")}
+    </a>
+    <div class="lg:w-lg w-max md:w-md">
       <!-- Logo / title -->
       <div class="text-center mb-8">
         <a href={`/${lang}/`} class="text-yellow font-extrabold text-3xl tracking-tight">
@@ -30,7 +36,7 @@ const errorMessages: Record<string, string> = {
       </div>
 
       <!-- Card -->
-      <div class="bg-editor-bg border border-stroke-color rounded-xl p-8 shadow-2xl">
+      <div class="bg-editor-bg border border-stroke-color rounded-xl p-8 shadow-2xl min-w-max">
         <!-- Error banner -->
         {error && (
           <div class="mb-6 px-4 py-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
@@ -143,6 +149,7 @@ const errorMessages: Record<string, string> = {
 -->
 
         <!-- GitHub OAuth -->
+
         <a
           href={`/api/auth/github?lang=${lang}`}
           data-astro-reload
@@ -151,6 +158,7 @@ const errorMessages: Record<string, string> = {
           <JamGithub font-size={18} />
           {t("login.github_button")}
         </a>
+
       </div>
     </div>
   </main>