Ginásio Demonstration project
Presa — bouldering gym with a wall that changes every Monday
A chalk-and-rock site for a Marvila bouldering gym: an interactive SVG wall map with five sectors and grade-tape colours, a genuinely weekly deterministic route reset, a live turnstile occupancy dial with the day's expected curve and best quiet hours, and a beginner funnel from taster session to course cohorts — all CSS and inline SVG.
feitura.pt/demo/presa — Live
A bouldering gym in a Marvila warehouse — 900 m² of wall, routes reset weekly, sauna on Fridays, a café with proper flat whites — answers the same three Instagram DMs all day: is it packed, what's new, how do I start. The site has to answer all three on the page: a turnstile-counted occupancy meter, a browsable wall that honestly changes every Monday, and a beginner funnel that fills the four-week course. Community first, zero neon-fitness clichés.
What's inside
- Chalk-paper and basalt-ink design system where route-tape colours (verde to preto) are used only to mean grades
- Interactive SVG wall elevation — five sectors (Slab, Dihedral, Prow, Roof, Traverse) with 6–10 tappable hold-shaped routes each
- Genuinely weekly wall: routes, grades, setters and joke names are hashed from the week number, so Monday really changes the map
- Grade-band filter chips plus a 'new this week' toggle — the freshly reset sector pulses (statically marked under reduced motion)
- Route detail card with setter, weekly send count and a flash-percentage meter, fully keyboard-accessible with aria labels
- Turnstile occupancy module: a dial with ~people right now, comfort status, and 'we count entries and exits — this is not a guess' honesty
- Expected-curve bar chart per weekday with lunch dips, 18–21h peaks and the three quietest upcoming hours as chips
- Three-path beginner funnel: taster session form, course cohorts with deterministic seats left, and a weekly bring-a-friend code
- Reset calendar mapping the next five Mondays to the sector each one renews, tied to the wall module
- Mono price table with no-contract promise, safety-rules accordion, café menu, testimonials and full PT/EN bilingual copy
Build log
- Art direction — chalk paper and basalt tokens, grade-tape functional palette, hold-shape SVG studies, hatched crash-pad strips
- Signage hero with stacked display type, occupancy chip, abstract warehouse-wall scene, sticky nav with PT/EN toggle
- The wall engine — week-hashed routes per sector, grade distribution, joke-name cycle, setters, sends and flash percentages
- Wall UI — SVG elevation with five sectors, grade filters, new-this-week toggle, keyboard access and the route detail card
- Occupancy module — turnstile dial, deterministic weekday curves with lunch dip and evening peak, best-hours chips, day selector
- Beginner funnel — three entry cards, cohort picker with seats left, enrol form, what-to-bring confirmation, friend code
- Reset calendar, prices, training and sauna, café, community and safety sections; EN pass, contrast and reduced-motion audit
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
98
Performance
100
Accessibility
100
Best practices
100
SEO