Híbrido Laboratorio // Master Checklist

Ver Web Híbrido Propuestas PDF Ver Laboratorio

Roadmap de Ejecución • 8 Semanas

Construcción de la Plataforma Híbrida

Cronograma operativo y lista de verificación interactiva para consolidar la arquitectura de Purrpurr: fusionando la aceleración visual del Laboratorio de Diseño con la solidez transaccional, criptográfica y multi-tenant de ingeniería.

%Listo

Completadas

8 / 20

Pendientes

Filtrar:

Fase 1: Identidad Visual, Activos y Arquitectura Multipágina

Semanas 1 y 2 • Cimientos Gráficos & Enrutamiento

4 / 4 tareas100% completado

Ingesta de Manual de Marca, Paleta de Color y Tipografía

Identidad VisualCOMPLETADA • 2026-10-02

Estandarización de la identidad visual de Híbrido Lab Creativo: paleta cromática (#52388d, acentos magenta, cian y naranja), tipografía Space Grotesk y logos oficiales en alta resolución.

Entregables Técnicos:

• Configuración de tokens cromáticos de Híbrido Lab en Tailwind y CSS globals• Integración de logo oficial en variantes blanco y negro en /public/clients/hibrido-lab• Definición de micro-estilos para auras oscuras, contrastes y sombras de logotipo

Pipeline de Vectores Adobe Illustrator (.ai a SVG) e Iconos

Identidad VisualCOMPLETADA • 2026-10-02

Herramientas y scripts para leer, procesar y convertir archivos .ai de Adobe Illustrator a vectores SVG limpios para su uso en la web. Generación del set de iconos de navegación.

Entregables Técnicos:

• Instalación y configuración de PyMuPDF, pypdf y herramientas de extracción vectorial• Creación del set de iconos SVG: Conócenos, Productos, Experiencias, Recicla y Clientes• Soporte para logotipos de Dinamita Mood y Plástico con Final Feliz en SVG

Header Líquido Interactivo con Barra de Píldoras e Iconos

Identidad VisualCOMPLETADA • 2026-10-02

Maquetación del navbar principal exactamente según el boceto del cliente: logo a la izquierda, cinta de gradiente cósmico fluido y píldoras interactivas con sus respectivos iconos debajo.

Entregables Técnicos:

• Componente HibridoHeader con backdrop blur y efecto de aura líquida• Píldoras de navegación: Conócenos, Productos, Experiencias, Recicla y Clientes• Accesos rápidos a las divisiones: Bye Pelos y Dinamita Mood

Arquitectura y Enrutamiento Multipágina del Laboratorio

Infraestructura / CloudCOMPLETADA • 2026-10-02

Estructuración completa del sistema de páginas dedicadas: portal central, página de Bye Pelos, página de Plástico con final feliz y página de Dinamita Mood.

Entregables Técnicos:

• Landing principal interactiva en /• Landing temática para Bye Pelos en /bye-pelos• Landing temática para Plástico con final feliz en /plastico-final-feliz• Landing temática para Dinamita Mood en /dinamita

Fase 2: Motor 3D Interactivo de Producto (Gomunator & Colección)

Semanas 3 y 4 • Experiencia 3D WebGL & Fichas Técnicas

2 / 4 tareas50% completado

Infraestructura WebGL con Three.js y React Three Fiber

Motor 3D WebGLCOMPLETADA • 2026-10-02

Pipeline de renderizado 3D en cliente con Canvas WebGL acelerado por hardware, iluminación de estudio multicapa, sombras de contacto y rotación procedural fluida.

Entregables Técnicos:

• Componente ModelViewer3D configurado con @react-three/fiber y @react-three/drei• Sistema de luces: directional, ambient y luces puntuales de acento cian/magenta• Soporte para Float animations y sombras de contacto dinámicas

Visor 3D Interactivo en 360° para "El Gomunator"

Motor 3D WebGLCOMPLETADA • 2026-10-02

Modelo interactivo de El Gomunator con OrbitControls para rotación de 360°, zoom milimétrico y selector interactivo de variantes de acabado y color de silicona.

Entregables Técnicos:

• Modelo procedural con cuerpo ergonómico, nervaduras de tracción y empuñadura• Selector de materiales y colores: Híbrido Purple, Toxic Violet, Cyber Magenta, Volcanic Orange• Toggle para auto-rotación y controles táctiles para dispositivos móviles

Ingesta y Optimización de Archivos 3D del Cliente (.glb / .obj / .stl)

Motor 3D WebGL

Procesamiento de los modelos 3D originales provistos en el Google Drive de Híbrido Lab. Conversión, optimización con compresión Draco y carga progresiva con useGLTF.

Entregables Técnicos:

• Pipeline de inspección y validación con biblioteca trimesh en Python• Compresión Draco / Meshopt para reducir peso de archivos de 20MB a <1.5MB• Precarga de modelos en caché del navegador con Skeleton Loader

Hotspots Interactivos y Despiece Técnico 3D

Motor 3D WebGL

Puntos de información interactivos anclados en coordenadas 3D para destacar beneficios del polímero lavable, ergonomía y modo de uso.

Entregables Técnicos:

• Marcadores 3D reactivos que se proyectan a coordenadas de pantalla (Html de Drei)• Tooltips informativos con animación al hacer hover o tap• Botón de vista explosionada / componentes del producto

Fase 3: Marketplace & Catálogo E-Commerce Híbrido

Semanas 5 y 6 • Catálogo Multi-Línea & Carrito Persistente

2 / 4 tareas50% completado

Catálogo Unificado Multi-División con Filtros

MarketplaceCOMPLETADA • 2026-10-02

Plataforma de marketplace con filtrado instantáneo por las tres divisiones de negocio: Bye Pelos (Gomunator 3D), Plástico con final feliz (objetos upcycling) y Dinamita (ropa streetwear).

Entregables Técnicos:

• Vista de cuadrícula responsiva con tarjetas de producto de alta fidelidad• Filtros por división con conteos en tiempo real• Badge de acceso directo a visualización 3D para productos compatibles

Carrito de Compras Global (Cart Drawer) con Persistencia

MarketplaceCOMPLETADA • 2026-10-02

Drawer lateral interactivo para gestión de compras: adición de productos, selector de cantidades, cálculo automático de subtotal en COP y persistencia en LocalStorage.

Entregables Técnicos:

• Panel deslizante Cart Drawer con animación fluida y backdrop blur• Gestión de cantidades (incrementar, decrementar, eliminar ítem)• Cálculo de impuestos y costos de envío estimados para Colombia

Sistema del Banco de Reciclaje y Créditos Circulares

Marketplace

Módulo interactivo que permite a los usuarios canjear plástico reciclado por descuentos y créditos aplicables a compras en el marketplace.

Entregables Técnicos:

• Calculadora de equivalencia: Kilos de plástico reciclado = Descuento COP• Formulario de registro y generación de código de entrega en puntos aliados• Aplicación de cupones automáticos en el carrito de compras

Modelado de Base de Datos e Inventario en Supabase / Prisma

Marketplace

Esquema relacional en Supabase (PostgreSQL) para gestionar productos, variantes (tallas de ropa Dinamita, colores de Gomunator), stock en tiempo real y registro de órdenes.

Entregables Técnicos:

• Tablas Prisma: Product, ProductVariant, Category, Order, OrderItem• Control de inventario con transacciones ACID para evitar sobreventa• API routes para consulta y sincronización de catálogo (/api/hibrido/products)

Fase 4: Pasarela de Pagos Transaccional, Responsive & Go-Live

Semanas 7 y 8 • Wompi/Bold, QA Móvil & Producción

0 / 4 tareas0% completado

Integración de Pasarela de Pagos (Wompi / Bold)

Pasarela de Pagos

Conexión con pasarela de pagos nacional para procesar pagos seguros en Colombia vía PSE, tarjetas de crédito/débito, Nequi y Bancolombia.

Entregables Técnicos:

• Integración de widget y checkout con Wompi o Bold API• Generación de integrity signatures criptográficas para evitar manipulación de montos• Página de confirmación de orden (/hibrido/checkout/success y /hibrido/checkout/failed)

Webhooks Criptográficos y Notificaciones de Pedido

Pasarela de Pagos

Endpoint para recibir la confirmación de pago de la pasarela, actualizar inventario, generar factura digital y disparar notificaciones automáticas por correo y WhatsApp.

Entregables Técnicos:

• API Route /api/hibrido/webhooks/payment con validación de firma y checksum• Manejo de estados: PENDING, APPROVED, DECLINED, VOIDED• Plantilla de confirmación de pedido con número de guía de despacho

Auditoría Responsive Móvil y Optimización Core Web Vitals

Infraestructura / Cloud

Verificación exhaustiva en dispositivos móviles iOS y Android. Optimización de rendimiento para lograr LCP < 1.8s, CLS 0 y 60 FPS en navegación y visores 3D.

Entregables Técnicos:

• Inspección de breakpoints móviles (375px a 1440px)• Optimización de carga de texturas 3D con dpr controlado para pantallas Retina• Configuración de caché HTTP y compresión Brotli

Despliegue en Producción y Vinculación de Dominio

Infraestructura / Cloud

Puesta en marcha final de la plataforma web en infraestructura Vercel, vinculación con el dominio oficial del cliente (laboratoriohibrido.com) y entrega formal.

Entregables Técnicos:

• Configuración de DNS y aprovisionamiento de certificados SSL automáticos• Indexación en Google Search Console y Sitemap XML generado dinámicamente• Manual de usuario y entrega de repositorio en GitHub a la organización Híbrido

Fase 5: Panel del Administrador (Backoffice) & Control Operativo

Semanas 8 y 9 • Gestión de Catálogo, Pedidos Wompi & Reciclaje

0 / 4 tareas0% completado

Autenticación y Control de Acceso Administrativo

Panel Administrador

Módulo de inicio de sesión seguro para el equipo de Híbrido Lab con protección de rutas (/admin/*), sesiones cifradas y control de roles.

Entregables Técnicos:

• Pantalla de login administrativo en /admin/login• Middleware de protección de rutas contra accesos no autorizados• Gestión de sesiones seguras y cierre de sesión

Gestión de Catálogo, Precios e Inventario (CRUD Multi-División)

Panel Administrador

Interfaz centralizada para crear, editar, pausar y eliminar productos de las 3 divisiones (Bye Pelos, Plástico con final feliz, Dinamita), ajustando precios y stock.

Entregables Técnicos:

• Tabla dinámica de productos con búsqueda y filtro por división• Formulario para alta y edición de productos con variantes y switch de visor 3D• Actualización rápida de stock y precios sin recargar página

Monitor de Pedidos, Despachos y Conciliación Wompi

Panel Administrador

Bandeja de pedidos en tiempo real con detalle de facturación, estado de pago en Wompi (Aprobado, Pendiente, Rechazado) y actualización de guías de envío.

Entregables Técnicos:

• Bandeja de pedidos con detalle del cliente (dirección, ciudad, celular, correo)• Conciliación con referencia y ID de transacción de Wompi• Actualización de estado logístico: En Preparación, Despachado (con transportadora) y Entregado

Métricas de Ventas y Gestión del Banco de Reciclaje

Panel Administrador

Panel de métricas consolidadas de facturación y control de la iniciativa Banco de Reciclaje (registro de plástico acopiado y generación de cupones de descuento).

Entregables Técnicos:

• Dashboard analítico con ventas por división, ticket promedio y método de pago predominante• Control de cupones de descuento activos (ej: RECICLA10) y porcentaje de descuento• Contador acumulado de impacto ecológico (kilos de plástico transformados en el laboratorio)