Transfer privati — listino e prenotazione
Un listino in cinque lingue: scegli auto e destinazione e si apre una prenotazione WhatsApp già scritta.
- Vite 7
- Vanilla JS
- Web Animations API
- IntersectionObserver
- node:test
- GitHub Actions
- 5lingue, messaggi WhatsApp compresi
- 7larghezze verificate senza overflow, da 320 a 1920 px
- 0cookie, analytics o iframe di mappe
Dal tariffario alla prenotazione WhatsApp
Le tariffe dell'operatore diventano dati testati, la pagina viene generata come HTML statico e un tocco apre un messaggio WhatsApp con tratta, auto e prezzo già scritti.
Tocca un blocco per vedere cosa fa.
- Ingresso
- Logica
- Dati
- Infrastruttura
- Uscita
- Persone
Ingresso
Tariffario
Il tariffario dell'operatore: due aeroporti e un porto, tre classi di veicolo da 1–3 a 7–8 persone, una tariffa per direzione.
Passa a Dati tariffe
Logica
Cinque lingue
Testi in IT, EN, FR, ES e PT, compreso un messaggio WhatsApp tradotto per ogni tariffa.
- Vanilla JS
Passa a Pannello prenotazione
Dati
Dati tariffe
Destinazioni, flotta con capienze e tariffe in semplici moduli JS, fuori dal markup e coperti da test unitari.
- ES modules
- node:test
Riceve da TariffarioPassa a Script di render
Logica
Script di render
Genera index.html dai template JS delle sezioni in fase di build, così prezzi e link sono già nell'HTML statico.
- Node.js
Riceve da Dati tariffePassa a Pagina statica
Infrastruttura
Pagina statica
Un bundle Vite con font self-hosted; contenuti e link funzionano anche senza JavaScript, e la CI esegue i controlli di qualità.
- Vite 7
- GitHub Actions
Riceve da Script di renderPassa a Livello di motion, Pannello prenotazione
Logica
Livello di motion
Entrata dell'hero con Web Animations, maschera del film legata allo scroll, clip caricate su richiesta; ogni effetto si distrugge in modo pulito.
- Web Animations API
- IntersectionObserver
Riceve da Pagina statica
Uscita
Pannello prenotazione
Pulsanti auto e schede destinazione; ogni tariffa è un link a un messaggio WhatsApp precompilato con tratta, auto, direzione e prezzo.
- WhatsApp links
Riceve da Pagina statica, Cinque linguePassa a Chat WhatsApp
Persone
Chat WhatsApp
L'operatore conferma in chat veicolo, disponibilità, IVA e supplementi. Niente backend, niente cookie, niente moduli.
Riceve da Pannello prenotazione
Il problema
Un servizio di transfer privati, tra aeroporti, porto crociere e tour in giornata, aveva un sito statico denso e senza un percorso chiaro verso la prenotazione. Serviva un listino chiaro, costruito dal suo tariffario, che portasse dritto alla prenotazione senza backend.
Cosa ho costruito
- Ho iterato in fretta: una versione statica senza build, una più corta con prenotazione in tre tocchi, due artefatti da un brief per Claude Design, poi la build Vite finale.
- Ho trasformato il tariffario in dati testati: destinazioni, veicoli con le capienze e una tariffa per direzione, separati dal markup.
- Ho generato la pagina da template JS in fase di build, così ogni prezzo e ogni link sono già nell'HTML statico e funzionano senza JavaScript.
- Ho costruito il pannello di prenotazione: scegli auto e destinazione, tocchi una tariffa e WhatsApp si apre con tratta, auto, direzione e prezzo già scritti, nella lingua del visitatore.
- Ho scelto capitoli video con scroll nativo invece di WebGL o di un film a scroll continuo, che non aiutano a scegliere una tratta e aggiungono peso.
La parte difficile
Capitoli video leggeri anche su un telefono in 4G. Le clip si caricano su richiesta con IntersectionObserver, vanno in pausa fuori schermo o con la scheda nascosta, non partono mai da sole con Reduced Motion o Save-Data e sono codificate in H.264 muto con fast start e poster.
Risultato
Una build verificata: test unitari su tariffe, messaggi di prenotazione, traduzioni e sicurezza, e nessun overflow orizzontale a sette larghezze da 320 a 1920 px. Nessun cookie, analytics o iframe di mappe; le tariffe restano indicative finché IVA e supplementi non sono confermati.
Il mio ruolo
In solitaria, con agenti. Ho fornito brief e fonti e diretto quattro iterazioni; OpenAI Codex ha scritto 6 degli 8 commit e gli ultimi 2 sono miei, quelli che hanno completato il design e i prezzi per veicolo.