Café de especialidade Projeto de demonstração
Torra — torrefação de café de especialidade com construtor de assinatura
Uma loja com calor de ofício para uma torrefação em Marvila: papel kraft, castanho-espresso e folha de cobre, etiquetas mono de torra e réguas tracejadas de embalagem. Cinco cafés levam a curva de torra real em SVG, o carrinho em gaveta faz contas honestas em EUR, e um construtor de assinatura em três passos compõe uma etiqueta com preço vivo à medida que escolhe origem, moagem e frequência.
feitura.pt/demo/torra — Ao vivo
Uma torrefação de lotes pequenos num armazém de Marvila torra às terças e quer vender como torra: com transparência. A loja tem de levar cinco lotes de origem única com notas de prova e a curva de torra real de cada lote, um carrinho que respeita o limiar de portes grátis e, acima de tudo, um fluxo de assinatura que saiba a compor uma etiqueta de torra — escolher a origem, escolher a moagem, escolher a cadência, ver o preço a recalcular. Mais a história da torrefação e as receitas de prova da casa, com rácios em mono.
O que está lá dentro
- Sistema de design kraft, espresso e folha de cobre em CSS scoped com réguas tracejadas de embalagem — zero fotografia
- Construtor de assinatura em três passos num só painel: origem, moagem e frequência com preço EUR vivo e descontos por cadência
- Etiqueta-resumo que se compõe sozinha, como uma etiqueta de torra, à medida das escolhas
- Grelha de loja com cinco cafés, cada um com curva de torra em SVG desenhada à mão — primeiro crack e descarga marcados
- Carrinho em gaveta funcional com quantidades, subtotal, limiar de portes grátis e totais
- Diagrama técnico em SVG do torrador de tambor de 15 kg com sonda, chama e tabuleiro de arrefecimento legendados
- História da torrefação com estágios cereja-a-torra em SVG e estatísticas de comércio direto
- Acordeão de guias de extração — V60, prensa francesa e espresso com rácios e tempos em mono
- Revelações ao scroll via IntersectionObserver, totalmente recolhidas com prefers-reduced-motion
- Totalmente bilingue PT/EN com toggle nativo, contraste AA e alvos de toque de 44 px
Registo de construção
- Direção de arte e tokens — paleta kraft/espresso/cobre, par tipográfico Archivo + mono, réguas tracejadas de embalagem, estudos do componente etiqueta de torra
- Hero com o diagrama técnico SVG do torrador de tambor, navegação fixa, faixa de informação e voz PT-PT completa da marca
- Grelha da loja — cinco lotes com especificações, chips de notas de prova e curvas de torra SVG plausíveis com primeiro crack e descarga marcados
- Carrinho em gaveta com controlo de quantidades, totais em EUR, limiar de portes grátis e checkout de demonstração
- Construtor de assinatura — três passos num só painel, preço vivo com descontos por frequência, etiqueta-resumo que se compõe sozinha
- História da torrefação com estágios cereja-a-torra em SVG e estatísticas, acordeão de guias de extração com rácios em mono, secção de contacto
- Passagem do locale EN, revelações ao scroll com alternativa reduced-motion, auditoria de contraste e alvos de toque, recomposição para tablet e desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
90
Performance
96
Accessibility
100
Best practices
100
SEO