Bellum | Caso de estudio

Rol: Full-stack · CMS a medida
Tipo de trabajo: Trabajo para cliente
Industria: Administración de consorcios

Resumen

Bellum es una plataforma de nivel profesional construida para asociaciones de propietarios (HOA) y consorcios de condominios que buscan tercerizar su gestión financiera, reportes y operaciones de back-office. La plataforma funciona a la vez como sitio de marketing y como hub de servicios gestionado por contenido, permitiendo a directivos y administradores explorar los servicios, solicitar propuestas y acceder a recursos financieros detallados — todo a través de una experiencia pulida y rica en animaciones. En el corazón vive un potente panel de administración que convierte al sitio entero en una superficie totalmente editable: cada página de servicio, artículo de blog, imagen de hero, FAQ, testimonio, bloque de precios y flujo de propuesta puede actualizarse en tiempo real desde un dashboard seguro, con los cambios commiteados directo al repositorio — sin base de datos, sin depender del desarrollador, sin downtime. Las funcionalidades incluyen un sistema de páginas de servicio multi-variante, un CMS basado en git con panel de administración visual completo, un flujo de propuestas multi-paso, un motor de blog, integración de email transaccional y una capa visual con Three.js.

El desafío

Los directivos de las HOAs suelen estar saturados por la complejidad financiera — presupuestos, cobranzas, pagos, comunicación con propietarios — con herramientas muy limitadas para evaluar y contratar ayuda profesional. Y del otro lado, la propia firma administradora normalmente no tiene una forma sencilla de mantener actualizado su sitio de marketing, su catálogo de servicios y su flujo de propuestas sin tener que volver al desarrollador cada vez. Bellum resuelve ambos lados: las asociaciones reciben un catálogo de servicios claro y segmentado con múltiples variantes de layout, que les permite entender rápidamente lo que se ofrece, comparar servicios y enviar propuestas a medida — todo dentro de una experiencia rápida, optimizada para SEO y visualmente atractiva. Y el equipo de Bellum, a su vez, accede a un panel administrativo completo para gestionar cada pieza de contenido del sitio — servicios, precios, artículos del blog, FAQs, medios del hero, testimonios y plantillas de propuestas — de forma totalmente autónoma y con control de versiones incorporado.

Enlaces

Repositorio de GitHub

Privado — proyecto de cliente

Construido con

Next.js

React

TypeScript

SCSS

GSAP

Three.js

React

Resend

Node.js

GitHub Contents API

Vitest

ESLint

Vercel

Entregables clave

Panel de administración completo que permite al equipo de Bellum editar cada sección del sitio (servicios, precios, blog, FAQs, medios del hero, testimonios, flujo de propuestas, navegación) a través de un dashboard visual pulido — sin SQL, sin CLI y sin desarrollador en el medio.
Diseño e implementación de una arquitectura de CMS basada en git que potencia el panel: sistema de archivos local en desarrollo, commits vía GitHub Contents API en producción (Vercel), habilitando edición de contenido sin base de datos tradicional y dejando un audit trail completo de cada cambio en el historial de git.
Sistema de páginas de servicio multi-variante (Variante A, B, C) impulsado por configuración JSON, permitiendo layouts flexibles por servicio sin duplicar rutas — las variantes se cambian desde el panel con un solo clic.
Capa rica de animaciones con GSAP (parallax activado por scroll, timelines de entrada escalonadas, efectos fade con scrub) en todas las secciones principales, pensada para sentirse premium sin sacrificar rendimiento.
Integración de Three.js con React Three Fiber para fondos de escena 3D basados en partículas, con carga dinámica y mejora progresiva.
Endurecimiento de las rutas API de contacto y propuestas con allowlist de origen, campos honeypot, tiempo mínimo de envío, escapeo HTML y rate limiting en memoria.
Sistema de emails transaccionales con Resend para envíos de contacto y notificaciones de propuestas, con plantillas con branding totalmente editables desde el panel de administración.
Implementación SEO completa: sitemap dinámico, robots.txt, metadata Open Graph, JSON-LD para FAQ y datos estructurados de Organización — regenerados automáticamente cada vez que se cambia contenido desde el panel.
Arquitectura SCSS mobile-first con diseño modular de componentes, tipografía responsive fluida, hero carousel con crossfade suave y un sistema de diseño consistente con variables y mixins propios — impecable desde teléfonos de 320px hasta desktops ultra-wide.