Escola de surf Demonstration project
Maré — Ericeira surf school with a live conditions board
An Atlantic-energy site for an Ericeira surf school: foam white, deep petrol and sun-flare coral, bold italic display type, animated SVG wave dividers, and a mono-type conditions board covering three local spots across three days — swell, wind, tides and a 1–5 beginner score — plus lesson levels in EUR and a working booking flow.
feitura.pt/demo/mare — Live
A surf school in Ericeira wants a site with the energy of the ocean and the honesty of a good coach. It has to carry a daily conditions report for Ribeira d'Ilhas, Foz do Lizandro and São Julião — swell, wind, tide tables and whether the day is any good for beginners — present three lesson levels with clear EUR pricing and everything that's included, introduce the coaches, and let anyone book a level, day and time from a phone on the beach.
What's inside
- Foam white, deep ocean petrol and sun-flare coral design system, all in scoped CSS
- Bold italic Archivo display headlines with an IBM Plex Mono instrument-panel voice
- Conditions board for three local spots with a today/tomorrow/day-after selector
- Coherent fake data: swell height and period, wind direction with offshore/onshore tags, tide tables
- A 1–5 'good for beginners' wave-glyph score with a plain-spoken verdict per spot and day
- Animated SVG wave dividers between sections, drifting gently and frozen under reduced motion
- Three lesson levels with EUR pricing and a full equipment-included list
- Working booking flow — level, day, time with full slots — ending in a demo-sink form
- Coaches strip with SVG wave portraits, scroll-triggered reveals via IntersectionObserver
- Fully bilingual PT/EN with a native toggle, AA contrast and 44 px touch targets
Build log
- Art direction and tokens — foam/petrol/coral palette, italic display scale, wave symbol system, hero composition with sun flare and surfer
- Conditions data model — three spots by three days of coherent swell, period, wind and tide data, plus the beginner score rubric
- The board itself — mono instrument panel, day selector, tide strip, wind arrows and wave-glyph score meter
- Lessons and pricing in EUR, equipment-included list, coaches strip with SVG portraits, animated wave dividers
- Booking flow state machine — level, day, time with full slots, summary and demo-sink confirmation form
- EN locale pass, reduced-motion and contrast audit, 375 px thumb test on the board and booking, desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
100
Accessibility
100
Best practices
100
SEO