Florista Projeto de demonstração
Pétala — florista de Sintra com construtor de ramos ao vivo
Uma loja botânica para uma florista e atelier de Sintra: porcelana quente, verde-folha e rosa-velho, seis ilustrações de flores originais em SVG e um construtor de ramos em que as hastes escolhidas compõem uma pré-visualização SVG ao vivo dentro de um embrulho kraft — preço, tamanho e data de entrega atualizam a cada escolha. Tudo desenhado, nada fotografado.
feitura.pt/demo/petala — Ao vivo
Uma florista com atelier no centro histórico de Sintra quer vender mais do que ramos prontos: quer que os clientes componham o seu próprio ramo no telemóvel, o vejam ganhar forma e escolham o dia de entrega antes de ligar. O site precisa do quadro semanal do mercado com o que está fresco, dos ramos de época prontos com carrinho, das zonas de entrega com taxas honestas para Sintra, Cascais e Lisboa, e dos cuidados que ela repete a cada cliente ao balcão.
O que está lá dentro
- Sistema de design porcelana quente, verde-folha e rosa-velho com molduras de secção em arco e blob
- Seis ilustrações de flores originais em SVG inline — tulipa, eucalipto, rosa, lavanda, girassol, craveiro
- Construtor de ramos assinatura: escolha até três flores e veja um ramo SVG compor-se ao vivo num embrulho kraft
- Preço ao vivo — embrulho base mais EUR por haste, com tamanhos S/M/L a mudar as hastes por flor
- Seletor de data de entrega a partir de amanhã, ligado ao resumo do construtor
- Ramos de época prontos com gaveta de carrinho e controlo de quantidades
- Quadro de mercado das flores da semana em mono, com origem e estados de disponibilidade
- Zonas de entrega para Sintra, Cascais e Lisboa com taxas e janelas horárias, e acordeão de cuidados
- Totalmente bilingue PT/EN, contraste AA, alvos de toque de 44 px e alternativas com movimento reduzido
Registo de construção
- Direção de arte e tokens — paleta porcelana/folha/rosa, molduras em arco, nomes de flores em serifado itálico, estudos das seis ilustrações SVG de flores
- Composição do hero, quadro de mercado das flores da semana, grelha de ramos prontos com pré-visualizações SVG
- Construtor de ramos — seletor de flores, composição ao vivo do leque de hastes SVG no embrulho kraft, preço por haste com tamanhos S/M/L
- Seletor de data de entrega, gaveta de carrinho com quantidades, zonas de entrega, acordeão de cuidados, passagem completa do locale EN
- Revelações ao scroll e passagem de movimento com alternativas de movimento reduzido, auditoria de contraste e alvos de toque, recomposição para tablet e desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
91
Performance
100
Accessibility
100
Best practices
100
SEO