Pastelaria Projeto de demonstração
Doce Hora — pastelaria de bairro com encomendas de bolos
Um site quente, com luz de manhã, para uma pastelaria de Queluz: vitrine tipográfica com preços em euros, quadro de menu do dia estilo ardósia e um fluxo de encomenda de bolos em quatro passos com estimativa de preço — bilingue, mobile-first e sem uma única fotografia de banco.
feitura.pt/demo/doce-hora — Ao vivo
Temos uma pastelaria pequena perto do palácio de Queluz, aberta desde 1987. Ligam-nos o dia todo por causa de bolos de aniversário e perdemos encomendas em papelinhos. Queremos um site que pareça a loja às oito da manhã — quente, simpático, nosso — onde os clientes vejam a vitrine, consultem o menu do dia e peçam um bolo para uma data com uma ideia de preço antes de ligarem.
O que está lá dentro
- Sistema de design creme-manteiga e café expresso com acento rosa-framboesa, feito só em CSS
- Ilustrações de pastel de nata e chávena de café desenhadas em SVG inline, com vapor animado
- Vitrine tipográfica com linhas pontilhadas até ao preço e quatro filtros por categoria
- Quadro de menu do dia estilo ardósia com seletor de dia da semana e segunda encerrada
- Fluxo de encomenda de bolos em quatro passos: tipo, tamanho, data de levantamento, contacto
- Estimativa de preço em tempo real calculada a partir do tipo de bolo e do número de pessoas
- Regra de 48 horas de antecedência e segundas encerradas no calendário de levantamento
- Comutador PT/EN completo com copywriting nativo em português europeu
- Horário, morada e telefone com toque para ligar, contraste AA e alvos de 44 px
Registo de construção
- Direção de arte e tokens — paleta manteiga/café/rosa, escala Archivo, estudos do SVG do pastel de nata, estrutura de copy bilingue
- Hero, faixa de destaques e vitrine: linhas pontilhadas, filtros por categoria, copy PT-PT completo com preços em euros
- Fluxo de encomendas — estados do stepper, lógica de tamanhos e datas de levantamento, cálculo da estimativa, submissão segura em demo
- Quadro do menu do dia, horário e morada, recomposição para tablet/desktop, revisão de acessibilidade e movimento reduzido
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO