Escola de surf Projeto de demonstração
Maré — escola de surf da Ericeira com quadro de condições
Um site com energia atlântica para uma escola de surf da Ericeira: branco-espuma, petróleo profundo e coral, tipografia display em itálico, divisórias de onda em SVG animado e um quadro de condições em mono para três spots locais e três dias — ondulação, vento, marés e nota 1–5 para iniciantes — mais níveis de aulas em EUR e um fluxo de reserva a funcionar.
feitura.pt/demo/mare — Ao vivo
Uma escola de surf na Ericeira quer um site com a energia do mar e a honestidade de um bom instrutor. Tem de apresentar um relatório diário de condições para a Ribeira d'Ilhas, a Foz do Lizandro e São Julião — ondulação, vento, tabela de marés e se o dia serve para quem está a começar —, mostrar três níveis de aulas com preços claros em EUR e tudo o que está incluído, dar a conhecer os instrutores e permitir reservar nível, dia e hora a partir do telemóvel, na praia.
O que está lá dentro
- Sistema de design branco-espuma, petróleo profundo e coral, tudo em CSS scoped
- Títulos display em Archivo itálico e voz de painel de instrumentos em IBM Plex Mono
- Quadro de condições para três spots locais com seletor hoje/amanhã/depois
- Dados fictícios coerentes: altura e período da ondulação, vento com etiquetas offshore/onshore, tabelas de marés
- Nota 1–5 'bom para começar?' em glifos de onda, com veredicto direto por spot e por dia
- Divisórias de onda em SVG animado entre secções, à deriva suave e paradas com movimento reduzido
- Três níveis de aulas com preços em EUR e lista completa de equipamento incluído
- Fluxo de reserva a funcionar — nível, dia, hora com horários cheios — terminado em formulário de demonstração
- Faixa de instrutores com retratos-onda em SVG e revelações ao scroll via IntersectionObserver
- Totalmente bilingue PT/EN com toggle nativo, contraste AA e alvos de toque de 44 px
Registo de construção
- Direção de arte e tokens — paleta espuma/petróleo/coral, escala display em itálico, sistema de símbolos de onda, composição do hero com sol e surfista
- Modelo de dados das condições — três spots por três dias de ondulação, período, vento e marés coerentes, mais a rubrica da nota para iniciantes
- O quadro em si — painel de instrumentos em mono, seletor de dia, faixa de marés, setas de vento e medidor de nota em glifos de onda
- Aulas e preços em EUR, lista de equipamento incluído, faixa de instrutores com retratos SVG, divisórias de onda animadas
- Máquina de estados da reserva — nível, dia, hora com horários cheios, resumo e formulário de confirmação em demonstração
- Passagem do locale EN, auditoria de movimento reduzido e contraste, teste de polegar a 375 px no quadro e na reserva, recomposição para desktop
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO