Clube de padel Demonstration project
Ponto de Ouro — padel club with a live court booking grid
A sporty-premium site for a Braga padel club: racing green, cream and metallic gold, condensed display type with scoreboard-mono details, a live day × court × hour booking matrix with peak-hour pricing, an interactive tournament bracket, lessons, membership tiers and quick-rules for newcomers — all CSS and inline SVG.
feitura.pt/demo/ponto-de-ouro — Live
A six-court padel club in Braga — four indoor, two outdoor — is turning players away by phone while courts sit empty at off-peak hours. The site has to make booking a court feel as fast as a golden point: a live grid of the next seven days where any free 90-minute block is one tap away, with honest per-player pricing. Around it, the club life: a summer tournament with a real bracket, a padel school with three levels, membership plans worth committing to, and the bar where every match actually ends.
What's inside
- Racing-green, cream and metallic-gold design system in scoped CSS — zero photography
- Condensed 850-weight display headlines with IBM Plex Mono scoreboard details
- Live booking grid: 7 day tabs × 6 courts × 10 blocks of 90 minutes with a deterministic availability engine
- Peak-hour logic — weekday evenings and weekend mornings scarcer and priced higher, indoor above outdoor
- Thumb-first horizontal grid with sticky court column, 48 px slots and per-player price summary
- Interactive tournament bracket — played quarter-finals with scores, tap any match for pairs, time and court
- Top-view padel court illustration in inline SVG with court-line section dividers
- Padel school levels with EUR pricing, coach badges, membership tiers with a benefits table
- Quick-rules accordion that explains the golden point the club is named after
- Fully bilingual PT/EN with a native toggle, AA contrast and reduced-motion-safe reveals
Build log
- Art direction and tokens — racing green, cream and gold palette, condensed display scale, top-view court SVG study, court-line divider motif
- Hero composition with golden-point ticker, stats strip, sticky nav with PT/EN toggle and section anchors
- Booking engine — deterministic availability hash, peak-hour and indoor pricing rules, seven rolling day tabs with past-slot handling
- Booking grid UI — horizontal scroll with sticky court column, slot states, selection summary with per-player price and demo-sink form
- Tournament bracket — eight pairs, three rounds, played and scheduled states, tap-to-expand match details card
- Padel school, coach badges, membership tiers with benefits table, quick-rules accordion and bar strip
- EN locale pass, contrast and touch-target audit, scroll reveals with reduced-motion fallback, tablet and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
97
Performance
100
Accessibility
100
Best practices
100
SEO