Fitness Projeto de demonstração
MÉTODO — estúdio de treino boutique
Um site enérgico para um estúdio de treino em turmas pequenas: horário semanal funcional com filtro por dia, três planos de adesão e funil de aula experimental — tudo acessível AA sobre uma identidade negra e chartreuse elétrico.
feitura.pt/demo/metodo — Ao vivo
Um estúdio de treino boutique em Queluz limita cada turma a 8 pessoas e precisa de um site tão intenso como a sala de treino. Tem de vender o método de coaching, mostrar o horário semanal por dia, apresentar três planos mensais e converter visitas em marcações de aula experimental — mobile-first, porque a maioria das adesões chega pelo Instagram.
O que está lá dentro
- Sistema de marca cinético: chartreuse elétrico sobre quase-preto, tipografia condensada brutal, acentos inclinados e cortes diagonais entre secções
- Horário semanal interativo com filtro por dia, coach, duração e vagas disponíveis por aula
- Quatro formatos de aula assinatura apresentados com iconografia SVG desenhada à medida
- Preçário em três níveis (EUR/mês) com plano em destaque e mensagem sem fidelização
- Formulário de aula experimental grátis com validação e confirmação inline de demonstração
- Acordeão de perguntas frequentes sobre integração, lotação das turmas e cancelamento
- Perfis dos coaches com blocos gráficos abstratos em vez de fotografias de banco
- Suporte a reduced-motion, contraste AA e alvos de toque de 44px+ em todo o site
- Totalmente self-hosted: fontes variáveis, zero pedidos externos
Registo de construção
- Direção de arte + design tokens: paleta chartreuse/quase-preto, tipografia condensada, grelha diagonal
- Hero, marquee e faixa de números; secção do método com o ciclo de três fases
- Formatos de aula com ícones SVG à medida + horário semanal com filtro por dia
- Planos, perfis dos coaches e acordeão de FAQ; revisão de copy em PT-PT
- Fluxo do formulário de aula experimental, auditoria de acessibilidade (contraste, reduced motion, alvos de toque) e polimento mobile
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
Lighthouse
95
Performance
100
Accessibility
100
Best practices
100
SEO