CAMBIOS:
- Creada pagina de FAQ con manual de funcionalidades. - Arregladas alertas de exito y error en CDE de todos los elementos. - Creada alerta de verificacion en la eliminacion de cualquier elemento.
This commit is contained in:
Bryam105
@@ -0,0 +1,123 @@
|
||||
<x-layout title="FAQ y Manual - Lauck">
|
||||
<x-section-header subtitle="Soporte y Documentación" title="Preguntas " highlight="Frecuentes" />
|
||||
|
||||
<div class="w-full max-w-4xl mx-auto space-y-8">
|
||||
|
||||
<!-- Sección Manual de Usuario -->
|
||||
<div class="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-200 dark:border-neutral-800 bg-gray-50 dark:bg-neutral-800/50">
|
||||
<h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<svg class="w-6 h-6 text-lime-600 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
Manual de Uso Rápido
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Conceptos básicos para navegar por el sistema Lauck.</p>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<!-- Punto 1 -->
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">1</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Dashboard</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-1">El panel principal muestra un resumen de las métricas clave, accesos directos a tus módulos más importantes y un panorama general del negocio.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Punto 2 -->
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">2</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Stock y Productos</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-1">Registra bicicletas, accesorios y repuestos. Mantén las cantidades actualizadas para evitar quiebres de inventario mediante la gestión de tu stock.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Punto 3 -->
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">3</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Taller</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-1">Administra la agenda de reparaciones, asigna estados (pendiente, en proceso, listo) y mantén un registro de los servicios realizados a cada cliente.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Punto 4 -->
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">4</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Ventas y Clientes</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-1">Genera nuevas ventas, consulta el historial, y gestiona la base de datos de tus clientes para ofrecer un servicio más personalizado.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preguntas Frecuentes -->
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mt-10 mb-6 flex items-center gap-2">
|
||||
<svg class="w-6 h-6 text-lime-600 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Preguntas Frecuentes (FAQ)
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- FAQ 1 -->
|
||||
<details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
|
||||
<span>¿Cómo agrego un nuevo producto al stock?</span>
|
||||
<span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
|
||||
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
|
||||
<p>Dirígete a la sección <strong>Stock</strong> desde el menú principal, haz clic en el botón superior derecho de agregar nuevo producto y completa el formulario con los detalles (SKU, nombre, precio, etc).</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- FAQ 2 -->
|
||||
<details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
|
||||
<span>¿Puedo registrar una venta si el cliente no está registrado?</span>
|
||||
<span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
|
||||
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
|
||||
<p>Sí, al crear una nueva venta desde la sección <strong>Ventas</strong> puedes seleccionar un cliente genérico ("Consumidor Final") o bien ingresar los datos de un cliente nuevo en el mismo momento para que quede registrado en tu base de datos.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- FAQ 3 -->
|
||||
<details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
|
||||
<span>¿Qué pasa si olvido mi contraseña?</span>
|
||||
<span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
|
||||
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6-6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
|
||||
<p>En la pantalla de inicio de sesión, haz clic en el enlace "¿Olvidaste tu contraseña?". Te enviaremos un correo electrónico con instrucciones para restablecerla de forma segura. Si el problema persiste, contacta al administrador del sistema.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
|
||||
<span>¿Cómo cambiar entre modo claro y oscuro?</span>
|
||||
<span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
|
||||
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
|
||||
</span>
|
||||
</summary>
|
||||
<div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
|
||||
<p>En la barra de navegación superior (Navbar), encontrarás un icono de un sol o una luna (dependiendo del modo actual en el que te encuentres). Haz clic sobre el ícono para alternar entre el tema claro y el oscuro. El sistema recordará tu preferencia para futuras sesiones.</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 p-6 bg-lime-50 dark:bg-lime-900/10 border border-lime-200 dark:border-lime-900/30 rounded-xl text-center shadow-sm">
|
||||
<h3 class="text-lg font-bold text-lime-800 dark:text-neon-lime mb-2">¿Necesitas más ayuda?</h3>
|
||||
<p class="text-sm text-lime-700 dark:text-gray-400 mb-5">Si tienes alguna otra duda o experimentas problemas técnicos, nuestro equipo de soporte está disponible para ayudarte.</p>
|
||||
<a href="mailto:soporte@lauck.com" class="inline-flex items-center justify-center px-6 py-3 text-sm font-bold text-neutral-900 bg-lime-400 dark:bg-neon-lime rounded-lg hover:bg-lime-500 hover:dark:bg-[#b3e600] transition-colors shadow-lg shadow-lime-500/20 dark:shadow-neon-lime/20 transform hover:-translate-y-0.5 duration-200 uppercase tracking-wide">
|
||||
Contactar a Soporte
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</x-layout>
|
||||
Reference in New Issue
Block a user