2026 · Diseño y desarrollo end-to-end · Agencia Xpandex
Seguridad Total 24
Captación para un asesor de alarmas, con la visita técnica como oferta central
- Astro 6
- Preact
- Tailwind CSS 4
- TypeScript
- Conversión
- Visita técnica gratuita
- Islas hidratadas
- Solo al ser visibles
- Salida
- Estática
La web por dentro
Capturas de la web en producción, a 1440 px y a 375 px.
Escritorio · 1440px
Móvil · 375px
Escritorio · 1440px
Móvil · 375px
Escritorio · 1440px
Móvil · 375px
Escritorio · 1440px
Móvil · 375px
Contexto
Un asesor independiente de sistemas de alarma para vivienda y negocio, sin marca de fabricante detrás. Su ventaja competitiva es precisamente esa: no vende el catálogo de nadie, va a la propiedad y diseña el sistema que hace falta. El problema es que eso no se ve en una web: todas las webs del sector se parecen y todas prometen lo mismo.
El encargo era convertir una diferencia de método en una diferencia visible.
Enfoque
- La visita es la oferta, no el producto. Todos los CTA del sitio llevan al mismo sitio: pedir el estudio gratuito. No hay tarifas, ni packs, ni configurador. Lo que se vende es el criterio de un técnico en tu salón.
- El riesgo antes que el equipo. La primera sección tras el hero no enseña cámaras: enumera seis situaciones concretas —vivienda vacía, ausencias largas, negocio cerrado de noche, atraco— porque quien busca una alarma está pensando en un miedo, no en un sensor.
- Detección, verificación, respuesta. El funcionamiento se explica en tres pasos antes de listar dispositivos. Un sistema profesional no es una caja que suena, y la web lo dice en ese orden.
- Astro con islas Preact hidratadas con
client:visible. Solo se hidrata lo interactivo, y solo al entrar en pantalla. El resto es HTML estático. - Paleta navy con rojo de alarma reservado estrictamente a la acción: el rojo solo aparece donde se puede pulsar.
Trabajo realizado
- Arquitectura Astro estática multipágina con islas Preact
- Sistema de diseño en tokens de Tailwind 4 sobre
@theme - Estructura de contenido: servicios, dispositivos y dos segmentos (hogar y negocio)
- Copy completo, orientado al riesgo real y sin promesas de resultado
- SEO técnico con schemas JSON-LD
- Accesibilidad WCAG 2.2 AA y
prefers-reduced-motionhonrado - Build estático y despliegue a producción
Resultado
En producción desde septiembre de 2026. La decisión de la que estoy más convencido es la de no poner precios: en un sector donde el visitante espera un comparador, la web pide una visita. Es menos tráfico y mejor conversación.
Nota sobre el trabajo
Proyecto desarrollado en Agencia Xpandex, donde llevo el ciclo completo: diseño, desarrollo, rendimiento, accesibilidad, SEO técnico y despliegue.
En corto
- ¿Qué es Seguridad Total 24?
- Web en Astro para un asesor independiente de sistemas de seguridad en hogar y negocio. La oferta no es un producto: es que un técnico vaya a la propiedad, encuentre los puntos ciegos y proponga el sistema. Todo el sitio está construido alrededor de esa visita.
- ¿Con qué está construido Seguridad Total 24?
- Seguridad Total 24 está construido con Astro 6, Preact, Tailwind CSS 4 y TypeScript. Carlos Ponce lo entregó en 2026 — Diseño y desarrollo end-to-end · Agencia Xpandex.
- ¿Qué destaca de Seguridad Total 24?
- Conversión: Visita técnica gratuita. Islas hidratadas: Solo al ser visibles. Salida: Estática.
- ¿Seguridad Total 24 está en producción?
- Sí. Seguridad Total 24 está publicado en seguridadtotal24.com desde 2026.