Restaurante Demonstration project
Brasa — fine-dining grill with live reservations
A dark, editorial one-pager for a Lisbon charcoal grill: typographic menu with tab filtering, a wine cellar section and a four-step reservation flow — all composed mobile-first with zero stock photography.
feitura.pt/demo/brasa — Live
A chef opening a charcoal-fired restaurant in Chiado needs a site that feels like the room — dark, warm, unhurried. It must carry the full menu and wine list, take table reservations without a third-party widget, and read beautifully on the phone a guest pulls out at the door.
What's inside
- Warm dark design system (charcoal, ember, cream) built entirely in CSS — no photography
- Editorial serif display type with a hand-drawn flame illustration in inline SVG
- Typographic menu with dotted price leaders and category tab filtering
- Curated wine list split into by-the-glass and cellar bottles
- Four-step reservation flow: date, party size, time slot, confirmation
- Slot availability logic with sold-out states and Monday closures
- Sticky translucent header with anchor navigation
- Hours and address footer with tap-to-call and tap-to-email
- Reduced-motion, AA contrast and 44 px touch targets throughout
Build log
- Art direction and design tokens — charcoal/ember palette, serif display scale, flame SVG studies
- Hero and manifesto sections, layered ember gradients, sticky header
- Menu composition — dotted leaders, category tabs, full PT-PT copywriting with EUR pricing
- Reservation flow: stepper state machine, slot availability, closed-day handling
- Wine list, footer with hours and address, tablet and desktop recomposition
- Accessibility pass — contrast, focus states, reduced motion — and final polish
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
96
Accessibility
100
Best practices
100
SEO