Conservas Projeto de demonstração
Lata — conservas artesanais com caixa montada lata a lata
Uma loja art-déco conserveira, gráfica e alta, para uma pequena conserveira de Matosinhos: cada produto é um rótulo de lata inteiramente desenhado em SVG, o construtor de caixas enche uma caixa aberta lata a lata com contas honestas, cada lata abre um dossier de origem sobre um mapa da costa, e uma banda de época de doze meses explica porque há uma lata esgotada.
feitura.pt/demo/lata — Ao vivo
Uma conserveira de Matosinhos faz séries curtas de conservas premium — sardinha, cavala, atum, polvo, bacalhau — com rótulos de colecionador, e cada lata diz o barco, a lota e a data de fecho. Metade das vendas são caixas de oferta, mas a loja vende latas avulso como um supermercado. Precisam de um fluxo de montar a caixa que aumente o valor médio por encomenda, de o design da embalagem fazer o marketing, e de explicar a época — para que uma lata esgotada se leia como honestidade, não como falha.
O que está lá dentro
- Sistema de design art-déco conserveiro — creme de papel, marinho profundo e cinco cores de rótulo por espécie — sem fotografia nenhuma
- Um sistema de rótulos em SVG puro: cada lata é um rótulo desenhado com nome da espécie, silhueta do peixe, padrões de onda/zigzag/pinta e moldura recortada
- Construtor de caixas de 6 ou 12 latas, com botões +/− e uma caixa aberta em SVG que se enche à vista, lata a lata, com os rótulos escolhidos
- Sugestões da casa (Clássica / Mar Alto / Picante) que enchem a caixa num só clique
- Contas honestas: comparação viva com o preço avulso que celebra a poupança — ou avisa quando a mistura ficava mais barata à unidade
- Fluxo de oferta com mensagem de postal escrita à mão (140 caracteres, contagem viva) e embrulho de pano, a acabar num carimbo 'SEGUE POR CORREIO'
- Explorador de origem: cada lata abre um dossier — arte de pesca, barco com nome, lota, datas de captura e fecho no próprio dia — marcado num mapa SVG da costa
- Banda de época de doze meses por espécie com marcador de 'agora', copy honesto de fora de época e uma lata realmente esgotada com captura de email
- Checkout fictício MB Way / cartão, fluxo B2B de caixas com marca e a fábrica contada em quatro passos ilustrados
- Copy bilingue PT/EN, movimento reduzido respeitado, operação por teclado e alvos de toque de 44 px
Registo de construção
- Direção de arte — o sistema de rótulos: cinco cores de espécie, silhuetas de peixe em SVG, padrões, molduras recortadas, tokens creme/marinho
- Hero com a prateleira de latas, navegação fixa com contador da caixa, faixa de informação e grelha de loja com oito latas e origem numa linha
- Construtor de caixas — tamanhos, botões +/−, sugestões da casa e a caixa SVG que se enche à vista, lata a lata
- Fluxo de oferta, contas honestas face ao avulso, checkout fictício MB Way / cartão e o estado de confirmação carimbado
- Explorador de origem — dossiers determinísticos por lata, mapa da costa com as lotas, barco marcado e o desvio à Islândia
- Banda de época com marcador de 'agora', lista de espera do esgotado, passos da fábrica, fluxo B2B, testemunhos e pontos de venda
- Passagem EN completa, auditoria de movimento reduzido e teclado, verificação de contraste nas cinco cores de rótulo, recomposição para tablet e desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
98
Accessibility
100
Best practices
100
SEO