Obsidian: una web oscura y basada en fotos para una barbería premium en Alicante

El reto

Obsidian es una barbería premium con estudio de tatuaje propio en Alicante. Sus clientes son vecinos de la ciudad y los muchos extranjeros y visitantes que pasan por ella, así que la web necesitaba español, inglés y ruso desde el principio.

En este negocio la web tiene una sola tarea: que el visitante quiera reservar y que reservar le cueste un toque. Una barbería se elige por los ojos, así que el diseño tenía que construirse alrededor de las fotografías, no del texto.

Diseñada alrededor de las fotos

La web solo tiene tema oscuro: un aspecto negro con detalles dorados que encaja con el local y deja que las fotos lleven la página.

• Un comparador de antes y después, pensado para pantalla táctil y ratón, muestra la transformación real: lo que cambia de verdad un corte.
• El equipo aparece con enlaces al Instagram de cada barbero, y la galería de fotos se abre a pantalla completa.
• El estudio de tatuaje tiene su propia sección con estilos, precios de partida y una galería aparte de trabajos de tatuaje.
• Productos y tarjetas regalo para la línea de cuidado de la barbería y para regalar.

Precios claros, reserva en un toque

Los servicios tienen tres niveles - Normal, Premium y Luxury - con el precio de cada uno para el corte y para el corte con barba. El visitante ve qué recibe en cada nivel antes de elegir.

Cada botón "Reservar" lleva a la página de la barbería en Booksy, donde los clientes ya reservan y dejan sus reseñas. WhatsApp y el teléfono están siempre a mano. La web no tiene formularios propios, así que no recoge datos personales.

Confianza integrada

La valoración y el número de reseñas de Google se obtienen de la API de Google Places en cada compilación, así que la cifra de la página sigue a la real sin que nadie tenga que editarla.

Páginas con un propósito

Además de la página de inicio, la web tiene dos páginas de aterrizaje, cada una pensada para una pregunta concreta:

• El método Obsidian explica por qué un corte empieza con una consulta y un diagnóstico, frente al enfoque de "el mismo corte para todos".
• Tatuaje en vacaciones se dirige a quienes quieren tatuarse durante su estancia en España, con artistas que hablan inglés y una consulta gratuita por WhatsApp como primer paso.

Velocidad y buscadores

• La imagen principal se sirve en tamaños adaptados a cada pantalla, se precarga y tiene prioridad, porque es el elemento más grande de la primera pantalla.
• El CSS crítico va incrustado y el HTML comprimido; las fuentes se cargan como archivos aparte en lugar de incrustarse en la hoja de estilos.
• La página de inicio en español, el idioma principal del mercado local, está ajustada a las búsquedas de barbería en Alicante.
• Las versiones de idioma están enlazadas con hreflang, cada página tiene su URL canónica y las direcciones que no existen devuelven un 404 real.

Stack tecnológico

- Generador: Astro (compilación estática)
- Estilos: Tailwind CSS 4 + daisyUI 5 + @yatoday/astro-ui
- Partes interactivas: Svelte 5, PhotoSwipe
- Reservas: Booksy
- Valoraciones: API de Google Places, obtenidas al compilar
- CI/CD: GitLab CI → Cloudflare Pages

Resultado

Una web estática y rápida en tres idiomas que presenta la barbería como quiere que la vean: a través de su trabajo. Los precios son claros, la valoración siempre está al día y cada página lleva a Booksy o a WhatsApp. No hay servidor ni CMS que mantener.