OG Barber Studio
Barbería en Getafe: una página, dos botones y cero backend.
- Astro 5
- React 18
- TypeScript
- Tailwind 3
OG Barber Studio es una barbería de Getafe. La web es una sola página estática cuyo único trabajo es llevarte al botón de reservar: no gestiona citas, las delega en Booksy, y deja WhatsApp siempre a mano por si prefieres escribir en vez de pinchar. Astro y React, con JavaScript solo en los trozos que de verdad se mueven.
Servicios y precios Galería Ubicación y horario Reseñas
Una sola página y un solo objetivo
Todo el sitio es una ruta. Dentro hay ocho bloques en orden fijo —héroe, servicios, CTA de reserva, galería, barbero, reseñas, segundo CTA y ubicación— más un botón flotante de WhatsApp que no se va nunca de la esquina. No hay carrito, ni formulario, ni base de datos: reservar es un enlace a Booksy y contactar es un enlace a WhatsApp con el mensaje ya escrito. La dirección, el teléfono, el horario, Booksy, Instagram y TikTok viven en un único objeto del que tiran todos los componentes visibles: barra, héroe, pie, los CTA y el botón flotante. Los dos bloques de llamada a la acción son el mismo componente con props distintas, uno después de los precios y otro antes del pie, y la razón está escrita como comentario en el propio archivo.
Carga rápido porque casi nada es JavaScript
La web se genera entera antes de publicarse, así que lo que llega al móvil del cliente es HTML ya hecho: no hay que esperar a que nada se construya. Solo seis trozos necesitan código para funcionar, y cada uno se descarga cuando toca. El menú y la portada, desde el primer momento, porque se ven al abrir. Los servicios, la galería, la sección del barbero y el mapa, solo cuando bajas hasta ellos: si nunca llegas, nunca se descargan. Las reseñas y los dos botones de reserva no necesitan código en absoluto. El resultado es un sitio que abre casi al instante en una conexión de móvil, que es como lo va a ver la mayoría de la gente.
El comparador y el scroll del móvil
El comparador antes/después recorta la foto con clip-path y deja arrastrar el divisor. En escritorio es un rato de trabajo; en móvil no funcionaba, porque React registra onTouchStart de forma pasiva en la raíz y el navegador se queda el gesto. El arreglo está en el archivo y comentado: el listener de touchstart se engancha a mano sobre el nodo con passive:false, el de touchmove igual sobre window, y el contenedor lleva touch-none para decirle al navegador que ese gesto no le toca a él. Hay un commit dedicado solo a eso. Detalles del mismo bloque: el divisor arranca al 42% para que se vea que hay dos lados, y el aviso de «arrastra para comparar» desaparece en cuanto lo tocas por primera vez.
SEO local, peso de las fotos y despliegue
La cabecera lleva un JSON-LD de tipo HairSalon con dirección, coordenadas, el horario de lunes a sábado —partido de lunes a viernes— y los diez servicios con precio. A eso se suman Open Graph, Twitter Card, canonical, robots.txt y sitemap. Para el peso, un script propio pasa los JPEG por sharp con anchura y calidad distintas por archivo y anota cuánto ha bajado cada foto. El héroe va precargado con fetchpriority alta y las fotos de contenido con carga diferida. La configuración de despliegue cierra el círculo: caché inmutable de un año para imágenes y assets, y cinco cabeceras de seguridad. Visualmente todo se sostiene con dos tipografías y un único acento dorado centralizado en la config de Tailwind.
Detalles
Una ruta, cero backend
El sitio entero es una página estática: reservar es un enlace a Booksy y contactar un enlace a WhatsApp, así que no hay servidor que mantener.
Los datos del negocio, en un archivo
Dirección, teléfono, horario, Booksy, Instagram y TikTok en un único objeto del que tiran todos los componentes visibles.
Cada trozo se descarga cuando toca
El menú y la portada al abrir; el resto solo al llegar a esa sección. Las reseñas y los botones de reserva no descargan nada.
Arrastre táctil que no pelea con el scroll
El comparador engancha touchstart y touchmove con passive:false para que arrastrar en iOS y Android mueva el divisor y no la página.
Las animaciones no traen librería detrás
Las secciones aparecen al entrar en pantalla con cuarenta líneas propias, y el efecto se desconecta solo en cuanto termina.
¿Tienes algo parecido entre manos?
Si necesitas algo así —una landing, una web, un ERP o una herramienta que no encuentras hecha—, cuéntanoslo y te contestamos con cómo lo haríamos, cuánto llevaría y qué costaría.
Cuéntanos tu proyecto