Clínica dentária Projeto de demonstração
Esmalte — a clínica dentária com preços na parede
Um site de calma clínica para uma clínica dentária de duas cadeiras em Matosinhos: tabela de preços pública que recalcula ao vivo com o plano de fidelização, ilustrações antes/depois arrastáveis e uma primeira consulta em três passos pensada para pacientes ansiosos.
feitura.pt/demo/esmalte — Ao vivo
Dois irmãos dentistas em Matosinhos querem o oposto do site de dentista habitual: sem fotos de banco de dentes, sem «contacte-nos para orçamento». A aposta é transparência radical — todos os preços públicos, plano por escrito antes de qualquer tratamento e uma primeira consulta desenhada para quem foge do dentista há anos, por medo ou por receio dos preços.
O que está lá dentro
- Sistema de design porcelana-e-menta com motivos de azulejo vidrado e divisor em curva de sorriso — sem fotografia
- Três comparações de sorriso antes/depois em SVG desenhado à mão, com slider de clip-path arrastável e acessível por teclado
- Tabela de preços pública em tipografia mono, estilo recibo de parede, agrupada por especialidade e com numerais tabulares
- Interruptor «plano Esmalte» que recalcula todos os preços ao vivo a −15% e marca as limpezas como incluídas
- Primeira consulta em três passos: motivos com ícones SVG, próximos 10 dias úteis com disponibilidade determinística, resumo com confirmação por SMS
- Secção dedicada ao medo do dentista: sem broca no primeiro dia, sinal de mão para parar, sedação consciente
- Faixa persistente de urgência com dor, com ligação por toque e horário no próprio dia
- Retratos geométricos em SVG para a dupla de irmãos — especialidade, cédula e uma frase humana para cada
- 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/menta/blush, estudos do hero em azulejo vidrado, divisor em curva de sorriso e marca
- Sistema de ilustração do sorriso estilizado: geometria dos dentes, manchas, variantes tortas e lascadas em SVG inline
- Slider de comparação antes/depois — pointer capture, role de slider por teclado, recorte por clip-path nos três casos
- Tabela-recibo de preços com copy PT-PT completo e o recálculo ao vivo de −15% do plano Esmalte
- Fluxo de marcação em três passos com disponibilidade determinística, secções do medo do dentista e dos convénios
- Testemunhos, rodapé, recomposição tablet/desktop e revisão de acessibilidade — contraste, foco, movimento reduzido
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
97
Performance
98
Accessibility
100
Best practices
100
SEO