Estúdio de yoga Projeto de demonstração
Respira — estúdio de yoga & pilates com horário semanal e marcação
Um site sereno para um estúdio sem espelhos em Campo de Ourique: guia de respiração no hero, horário de seis dias com lugares reais e folha de marcação, cinco disciplinas com uma escala de intensidade honesta, e preços sem letras pequenas.
feitura.com/demo/respira — Ao vivo
Um pequeno estúdio de yoga e pilates em Lisboa quer um site com a atmosfera da sala — luz de manhã, tapetes de cortiça, nenhum espelho — e que leve alguém nervoso a marcar a primeira aula sem telefonar. O horário tem de ser o produto: lugares reais, aulas para iniciantes bem assinaladas, marcação em menos de um minuto no telemóvel.
O que está lá dentro
- Guia de respiração interativo como hero — três ciclos 4-4-6 com etiqueta de fase, a respeitar a preferência de movimento reduzido
- Horário de seis dias com filtros de disciplina e nível, lugares reais, estados de pouca disponibilidade e cheia, e lista de espera
- Folha de marcação com validação inline, caixa "primeira aula" que revela o que esperar, e estado confirmado — só front-end
- Separadores por dia no telemóvel, semana em seis colunas no desktop, a partir dos mesmos dados
- Cinco disciplinas com glifos de traço único desenhados à mão e escala de intensidade de cinco pontos com níveis nomeados
- Preços, oferta de primeira aula e horário da receção num sistema tipográfico mono/serifa — sem fotografia em lado nenhum
- Bilingue PT/EN com alternância no cabeçalho; skip link, anéis de foco, diálogo que fecha com Escape, numerais tabulares
Registo de construção
- Direção de arte — tokens névoa/pinho/cortiça, serifa antiga para display, estudos do guia de respiração
- Hero com o guia de respiração; temporizador de fases, alternativa para movimento reduzido, cabeçalho e idioma
- Modelo de dados do horário, filtros, separadores por dia vs. grelha semanal, estados dos lugares
- Folha de marcação com validação e fluxo de primeira vez; disciplinas, preços, sequência da primeira visita
- Estúdio, mapa simplificado, FAQ, revisão do texto bilingue, verificações a 375px e de teclado
Stack
- Laravel
- Vue.js
- Inertia
- TypeScript