Ginásio Projeto de demonstração
Presa — ginásio de escalada com uma parede que muda todas as segundas
Um site giz-e-rocha para um ginásio de bloco em Marvila: mapa SVG interativo da parede com cinco setores e cores de fita por grau, reset semanal determinístico que muda mesmo a parede, mostrador de ocupação em direto contado no torniquete com a curva prevista do dia e as melhores horas, e um funil de principiantes da sessão experimental às turmas do curso — tudo CSS e SVG inline.
feitura.pt/demo/presa — Ao vivo
Um ginásio de bloco num armazém de Marvila — 900 m² de parede, blocos renovados semanalmente, sauna às sextas, um café com flat whites a sério — responde às mesmas três DMs de Instagram o dia inteiro: está cheio, o que há de novo, como é que se começa. O site tem de responder às três na própria página: um contador de ocupação ligado ao torniquete, uma parede navegável que muda mesmo todas as segundas e um funil de principiantes que enche o curso de quatro semanas. Comunidade primeiro, zero clichés de ginásio néon.
O que está lá dentro
- Sistema de design papel-de-giz e tinta-basalto onde as cores de fita (verde a preto) significam apenas graus
- Alçado SVG interativo da parede — cinco setores (Placa, Diedro, Proa, Teto, Travessia) com 6–10 blocos em forma de presa cada
- Parede verdadeiramente semanal: blocos, graus, setters e nomes com piada saem do hash do número da semana — a segunda muda mesmo o mapa
- Chips de filtro por grau e toggle 'novas desta semana' — o setor renovado pulsa (marcado estaticamente com movimento reduzido)
- Cartão de detalhe do bloco com setter, envios da semana e barra de percentagem de flash, acessível por teclado com aria
- Módulo de ocupação do torniquete: mostrador com ~pessoas agora, estado de conforto e a honestidade de 'contamos entradas e saídas — não é um palpite'
- Gráfico de barras da curva prevista por dia da semana com quebra de almoço, pico das 18–21h e as três horas mais calmas em chips
- Funil de principiantes com três caminhos: sessão experimental, turmas do curso com lugares determinísticos e código semanal traz-um-amigo
- Calendário de resets que liga as próximas cinco segundas ao setor que cada uma renova, amarrado ao módulo da parede
- Tabela de preços em mono com promessa sem contrato, acordeão de regras de segurança, menu do café, testemunhos e copy bilingue PT/EN completa
Registo de construção
- Direção de arte — tokens papel de giz e basalto, paleta funcional das fitas de grau, estudos SVG das presas, faixas de colchão tracejadas
- Hero de sinalética com tipografia empilhada, chip de ocupação, cena abstrata da parede do armazém, navegação fixa com toggle PT/EN
- Motor da parede — blocos por setor com hash da semana, distribuição de graus, ciclo de nomes com piada, setters, envios e percentagens de flash
- UI da parede — alçado SVG com cinco setores, filtros por grau, toggle das novas da semana, acesso por teclado e cartão de detalhe do bloco
- Módulo de ocupação — mostrador do torniquete, curvas determinísticas por dia com quebra de almoço e pico da noite, chips das melhores horas, seletor de dia
- Funil de principiantes — três cartões de entrada, escolha de turma com lugares, formulário de inscrição, confirmação com o que trazer, código de amigo
- Calendário de resets, preços, treino e sauna, café, comunidade e segurança; passagem EN, auditoria de contraste e movimento reduzido
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
98
Performance
100
Accessibility
100
Best practices
100
SEO