Sitio comercial de Dalem Conecta
Sitio web estático que presenta Dalem Conecta a las agencias de viaje, rápido, con buen SEO y en producción.
Rol: Diseño y desarrollo front-end
- Astro
- TypeScript
- CSS
- Cloudflare Pages

Problema
Dalem Conecta ya funcionaba como producto, pero las agencias de viaje tenían que enterarse de que existía y entender en pocos segundos qué hacía. Una agencia que busca un CRM compara varias opciones en el celular, entre llamadas y mensajes, y no lee páginas largas. Si el sitio tarda en cargar o no explica el valor enseguida, la visita se pierde.
El sitio también tenía que ser fácil de encontrar. Casi todos sus visitantes llegan desde un buscador, así que el texto, los títulos y los datos estructurados importan tanto como el diseño. Y como lo mantiene una sola persona, tenía que ser barato de alojar y simple de actualizar.
Solución y funciones clave
El sitio comercial es una página estática generada con Astro y publicada en Cloudflare Pages. Está separado de la aplicación a propósito: puede cambiar de texto o de diseño sin tocar el producto, y no depende de ninguna API. Estas son sus piezas principales:
- Una primera pantalla que explica qué hace el CRM y ofrece pedir una demo por WhatsApp, con un mensaje distinto según el botón.
- Secciones que recorren el ciclo de una agencia: cotizar, vender, cobrar y acompañar, además de las funciones para mayoristas y minoristas.
- Una comparación con las hojas de cálculo y las preguntas frecuentes, para resolver las dudas más comunes sin salir de la página.
- Tema claro y oscuro según el dispositivo, con un botón para cambiarlo.
- Fuentes autoalojadas, sin pedidos a servicios de terceros mientras se navega, y un conjunto reducido de estilos propios.
- Tres páginas de destino con contenido propio, pensadas para las búsquedas que hacen las agencias.
Rendimiento
Astro entrega HTML ya generado y casi no envía JavaScript. Las imágenes se sirven en formatos modernos y con tamaños responsivos, las fuentes se cargan desde el mismo dominio y las animaciones se limitan a lo que no cuesta rendimiento. El objetivo es que la página sea utilizable de inmediato en un celular con conexión normal, que es como la mayoría de los asesores la va a abrir.
SEO técnico
Cada página tiene su título, su descripción, su dirección canónica y su imagen para compartir en redes. Además incluye datos estructurados en JSON-LD que describen el producto, la organización y las preguntas frecuentes, un mapa del sitio y un archivo de robots. El HTML es semántico, con un solo título principal por página y textos alternativos en las imágenes. Nada de esto se ve a simple vista, pero es lo que hace que un buscador entienda de qué trata cada página.
Despliegue
El repositorio está conectado a Cloudflare Pages: cada cambio aprobado se compila y se publica solo, con cabeceras de caché largas para los archivos con huella y cabeceras de seguridad para el resto. Es gratis, rápido en todo el mundo y no requiere servidor propio. Para una página que cambia pocas veces al mes, es una infraestructura que casi no da trabajo.
El resultado es un sitio ligero que carga rápido y que cualquiera puede visitar ahora mismo, con la información justa para que una agencia decida si quiere ver una demostración del producto.
Arquitectura
Diagrama simplificado; omite detalles internos por privacidad.
- El navegador pide la página y Cloudflare Pages la sirve desde la red más cercana, con caché larga.
- El sitio es HTML generado de antemano con Astro, casi sin JavaScript.
- Cada cambio aprobado en el repositorio se compila y se publica solo.
- Desde el sitio, el visitante pasa a la aplicación, que es independiente.
Decisiones técnicas
Astro estático, sin JavaScript por defecto, en lugar de una aplicación de una sola página.
- Por qué
- El sitio es casi todo contenido. Entregar HTML ya generado hace que cargue rápido incluso en celulares modestos y deja el texto listo para los buscadores.
- Trade-off
- Cualquier interacción que necesite estado en el cliente exige añadir un poco de JavaScript a propósito, en lugar de tenerlo gratis con un framework de cliente.
Los datos de las secciones viven en archivos aparte, no dentro de los componentes.
- Por qué
- Cambiar un texto o una cifra no obliga a tocar el diseño, y se reduce el riesgo de romper una página por un cambio de contenido.
- Trade-off
- Hay un nivel más de indirección: para ver una sección completa hay que mirar el componente y su archivo de datos.
Tema claro y oscuro con un script mínimo en la cabecera, antes del primer pintado.
- Por qué
- Respeta la preferencia del dispositivo y evita el parpadeo de un tema equivocado al cargar.
- Trade-off
- Es un script bloqueante, pequeño pero obligatorio, que hay que mantener muy corto para no costar rendimiento.
Galería

Mi rol
Diseñé y construí el sitio completo: la estructura de las páginas, el sistema visual con tema claro y oscuro, el SEO técnico y el despliegue. Lo mantengo y lo ajusto según lo que muestran las visitas y las consultas de las agencias.