Teatro Projeto de demonstração
Cena — teatro independente com um mapa da sala onde se reserva
Um site veludo-escuro para um teatro de noventa lugares em Braga: três peças com sessões datadas e lugares que sobram, um mapa da sala nove-por-dez tocável com duas zonas de preço, lugares ocupados, corredor e lugares para cadeira de rodas, até quatro lugares por reserva com total corrente, e uma reserva guardada até trinta minutos antes. Sem bilheteira intermediária, sem taxas.
feitura.com/demo/cena — Ao vivo
Um teatro pequeno não pode pagar as taxas de uma bilheteira online e o público detesta-as. O site tem de fazer a única coisa que as plataformas fazem bem — deixar as pessoas escolher o lugar — sem a plataforma, e manter a reserva honesta: guardada, não vendida, até à porta.
O que está lá dentro
- Temporada: três peças com autor, duração e classificação etária, seis sessões com dia da semana, hora e lugares que sobram; sessões esgotadas ficam visíveis mas não se escolhem
- Mapa da sala: nove filas de dez desenhadas em CSS, cores das zonas A/B, lugares ocupados, corredor central, dois lugares para cadeira de rodas, rótulos acessíveis por lugar, e limite de quatro lugares com total corrente
- Tabuleiro dos seus lugares com fila/lugar, zona, preço e botões para remover; o botão de reservar só acorda com lugares
- Folha de reserva que leva peça, sessão, lugares e total; validação inline, só front-end
- Dois preços sem taxas e uma linha de desconto; o teatro em números, mapa, FAQ que explica que uma reserva não é um bilhete
- Painéis de cortina desenhados em CSS no hero, display serifado alto, um único acento vermelho-cortina e bronze para o que está ocupado — sem fotografia
- Bilingue PT/EN, diálogo fechável com Escape, gestão de foco, movimento reduzido respeitado
Registo de construção
- Direção de arte — preto-veludo, tinta creme, vermelho-cortina, bronze; serifa alta; a cortina
- Dados da temporada, sessões com lugares ocupados, fluxo de escolha
- Mapa da sala: grelha, zonas, corredor, lugares para cadeira de rodas, rótulos, limite de quatro, tabuleiro
- Folha de reserva, preços, teatro e mapa
- FAQ, revisão do texto bilingue, verificações de teclado e a 375px
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript