Pastelaria Demonstration project
Doce Hora — neighbourhood bakery with cake orders
A warm, morning-lit site for a Queluz pastelaria: a typographic pastry-case menu with EUR prices, a chalkboard daily-specials board, and a four-step cake-order flow with a live price estimate — bilingual, mobile-first and built without a single stock photo.
feitura.pt/demo/doce-hora — Live
We run a small pastelaria near the Queluz palace, open since 1987. People call all day about birthday cakes and we lose orders on paper notes. We want a site that feels like the shop at eight in the morning — warm, friendly, ours — where customers can see the pastry case, check the lunch of the day, and request a cake for a date with a price idea before they call.
What's inside
- Butter-cream and espresso design system with a raspberry-pink accent, built entirely in scoped CSS
- Hand-drawn pastel de nata and coffee-cup illustrations in inline SVG with gentle steam animation
- Typographic pastry-case menu with dotted price leaders and four category filters
- Chalkboard daily-specials board with a weekday selector and Monday-closed state
- Four-step cake-order flow: cake type, size, pickup date, contact
- Live price estimate computed from cake type and number of servings
- 48-hour notice and closed-Monday logic baked into the pickup calendar
- Full PT/EN language toggle with native European Portuguese copy
- Hours, address and tap-to-call footer, AA contrast and 44 px touch targets throughout
Build log
- Art direction and tokens — butter/espresso/pink palette, Archivo display scale, pastel de nata SVG studies, bilingual copy structure
- Hero, ticker strip and the pastry-case menu: dotted leaders, category filters, full PT-PT product copy with EUR prices
- Cake-order flow — stepper state, size and pickup-date logic, live estimate math, demo-safe submission
- Chalkboard specials board, hours and address, tablet/desktop recomposition, accessibility and reduced-motion pass
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO