Pérdida de Grasa Avanzada

Landing page

Página principal de la plataforma con una calculadora gratuita de calorías integrada. Los usuarios introducen su sexo, edad, altura, peso, nivel de actividad y objetivo (perder grasa, mantener o ganar músculo) para obtener su tasa metabólica basal, calorías objetivo y macronutrientes recomendados.

Página de venta del curso

Página de ventas del videocurso con múltiples secciones: hero explicativo, carrusel de pasos del proceso, listado de contenidos del curso, grid de testimonios con capturas de pantalla reales, sección de preguntas frecuentes y banner de precios dinámicos con cuenta atrás. Incluye botones de compra distribuidos estratégicamente.

Página de calculadoras

Panel que muestra todas las calculadoras del usuario en formato tabla con nombre, fecha de creación y última actualización. Indica el límite de calculadoras según el plan contratado y muestra un banner promocional para usuarios del plan básico invitándoles a actualizar al plan Sheriff.

Cabecera y sección de calorías de la calculadora

Cabecera con el nombre de la calculadora, fechas de creación y última modificación, sección de notas editables y botones de acción (editar nombre, duplicar, eliminar, descargar PDF). Debajo, formulario de datos físicos donde el usuario introduce sexo, edad, altura, peso, porcentaje de grasa corporal, nivel de actividad (4 niveles según pasos diarios) y objetivo (perder grasa, mantener o ganar músculo). Calcula y muestra la masa libre de grasa.

Sección de macros de la calculadora

Configuración de la distribución de macronutrientes con calorías objetivo, sliders para ajustar proteínas, grasas y carbohidratos por kilogramo de peso, tarjetas comparativas (TMB vs. calorías objetivo) y tabla resumen de macros objetivo frente a los actuales.

Sección de dietas de la calculadora

Interfaz de creación y gestión de dietas con pestañas para alternar entre ellas (con límite según plan). Cada dieta contiene comidas, y cada comida muestra una tabla de ingredientes/platos con cantidad, calorías, proteínas, grasas y carbohidratos. Permite añadir, editar, eliminar, duplicar y reordenar tanto dietas como comidas e ingredientes.

Sección de semanas de la calculadora

Planificación semanal con pestañas para múltiples semanas. Tabla de 7 filas (una por día) con un selector desplegable para asignar una dieta a cada día, columnas de macronutrientes calculados por día y fila de totales semanales comparados con el objetivo.

Página del videocurso

Reproductor embebido del videocurso de Pérdida de Grasa Avanzada con una duración de más de 2 horas. La URL del video es configurable desde el panel de administración. Los usuarios del plan básico ven un banner promocional para acceder al contenido completo del curso.

Modal de ajustes de usuario

Modal responsive con cuatro pestañas en layout de dos columnas en escritorio y drawer anidado en móvil. 'Mi info': editar nombre y subir avatar. 'Email': cambiar email con verificación de contraseña actual. 'Contraseña': actualizar contraseña con requisitos de validación. 'Zona de peligro': eliminar cuenta con doble confirmación de seguridad.

Elemento de búsqueda de ingredientes y platos

Elemento de búsqueda con scroll infinito para añadir ingredientes o platos a una comida. Incluye campo de búsqueda con debounce, paginación automática al hacer scroll, indicadores de elementos privados creados por el usuario y notificaciones de éxito al añadir un elemento.

Modal de crear ingrediente personalizado

Modal con formulario completo para crear ingredientes personalizados. El usuario introduce nombre, unidad por defecto (gramos, mililitros o unidades), cantidad por defecto y los valores nutricionales principales por cada 100g/ml: calorías, proteínas, grasas y carbohidratos. Permite subir foto del producto y de la etiqueta nutricional.

Modal de crear plato personalizado

Modal para crear platos personalizados compuestos por múltiples ingredientes. El usuario introduce el nombre del plato y busca ingredientes existentes para añadirlos con su cantidad. Muestra una tabla con los ingredientes del plato, sus cantidades y macronutrientes calculados, con fila de totales. Permite reemplazar o eliminar ingredientes y crear nuevos ingredientes directamente desde el modal.

Modal de reordenar elementos

Modal con funcionalidad de arrastrar y soltar (drag and drop) para reordenar comidas dentro de una dieta, ingredientes dentro de una comida o ingredientes personalizados dentro de un plato. Utiliza la librería dnd-kit para ofrecer una experiencia de reordenación fluida e intuitiva.

Generación de PDF automática de la calculadora

Sistema de exportación a PDF del plan de dietas completo usando @react-pdf/renderer. Genera un documento con portada personalizada y una página por cada dieta que incluye las comidas con sus ingredientes, cantidades y macronutrientes en formato tabla, además de la planificación semanal. Incluye modal de previsualización antes de descargar.

Sección de lista de la compra de la calculadora

Sección integrada en la página de la calculadora que genera automáticamente la lista de la compra a partir de los ingredientes de las dietas. Ofrece tres vistas: por dieta individual, por semana completa o todos los ingredientes combinados. Cada vista permite descargar la lista como PDF independiente.

PDF de lista de la compra