Fitness Demonstration project
MÉTODO — boutique training studio
A loud, high-energy site for a small-group training studio: a working weekly timetable with day filters, three membership plans and a free-trial funnel — all AA-accessible on a near-black, electric chartreuse identity.
feitura.pt/demo/metodo — Live
A boutique strength studio in Queluz caps every class at 8 people and needs a site that feels as intense as the training floor. It must sell the coaching method, show the live weekly timetable per day, present three monthly plans and convert visitors into free trial bookings — mobile-first, since most sign-ups come from Instagram.
What's inside
- Kinetic brand system: electric chartreuse on near-black, brutal condensed type, skewed accents and diagonal section breaks
- Interactive weekly timetable with day filter, per-class coach, duration and live spots-left badges
- Four signature class formats presented with custom SVG line iconography
- Three-tier pricing (EUR/month) with a featured plan and no-commitment messaging
- Free trial-class booking form with validation and inline demo confirmation
- FAQ accordion covering onboarding, class caps and cancellation policy
- Coach profiles with abstract gradient art blocks instead of stock photos
- Reduced-motion support, AA contrast and 44px+ touch targets throughout
- Fully self-hosted: variable fonts, zero external requests
Build log
- Art direction + design tokens: chartreuse/near-black palette, condensed display type, diagonal grid
- Hero, marquee and stats band; method section with three-phase framework
- Class formats with custom SVG icons + weekly timetable with day-filter state
- Pricing tiers, coach profiles and FAQ accordion; copywriting pass in PT-PT
- Trial-class form flow, accessibility audit (contrast, reduced motion, touch targets), mobile polish
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
Lighthouse
95
Performance
100
Accessibility
100
Best practices
100
SEO