Leo Barber Studio

Leo Barber Studio es una barbería de El Vendrell. Querían una web que no pareciera una plantilla de barbería: nada de fondos de madera y tijeras vectoriales. El encargo era una estética urbana, de grafiti, que se pareciera al local.

El planteamiento

Una sola página, scroll vertical, sin backend y sin CMS. La barbería no necesita publicar contenido: necesita que la encuentren, que vean el trabajo y que reserven. Todo lo demás sobra y encarece el mantenimiento.

Las reservas van a tres canales externos que el cliente ya usaba —WhatsApp, Instagram y Go Barber— en lugar de construir un sistema propio. Montar un booking a medida para un negocio que ya tiene sus canales funcionando habría sido resolver un problema que no existía.

Comprometerse con la estética

La parte interesante fue no quedarse a medias con el tema. Un diseño "seguro" con tipografía neutra y mucho blanco habría sido más rápido y no habría servido:

• Paleta cerrada a negro, blanco hueso y gris acero. Sin colores nuevos.
• Cuatro tipografías con carácter —Bebas Neue, Permanent Marker, Rubik Mono One e Inter— cargadas con next/font para no penalizar el rendimiento.
• Cursor personalizado tipo spray con mix-blend-mode: difference, solo en escritorio.
• Grano global con turbulencia SVG y textura de pared con gradientes radiales.
• Trazos SVG que se "pintan" en el hero animando stroke-dashoffset.
• Marquee rotado un grado con animación CSS infinita.
• Botones con clip-path inclinado y texto stencil con -webkit-text-stroke.
• Fotos en blanco y negro que se colorean al pasar el ratón.
• El logo de la navegación es grande al cargar y se encoge al hacer scroll.

Decisiones técnicas

Next.js 14 con App Router por el renderizado en servidor, la optimización de imágenes y el despliegue directo a Vercel. Para una landing estática es casi excesivo, pero deja la puerta abierta a añadir rutas sin rehacer nada.

Lenis para el scroll suave, que es la mitad de la sensación "urbana" de la web. Los reveals van con whileInView de Framer Motion y viewport={{ once: true }}, para que no se repitan al subir y bajar.

Servicios y horario viven como arrays de datos en sus componentes, no incrustados en el JSX. Cambiar un precio es editar una línea, no bucear en el marcado. En un negocio que ajusta tarifas cada temporada, eso importa.