Landing de conversión para un SaaS de gestión de gimnasios: el potencial cliente introduce sus datos reales y la calculadora le muestra exactamente cuánto ahorra — convirtiendo la decisión de compra de emocional a matemática, sin una sola llamada de ventas previa.
🚀 Impacto y Números
- Performance: 100/100 Lighthouse Score en producción
- Conversión: Flujo diseñado del “Dolor” (pagos actuales) → “Solución” (ROI visual proyectado)
- Interactividad: Feedback visual inmediato (<16ms) sin librerías de animación externas
- Bundle: CSS-only charts — cero dependencias de Recharts/Chart.js
⚡ Cómo está construido
Lógica financiera reactiva en cliente
- Proyecciones 1-10 años: cálculos actualizados en cada keystroke usando
requestAnimationFramepara contadores numéricos suaves — demuestra conocimiento del browser rendering cycle - Gráficos de barras CSS-only:
width: calc(value / max * 100%)con transición, sin importar Chart.js (~300KB ahorrados en bundle)
Sistema de diseño consistente con Radix UI
- Shadcn/UI & Radix (headless): componentes accesibles con ARIA completo sin sacrificar control visual total sobre los estilos
- CSS Variables + Tailwind: theming sin duplicar clases — un token cambia todo el sistema
🛠️ Stack
Core: React 18, TypeScript strict, Vite Styling: Tailwind CSS, Radix UI (headless), CSS Variables Tools: ESLint, Bun, Netlify Patterns: Component Composition, CSS-only data visualization
💼 Lo que este proyecto demuestra
Este proyecto demuestra que puedo:
- ✅ Pensar en el producto desde el negocio: una calculadora de ROI es una herramienta de ventas, no solo UI
- ✅ Tomar decisiones de bundle conscientes: elegir CSS sobre Chart.js cuando los datos lo justifican
- ✅ Usar el stack moderno estándar de la industria (React/TypeScript/Tailwind/Radix) con criterio real
Diferenciador clave: No es una landing page más con precios fijos — es una herramienta de ventas interactiva que convierte la decisión de compra en un cálculo objetivo.