Teatro Demonstration project
Cena — independent theatre with a seat map you reserve from
A velvet-dark site for a ninety-seat theatre in Braga: three plays with dated performances and seats left, a tappable nine-by-ten seat map with two price zones, taken seats, an aisle and wheelchair places, up to four seats per reservation with a running total, and a reservation held until thirty minutes before. No agency, no fees.
feitura.com/demo/cena — Live
A small theatre cannot afford a ticketing platform's fees and its audience hates them. The site has to do the one thing platforms do well — let people pick their seat — without the platform, and keep the reservation honest: held, not sold, until the door.
What's inside
- Season: three plays with author, duration and age rating, six performances with weekday, time and seats left; sold-out performances stay visible but cannot be chosen
- Seat map: nine rows of ten drawn in CSS, zone A/B colouring, taken seats, a centre aisle, two wheelchair places, accessible labels per seat, and a four-seat cap with a running total
- Your seats tray with row/seat labels, zone, price and remove buttons; the reservation button wakes only with seats
- Reservation sheet carrying play, performance, seats and total; inline validation, front-end only
- Two prices without fees and a concession line; the theatre in numbers, map, FAQ that explains a reservation is not a ticket
- Curtain panels drawn in CSS in the hero, tall serif display, one curtain-red accent and bronze for what is taken — no photography
- Bilingual PT/EN, Escape-closable dialog, focus management, reduced-motion aware
Build log
- Art direction — velvet black, cream ink, curtain red, bronze; tall serif; the curtain
- Season data, performances with taken seats, choose flow
- Seat map: grid, zones, aisle, wheelchair places, labels, four-seat cap, tray
- Reservation sheet, prices, theatre and map
- FAQ, bilingual copy pass, keyboard and 375px checks
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript