Hergón Club — Hergón Club
Context
Hergón is an indoor padel club in the industrial estate of Plasencia (Cáceres, Spain): four covered courts, its own bar and terrace, and custom events, run by two young entrepreneurs. Its entire digital presence was an Instagram account. Anyone searching for the club on Google found a Maps listing and little else — no page showing the facilities, explaining the services, or making it clear how to book.
Bookings ran through a Google Form linked in the Instagram bio, a route that forces players into the app for something as basic as reserving a court. The club had no site of its own to support its local search presence, and no stable place gathering address, hours, services and contact details — information that until then was handled by answering direct messages one by one.
Result Hergón went from existing only on Instagram to owning its own site: a landing page that brings facilities, services and contact into a single scroll and puts WhatsApp booking one click away from anywhere on the page — built with no frameworks, no external dependencies and no build step.
- Project
- Hergón Club
- Client
- Hergón Club
- Year
- My role
- Project from start to finish — design, content and development: Art direction and interface design: type system (Archivo Black + Inter), palette and spacing scale centralised in CSS custom properties, a frosted-glass visual language layered over photography. Wrote all the copy in Spanish, from the main claim down to the microcopy on every service. Full front-end development: semantic markup, Grid and Flexbox layout, inline SVG iconography. Custom motion system: scroll-triggered reveals via IntersectionObserver, a cursor-following light halo smoothed by interpolation on requestAnimationFrame, and per-card spotlight lighting. Every effect degrades to static when the user requests reduced motion or browses from a touch device. Accessibility treated as a criterion, not a patch: aria-expanded on the menu, meaningful alt text, and support for prefers-reduced-motion and prefers-reduced-transparency. Packaged as a bespoke WordPress theme: custom PHP theme with proper asset enqueuing and filemtime cache busting, so the client edits content from the admin panel without touching code. Integrations: embedded Google Maps pointing to the club's real listing, and wa.me links with the booking message pre-filled. Client data audit: flagged directly in the code which information still needed confirming before launch, rather than inventing it.
- 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
