Cowork Demonstration project
Posto — neighbourhood cowork with a live floor plan
An architectural-sheet website for a 42-desk cowork in a Campanhã warehouse: an interactive SVG floor plan shows exactly which desks and meeting-room hours are free today, and books them with a mock MB Way checkout — no stock photography, all line drawing.
feitura.pt/demo/posto — Live
Two partners converting a 1943 warehouse in Campanhã into a 42-desk neighbourhood cowork need a site that sells what actually converts: what is free right now. They want visitors to see the real floor, tap a free desk at 23:40 and walk in the next morning with a day pass already paid — plus plans, two meeting rooms and a visit form, all with the personality of the house.
What's inside
- Architectural-sheet design system: warm concrete, blueprint ink, signal cobalt, grid-paper background and corner-tick frames
- Interactive SVG floor plan drawn to scale — walls, door arcs, kitchen, phone booth and 42 clickable desks
- Deterministic availability engine: fixed, free and reserved desks re-roll per day, identical on server and client
- Date strip for today plus the next five working days with a live free-desk counter
- Day-pass checkout with mock MB Way payment and a QR-style entry code drawn in SVG
- Meeting rooms bookable by the hour from the plan, with a 09:00–19:00 slot grid
- Keyboard-first plan: every free desk and room is tabbable with descriptive aria labels
- Plans section with annual −15% toggle, house-rules and day-in-the-life storytelling sections
- Axonometric warehouse hero illustration and geometric member avatars, all inline SVG
- Mobile bottom-sheet booking panel that becomes a side sheet on desktop, reduced-motion safe
Build log
- Art direction — concrete/ink/cobalt tokens, grid-paper background, corner-tick sheet frames, axonometric warehouse studies
- Floor plan drawn in SVG: walls, door arcs, kitchen, wc, booth, two rooms and seven desk islands laid out to scale
- Availability engine — deterministic hash per desk and day, fixed/free/reserved states, date strip and live counters
- Desk booking flow: side panel, specs, mock MB Way payment and the QR-style entry code
- Room hourly grid, plans with annual toggle, house rules, member tiles with geometric avatars
- Full PT-PT and EN copywriting, visit form, footer with metro directions, tablet and desktop recomposition
- Accessibility pass — keyboard plan navigation, dialog focus handling, contrast, reduced motion — and final polish
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
97
Performance
98
Accessibility
100
Best practices
100
SEO