Hergón Club — Hergón Club
Contexto
Hergón es un club de pádel indoor en el polígono industrial de Plasencia (Cáceres): cuatro pistas cubiertas, bar y terraza propios y eventos a medida, gestionado por dos jóvenes emprendedores. Todo su escaparate digital era una cuenta de Instagram. Quien buscaba el club en Google encontraba una ficha de Maps y poco más: ninguna página donde ver las instalaciones, entender qué servicios ofrecían ni saber cómo reservar.
Las reservas dependían de un formulario de Google enlazado en la bio de Instagram, un circuito que obliga al jugador a pasar por la app para algo tan básico como pedir pista. El club no tenía un sitio propio que sostuviera su posicionamiento local ni un lugar estable donde reunir dirección, horarios, servicios y contacto — información que hasta entonces se resolvía respondiendo mensajes directos uno a uno.
Resultado Hergón pasa de existir solo en Instagram a tener web propia: una landing que concentra instalaciones, servicios y contacto en una sola página y deja la reserva por WhatsApp a un clic desde cualquier punto del scroll, construida sin frameworks, sin dependencias externas y sin proceso de build.
- Proyecto
- Hergón Club
- Cliente
- Hergón Club
- Año
- Mi papel
- Proyecto de principio a fin — diseño, contenido y desarrollo: Dirección de arte y diseño de interfaz: sistema tipográfico (Archivo Black + Inter), paleta y escala de espaciado centralizadas en custom properties de CSS, lenguaje visual de vidrio esmerilado sobre fotografía. Redacción de todos los textos en español, desde el claim principal hasta la microcopy de cada servicio. Desarrollo front-end completo: maquetación semántica, layout con Grid y Flexbox, iconografía en SVG inline. Sistema de movimiento propio: entradas por scroll con IntersectionObserver, halo de luz que sigue al cursor con suavizado por interpolación y requestAnimationFrame, y brillo local en tarjetas. Todos los efectos degradan a estático cuando el usuario pide menos movimiento o navega desde un dispositivo táctil. Accesibilidad como criterio, no como parche: aria-expanded en el menú, textos alternativos reales, y soporte de prefers-reduced-motion y prefers-reduced-transparency. Empaquetado como tema WordPress a medida: tema propio en PHP con encolado correcto de assets y cache busting por filemtime, para que el cliente edite el contenido desde el panel sin tocar código. Integraciones: Google Maps embebido apuntando a la ficha real del club, y enlaces wa.me con el mensaje de reserva pre-rellenado. Auditoría de datos del cliente: dejé señalado en el propio código qué información faltaba por confirmar antes de publicar, en lugar de inventarla.
- Stack
- Semantic HTML5 · CSS3 — custom properties, Grid, Flexbox · Glassmorphism via backdrop-filter · Vanilla JavaScript (ES6+, no frameworks, no build) · IntersectionObserver API · requestAnimationFrame · WordPress — (Custom Theme) · Google Maps Embed · wa.me links (WhatsApp) · Google Fonts — Archivo Black + Inter · Inline SVG · Responsive design · Accessibility — ARIA, prefers-reduced-motion, prefers-reduced-transparency
