Cabeleireiro Projeto de demonstração
Madeixa — o estúdio de cor que diagnostica antes de orçamentar
Um site editorial de beleza para um estúdio de cor em Cedofeita, no Porto: um diagnóstico de cor em cinco passos que termina num intervalo de preço honesto e na colorista certa, um mapa de tons que recolore ao vivo um leque de madeixas em SVG e uma marcação só com agenda e recibo em tempo real — sem fotografia, tudo gradientes e SVG inline.
feitura.pt/demo/madeixa — Ao vivo
Três coloristas em Cedofeita, conhecidas pelo balayage e pela correção de cor, vivem do Instagram mas perdem o momento da marcação: as DMs acumulam-se, o preço é um mistério e as correções chegam como surpresas. Querem o oposto do «manda DM com foto» — um diagnóstico online a sério que faz a triagem do caso, devolve um intervalo de preço honesto com as razões por escrito, atribui a colorista certa e entrega ao cliente uma cadeira marcada. Só com marcação, e com orgulho nisso.
O que está lá dentro
- Sistema de design editorial de beleza — porcelana quente, tinta expresso, cobre queimado e um toque de salva; uma fita de madeixa como motivo recorrente, zero clichés de salão cor-de-rosa
- Fotografia substituída por painéis de luz de cabelo: gradientes CSS radiais e cónicos em tons de cobre, caramelo e cinza
- Diagnóstico de cor em cinco passos com pontos de progresso: mosaicos de objetivo, comprimento e estado do cabelo, histórico químico e seis amostras de tom
- Resultado do diagnóstico com intervalo de preço honesto, duração prevista, colorista atribuída e nota expansível «porquê este intervalo» com as razões do preço por extenso
- Passagem num toque do diagnóstico para a marcação — serviço e colorista recomendada pré-selecionados e mostrados como linhas de recibo
- Mapa de tons interativo: dez tons num radiogroup navegável por teclado que recolorem ao vivo um leque de madeixas em SVG, cada um com família de tom, manutenção e preço de partida
- Tabela de preços em estilo recibo com quatro categorias — intervalos onde é honesto, fixos onde é possível, e linha de destaque da consulta de diagnóstico grátis de 15 minutos
- Marcação só com agenda: cartões de colorista, próximos dez dias abertos com domingos e segundas encerrados, disponibilidade determinística e confirmação com notas de preparação
- Copy bilingue PT/EN, estados de foco WCAG, movimento reduzido e alvos de toque de 44 px
Registo de construção
- Direção de arte — tokens porcelana/expresso/cobre, estudos SVG da fita de madeixa, painéis de gradiente de luz de cabelo e composição do hero
- Motor do diagnóstico de cor: regras de intervalo honesto por objetivo, comprimento, estado e histórico químico, mais a atribuição da colorista
- Cinco ecrãs do questionário com pontos de progresso, amostras de tom e o cartão de resultado com a nota expansível do porquê do intervalo
- Mapa de tons — radiogroup de dez tons por teclado a recolorir ao vivo o leque de madeixas em SVG, tabela-recibo com a linha da consulta grátis
- Fluxo de marcação com disponibilidade determinística, domingos e segundas encerrados, recibo em tempo real e a passagem do diagnóstico
- Processo de correção, coloristas, testemunhos, prateleira de produtos, passagem do locale EN e auditoria de acessibilidade — contraste, foco, movimento reduzido
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
96
Performance
98
Accessibility
100
Best practices
100
SEO