From 86b160da4fa3b1220ed688497aa031ec995c7901 Mon Sep 17 00:00:00 2001
From: shni <am7777336@gmail.com>
Date: Thu, 9 Oct 2025 22:19:31 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Actualizar=20dise=C3=B1o=20de=20la=20p?=
 =?UTF-8?q?=C3=A1gina=20de=20inicio=20con=20nuevos=20estilos=20y=20element?=
 =?UTF-8?q?os=20visuales?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/server/views/index.ejs       | 122 -------------------------------
 src/server/views/pages/index.ejs |  99 ++++++++++++++-----------
 2 files changed, 57 insertions(+), 164 deletions(-)
 delete mode 100644 src/server/views/index.ejs

diff --git a/src/server/views/index.ejs b/src/server/views/index.ejs
deleted file mode 100644
index 0fd2639..0000000
--- a/src/server/views/index.ejs
+++ /dev/null
@@ -1,122 +0,0 @@
-<% const pageTitle = `${appName} | Guía Completa`; %>
-<% const head = null; %>
-<% const scripts = null; %>
-<% const title = pageTitle; %>
-<% layout('layouts/layout', { title, head, scripts, appName, version, djsVersion, currentDateHuman }); %>
-
-<header class="relative overflow-hidden py-20 sm:py-28">
-  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
-    <div class="max-w-5xl mx-auto text-center space-y-12">
-      <!-- Badge Moderno con decoraciones sutiles -->
-      <div class="inline-block relative">
-        <span class="pixel-pumpkin absolute" style="left: -40px; top: 50%; transform: translateY(-50%);"></span>
-        <div class="pixel-badge">
-          <%= appName %> • v<%= version %>
-        </div>
-        <span class="pixel-ghost absolute" style="right: -40px; top: 50%; transform: translateY(-50%);"></span>
-      </div>
-
-      <!-- Título Principal -->
-      <div class="space-y-4">
-        <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight">
-          Guía Completa
-        </h1>
-        <h2 class="text-4xl sm:text-5xl md:text-6xl" style="font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #a78bfa, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
-          <%= appName %>
-        </h2>
-      </div>
-
-      <!-- Decoraciones sutiles -->
-      <div class="flex justify-center gap-6 items-center">
-        <span class="pixel-star-halloween">✦</span>
-        <span class="pixel-pumpkin"></span>
-        <span class="pixel-star-halloween" style="animation-delay: 0.5s;">✦</span>
-        <span class="pixel-ghost" style="animation-delay: 1s;"></span>
-        <span class="pixel-star-halloween" style="animation-delay: 1.5s;">✦</span>
-      </div>
-
-      <!-- Descripción con diseño moderno -->
-      <div class="pixel-box max-w-3xl mx-auto">
-        <p class="text-xl sm:text-2xl leading-relaxed" style="color: var(--text-secondary);">
-          Sistema completo de 
-          <span class="gradient-text font-semibold">economía</span>, 
-          <span class="gradient-text font-semibold">minijuegos</span>, 
-          <span class="gradient-text font-semibold">misiones</span> y 
-          <span class="gradient-text font-semibold">IA</span> 
-          para Discord
-        </p>
-      </div>
-
-      <!-- Botones de Acción -->
-      <div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
-        <a href="#primeros-pasos" class="block hover:scale-105 transition-transform duration-300">
-          <img src="/assets/images/boton_entrar.svg" alt="Comenzar ahora" class="w-full h-auto" style="max-width: 350px; filter: drop-shadow(0 4px 12px rgba(255, 179, 71, 0.3));">
-        </a>
-        
-        <button id="toggle-nav" class="pixel-btn pixel-btn-secondary flex items-center gap-2">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="3" y="5" width="18" height="2" fill="currentColor" rx="1"/>
-            <rect x="3" y="11" width="18" height="2" fill="currentColor" rx="1"/>
-            <rect x="3" y="17" width="18" height="2" fill="currentColor" rx="1"/>
-          </svg>
-          <span>Ver comandos</span>
-        </button>
-      </div>
-        </button>
-      </div>
-
-      <!-- Stats Footer con decoración -->
-      <div class="flex flex-wrap justify-center gap-4 pt-8">
-        <div class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
-          <span class="pixel-leaf"></span>
-          <span><span class="pixel-text-dim">Discord.js</span> <%= djsVersion %></span>
-        </div>
-        <div class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
-          <span>✦</span>
-          <span><span class="pixel-text-dim">Actualizado:</span> <%= currentDateHuman %></span>
-        </div>
-        <div class="pixel-box py-3 px-6 text-sm">
-          <span style="color: var(--pixel-accent-3); font-weight: bold;">23 Secciones</span> • Creación de Contenido
-        </div>
-      </div>
-    </div>
-  </div>
-</header>
-
-<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
-  <div class="flex min-h-screen flex-col">
-
-    <div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-10 px-6 pb-16 lg:flex-row lg:px-10">
-      <%- include('partials/toc') %>
-
-      <main class="flex-1">
-        <div class="mx-auto flex w-full max-w-3xl flex-col gap-8">
-          <%- include('partials/sections/primeros-pasos') %>
-          <%- include('partials/sections/comandos-basicos') %>
-          <%- include('partials/sections/sistema-juego') %>
-          <%- include('partials/sections/minijuegos') %>
-          <%- include('partials/sections/inventario-equipo') %>
-          <%- include('partials/sections/economia') %>
-          <%- include('partials/sections/tienda') %>
-          <%- include('partials/sections/crafteo') %>
-          <%- include('partials/sections/logros') %>
-          <%- include('partials/sections/misiones') %>
-          <%- include('partials/sections/racha') %>
-          <%- include('partials/sections/consumibles') %>
-          <%- include('partials/sections/cofres') %>
-          <%- include('partials/sections/encantamientos') %>
-          <%- include('partials/sections/fundicion') %>
-          <%- include('partials/sections/ia') %>
-          <%- include('partials/sections/recordatorios') %>
-          <%- include('partials/sections/alianzas') %>
-          <%- include('partials/sections/admin') %>
-          <%- include('partials/sections/creacion-contenido') %>
-          <%- include('partials/sections/configuracion') %>
-          <%- include('partials/sections/estadisticas') %>
-          <%- include('partials/sections/tips') %>
-          <%- include('partials/sections/faq') %>
-        </div>
-      </main>
-    </div>
-  </div>
-</div>
diff --git a/src/server/views/pages/index.ejs b/src/server/views/pages/index.ejs
index 3568d8b..ab48511 100644
--- a/src/server/views/pages/index.ejs
+++ b/src/server/views/pages/index.ejs
@@ -1,54 +1,69 @@
-<header class="relative overflow-hidden ">
-  <div class="absolute inset-0 bg-gradient-to-b from-indigo-500/5 via-purple-500/5 to-transparent"></div>
-  
-  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-28 relative">
-    <div class="max-w-5xl mx-auto text-center space-y-8">
-      <div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-indigo-500/30 backdrop-blur-sm">
-        <span class="relative flex h-2.5 w-2.5">
-          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
-          <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-gradient-to-r from-indigo-400 to-purple-400"></span>
-        </span>
-        <span class="text-sm font-bold tracking-wider uppercase bg-clip-text text-transparent bg-gradient-to-r from-indigo-200 to-purple-200">
+<header class="relative overflow-hidden py-20 sm:py-28">
+  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+    <div class="max-w-5xl mx-auto text-center space-y-12">
+      <!-- Badge Moderno con decoraciones sutiles -->
+      <div class="inline-block relative">
+        <span class="pixel-pumpkin absolute" style="left: -40px; top: 50%; transform: translateY(-50%);"></span>
+        <div class="pixel-badge">
           <%= appName %> • v<%= version %>
-        </span>
+        </div>
+        <span class="pixel-ghost absolute" style="right: -40px; top: 50%; transform: translateY(-50%);"></span>
       </div>
 
-      <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-tight">
-        <span class="block bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-100 to-purple-100">
+      <!-- Título Principal -->
+      <div class="space-y-4">
+        <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight">
           Guía Completa
-        </span>
-        <span class="block bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">
+        </h1>
+        <h2 class="text-4xl sm:text-5xl md:text-6xl" style="font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #a78bfa, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
           <%= appName %>
-        </span>
-      </h1>
+        </h2>
+      </div>
 
-      <p class="text-xl sm:text-2xl text-slate-300 max-w-3xl mx-auto leading-relaxed font-light">
-        Sistema completo de <span class="font-semibold text-indigo-300">economía</span>, <span class="font-semibold text-purple-300">minijuegos</span>, <span class="font-semibold text-pink-300">misiones</span> y <span class="font-semibold text-blue-300">IA</span> para Discord
-      </p>
+      <!-- Decoraciones sutiles -->
+      <div class="flex justify-center gap-6 items-center">
+        <span class="pixel-star-halloween">✦</span>
+        <span class="pixel-pumpkin"></span>
+        <span class="pixel-star-halloween" style="animation-delay: 0.5s;">✦</span>
+        <span class="pixel-ghost" style="animation-delay: 1s;"></span>
+        <span class="pixel-star-halloween" style="animation-delay: 1.5s;">✦</span>
+      </div>
 
-      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
-        <a href="#primeros-pasos" class="group relative px-10 py-4 text-lg font-bold text-white overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105">
-          <div class="absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 transition-transform duration-300 group-hover:scale-110"></div>
-          <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-          <span class="relative flex items-center gap-2">
-            Comenzar ahora
-            <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-            </svg>
-          </span>
+      <!-- Descripción con diseño moderno -->
+      <div class="pixel-box max-w-3xl mx-auto">
+        <p class="text-xl sm:text-2xl leading-relaxed" style="color: var(--text-secondary);">
+          Sistema completo de 
+          <span class="gradient-text font-semibold">economía</span>, 
+          <span class="gradient-text font-semibold">minijuegos</span>, 
+          <span class="gradient-text font-semibold">misiones</span> y 
+          <span class="gradient-text font-semibold">IA</span> 
+          para Discord
+        </p>
+      </div>
+
+      <!-- Botones de Acción -->
+      <div class="flex flex-col sm:flex-row gap-6 justify-center items-center pt-4">
+        <a href="#primeros-pasos" class="pixel-btn flex items-center gap-2">
+          <span>Comenzar ahora</span>
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+          </svg>
         </a>
       </div>
 
-      <div class="flex flex-wrap justify-center gap-3 pt-6">
-        <span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
-          Discord.js <%= djsVersion %>
-        </span>
-        <span class="px-5 py-2 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 text-sm font-medium text-slate-300 hover:bg-white/10 transition-all">
-          <%= currentDateHuman %>
-        </span>
-        <span class="px-5 py-2 rounded-xl bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border border-indigo-500/30 text-sm font-bold text-indigo-200 hover:from-indigo-500/20 hover:to-purple-500/20 transition-all">
-          23 Secciones • Creación de Contenido Incluida
-        </span>
+      <!-- Stats Footer -->
+      <div class="flex flex-wrap justify-center gap-4 pt-8">
+        <div class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
+          <span class="pixel-star-halloween">✦</span>
+          <span style="color: var(--text-secondary);">Discord.js <%= djsVersion %></span>
+        </div>
+        <div class="pixel-box py-3 px-6 text-sm flex items-center gap-2">
+          <span class="pixel-star-halloween">✦</span>
+          <span style="color: var(--text-secondary);"><%= currentDateHuman %></span>
+        </div>
+        <div class="pixel-box py-3 px-6 text-sm">
+          <span class="gradient-text font-semibold">23 Secciones</span>
+        </div>
       </div>
     </div>
   </div>
@@ -96,4 +111,4 @@
       </aside>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file