Saltar al contenido
Trabajos01 / 03

/trabajos/hb-construcciones

Una web para que pedir presupuesto sea tan fácil como mandar un WhatsApp

HB ConstruccionesReformas integrales y piscinasOnline · 2026hb-construcciones.vercel.app
hb-construcciones.vercel.app
Portada de la web de HB Construcciones en escritorio, con el titular, los botones de WhatsApp y una reseña de clientes

El reto

HB Construcciones hace reformas integrales, piscinas, cocinas, baños y ampliaciones en la zona oeste de Madrid. No tenía web: todos sus clientes llegaban por contactos y recomendaciones. Necesitaban salir del boca a boca con una web que transmitiera confianza a alguien que va a gastar miles de euros en su casa y que convirtiera esa confianza en una conversación.

La solución

WhatsApp como canal principal

Los clientes de reformas prefieren escribir a rellenar formularios, así que todos los botones llevan a WhatsApp, y el formulario abre la conversación con el mensaje ya preparado.

Barra fija en el móvil

con "Llamar" y "WhatsApp", siempre a un toque.

Respuestas antes de que pregunten

Preguntas frecuentes sobre licencias de obra, plazos, presupuesto y garantía: las dudas que frenan a un cliente antes de escribir.

Pruebas reales

Galería de obras, vídeos grabados en la obra y reseñas de sus clientes.

Pensada para buscar en local

Contenido orientado a búsquedas de reformas y piscinas en su zona.

Galería de obras de HB Construcciones en escritorio: una cocina montada, una escalera de piedra y una fachada de ladrillo en obra
Galería de obras · escritorio
Barra fija de la web de HB en el móvil, con los botones Llamar y WhatsApp siempre visibles
Barra fija · móvil

Propuesta de identidad

Diseñé una propuesta de logo con un kit completo (color, negativo, monocromo e icono en vectorial). El cliente prefirió mantener su logo original, así que la web usa su identidad actual.

  • Logo de HB Construcciones a color
    Color
  • Logo de HB Construcciones en negativo
    Negativo
  • Logo de HB Construcciones en monocromo
    Monocromo
  • Icono de HB Construcciones
    Icono

Resultado

HB pasa de depender solo del boca a boca a tener una web propia, online desde octubre de 2026. Es reciente, así que este caso se actualizará con resultados reales (consultas recibidas por WhatsApp) en cuanto haya datos.

Para desarrolladores

Base

Next.js (App Router) + React 19 + TypeScript.

Interfaz

Tailwind CSS 4, Framer Motion para animaciones moderadas, iconos Lucide y tipografías Geist cargadas con next/font.

Medios

Pipeline de medios propio: scripts en Node/TypeScript que extraen fotogramas de los vídeos de obra y procesan galería y vídeos a WebP con sharp.

SEO local

SEO local: datos estructurados JSON-LD de LocalBusiness, metadatos y lang configurados.

Conversión

Conversión: botón flotante de WhatsApp, barra de contacto fija en móvil y formulario que construye el mensaje de WhatsApp con los datos del usuario.

Despliegue

Vercel con despliegue automático desde GitHub · Vercel Analytics · ESLint.

Método

Desarrollo guiado por especificación (spec.md + tasks.md).