Panel de control SaaS con Next.js y flujo de incorporación

Sigue estas instrucciones de cerca: 1. Configura next.js y shadcn 2. Añade una autenticación simple con supabase con una página de registro e inicio de sesión 3. Configura el frontend según el siguiente prompt: <frontend prompt> <summary_title> Crea componentes detallados con estos requisitos: 1. Usa la directiva 'use client' para los componentes del lado del cliente 2. Estiliza con clases de utilidad de Tailwind CSS para un diseño responsive 3. Usa Lucide React para los iconos (del paquete lucide-react). NO uses otras librerías de UI a menos que se solicite 4. Usa fotos de stock de https://t.co/kmBMYKBzp0 donde sea apropiado, solo URLs válidas que sepas que existen 5. Configura image remotePatterns en next.config.js para habilitar fotos de stock de https://t.co/kmBMYKBzp0 6. Crea el layout root layout.tsx que envuelva los elementos de navegación necesarios en todas las páginas 7. DEBES implementar los elementos de navegación en su lugar correcto, es decir, barra lateral izquierda, encabezado superior 8. Implementa con precisión los grid layouts necesarios 9. Sigue las prácticas de importación adecuadas: - Usa los alias de ruta @/ - Mantén las importaciones de componentes organizadas - Actualiza el src/app/page.tsx existente con el nuevo código completo - No olvides el manejo de la ruta raíz (page.tsx) - DEBES completar todo el prompt antes de detenerte Modern SaaS Dashboard with Onboarding Flow </summary_title> <image_analysis> 1. Elementos de navegación: - Barra lateral izquierda: Dashboard, Content, Community, Marketing, Analytics, Sales, Storefront - Navegación secundaria inferior con: Settings, Help - Sección de perfil de usuario en la parte superior de la barra lateral 2. Componentes de diseño: - Ancho de la barra lateral: 240px - Área de contenido principal: ancho flexible - Contenedores de tarjetas: ~500px de ancho - Padding: 24px (consistente en todo) - Contenedor responsive con márgenes de 32px 3. Secciones de contenido: - Encabezado de bienvenida con saludo al usuario - Lista de verificación para comenzar (4 pasos) - Tarjeta de reserva de videollamada - Tarjeta de vista previa del constructor de páginas - Indicadores de progreso para tareas completadas 4. Controles interactivos: - Elementos de lista de verificación con estados de completado - Botones primarios "Schedule time" y "Try it out" - Enlaces de texto "Learn more" - Elementos de menú de navegación con estados de hover - Controles de editor de texto enriquecido en el constructor de páginas 5. Colores: - Azul primario: #0066FF (botones) - Gris de fondo: #F5F5F7 - Texto oscuro: #1A1A1A - Verde de éxito: #34C759 - Colores de acento para avatares 6. Estructura de Grid/Diseño: - Columna única para el contenido principal - Espacio de 24px entre tarjetas - Contenedores de ancho flexible - Sistema de tarjetas con esquinas redondeadas (12px) </image_analysis> <development_planning> 1. Estructura del proyecto: ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. Características clave: - Sistema de lista de verificación de incorporación - Programación de videollamadas - Interfaz de constructor de páginas - Seguimiento de progreso - Panel de usuario 3. Gestión de estado: ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. Rutas: ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. Arquitectura de componentes: - DashboardLayout (parent) - OnboardingCard (feature) - VideoCallCard (feature) - PageBuilderPreview (feature) - NavigationMenu (shared) - ActionButton (shared) 6. Breakpoints responsive: ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </frontend prompt> 4. Configura la estructura de páginas según el siguiente prompt <page structure prompt> Estructura de rutas de Next.js basada en los elementos del menú de navegación (excluyendo la ruta principal). Asegúrate de envolver todas las rutas con el componente: Rutas: - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help Implementaciones de página: /dashboard: Propósito principal: Proporcionar una visión general de métricas clave y acceso rápido a funciones principales Componentes clave - Grid de tarjetas de estadísticas - Feed de actividad reciente - Botones de acción rápida - Gráficos de rendimiento - Notificaciones de tareas Estructura de diseño - Diseño basado en grid con sistema de 12 columnas - Tarjetas responsive que se apilan en móvil - Encabezado fijo con métricas clave /content: Propósito principal: Gestionar y organizar todos los activos de contenido Componentes clave - Lista de contenido /alternar vista de grid - Sistema de búsqueda y filtros - Editor de contenido - Biblioteca de medios - Historial de versiones Estructura de diseño: - Vista dividida con navegación lateral - Área de contenido principal con scroll infinito - Modales superpuestos para edición /community: Propósito principal: Gestionar interacciones de usuarios y características de comunidad Componentes clave - Directorio de miembros - Foros de debate - Herramientas de moderación - Reportes de usuarios - Registros de actividad Estructura de diseño - Diseño de tres columnas - Barra lateral colapsable - Área de contenido principal con scroll /marketing: Propósito principal: Gestión de campañas y herramientas de marketing Componentes clave - Creador de campañas - Constructor de plantillas de correo - Panel de analíticas - Segmentos de audiencia - Herramientas de pruebas A/B Estructura de diseño - Interfaz con pestañas - Vista dividida para edición - Panel de vista previa /analytics: Propósito principal: Visualización de datos e informes Componentes clave - Gráficos interactivos - Constructor de informes personalizados - Herramientas de exportación de datos - Comparaciones de métricas - Selector de rango de fechas Estructura de diseño - Gráficos de ancho completo - Encabezado de filtros fijo - Tablas de datos responsive /sales: Propósito principal: Pipeline de ventas y gestión de pedidos Componentes clave - Panel de pedidos - Perfiles de clientes - Generador de facturas - Procesamiento de pagos - Informes de ventas Estructura de diseño - Vista de tablero Kanban - Opción de vista de lista - Panel de detalles /storefront: Propósito principal: Gestión de la tienda de comercio electrónico Componentes clave - Gestor de productos - Control de inventario - Personalizador de tienda - Cumplimiento de pedidos - Configuración de envío Estructura de diseño - Diseño de grid de productos - Barra lateral de edición rápida - Modo de vista previa /settings: Propósito principal: Configuración del sistema y preferencias de usuario Componentes clave - Configuración de cuenta - Preferencias del sistema - Configuración de integraciones - Gestión de usuarios - Configuración de seguridad Estructura de diseño - Paneles de configuración categorizados - Diseños basados en formularios - Modales de confirmación /help: Propósito principal: Documentación de soporte y asistencia Componentes clave - Búsqueda de documentación - Sección de preguntas frecuentes - Contacto con soporte - Videos tutoriales - Base de conocimientos Estructura de diseño - Barra lateral de búsqueda - Vista de artículos - Panel de enlaces rápidos Layouts: AdminLayout: - Rutas aplicables: Todas excepto /help - Componentes principales - Barra de navegación superior - Barra lateral de navegación - Menú de perfil de usuario - Notificaciones - Breadcrumbs - Comportamiento responsive - Barra lateral colapsable en móvil - Menú desplegable para navegación en pantallas pequeñas - Ancho de contenido ajustable HelpLayout - Rutas aplicables: /help - Componentes principales - Barra lateral de documentación - Barra de búsqueda - Widget de chat de soporte - Botón de volver al panel de administración - Comportamiento responsive - Ancho completo en móvil - Botón de acción flotante para soporte - Secciones colapsables </page structure prompt>