AEGOX UI Kit & Guía de Uso

Sistema de diseño oficial en HTML5, CSS3 y Vanilla JavaScript. Incluye barras de navegación, botones, campos de formulario, tarjetas de packs, modales y pies de página (footers).

#8B5CF6 (Púrpura Primario)

#7C3AED (Violeta Acento)

#1F2937 (Gris Oscuro Superficie)

#111827 (Negro Contenedor)

#F9FAFB (Blanco Texto)

Instalación Rápida en cualquier archivo HTML

<link rel="stylesheet" href="/uikit/aegox-ui.css">
<script src="/uikit/aegox-ui.js" defer></script>

1. Barra de Navegación (Navigation Bar)

Barra superior con efecto glassmorphism oscuro, indicador de enlace activo y menú móvil controlado por data-aegox-nav-toggle.

Inicio Packs Web Bots Discord Unirse a Discord

Uso del componente: Navigation Bar

<nav class="aegox-navbar">
  <a href="/" class="aegox-nav-brand">
    <span class="aegox-nav-logo-badge">A</span>
    <span>AEGOX</span>
  </a>
  <ul class="aegox-nav-links">
    <li><a href="/" class="aegox-nav-link active">Inicio</a></li>
    <li><a href="/packs" class="aegox-nav-link">Packs</a></li>
  </ul>
  <div class="aegox-nav-actions">
    <a href="https://discord.aegox.org/invite" class="aegox-btn aegox-btn-primary aegox-btn-sm">Discord</a>
  </div>
</nav>

2. Botones de Acción (Buttons)

Botones con gradiente púrpura/violeta (#8B5CF6 → #7C3AED), estados hover y animación ripple automática en Vanilla JS.

Conectar Discord (discord.aegox.org)

Uso del componente: Buttons

<button class="aegox-btn aegox-btn-primary">Acción Principal</button>
<button class="aegox-btn aegox-btn-secondary">Secundario</button>
<button class="aegox-btn aegox-btn-outline aegox-btn-sm">Contorno SM</button>

3. Tarjetas de Packs de Servicios (Cards)

Tarjetas contenedoras en gris oscuro (#1F2937) para mostrar planes de Desarrollo Web y Bots de Discord.

Más Solicitado

Desarrollo Web

Pack Web Pro

Aplicación web completa con panel de administración, autenticación segura y base de datos en Supabase.

$180 USD / pago único

Frontend React / Vite + Backend API
Autenticación y Roles de Usuario (RBAC)
Despliegue y Dominio Configurado

Automatización Discord

Bot Custom Discord

Bot programado en Discord.js v14 con comandos slash, tickets, moderación y vinculación OAuth2.

$65 USD / pago único

Comandos Slash e Interacciones
Sistema de Tickets con Logs y Transcripts
Alojamiento 24/7 en Servidor Dedicado

Uso del componente: Service Pack Card

<div class="aegox-pack-card aegox-pack-featured">
  <span class="aegox-pack-badge">Popular</span>
  <div class="aegox-pack-header">
    <div class="aegox-pack-type">Desarrollo Web</div>
    <h3 class="aegox-pack-title">Pack Web Pro</h3>
    <p class="aegox-pack-desc">Descripción del servicio...</p>
  </div>
  <div class="aegox-pack-price">
    <span class="aegox-price-amount">$180</span>
    <span class="aegox-price-currency">USD</span>
  </div>
  <button class="aegox-btn aegox-btn-primary aegox-btn-full">Solicitar</button>
</div>

4. Campos de Formulario (Input Fields & Forms)

Inputs, selectores, áreas de texto y casillas de verificación con fondo #111827 y anillo de foco púrpura #8B5CF6.

Nombre Completo

Correo Electrónico

Usuario de Discord (Opcional)

Servicio Requerido

Detalles del Proyecto o Mensaje

Acepto los términos de contratación y el acuerdo de anticipo del 50%.

✓ Solicitud validada y enviada correctamente.

Uso del componente: Input Fields

<div class="aegox-form-group">
  <label class="aegox-label" for="email">Correo Electrónico</label>
  <input type="email" id="email" class="aegox-input" placeholder="nombre@dominio.com">
</div>

5. Modales Interactivos (Modals)

Controlados mediante atributos data-aegox-modal="id" o mediante la API JavaScript AegoxUI.openModal('id').

Uso del componente: Modal (HTML + JS API)

<!-- Botón disparador -->
<button class="aegox-btn aegox-btn-primary" data-aegox-modal="mi-modal">Abrir Modal</button>

<!-- Estructura del Modal -->
<div id="mi-modal" class="aegox-modal-overlay" aria-hidden="true">
  <div class="aegox-modal-container" role="dialog" aria-modal="true">
    <div class="aegox-modal-header">
      <h3 class="aegox-modal-title">Título del Modal</h3>
      <button class="aegox-modal-close" data-aegox-close>&times;</button>
    </div>
    <div class="aegox-modal-body">Contenido detallado...</div>
    <div class="aegox-modal-footer">
      <button class="aegox-btn aegox-btn-outline" data-aegox-close>Cerrar</button>
    </div>
  </div>
</div>

6. Pie de Página Corporativo (Footer)

Footer multi-columna con enlaces de servicios, legal, soporte y acceso directo a discord.aegox.org/*.

Uso del componente: Footer

<footer class="aegox-footer">
  <div class="aegox-footer-grid">
    <div class="aegox-footer-col">
      <h4>AEGOX</h4>
      <p>Desarrollo de Software Profesional.</p>
    </div>
    <div class="aegox-footer-col">
      <h4>Comunidad</h4>
      <ul class="aegox-footer-links">
        <li><a href="https://discord.aegox.org/invite">Servidor de Discord</a></li>
      </ul>
    </div>
  </div>
  <div class="aegox-footer-bottom">
    <span>© 2026 AEGOX.</span>
  </div>
</footer>