Autodromo Piero Taruffi Vallelunga - Homepage Motorsport

## Redesign, migrazione e implementazione del sito Motorsport Vallelunga Agisci come un team digitale senior specializzato nella progettazione e nello sviluppo di portali web per autodromi, circuiti internazionali, eventi motorsport e piattaforme di prenotazione. Assumi contemporaneamente i ruoli di: * AI Website Architect; * Information Architect; * UX Strategist; * UI Designer; * Creative Director digitale; * Full-stack Developer; * CMS Architect; * Content Migration Specialist; * SEO Specialist; * Accessibility Specialist; * Performance Engineer; * Conversion Rate Optimization Specialist; * Quality Assurance Specialist. Il tuo compito non è produrre un semplice mockup, una homepage statica o una generica proposta grafica. Devi **analizzare, progettare e implementare concretamente un nuovo sito web completo, navigabile, responsive e gestibile tramite CMS** per Motorsport Vallelunga. --- # 1. SITI DI RIFERIMENTO ## Sito sorgente dei contenuti https://motorsport.vallelunga.it/ Questo sito deve essere considerato la fonte primaria per: * contenuti testuali; * menu; * pagine; * dati tecnici; * eventi; * track day; * calendari; * prezzi; * regolamenti; * documenti; * contatti; * servizi; * link esterni; * sistemi di prenotazione; * live timing; * area utente; * partner; * sponsor; * materiali media; * fotografie esistenti. ## Sito benchmark https://www.misanocircuit.com/ Questo sito deve essere utilizzato come riferimento per: * architettura dell’informazione; * struttura dei menu; * gerarchia delle pagine; * esperienza utente; * presentazione degli eventi; * centralità del calendario; * logica delle card; * organizzazione dei contenuti; * impatto visivo; * uso delle immagini; * rapporto tra contenuti editoriali e commerciali; * navigazione desktop e mobile; * gestione modulare delle pagine; * struttura del CMS; * organizzazione delle informazioni pratiche. Il sito Misano è un benchmark, non un modello da copiare letteralmente, sostituendo il rosso con il blu/celeste di vallelunga. Non copiare: * codice sorgente; * loghi; * colori proprietari; * font proprietari; * icone proprietarie; * immagini; * testi; * animazioni identiche; * layout pixel-perfect; * componenti riconoscibili come riproduzioni dirette. Ricrea invece, in modo originale e coerente con il brand ACI Vallelunga, le migliori logiche progettuali, informative e gestionali individuate nel sito benchmark. --- # 2. OBIETTIVO STRATEGICO Trasformare Motorsport Vallelunga in un portale digitale contemporaneo, emozionale e operativo, capace di: 1. presentare Vallelunga come uno dei principali luoghi italiani del motorsport; 2. valorizzare storia, identità, infrastrutture e caratteristiche del circuito; 3. rendere immediatamente comprensibili eventi, gare e giornate in pista; 4. facilitare la consultazione del calendario; 5. semplificare l’acquisto o la prenotazione dei track day; 6. distinguere chiaramente le attività auto da quelle moto; 7. valorizzare Driving Experience e attività collaterali; 8. integrare live timing, albo di gara, regolamenti e documenti; 9. migliorare la comunicazione verso pubblico, piloti, team, operatori media e aziende; 10. consentire al personale Vallelunga di aggiornare autonomamente tutti i contenuti. Il risultato deve comunicare: * velocità; * adrenalina; * autorevolezza; * sicurezza; * tecnologia; * storia; * accessibilità; * spettacolo; * esperienza; * appartenenza alla realtà ACI. --- # 3. REGOLA PRINCIPALE Tutti i contenuti del sito Motorsport Vallelunga devono essere: * censiti; * analizzati; * classificati; * migrati quando ancora validi; * riorganizzati secondo la nuova alberatura; * inseriti nel CMS; * modificabili senza intervenire sul codice. Non inserire testi, immagini, date, prezzi, documenti o contatti in modo rigido nel frontend. Menu, footer, pagine, eventi, calendari, immagini, CTA, regolamenti, prezzi e informazioni tecniche devono essere gestibili tramite pannello amministrativo. Le fotografie attuali possono essere riutilizzate provvisoriamente. Devono però essere facilmente sostituibili dal CMS. --- # 4. ANALISI OBBLIGATORIA PRIMA DELLA GENERAZIONE Prima di creare il nuovo sito, esegui una scansione completa dei due domini. Utilizza, quando disponibili: * crawling delle URL; * browser rendering; * analisi del DOM; * acquisizione screenshot desktop e mobile; * analisi di menu e navigazione; * analisi dei metadata; * rilevazione dei link; * estrazione dei contenuti; * individuazione dei documenti; * analisi dei componenti ricorrenti; * analisi delle funzionalità. Non iniziare la progettazione basandoti esclusivamente sulla homepage. ## 4.1 Audit di Motorsport Vallelunga Rileva almeno: * tutte le URL pubbliche; * titoli delle pagine; * gerarchia attuale; * menu e sottomenu; * testi; * immagini; * video; * PDF; * calendari; * track day; * eventi; * gare; * prezzi; * regolamenti; * requisiti di partecipazione; * servizi disponibili; * documenti tecnici; * partner; * sponsor; * contatti; * numeri telefonici; * indirizzi e-mail; * link ai social; * live timing; * albo di gara; * area utente; * procedure di acquisto; * eventuali form; * integrazioni esterne; * pagine duplicate; * contenuti obsoleti; * errori; * link interrotti; * URL non ottimizzate; * incongruenze editoriali. Analizza anche eventuali elementi presenti solo nelle pagine interne e non raggiungibili chiaramente dal menu. ## 4.2 Analisi del sito Misano Circuit Individua: * organizzazione del menu principale; * menu secondari; * mega menu; * organizzazione della homepage; * struttura delle pagine evento; * visualizzazione del calendario; * filtri; * card; * CTA; * hero; * banner; * countdown; * moduli informativi; * percorsi di navigazione; * sezioni per pubblico, piloti, team e aziende; * informazioni pratiche; * pagine circuito; * media; * sponsor; * footer; * esperienza mobile; * logica dei contenuti dinamici. ## 4.3 Benchmark comparativo Produci internamente una matrice comparativa: | Area | Vallelunga attuale | Misano benchmark | Soluzione proposta | | ---------- | ------------------ | ---------------- | ------------------ | | Menu | Stato attuale | Pattern rilevato | Nuova soluzione | | Homepage | Stato attuale | Pattern rilevato | Nuova soluzione | | Eventi | Stato attuale | Pattern rilevato | Nuova soluzione | | Track day | Stato attuale | Pattern rilevato | Nuova soluzione | | Calendario | Stato attuale | Pattern rilevato | Nuova soluzione | | Media | Stato attuale | Pattern rilevato | Nuova soluzione | | Mobile | Stato attuale | Pattern rilevato | Nuova soluzione | | CMS | Stato attuale | Pattern rilevato | Nuova soluzione | Non mostrare necessariamente questa tabella sul sito pubblico, ma utilizzala per guidare la progettazione. --- # 5. ARCHITETTURA INFORMATIVA PROPOSTA Costruisci un’architettura più chiara e moderna rispetto a quella esistente. Utilizza la seguente alberatura come base, verificandola e correggendola dopo l’audit. ## HOME La homepage deve includere: * hero video o fotografica; * claim istituzionale; * prossimo grande evento; * countdown opzionale; * calendario sintetico; * prossimi track day; * accesso immediato ad Auto e Moto; * principali gare; * Driving Experience; * live timing; * dati del circuito; * news e media; * partner; * informazioni pratiche; * CTA di acquisto e prenotazione. ## IL CIRCUITO Sottosezioni: * Presentazione; * La storia; * Piero Taruffi; * Tracciato; * Configurazioni della pista; * Dati tecnici; * Record; * Box e paddock; * Strutture; * Servizi; * Sicurezza; * Documenti tecnici; * Tech Sheet; * Gallery; * Come arrivare; * Contatti. ## CALENDARIO ED EVENTI Sottosezioni: * Calendario completo; * Prossimi eventi; * Gare; * Track day; * Eventi auto; * Eventi moto; * Driving Experience; * Eventi speciali; * Eventi passati; * Risultati; * Eventi in evidenza. ## TRACK DAY Sottosezioni: * Track Day Auto; * Track Day Moto; * Calendario Auto; * Calendario Moto; * Prove libere Vallelunga; * Prove libere Lainate, se ancora pertinenti; * Regolamenti; * Prezzi; * Requisiti; * Briefing; * Servizi in circuito; * FAQ; * Acquista o prenota; * Area partecipanti. ## GARE Sottosezioni: * Calendario gare; * Prossime gare; * Schede evento; * Programmi; * Entry list; * Regolamenti; * Documenti; * Live Timing; * Albo di gara; * Risultati; * Accrediti; * Informazioni per il pubblico; * Archivio gare. ## ESPERIENZE Sottosezioni: * Driving Experience; * Esperienze Auto; * Esperienze Moto; * Miniautodromo; * Esperienze per gruppi; * Gift card o voucher, quando disponibili; * Richiedi informazioni. ## LIVE E RISULTATI Sottosezioni: * Live Timing Gare; * Live Timing Track Day; * Albo di gara; * Classifiche; * Risultati; * Documentazione tecnica. ## MEDIA Sottosezioni: * News; * Comunicati stampa; * Stampa; * Intrattenimento; * Race Magazine; * Foto; * Video; * Press kit; * Accrediti media; * Contatti stampa. ## SERVIZI Sottosezioni: * Ristorazione; * Assistenza pneumatici; * Fotografi; * Simulatori; * Shop; * Transfer; * Servizi nel paddock; * Servizi per piloti; * Servizi per team; * Partner tecnici. ## BUSINESS Prevedi questa area quando i contenuti o gli obiettivi commerciali lo giustificano: * Affitto pista; * Test automotive; * Presentazioni prodotto; * Produzioni fotografiche e video; * Eventi aziendali; * Hospitality; * Sponsorizzazioni; * Partnership; * Richiedi un preventivo. ## PARTNER Sottosezioni: * Partner istituzionali; * Sponsor; * Partner tecnici; * Diventa partner. ## INFORMAZIONI UTILI Sottosezioni: * Come arrivare; * Parcheggi; * Accessi; * Orari; * Mappa; * Regole di accesso; * Accessibilità; * Servizi; * FAQ; * Contatti. ## AREA UTENTE Funzionalità: * login; * registrazione; * profilo; * prenotazioni; * acquisti; * documenti; * ricevute; * voucher; * storico attività; * assistenza. La voce “Area Utente” deve essere visivamente separata dal menu editoriale. --- # 6. STRUTTURA DELLA HOMEPAGE La homepage deve avere un’impostazione editoriale ed emozionale simile, per efficacia e ritmo, a quella di un grande circuito internazionale. Ordine consigliato: 1. barra informativa superiore; 2. header principale; 3. hero video o immagine full-screen; 4. evento principale; 5. CTA “Calendario”, “Acquista”, “Live Timing”; 6. prossimi eventi; 7. selettore Auto/Moto; 8. prossimi track day; 9. gare in evidenza; 10. Driving Experience; 11. presentazione del circuito; 12. dati tecnici e record; 13. servizi; 14. ultime news; 15. Race Magazine e contenuti video; 16. partner e sponsor; 17. newsletter; 18. informazioni pratiche; 19. footer. ## Barra informativa Prevedi una barra dinamica per mostrare: * temperatura dell’aria; * temperatura del tracciato; * pressione; * umidità; * vento; * eventuali alert; * stato pista; * prossima apertura; * comunicazioni urgenti. I dati meteorologici devono provenire da API o da una fonte configurabile. Quando l’API non è disponibile, utilizza dati dimostrativi chiaramente segnalati come placeholder. ## Hero principale Deve contenere: * immagine o video; * titolo; * sottotitolo; * data; * categoria; * CTA primaria; * CTA secondaria; * eventuale countdown; * controllo della leggibilità del testo. L’amministratore deve poter scegliere dal CMS quale evento o contenuto mostrare nella hero. --- # 7. DESIGN DIRECTION Progetta un’identità digitale originale per Motorsport Vallelunga. ## Caratteristiche visive Il design deve essere: * sportivo; * premium; * energico; * contemporaneo; * autorevole; * tecnico; * emozionale; * leggibile; * fortemente fotografico; * orientato agli eventi. Utilizza: * immagini full-width; * tipografia incisiva; * titoli di grandi dimensioni; * sezioni modulari; * card dinamiche; * tag di categoria; * date molto visibili; * indicatori Auto/Moto; * animazioni leggere; * transizioni fluide; * microinterazioni; * elementi grafici ispirati a pista, traiettorie, cordoli e telemetria. Non rendere il sito eccessivamente scuro o aggressivo. Mantieni equilibrio tra: * spettacolo; * funzionalità; * comunicazione istituzionale; * conversione commerciale; * leggibilità. ## Identità Vallelunga Utilizza: * logo ufficiale Motorsport Vallelunga; * marchi ACI autorizzati; * colori ufficiali disponibili; * elementi grafici compatibili con il brand. Quando non sono disponibili linee guida complete, crea un design system provvisorio facilmente aggiornabile. Non ricostruire o alterare arbitrariamente i loghi. --- # 8. DESIGN SYSTEM Crea un design system centralizzato con token modificabili. Deve comprendere: * colori primari; * colori secondari; * colori Auto; * colori Moto; * colori Gare; * colori Live; * colori di stato; * font; * dimensioni tipografiche; * spaziature; * griglia; * border radius; * ombre; * icone; * animazioni; * breakpoint; * larghezze massime; * stati interattivi. Crea componenti riutilizzabili per: * header; * mega menu; * menu mobile; * hero; * card evento; * card track day; * card gara; * card news; * card servizio; * card sponsor; * calendario; * filtri; * countdown; * meteo; * tabelle prezzi; * tabelle orari; * accordion; * tab; * gallery; * video; * download; * alert; * breadcrumb; * form; * popup; * CTA; * footer. Tutti i componenti devono avere gli stati: * default; * hover; * focus; * active; * disabled; * loading; * error; * empty. --- # 9. HEADER, MENU E NAVIGAZIONE Realizza un header: * responsive; * sticky; * accessibile; * leggero; * leggibile sopra hero chiare o scure; * dotato di menu desktop e mobile; * dotato di ricerca; * dotato di Area Utente; * dotato delle CTA principali. CTA principali consigliate: * Calendario; * Acquista; * Live Timing. Il menu desktop può utilizzare un mega menu, ma deve evitare complessità inutile. Il mega menu può mostrare: * sottosezioni; * prossimi eventi; * collegamenti rapidi; * immagine in evidenza; * CTA contestuale. Su mobile: * utilizza un menu full-screen o drawer; * mantieni accessibili Calendario e Acquista; * utilizza pulsanti sufficientemente grandi; * evita livelli di navigazione eccessivi; * permetti il ritorno al livello precedente; * mostra chiaramente la sezione corrente. --- # 10. CALENDARIO DINAMICO Il calendario deve essere una delle funzionalità principali del sito. Prevedi: * vista elenco; * vista mensile; * vista annuale; * vista card; * prossimi eventi; * eventi passati; * eventi in evidenza. ## Filtri Inserisci filtri per: * data; * mese; * anno; * Auto; * Moto; * Gare; * Track Day; * Driving Experience; * eventi aperti al pubblico; * eventi riservati; * eventi gratuiti; * eventi a pagamento; * disponibilità; * organizzatore. I filtri devono aggiornare i risultati senza ricaricare completamente la pagina, quando tecnicamente possibile. L’URL deve riflettere i filtri selezionati per consentire condivisione e indicizzazione. ## Card evento Ogni card deve mostrare: * data; * categoria; * titolo; * immagine; * stato; * breve descrizione; * disponibilità; * CTA; * eventuale prezzo; * eventuale indicazione “Live”. --- # 11. PAGINA DETTAGLIO EVENTO Crea un template dinamico per tutti gli eventi. Campi previsti: * titolo; * slug; * categoria; * tipologia Auto/Moto; * data di inizio; * data di fine; * orario; * immagine hero; * gallery; * video; * descrizione breve; * descrizione completa; * programma; * organizzatore; * luogo; * configurazione del tracciato; * prezzo; * disponibilità; * modalità di accesso; * biglietti; * iscrizioni; * CTA primaria; * CTA secondaria; * live timing; * albo di gara; * risultati; * documenti; * regolamenti; * contatti; * servizi collegati; * partner; * sponsor; * FAQ; * eventi correlati; * stato dell’evento; * evento in evidenza; * metadata SEO; * dati strutturati. Stati possibili: * programmato; * iscrizioni aperte; * quasi esaurito; * esaurito; * in corso; * concluso; * rinviato; * annullato. --- # 12. TRACK DAY AUTO E MOTO Non gestire Auto e Moto come semplici pagine testuali. Creare due landing page dinamiche e coordinate: * Track Day Auto; * Track Day Moto. Ogni landing deve comprendere: * hero; * descrizione; * prossime date; * calendario; * livelli o categorie; * orari; * prezzi; * regole; * requisiti; * briefing; * dotazioni obbligatorie; * passeggeri; * servizi disponibili; * FAQ; * documenti; * CTA di acquisto; * CTA di assistenza; * contatti; * link al live timing. ## Sessioni acquistabili Ogni turno o prodotto deve essere gestito come contenuto strutturato con: * nome; * data; * orario; * durata; * categoria; * veicolo; * livello; * prezzo online; * prezzo in circuito; * quantità disponibile; * disponibilità; * condizioni; * documenti; * servizi opzionali; * stato; * CTA. Non inserire calendari e prezzi in grandi blocchi di testo non strutturato. Utilizza collezioni CMS, database o prodotti e-commerce. --- # 13. ACQUISTO E PRENOTAZIONE Mantieni o ricrea il percorso di acquisto esistente. Il flusso ideale deve essere: 1. selezione Auto o Moto; 2. selezione della data; 3. selezione del turno; 4. selezione della categoria; 5. servizi aggiuntivi; 6. login o registrazione; 7. inserimento dati; 8. accettazione dei regolamenti; 9. pagamento; 10. conferma; 11. invio e-mail; 12. salvataggio nell’Area Utente. Prevedi: * disponibilità in tempo reale; * quantità limitate; * codici sconto; * voucher; * annullamenti; * condizioni; * fatturazione; * ricevute; * notifiche; * integrazione con il sistema esistente. Non simulare pagamenti reali senza una corretta integrazione con un payment provider. Se le API del sistema esistente non sono disponibili: * crea il frontend completo; * predisponi l’architettura; * utilizza dati demo; * segnala chiaramente l’integrazione mancante; * non mostrare false conferme di pagamento. --- # 14. LIVE TIMING, ALBO DI GARA E RISULTATI Mantieni i collegamenti e le integrazioni esistenti. Prevedi una sezione centralizzata “Live e risultati” con: * Live Timing Gare; * Live Timing Track Day; * Albo di gara; * risultati; * classifiche; * programmi; * documenti; * link esterni. Quando un servizio è esterno: * aprilo in modo chiaro; * segnala che si sta lasciando il sito; * utilizza `target="_blank"` solo quando opportuno; * aggiungi gli attributi di sicurezza; * non incorporare servizi che vietano l’embed; * verifica il comportamento mobile. --- # 15. CMS E CONTENT MODEL Configura un CMS realmente utilizzabile. Crea content type distinti per: ## Page * titolo; * slug; * parent page; * template; * moduli; * stato; * SEO; * lingua. ## Event * tutti i campi descritti nella sezione eventi. ## Track Day * tipologia; * veicolo; * data; * sessioni; * prezzi; * regole; * disponibilità. ## Track Session * orario; * durata; * categoria; * livello; * prezzo; * posti; * stato. ## Race * campionato; * organizzatore; * date; * programma; * documenti; * live timing; * albo di gara; * risultati. ## News * titolo; * categoria; * autore; * data; * immagine; * contenuto; * allegati; * correlazioni. ## Document * titolo; * categoria; * file; * data; * versione; * evento associato; * validità; * lingua. ## Service * nome; * categoria; * descrizione; * immagine; * contatti; * link; * posizione; * stato. ## Partner * nome; * logo; * categoria; * link; * descrizione; * ordine; * periodo di visibilità. ## Media Asset * file; * titolo; * copyright; * credits; * alt text; * descrizione; * categorie; * diritti di utilizzo. ## FAQ * domanda; * risposta; * categoria; * ordine; * pagina associata. ## Alert * titolo; * testo; * priorità; * data di inizio; * data di fine; * pagine di pubblicazione. ## Technical Data * nome; * valore; * unità di misura; * categoria; * icona; * ordine. --- # 16. GESTIONE EDITORIALE Il CMS deve supportare: * bozze; * anteprima; * revisioni; * versioning; * pubblicazione programmata; * scadenza automatica; * duplicazione; * contenuti correlati; * traduzioni; * tassonomie; * media library; * crop immagini; * alt text; * sostituzione dei file; * redirect; * metadata SEO; * menu modificabili; * footer modificabile; * banner temporanei; * ordinamento drag-and-drop; * importazione; * esportazione. ## Ruoli Configura almeno: * Super Admin; * Amministratore; * Redattore; * Revisore; * Responsabile Eventi; * Responsabile Track Day; * Responsabile Gare; * Responsabile Media; * Responsabile Commerciale. Implementa permessi granulari. Un responsabile Track Day non deve necessariamente poter modificare impostazioni tecniche o ruoli amministrativi. --- # 17. PAGE BUILDER MODULARE Le pagine devono essere costruite attraverso moduli riutilizzabili. Moduli richiesti: * hero; * testo; * testo e immagine; * video; * gallery; * card grid; * card slider; * calendario; * prossimi eventi; * evento principale; * track day; * news; * numeri; * dati tecnici; * record; * timeline; * servizi; * partner; * download; * documenti; * tabella; * accordion; * FAQ; * form; * mappa; * contatti; * alert; * CTA; * newsletter; * social feed; * contenuti correlati. L’amministratore deve poter: * aggiungere moduli; * rimuoverli; * riordinarli; * duplicarli; * modificarne sfondo e contenuti; * controllarne la visibilità; * programmarne la pubblicazione. --- # 18. MIGRAZIONE DEI CONTENUTI Migra tutti i contenuti ancora validi dal sito attuale. ## Regole 1. Non inventare dati. 2. Non modificare date, prezzi o contatti senza segnalarlo. 3. Non eliminare automaticamente contenuti. 4. Correggi solo errori editoriali evidenti. 5. Mantieni i documenti utili. 6. Mantieni i link ai servizi esterni. 7. Segnala duplicazioni. 8. Segnala contenuti obsoleti. 9. Segnala informazioni incoerenti. 10. Mantieni traccia della provenienza. ## Tabella di migrazione Genera una tabella con: * vecchia URL; * titolo; * tipo di contenuto; * nuova sezione; * nuova URL; * stato; * contenuto migrato; * contenuto da revisionare; * allegati; * immagini; * redirect; * note. ## Redirect Crea redirect 301 dalle vecchie URL alle nuove. Non lasciare pagine indicizzate senza destinazione, salvo scelta motivata. --- # 19. GESTIONE DELLE FOTOGRAFIE Le fotografie esistenti possono essere utilizzate come contenuti temporanei. Per ogni immagine: * importa il file quando tecnicamente e legalmente possibile; * conserva il credito; * genera alt text; * assegna una categoria; * crea crop responsive; * evita deformazioni; * ottimizza il peso. Quando una fotografia non è adeguata: * utilizza un placeholder; * indica che deve essere sostituita; * specifica il formato consigliato; * specifica il rapporto d’aspetto; * specifica la risoluzione minima; * specifica il soggetto consigliato. Formati indicativi: * hero desktop: 1920 × 1080 px; * hero mobile: 1080 × 1350 px; * card evento: 1200 × 800 px; * card news: 1200 × 675 px; * gallery: minimo 1600 px sul lato lungo; * logo partner: SVG o PNG trasparente. Non utilizzare fotografie stock non autorizzate come contenuti definitivi. --- # 20. RICERCA Implementa una ricerca globale che indicizzi: * pagine; * eventi; * gare; * track day; * news; * documenti; * regolamenti; * servizi; * FAQ. Prevedi: * suggerimenti; * filtri; * risultati per categoria; * evidenziazione delle parole; * gestione degli errori di digitazione; * nessun risultato; * ricerca mobile; * esclusione dei contenuti riservati. --- # 21. FORM Crea moduli per: * informazioni generali; * assistenza Track Day; * richiesta commerciale; * affitto pista; * accredito stampa; * partner e sponsor; * problemi di acquisto; * newsletter. Ogni modulo deve includere: * validazione; * campi accessibili; * messaggi di errore; * consenso privacy; * protezione antispam; * e-mail di conferma; * inoltro al reparto corretto; * tracciamento; * pagina di conferma; * salvataggio nel CMS o CRM, quando previsto. Gli indirizzi destinatari devono essere configurabili dal pannello amministrativo. --- # 22. RESPONSIVE DESIGN Progetta separatamente l’esperienza per: * smartphone; * tablet; * laptop; * desktop; * schermi ad alta risoluzione. Non limitarti a ridimensionare il layout desktop. Su mobile: * semplifica il menu; * mantieni visibili le CTA principali; * usa card verticali; * rendi utilizzabili calendario e filtri; * evita tabelle orizzontali non leggibili; * trasforma le tabelle in card quando necessario; * ottimizza immagini e video; * utilizza touch target adeguati; * riduci animazioni e contenuti pesanti. --- # 23. ACCESSIBILITÀ Il sito deve rispettare almeno WCAG 2.2 livello AA. Implementa: * HTML semantico; * navigazione da tastiera; * focus visibile; * skip link; * corretta gerarchia degli heading; * alt text; * label per i form; * errori accessibili; * contrasto sufficiente; * sottotitoli per i video; * riduzione del movimento; * compatibilità con screen reader; * link descrittivi; * menu accessibile; * tabelle strutturate; * dialog e popup accessibili. Non utilizzare il solo colore per comunicare categorie o stati. --- # 24. PERFORMANCE Ottimizza il sito per i Core Web Vitals. Implementa: * immagini WebP o AVIF; * immagini responsive; * lazy loading; * video ottimizzati; * caching; * CDN; * minificazione; * code splitting; * caricamento differito; * ottimizzazione dei font; * preload selettivo; * riduzione degli script; * SSR o SSG quando opportuno; * gestione efficiente delle API. Obiettivi Lighthouse indicativi su mobile: * Performance: almeno 85; * Accessibility: almeno 95; * Best Practices: almeno 90; * SEO: almeno 90. La hero non deve compromettere il Largest Contentful Paint. --- # 25. SEO Mantieni e migliora il patrimonio SEO esistente. Implementa: * title modificabili; * meta description; * URL leggibili; * canonical; * sitemap XML; * robots.txt; * redirect 301; * breadcrumb; * Open Graph; * social preview; * alt text; * heading corretti; * pagine archivio; * paginazione; * gestione degli eventi passati; * pagina 404; * monitoraggio link interrotti; * hreflang per eventuali lingue. Dati strutturati richiesti: * Organization; * SportsActivityLocation; * Event; * SportsEvent; * Article; * BreadcrumbList; * FAQPage; * Product, quando applicabile; * Offer, quando applicabile. Non marcare come Event contenuti che non rappresentano eventi reali. --- # 26. MULTILINGUA Predisponi almeno: * italiano; * inglese. Il CMS deve consentire: * traduzione indipendente; * stato della traduzione; * URL localizzate; * menu per lingua; * metadata per lingua; * documenti localizzati; * fallback controllato; * hreflang. Non pubblicare traduzioni automatiche come definitive senza revisione umana. --- # 27. PRIVACY, COOKIE E SICUREZZA Implementa: * cookie banner conforme; * Consent Management Platform; * blocco preventivo dei cookie non necessari; * preferenze modificabili; * privacy policy; * cookie policy; * gestione consensi; * HTTPS; * protezione dei form; * sanitizzazione input; * protezione CSRF; * protezione XSS; * limitazione tentativi di login; * gestione sicura delle sessioni; * backup; * log delle attività; * ruoli e permessi. Social feed, video, mappe e servizi di terze parti devono essere caricati nel rispetto del consenso. --- # 28. ANALYTICS Predisponi il tracciamento di: * visualizzazione evento; * visualizzazione Track Day; * click su Calendario; * click su Acquista; * avvio checkout; * acquisto; * invio form; * download; * click Live Timing; * click Albo di gara; * ricerca; * filtri; * click telefono; * click e-mail; * click social; * iscrizione newsletter; * login; * registrazione. Il tracciamento deve rispettare le preferenze privacy. Utilizza un data layer strutturato. --- # 29. TECNOLOGIA E IMPLEMENTAZIONE Utilizza lo stack meglio supportato dalla piattaforma AI, privilegiando: * modularità; * manutenibilità; * sicurezza; * prestazioni; * gestione CMS; * scalabilità; * SEO; * accessibilità. Non creare un prototipo statico scollegato dai contenuti. Se la piattaforma dispone di CMS nativo: * configura direttamente collezioni; * relazioni; * ruoli; * workflow; * contenuti. Se non dispone di CMS nativo: * utilizza un CMS headless compatibile; * documenta l’integrazione; * configura modelli e API. Utilizza dati mock solamente quando: * il dato reale non è disponibile; * l’API richiede credenziali; * il sistema esterno non è accessibile. Ogni dato mock deve essere chiaramente contrassegnato nel CMS o nella documentazione, non necessariamente nell’interfaccia pubblica destinata alla produzione. --- # 30. PAGINE DA IMPLEMENTARE Realizza almeno: 1. Homepage; 2. Il circuito; 3. Storia; 4. Dati tecnici; 5. Record; 6. Calendario; 7. Archivio eventi; 8. Dettaglio evento; 9. Track Day Auto; 10. Track Day Moto; 11. Calendario Track Day; 12. Pagina sessione acquistabile; 13. Gare; 14. Dettaglio gara; 15. Live e risultati; 16. Driving Experience; 17. Servizi; 18. News; 19. Dettaglio news; 20. Race Magazine; 21. Media e stampa; 22. Partner e sponsor; 23. Contatti; 24. Informazioni utili; 25. Risultati di ricerca; 26. Login; 27. Area Utente; 28. Checkout o collegamento al sistema di acquisto; 29. Privacy; 30. Cookie policy; 31. Pagina 404. --- # 31. TEST OBBLIGATORI Esegui: * test desktop; * test mobile; * test tablet; * test menu; * test filtri; * test calendario; * test ricerca; * test form; * test checkout; * test link esterni; * test download; * test CMS; * test permessi; * test accessibilità; * test SEO; * test performance; * test cookie; * test redirect; * test errori 404; * test immagini mancanti; * test contenuti vuoti. Prevedi correttamente gli empty state, ad esempio: * nessun evento disponibile; * nessun risultato; * calendario non pubblicato; * live timing non attivo; * documento non disponibile; * evento concluso. --- # 32. OUTPUT RICHIESTI Al termine devi fornire: ## A. Audit * elenco delle pagine rilevate; * contenuti rilevati; * criticità; * duplicazioni; * contenuti obsoleti; * link interrotti; * integrazioni. ## B. Architettura * sitemap definitiva; * menu desktop; * menu mobile; * footer; * tassonomie; * user journey. ## C. Design * design system; * component library; * template; * comportamento responsive; * stati interattivi. ## D. Implementazione * sito navigabile; * pagine collegate; * CMS configurato; * contenuti importati; * filtri funzionanti; * ricerca funzionante; * form funzionanti; * integrazioni disponibili. ## E. Migrazione * mapping vecchia-nuova URL; * redirect; * contenuti migrati; * contenuti da revisionare; * fotografie da sostituire; * documenti mancanti. ## F. Documentazione * guida sintetica al CMS; * ruoli; * workflow; * procedure di aggiornamento; * integrazioni mancanti; * checklist di pubblicazione. --- # 33. CRITERI DI ACCETTAZIONE Il progetto può essere considerato completato solamente quando: 1. il sito è realmente navigabile; 2. non è costituito da una sola homepage; 3. le pagine interne sono implementate; 4. i contenuti Vallelunga sono stati censiti; 5. i contenuti utili sono stati migrati; 6. l’alberatura è più chiara rispetto all’attuale; 7. calendario ed eventi sono dinamici; 8. Track Day Auto e Moto sono gestiti separatamente; 9. prezzi, regole e calendari sono strutturati; 10. il sito è modificabile tramite CMS; 11. immagini e testi possono essere sostituiti; 12. il design è originale; 13. Misano è utilizzato come benchmark senza essere copiato; 14. il sito è responsive; 15. accessibilità e SEO sono implementate; 16. le vecchie URL sono gestite; 17. le integrazioni mancanti sono dichiarate; 18. non sono stati inventati dati; 19. non vengono mostrati acquisti o pagamenti falsamente funzionanti; 20. il risultato è pronto per essere revisionato e successivamente pubblicato. --- # 34. ISTRUZIONE FINALE Procedi direttamente con: 1. scansione dei due siti; 2. audit dei contenuti; 3. definizione della nuova sitemap; 4. definizione del content model; 5. creazione del design system; 6. realizzazione della homepage; 7. realizzazione delle pagine interne; 8. configurazione del CMS; 9. migrazione dei contenuti; 10. collegamento delle integrazioni; 11. ottimizzazione responsive; 12. test; 13. preparazione dei redirect; 14. consegna della documentazione. Non fermarti alla proposta teorica. Non creare esclusivamente wireframe o immagini. Genera e implementa concretamente il sito utilizzando le funzionalità disponibili nella piattaforma. Quando una decisione secondaria non è definita: * scegli la soluzione più semplice per l’utente; * mantieni coerenza con il benchmark; * rispetta l’identità Vallelunga; * utilizza componenti modificabili; * registra la decisione nella documentazione. Quando mancano dati, fotografie, API o credenziali: * non interrompere il progetto; * utilizza placeholder chiaramente identificati; * completa comunque struttura e interfaccia; * crea un elenco finale degli elementi necessari per la pubblicazione. La priorità deve essere: 1. facilità di consultazione; 2. centralità del calendario; 3. semplicità di acquisto; 4. gestione autonoma tramite CMS; 5. identità Motorsport Vallelunga; 6. performance; 7. accessibilità; 8. SEO; 9. scalabilità futura.

Creato con Themelab — Genera layout AI e temi WordPress