Marcações online Projeto de demonstração
Vaga — um sistema de marcações que serve qualquer negócio
Uma demo de produto para uma app de marcações online em alabastro quente, grafite e glicínia: um seletor de modelos ao vivo muda a pele do produto inteiro — salão, barbearia, clínica de fisioterapia ou estúdio de estética — em torno de um fluxo de marcação em quatro passos a funcionar, uma agenda do dono só de leitura com timelines por profissional e lembretes SMS automáticos.
feitura.pt/demo/vaga — Ao vivo
Um produto de software de marcações precisa de uma página que prove uma coisa em dez segundos: o mesmo sistema serve qualquer negócio que trabalhe com horas marcadas. A página tem de ser o produto — um seletor fixo veste a app como quatro negócios fictícios coerentes (salão Studio Lena em Lisboa, barbearia Corte Real no Porto, clínica FisioAtiva em Coimbra, estética Pele & Luz em Faro), trocando marca, paleta, serviços, equipa e horários ao vivo. Por baixo, um fluxo de marcação completo com um motor de disponibilidade simulado, a vista do dia do dono, pré-visualização de lembretes e planos com preços claros.
O que está lá dentro
- Sistema de design soft-industrial — alabastro quente, tinta grafite e um acento glicínia, tudo em CSS scoped
- Seletor de modelos ao vivo que muda marca, paleta de acento, serviços, profissionais e copy em toda a página
- Quatro negócios fictícios coerentes com serviços, preços, equipas e dias de abertura próprios
- Fluxo de marcação em quatro passos a funcionar: serviço, profissional (ou qualquer), faixa de 7 dias e grelha de horários, confirmação com formulário de demonstração
- Motor de disponibilidade simulado e determinístico — horários por profissional, dias fechados e vagas ocupadas visíveis
- Agenda do dono só de leitura: timelines do dia por profissional com marcações, turnos, folgas e linha do agora
- Cartões de ocupação, lembretes enviados e taxa de faltas calculados a partir do mesmo motor
- Pré-visualização de lembrete SMS que se reescreve com o nome, serviço e morada do negócio ativo
- Totalmente bilingue PT/EN, contraste AA, alvos de toque de 44 px e transições seguras com movimento reduzido
Registo de construção
- Direção de arte e tokens — sistema alabastro/grafite/glicínia, logomarca de grelha de vagas, botões pill, tratamento mono para as horas
- Os quatro negócios fictícios — nomes, paletas, serviços com durações e preços, equipas e horários para salão, barbearia, fisioterapia e estética
- Seletor de modelos ao vivo — controlo fixo, temas por modelo com custom properties de CSS, transições de pele sem saltos de layout
- Motor de disponibilidade simulado — hashing determinístico para vagas ocupadas, turnos por profissional, dias fechados, fusão de qualquer profissional
- Fluxo de marcação — stepper, seleção de serviço e profissional, faixa de 7 dias, grelha de horários com estados ocupados, resumo e confirmação de demonstração
- Back-office do dono — timelines do dia por profissional derivadas do mesmo motor, sombreado de turnos, linha do agora, estatísticas de ocupação e lembretes
- Secções de lembretes e marketing — pré-visualização de SMS que muda com o negócio, grelha de funcionalidades com ícones SVG inline, planos de preços
- Passagem do locale EN, cartão de marca no hero com próxima vaga livre calculada, reveals de scroll com IntersectionObserver, auditoria de movimento reduzido
- Passagem mobile a 375 px — seletor e grelha de horários amigos do polegar, scroll horizontal da timeline, auditoria de contraste e alvos de toque
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
97
Performance
100
Accessibility
100
Best practices
100
SEO