diff --git a/contents/assistenza/assistenza.yml b/contents/assistenza/assistenza.yml new file mode 100644 index 000000000..85539ed62 --- /dev/null +++ b/contents/assistenza/assistenza.yml @@ -0,0 +1,70 @@ +breadcrumb: Assistenza +name: Assistenza +modal: + selectRepresent: + - value: public-administration + label: Pubblica amministrazione + - value: fornitore-it + label: Fornitore IT + - value: other + label: Altro + selectArgument: + - value: Accesso al portale + label: Accesso al portale + - value: Iscrizione newsletter + label: Iscrizione alla newsletter + - value: Generale + label: Generale + selectInQuanto: + - value: dirigente-administration + label: Dirigente dell’amministrazione + - value: dirigente-it-administration + label: Dirigente sistemi IT dell’amministrazione + - value: dipendente-administration + label: Dipendente dell’amministrazione + - value: other + label: Altro + selectMessage: + - value: general + label: Generale + - value: investimenti-pnrr + label: Investimenti del PNRR + - value: richiesta-fondi + label: Richiesta dei fondi + - value: realizzazione-progetti + label: Realizzazione dei progetti + - value: erogazione-risorse + label: Erogazione delle risorse + - value: technical-support + label: Supporto tecnico + modalUpdatesTitle: Ricevi aggiornamenti + modalMessageTitle: Scrivici + updatesLabel: AGGIORNAMENTI + updatesInfo: Lascia i tuoi contatti per ricevere materiali e
informazioni sulle novità e gli avvisi di Italia digitale 2026 + mandatoryAdvise: I campi con * sono obbligatori + requiredLabel: Questo campo è richiesto + emailLabel: EMAIL* + emailValidationLabel: Per favore inserisci un'indirizzo email valido. + argumentLabel: Argomento* + measureLabel: Misura* + selectPlaceholder: Scegli una voce dall’elenco + enteValidationLabel: Per favore inserisci una denominazione ente valida. + enteTypeLabel: TIPO DI ENTE/STRUTTURA* + enteNameLabel: NOME STRUTTURA* + inQuantoLabel: IN QUANTO* + directContactLabel: CONTATTO DIRETTO + directContactInfo: Un Team dedicato è a tua disposizione per ricevere
chiarimenti sugli investimenti o approfondire alcuni temi + addMessageLabel: Voglio aggiungere un messaggio + nameLabel: Nome richiedente:* + objectLabel: Oggetto* + messageSelectLabel: ARGOMENTO MESSAGGIO + descriptionLabel: Testo messaggio* + telLabel: "Contatto telefonico" + radioGroupLabel: DICHIARO + representLabel: RAPPRESENTO* + messageLabel: TESTO MESSAGGIO + comunicationRadio: Acconsento a essere contattato per comunicazioni specifiche* + privacyRadio: Ho letto e compreso + privacyRadioLinkLabel: l’informativa privacy + mandatoryRadioLabel: Seleziona entrambe le voci per proseguire + sendButtonLabel: INVIA diff --git a/contents/candida-pa/candida-pa.yml b/contents/candida-pa/candida-pa.yml new file mode 100644 index 000000000..4532cba0b --- /dev/null +++ b/contents/candida-pa/candida-pa.yml @@ -0,0 +1,38 @@ +name: FAQ - PA digitale 2026 +hero: + title: Domande frequenti + subtitle: Esplora le risposte alle domande più frequenti o fai una ricerca per parola chiave +sidebar: + - sectionTitle: 1. Cerca gli avvisi per la tua PA + sectionId: digital-identity + sectionActive: true + - sectionTitle: 2. Configura il pacchetto + sectionId: select-administration + sectionActive: false + - sectionTitle: 3. Invia la domanda di partecipazione + sectionId: verify-data + sectionActive: false + - sectionTitle: 4. Ricevi aggiornamenti + sectionId: confirm-subscription + sectionActive: false +verticalTimeline: + - index: 0 + title: 'Cerca gli avvisi per la tua PA' + icon: '/assets/candida-pa-lens.svg' + headerParagraph: "All'interno della sezione “Avvisi“ puoi identificare gli avvisi più idonei per la tua PA, filtrandoli in base a misura, beneficiari e stato dell'avviso." + sectionId: 'digital-identity' + - index: 1 + title: 'Configura il pacchetto' + icon: '/assets/configura-pacchetto.svg' + headerParagraph: 'Una volta identificato l’avviso di interesse, segui la configurazione guidata per definire il pacchetto sulla base delle esigenze della tua PA: puoi selezionare servizi e modalità implementative, e creare la domanda di partecipazione.' + sectionId: 'select-administration' + - index: 2 + title: 'Invia la domanda di partecipazione' + icon: '/assets/invia-candidatura.svg' + headerParagraph: 'In questa fase puoi visualizzare i dettagli della domanda di partecipazione che hai creato ed effettuare eventuali modifiche. Una volta firmato digitalmente potrai inviarlo attraverso la piattaforma per completare la candidatura.' + sectionId: 'verify-data' + - index: 3 + title: 'Ricevi aggiornamenti' + icon: '/assets/notifiche.svg' + headerParagraph: 'All’interno dell’area riservata puoi controllare lo stato della tua candidatura e ricevere le notifiche dedicate all’avanzamento della pratica digitale.' + sectionId: 'confirm-subscription' \ No newline at end of file diff --git a/contents/come-partecipare/come-partecipare.yml b/contents/come-partecipare/come-partecipare.yml new file mode 100644 index 000000000..d6cac4808 --- /dev/null +++ b/contents/come-partecipare/come-partecipare.yml @@ -0,0 +1,64 @@ +title: Come fare - PA digitale 2026 +name: Come Fare - PA digitale 2026 +hero: + title: 'Come partecipare a PA digitale 2026' + body: Puoi richiedere i fondi del PNRR dedicati alla transizione digitale, classificare dati e servizi e rendicontare l’avanzamento dei progetti. +keypoints: + category: 'I punti chiave' + title: 'Come fare per' + list: + - number: "01" + image: 'pc-card.svg' + title: 'Attivare la tua PA' + desc: 'Per partecipare agli avvisi pubblici e richiedere i finanziamenti' + - number: "02" + image: 'icon-chat.svg' + title: 'Ricevere assistenza' + desc: 'Per risolvere dubbi o problemi riguardo la piattaforma e le candidature.' + - number: "03" + image: 'invia-candidatura.svg' + title: 'Candidare una PA agli avvisi' + desc: 'Attraverso la creazione e l’invio del documento di candidatura.' +sectionFirst: + number: '01' + title: 'Attivare la tua PA' + text: 'L’attivazione del profilo della PA è il primo passaggio per partecipare agli avvisi pubblici e richiedere i finanziamenti per avviare il processo di transizione digitale.

Il rappresentante legale, o un suo incaricato, può accedere alla piattaforma grazie a SPID o CIE e, attraverso un percorso guidato, completare il processo di attivazione.' + button: true + linkTo: "/come-partecipare/crea-profilo" + image: 'kp-section-1.svg' + bottomSection: false + BottomImage1: 'bottom-1-1.svg' + BottomImage2: 'bottom-1-2.svg' + BottomLinkLabel1: Come funziona l'accesso con SPID/CIE + BottomLinkLabel2: Cosa può fare il rappresentante legale + ariaLabel: "Scopri di più su come attivare la tua PA" +sectionSecond: + number: '02' + title: 'Candidare una PA agli avvisi' + text: In base alla tipologia e agli obiettivi della PA, è possibile identificare gli avvisi pubblici più idonei ad avviare il processo di transizione digitale.

Una volta identificato l'avviso, è possibile candidare una PA attraverso un processo guidato, che permette di comporre il documento di candidatura e inviarlo tramite la piattaforma. + button: true + linkTo: "/come-partecipare/candida-pa" + image: 'kp-section-2.svg' + bottomSection: false + BottomImage1: 'bottom-1-1.svg' + BottomImage2: 'bottom-1-2.svg' + BottomLinkLabel1: Come funziona l'accesso con SPID/CIE + BottomLinkLabel2: Cosa può fare il rappresentante legale + ariaLabel: "Scopri di più su come candidare una PA agli avvisi" +sectionThird: + number: '03' + title: 'Classificare dati e servizi' + text: La classificazione dei dati e dei servizi è fondamentale per abilitare il processo di migrazione delle PA al cloud.

La classificazione deve essere trasmessa entro il 18 luglio 2022 per identificare la tipologia del cloud di destinazione per i servizi della PA. + image: 'kp-section-3.svg' + button: true + lBlue: true + ariaLabel: "Scopri di più su come classificare dati e servizi" +sectionFourth: + number: '04' + title: 'Ricevere assistenza' + text: La piattaforma PA digitale 2026 permette di candidare le PA agli avvisi pubblici e di gestire le attività attraverso l’area riservata.

Qualsiasi dubbio o problema si possa riscontrare, è possibile trovare le risposte alle domande più comuni e chiedere assistenza dedicata. + linkTo: '/come-partecipare/ricevi-assistenza' + button: true + image: 'assistenza.svg' + reverse: true + ariaLabel: "Scopri di più su come ricevere assistenza" diff --git a/contents/crea-profilo/crea-profilo.yml b/contents/crea-profilo/crea-profilo.yml new file mode 100644 index 000000000..12969684d --- /dev/null +++ b/contents/crea-profilo/crea-profilo.yml @@ -0,0 +1,41 @@ +name: FAQ - PA digitale 2026 +hero: + title: Domande frequenti + subtitle: Esplora le risposte alle domande più frequenti o fai una ricerca per parola chiave +sidebar: + - sectionTitle: 1. Accedi tramite identità digitale + sectionId: digital-identity + sectionActive: true + - sectionTitle: 2. Seleziona l’amministrazione  + sectionId: select-administration + sectionActive: false + - sectionTitle: 3. Verifica i dati della PA su IPA + sectionId: verify-data + sectionActive: false + - sectionTitle: 4. Conferma la registrazione + sectionId: confirm-subscription + sectionActive: false + - sectionTitle: Guarda il video dedicato + sectionId: watch-video + sectionActive: false +verticalTimeline: + - index: 0 + title: 'Accedi tramite identità digitale' + icon: '/assets/pc-card.svg' + headerParagraph: "Se sei il rappresentante legale dell’amministrazione, o una persona incaricata, accedi tramite identità digitale SPID o CIE alla piattaforma." + sectionId: 'digital-identity' + - index: 1 + title: 'Seleziona l’amministrazione ' + icon: '/assets/goals-card.svg' + headerParagraph: 'Dopo l’accesso ti verrà richiesto di inserire un’email istituzionale e di selezionare da una lista la tua amministrazione mediante il nome della PA o il codice IPA.' + sectionId: 'select-administration' + - index: 2 + title: 'Verifica i dati della PA su IPA' + icon: '/assets/lens-card.svg' + headerParagraph: 'Alcune informazioni sull’amministrazione, tra cui il nome del responsabile legale della PA e gli indirizzi PEC, vengono caricati dalla banca dati IPA. Se i dati caricati automaticamente non dovessero essere corretti, dovrai aggiornarli su IPA.' + sectionId: 'verify-data' + - index: 3 + title: 'Conferma la registrazione' + icon: '/assets/mail-card.svg' + headerParagraph: 'Una volta selezionato l’indirizzo PEC più appropriato a ricevere le comunicazioni da PA digitale 2026, dovrai confermare l’attivazione del profilo della PA e del suo rappresentante legale mediante un link di verifica ricevuto via PEC.' + sectionId: 'confirm-subscription' \ No newline at end of file diff --git a/contents/errorsLabels.yml b/contents/errorsLabels.yml new file mode 100644 index 000000000..e69de29bb diff --git a/contents/faq-page/faq.yml b/contents/faq-page/faq.yml index 83aa24e8b..111e2b36d 100644 --- a/contents/faq-page/faq.yml +++ b/contents/faq-page/faq.yml @@ -6,38 +6,42 @@ sidebar: - sectionTitle: Generali sectionId: generali sectionActive: true - - sectionTitle: Investimenti del PNRR - sectionId: investimenti + - sectionTitle: Accesso + sectionId: accesso sectionActive: false - - sectionTitle: Richiesta dei fondi - sectionId: richiesta-fondi + - sectionTitle: Gestione utenti + sectionId: gestione-utenti sectionActive: false - - sectionTitle: Realizzazione dei progetti - sectionId: realizzazione - sectionActive: false - - sectionTitle: Erogazione delle risorse - sectionId: erogazione + - sectionTitle: Candidatura + sectionId: candidatura sectionActive: false - sectionTitle: Supporto tecnico sectionId: supporto-tecnico sectionActive: false + - sectionTitle: Misura 1.4.3 pagoPA + sectionId: measure-1-4-3-pagopa + sectionActive: false + - sectionTitle: Misura 1.4.3 app IO + sectionId: measure-1-4-3-appio + sectionActive: false + - sectionTitle: Misura 1.4.4 + sectionId: measure-1-4-4 + sectionActive: false questions: - title: Generali description: La strategia di ripresa economica e gli interventi previsti per il rilancio digitale del Paese sectionId: generali accordions: - title: Cos'è Next Generation EU? - content: Next Generation EU (NGEU) è un piano Next da €750 miliardi di Euro che ha l'obiettivo di rilanciare l'economia europea dopo la pandemia di COVID-19 e di renderla più verde e digitale. + content: Next Generation EU (NGEU) è un piano Next da €750 miliardi che ha l'obiettivo di rilanciare l'economia europea dopo la pandemia di COVID-19 e di renderla più verde e digitale. linkLabel: Vai al sito Next Generation EU dell'Unione Europea link: 'https://europa.eu/next-generation-eu/index_it' ariaLabel: Vai al sito Next Generation EU dell'Unione Europea (Collegamento esterno - Apre su nuova scheda) - accordionId: faq-1 - title: Cos'è Italia domani, il Piano nazionale di ripresa e resilienza (PNRR)? content: Italia domani è il nome del Piano nazionale di ripresa e resilienza (PNRR) approvato dal Governo italiano il 29 aprile del 2021 all’interno del programma europeo Next Generation EU. L’Italia è la prima beneficiaria, in valore assoluto, del programma Next Generation EU, con un totale di €191,5 miliardi. Mediante un Fondo Complementare, finanziato direttamente dal bilancio dello Stato, il nostro Paese ha previsto un'integrazione di €30,6 mld. Il totale degli investimenti previsti è pertanto di €222,1 miliardi. linkLabel: Vai al sito Italia domani link: 'https://italiadomani.gov.it/' ariaLabel: Vai al sito Italia domani (Collegamento esterno - Apre su nuova scheda) - accordionId: faq-2 - title: Cos'è Italia digitale 2026? content: Italia digitale 2026 è il piano strategico per la transizione digitale e la connettività promosso dal Ministro per l’innovazione tecnologica e la transizione digitale all’interno di Italia domani. Il Piano, che raccoglie il 27% delle risorse di Italia domani, si sviluppa su due assi. Il primo asse (6,71 miliardi) riguarda le infrastrutture digitali e la connettività a banda ultra larga. Il secondo (6,74 miliardi) riguarda tutti quegli interventi volti a trasformare la Pubblica Amministrazione (PA) in chiave digitale. I due assi sono necessari per garantire che tutti i cittadini abbiano accesso a connessioni veloci per vivere appieno le opportunità che una vita digitale può e deve offrire e per migliorare il rapporto tra cittadino e pubblica amministrazione rendendo quest’ultima un alleato nella vita digitale dei cittadini. linkLabel: Scopri la strategia Italia digitale 2026 @@ -50,88 +54,197 @@ questions: ariaLabel: Vai agli obiettivi di italia digitale 2026 (Collegamento esterno - Apre su nuova scheda) - title: Cos’è “PA digitale 2026”? content: “PA digitale 2026” è il sito del Dipartimento per la trasformazione digitale, guidato dal Ministro per l’innovazione tecnologica e la transizione digitale, che permette alla PA di accedere ai fondi di Italia digitale 2026. Il sito sarà il punto unico di accesso per avere informazioni sugli avvisi dedicati alla digitalizzazione della PA, fare richiesta di accesso ai fondi e rendicontare l’avanzamento dei progetti. Inoltre è possibile richiedere assistenza diretta e avere tutte le info sulle azioni di accompagno previste dal Dipartimento per la trasformazione digitale della Presidenza del Consiglio dei ministri. - - title: Investimenti del PNRR - description: Gli investimenti di Italia digitale 2026 previsti dal Piano Nazionale di Ripresa e Resilienza (PNRR) - sectionId: investimenti - accordions: - - title: Quali sono gli investimenti di Italia digitale 2026? - content: | - - - title: Dove posso trovare informazioni su tutti gli investimenti di Italia domani, il Piano nazionale di ripresa e resilienza? - content: Per tutte le informazioni sugli investimenti di Italia domani, il Piano nazionale di ripresa e resilienza dell’Italia, è possibile visitare il sito ufficiale del Governo https://italiadomani.gov.it/ - - title: Richiesta dei fondi - description: I bandi e gli avvisi degli investimenti di Italia digitale 2026 e tutte le indicazioni necessarie per scoprire le opportunità e candidarsi - sectionId: richiesta-fondi + - title: Accesso + description: La strategia di ripresa economica e gli interventi previsti per il rilancio digitale del Paese + sectionId: accesso accordions: - - title: Chi può accedere alle risorse di Italia digitale 2026? - content: Il ruolo della PA, soprattutto quella locale, è centrale nell’implementazione di Italia digitale 2026. Le risorse a disposizione servono per permettere alle diverse amministrazioni di partecipare in prima persona al percorso di transizione digitale del Paese. Per questo i fondi sono rivolti a: + - title: Chi può accedere a PA digitale 2026? + content: Il rappresentante legale dell'amministrazione, o una persona incaricata ad agire per suo conto, può accedere con SPID/CIE alla piattaforma. Durante la procedura di primo accesso alla piattaforma, è necessario selezionare e attivare il profilo della PA di riferimento. + accordionId: faq-1 + - title: Quali sono i requisiti per il primo accesso a PA digitale 2026? + content: Per accedere alla piattaforma è necessario disporre della propria identità digitale (SPID o CIE) e della propria email istituzionale. Il rappresentante legale dell'amministrazione (o chi opera per suo conto) deve inoltre avere la possibilità di consultare la PEC dell'amministrazione per la quale intende operare. + accordionId: faq-2 + - title: Cosa è necessario per completare la procedura di primo accesso a PA digitale 2026? + content: Per completare la procedura di primo accesso alla piattaforma PA digitale 2026, è necessario confermare il link di verifica presente nella PEC inviata all'amministrazione di riferimento. Il link di verifica ha una validità di 7 giorni. + - title: È possibile accedere alla piattaforma anche quando non si ricopre il ruolo di rappresentante legale dell'amministrazione? + content: Si. Nel caso in cui a effettuare l'accesso non sia direttamente il rappresentante legale ma una persona da lui incaricata, è presente una casella da spuntare per dichiarare di stare agendo per conto del rappresentante legale dell'amministrazione. Alla fine della procedura di primo accesso, il rappresentante legale della PA riceve una PEC con cui viene a informato del fatto che la persona incaricata ha agito per suo conto su PA digitale 2026. accordionId: faq-3 - - title: Quando saranno pubblicati gli avvisi? - content: La pubblicazione dei primi avvisi è prevista per la primavera del 2022. - - title: Come posso fare richiesta di accesso ai fondi? - content: A seconda della tipologia di misura e di PA, sarà possibile accedere alle risorse o attraverso delle soluzioni standard o attraverso la presentazione di progetti. - - title: Come funzionano gli avvisi a soluzioni standard? - content: "Per le misure con una platea ampia di beneficiari (oltre 1.000 PA), è prevista una modalità di accesso per soluzioni standard. Un percorso semplificato e guidato che va dalla richiesta dei finanziamenti all’erogazione dei fondi. Le soluzioni standard hanno 3 caratteristiche principali:
  1. Soluzioni standard: ogni PA, in base a tipologia e dimensione, potrà accedere alle misure attraverso soluzioni standard, ciascuna con un valore economico predefinito. Non sarà necessario scrivere e presentare progetti per ricevere finanziamenti;
  2. Registrazione unica: per semplificare l’accesso ai fondi del PNRR le amministrazioni potranno accedere - con un’unica registrazione - a più misure, richiedendo, per esempio, sia finanziamenti per la migrazione al cloud che per il miglioramento dei siti web;
  3. Per obiettivi: per semplificare l’erogazione delle risorse, i contributi saranno riconosciuti alle amministrazioni sulla base del raggiungimento di specifici obiettivi predefiniti. Il processo di rendicontazione sarà quindi alleggerito, e non sarà necessario rendicontare le singole spese effettuate per ottenere i fondi.
" - - title: Come funzionano gli avvisi per cui è necessario presentare un progetto? - content: Per le misure con una platea ristretta di beneficiari (fino a 1.000 PA), è stata prevista una modalità di accesso che prevede la presentazione di progetti, sempre ispirata ai principi della semplicità e della riduzione degli oneri amministrativi Con la pubblicazione degli avvisi, le amministrazioni potranno candidarsi per avere accesso alle risorse del PNRR attraverso un percorso guidato per la presentazione di progetti. Alla conclusione della fase di selezione, saranno individuate le amministrazioni ammesse a finanziamento. Dei criteri di valutazione automatici consentiranno una valutazione dei progetti più rapida. L’intento è quello di accostare ad un’analisi oggettiva delle proposte, delle modalità di candidatura che facilitino tempi rapidi e certezza procedurale. - - title: Realizzazione dei progetti - description: Le indicazioni pratiche per ricevere chiarimenti e aggiornamenti - sectionId: realizzazione + - title: Cosa bisogna fare se i dati visualizzati nella procedura di attivazione del profilo della PA non sono aggiornati? + content: Nello step di selezione dell'amministrazione mediante nome della PA, codice IPA o luogo, il sistema precarica i dati dell'amministrazione presenti nella banca dati IPA. Se si riscontrano inesattezze nei dati della PA visualizzati, è necessario modificarli su IPA (https://indicepa.gov.it/ipa-portale/) e riprendere l’attivazione della PA dopo l’aggiornamento. È bene ricordare che per visualizzare su PA digitale 2026 i dati aggiornati a seguito di modifiche su IPA, potrebbero essere necessarie alcune ore. + - title: Cosa bisogna fare se la PA non riceve la PEC contenente il link di verifica oppure non riesce a completare il processo di attivazione entro 7 giorni? + content: Se la PEC dell'amministrazione non ha ricevuto la comunicazione oppure sono trascorsi più di 7 giorni dalla ricezione del link di verifica, è necessario richiedere l'invio di una nuova email. È possibile richiedere l'invio di una nuova email contenente il link per completare il processo, premendo il pulsante "Invia nuova email" presente nella pagina che si visualizza accedendo nuovamente alla piattaforma. + - title: Cosa succede se, al momento di scegliere la PA per la quale si intende accedere, non si trova una corrispondenza nell'elenco della piattaforma? + content: Bisogna verificare, ed eventualmente aggiornare, i dati inseriti all'interno di IPA accedendo a https://indicepa.gov.it/ipa-portale/. Per visualizzare i dati aggiornati su PA digitale 2026 potrebbe essere necessarie alcune ore. + - title: È possibile accedere come nuovo rappresentante legale per una PA in cui è già presente un utente dello stesso ruolo? Cosa bisogna fare per cambiare l'utenza del rappresentante legale associata a una PA? + content: Nel momento in cui un nuovo rappresentante legale accede alla piattaforma per conto di una PA che ha già un utente attivo in quel ruolo, il sistema invia una PEC all’amministrazione per confermare la nuova utenza e, contestualmente, disabilitare la precedente. + - title: Senza il servizio SPID/CIE, è comunque possibile accedere a PA digitale 2026? + content: No. Il possesso del servizio di identità digitale (SPID o CIE) è indispensabile per accedere a PA digitale 2026. + - title: È possibile accedere alla piattaforma con diverse identità SPID/CIE? + content: No. Lo SPID/CIE utilizzato in fase di accesso deve essere lo stesso anche per tutti i futuri accessi a PA digitale 2026. + - title: Cosa fare in caso di mancata autenticazione con SPID/CIE a seguito di un invito? + content: Bisogna accertarsi che la persona che ha mandato l'invito a entrare in PA digitale 2026 per conto di una PA, abbia inserito correttamente i dati. + - title: Cosa fare se in qualità di utente invitato non si riesce ad accedere a PA digitale 2026? + content: Dopo aver ricevuto l'email di invito e aver verificato la correttezza dei dati, bisogna accertarsi di aver completato la procedura di accesso facendo click sul link di verifica all'interno dell'email. + - title: Gestione utenti + description: La strategia di ripresa economica e gli interventi previsti per il rilancio digitale del Paese + sectionId: gestione-utenti accordions: - - title: Quando potranno partire i progetti? - content: Nell'estate del 2022 saranno assegnati i fondi, permettendo così alle amministrazioni di avviare i loro progetti. - - title: Cos’è il Transformation Office? - content: "Per sostenere la transizione digitale dei singoli Enti, nasce un team dedicato: il Transformation Office. Questa struttura è parte del Dipartimento per la trasformazione digitale, e farà da ponte con amministrazioni locali e fornitori IT della PA, con assistenza informativa e tecnica." - - title: Come posso ricevere aggiornamenti e ottenere materiale informativo? - content: In attesa della pubblicazione degli avvisi, è possibile richiedere di rimanere aggiornati. Lasciando i tuoi contatti verrai anche notificato su tutte le novità, le iniziative e su eventuali attività informative pensate per agevolare la conoscenza e la futura partecipazione agli avvisi. - - title: È possibile richiedere supporto? - content: Sì, il sito prevede un modulo di contatto per richiedere assistenza e porre domande. Lasciando i propri contatti e selezionando l’argomento della richiesta, è possibile inviare un messaggio. Sarete poi ricontattati via mail dallo staff dedicato. - modalBtn: Rimani aggiornato - ariaLabel: testo aria label - - title: Erogazione delle risorse - description: Le indicazioni pratiche per ricevere chiarimenti e aggiornamenti - sectionId: erogazione + - title: Quanti utenti è possibile invitare in PA digitale 2026 per una singola amministrazione? + content: "Oltre al ruolo di rappresentante legale, ogni amministrazione può avere un massimo di 3 utenti. I ruoli possono essere così suddivisi: 1 incaricato e 2 editori, oppure 3 editori." + - title: Che differenza c'è tra rappresentante legale, incaricato ed editore? + content: L'utenza del rappresentante legale è la prima creata per la PA all'interno della piattaforma e ha la facoltà di creare e gestire tutti gli altri ruoli utente. Un utente con ruolo di "incaricato" può visualizzare le informazioni relative alla PA e alle candidature, compilare moduli, caricare documenti e invitare utenti “editori”. È possibile essere utente “incaricato” per più amministrazioni (es. forme aggregative quali unioni di comuni). Il rappresentante legale può invitare un solo utente con il ruolo di “incaricato”. Un utente con ruolo di "editore" può visualizzare le informazioni relative alla PA e alle candidature, compilare moduli e caricare documenti. Non può invitare altri utenti. È possibile essere utente “editore” per una sola amministrazione. Il rappresentante legale o l'incaricato possono invitare uno o più utenti con questo ruolo nei limiti del numero di utenti permesso dalla piattaforma. + - title: Come si effettua l'accesso a PA digitale 2026 per un'amministrazione in qualità di incaricati o editori? + content: Per entrare in PA digitale 2026 in qualità di incaricato o editore per una PA, bisogna ricevere un invito da parte del rappresentante legale associato all'amministrazione. + - title: Cosa fare se l'utente invitato, dopo essersi autenticato con SPID/CIE, non riesce a completare l'accesso? + content: Potrebbe accadere che i dati contenuti nell'invito e i dati ereditati da SPID/CIE dell'utente invitato non coincidano. In questo caso, il rappresentante legale deve controllare di aver correttamente inserito i dati anagrafici nel modulo di invito, ed eventualmente, modificarli. + - title: Cosa bisogna fare se l'utente invitato non riceve l'email di invito? + content: Bisogna verificare la correttezza dei dati inseriti nella sezione "Utenti" e nel caso risultassero errati procedere alla correzione. Qualora fossero corretti, si consiglia di controllare la cartella spam della posta elettronica oppure contattare il supporto di PA digitale 2026 dall'apposito modulo di contatto. + - title: Cosa succede se i dati contenuti nell'invito non coincidono con i dati SPID/CIE? + content: In caso di mancata corrispondenza tra i dati SPID e quelli presenti nell'invito, l’utente visualizza una schermata con messaggio di errore e viene invitato a contattare la propria amministrazione per maggiori informazioni. + - title: Come si modificano i dati di un utente di una PA? + content: Il rappresentante legale o l'incaricato, dopo aver selezionato la PA per la quale intende operare, accede, attraverso il menù a tendina che si apre facendo click sul suo nome, alla sezione "Gli utenti della tua PA". In questa sezione visualizza la lista degli utenti collegati alla propria amministrazione e facendo click sull'icona "Modifica" può modificare i dati di un utente attivo. + - title: Come si revoca un'utenza? + content: Il rappresentante legale o l'incaricato, dopo aver selezionato la PA per la quale intende operare, accede, attraverso il menù a tendina che si apre facendo click sul suo nome, alla sezione "Gli utenti della tua PA". In questa sezione visualizza la lista degli utenti collegati alla propria amministrazione e facendo click sull'icona "Revoca" può revocare l'utenza. + - title: Sono previste funzionalità per supportare la partecipazione di forme aggregative come, ad esempio, le unioni di comuni? + content: Si. All’interno della piattaforma l’utente con il ruolo di “incaricato” ha facoltà di operare per più amministrazioni. Il ruolo di "incaricato" può essere assegnato a un utente solo dal rappresentante legale dell'amministrazione. + - title: Candidatura + description: Le indicazioni pratiche per risolvere le problematiche tecniche ricorrenti + sectionId: candidatura accordions: - - title: Come saranno erogate le risorse degli avvisi a soluzioni standard? - content: Per semplificare l’erogazione delle risorse, i contributi saranno riconosciuti alle amministrazioni sulla base del raggiungimento di specifici obiettivi predefiniti. Il processo di rendicontazione sarà quindi alleggerito, e non sarà necessario rendicontare le singole spese effettuate per ottenere i fondi. - - title: Come saranno erogate le risorse degli avvisi per cui è necessario presentare un progetto? - content: L’erogazione dei contributi seguirà alcuni step che possono prevedere un’anticipazione e delle tranches, fino al saldo, erogate “a rimborso”. Anche in questo caso si prevedono procedure semplici per il trasferimento dei fondi e il costante supporto all’amministrazione destinataria delle risorse per assicurare uno spedito ed efficace trasferimento dei fondi. - - title: L’erogazione delle risorse può anche essere retroattiva per progetti già avviati? - content: Il Regolamento europeo 241/2021 all’Art. 17 par. 2 prevede che “Le misure avviate a decorrere dal 1° febbraio 2020 sono ammissibili a condizione che soddisfino i requisiti di cui al presente regolamento”. L’ammissibilità di queste spese sarà comunque eventualmente disciplinata nel dispositivo (per esempio un Avviso Pubblico) che definisce le condizioni di accesso alla misura in questione. - - title: Dove sarà gestita la rendicontazione dei progetti? - content: Attraverso questo sito, le amministrazioni potranno accedere ad un’area riservata. In questa sezione, potranno seguire tutta la gestione amministrativa dei singoli progetti. Con l’avvio degli avvisi avranno infatti la possibilità di fare richiesta per i fondi, rendicontare l'avanzare dei loro progetti, ricevere comunicazioni dedicate e inviare documentazioni ufficiali. + - title: "Dove è possibile verificare i requisiti per accedere a una candidatura?" + content: "É possibile verificare i requisiti di accesso a una candidatura all'interno del dettaglio della pagina dell'avviso pubblico." + - title: "Con quale modalità bisogna trasmettere la candidatura?" + content: La candidatura per un avviso pubblico può essere trasmessa solo ed esclusivamente attraverso la procedura guidata di candidatura presente nell'area riservata di PA digitale 2026. + - title: "Quali dati sono necessari per avviare/completare una candidatura?" + content: Per poter avviare o completare una candidatura su PA digitale 2026 sono richiesti: + - title: "È possibile presentare più candidature per singolo avviso?" + content: "No. Per ogni avviso è prevista la possibilità di inviare una sola candidatura finanziata." + - title: "In cosa consiste il calendario di un avviso?" + content: "L'assegnazione dei fondi è periodica: avviene quindi in base al calendario dei singoli avvisi, a seguito della pubblicazione di un decreto. Per maggiori informazioni, consultare la sezione ''esiti candidature'' all'interno dell'avviso interessato." + - title: "Perché un avviso visualizzato in area pubblica non è presente nell'area riservata?" + content: "Un avviso presente in area pubblica potrebbe non essere visibile nell'area riservata nel caso in cui la mia PA non rientri tra i beneficiari previsti per quell'avviso." + - title: "È possibile modificare una domanda di finanziamento non ancora inviata?" + content: "Si. È possibile modificare una domanda di finanziamento non ancora inviata attraverso il tasto ''Modifica dati'' presente nello step 4 (Riepilogo) del flusso di candidatura. Nel caso in cui l'utente abbia già caricato in precedenza una domanda firmata, dovrà eliminare tale documento attraverso il tasto ''Rimuovi file'' presente nello step 5 (Firma) del flusso, scaricare nuovamente e ricaricare la domanda modificata e firmata digitalmente, ed eventualmente procedere all'invio." + - title: "Quali sono le cause di inammissibilità di una domanda di finanziamento?" + content: Le principali cause di inammissibilità sono: + - title: "Il sistema non consente di caricare la domanda di finanziamento. Come si può procedere per inviare la candidatura?" + content: È necessario controllare che: + - title: "Come viene calcolato l'importo totale del finanziamento?" + content: Il calcolo dell'importo totale del finanziamento varia a seconda dell'avviso appartenente alla misura. Ogni misura ha un calcolo diverso. Per approfondire il calcolo dell'importo totale del finanziamento si rimanda alle FAQ di dettaglio della misura di interesse. + - title: "Cosa succede se non viene rispettato il calendario scadenze/cronoprogramma?" + content: Se non vengono completate le attività necessarie previste nel calendario scadenze/cronoprogramma, il finanziamento concesso viene revocato. + - title: "Come ci si dota di dispositivo di firma digitale?" + content: Coloro che desiderano dotarsi di un dispositivo di firma digitale devono rivolgersi ai prestatori di servizi fiduciari accreditati, soggetti pubblici o privati che, sotto la vigilanza di AgID, emettono certificati qualificati (per la firma digitale) e certificati di autenticazione (per le carte nazionali dei servizi). È possibile consultare la lista dei prestatori di servizi fiduciari accreditati accedendo alla pagina https://www.agid.gov.it/piattaforme/firma-elettronica-qualificata/prestatori-di-servizi-fiduciari-attivi-in-italia + - title: "È possibile utilizzare il dispositivo di firma digitale di un'altra persona?" + content: No, il dispositivo di firma digitale è personale può essere utilizzato solo dal suo titolare. + - title: "È possibile utilizzare un dispositivo di firma digitale scaduto/revocato/sospeso?" + content: No, il dispositivo di firma digitale deve essere valido e correttamente funzionante. + - title: "Quali sono i formati di firma riconosciuti all'interno del sistema?" + content: Il sistema ritiene valide solo firme di tipologia Cades. - title: Supporto tecnico description: Le indicazioni pratiche per risolvere le problematiche tecniche ricorrenti sectionId: supporto-tecnico accordions: - - title: "Non ho ricevuto l'email di verifica: come posso finalizzare l’iscrizione agli aggiornamenti di PA Digitale 2026?" + - title: "Quali browser sono supportati per la navigazione di PA digitale 2026?" + content: "È possibile navigare la piattaforma con i browser più comuni, come Chrome, Firefox e Safari, ad eccezione di Internet Explorer 11, che non è supportato dal sistema." + - title: "Non ho ricevuto l'email di verifica: come posso finalizzare l’iscrizione agli aggiornamenti di PA digitale 2026?" content: "Se non trovi l’email che contiene il link per verificare l’indirizzo di posta sul quale vuoi ricevere gli aggiornamenti della piattaforma, ti consigliamo di:" - linkLabel: Scrivici - link: 'https://padigitale2026.gov.it/supporto' - ariaLabel: Vai al modulo di supporto + assistance: Scrivici + ariaLabel: Vai alla pagina di assistenza - title: Come posso annullare la mia iscrizione agli aggiornamenti? - content: Se desideri interrompere la ricezione di comunicazioni e aggiornamenti da PA Digitale 2026, usa il link “Annulla iscrizione” presente nella sezione finale di ogni email. + content: Se desideri interrompere la ricezione di comunicazioni e aggiornamenti da PA digitale 2026, usa il link “Annulla iscrizione” presente nella sezione finale di ogni email. + - title: Misura 1.4.3 pagoPA + description: Le indicazioni pratiche per risolvere le problematiche tecniche ricorrenti + sectionId: measure-1-4-3-pagopa + accordions: + - title: A quanto ammonta l'importo del finanziamento previsto dall'Avviso "Adozione pagoPA" della Misura 1.4.3? + content: "L’importo del finanziamento concedibile ai Comuni è individuato in un importo forfettario determinato secondo il seguente criterio:

a. per i Comuni fino a 5.000 ab.: pagoPA: €607 per servizio (min.3 max 111);
b. per i Comuni 5.001 - 20.000 ab. pagoPA: €857 per servizio (min.3 max 111);
c. per i Comuni 20.001 - 100.000 ab. pagoPA: €1821 per servizio (min.5 max 111);
d. per i Comuni 100.001 - 250.000 ab. pagoPA: €2747 per servizio (min.5 max 111);
e. per i Comuni > 250.000 ab. pagoPA: €7967 per servizio (min.5 max 111)." + - title: Quali enti della PA possono presentare domanda? + content: I soggetti attuatori, ovvero coloro che possono accedere allo strumento predisposto dall'Avviso, sono i Comuni. + - title: È possibile accedere al finanziamento in caso di realizzazione del progetto prima della pubblicazione dell'Avviso "Adozione pagoPA" della Misura 1.4.3? + content: Si, è possibile accedere al finanziamento previsto dall'Avviso nel caso in cui l'attivazione dei servizi di incasso (pagoPA) sia stata realizzata dopo il 01 Aprile 2021 con risorse finanziarie proprie. + - title: È possibile accedere al finanziamento in caso di realizzazione del progetto in data antecedente al 01 Aprile 2021? + content: No, non è possibile accedere al finanziamento previsto dall'Avviso nel caso in cui il processo di l'attuazione dei servizi di incasso (pagoPA) sia stata realizzatao prima del 01 Aprile 2021, indipendemente dai fondi/risorse utilizzati. Può essere invece finanziata l'attivazione di nuovi servizi, non inclusi nel precedente finanziamento. + - title: Quali interventi possono essere finanziati dall'Avviso 1.4.3 per pagoPA? + content: I servizi oggetto di migrazione possono essere tutti i servizi di incasso erogati da ciascun Ente facendo valere il principio della titolarità del credito, cioè, potranno essere migrati tutti i servizi di incasso gestiti direttamente dal singolo Ente e/o affidati a soggetti esterni (es. Riscossori; Unioni di Comuni; Comunità Montane) fermo restando che l’Ente mantenga la titolarità del credito vantato. + - title: Entro quando è possibile inoltrare la domanda di accesso al finanziamento? + content: La domanda può essere presentata a partire dalla data di pubblicazione dell'Avviso fino ad esaurimento delle risorse disponibili, e comunque non oltre alle ore 23.59 del 2 settembre 2022. + - title: Quando sarà emesso il Decreto di Finanziamento e quali informazioni saranno in esso contenute? + content: Ogni 30 giorni, dopo la chiusura della finestra temporale, il Dipartimento per la trasformazione digitale provvede alla definizione del decreto di ammissione a finanziamento dei progetti presentati nella relativa finestra temporale e per i quali i Comuni hanno provveduto all’accettazione del finanziamento e alla comunicazione del codice CUP attraverso la Piattaforma. In allegato al decreto di finanziamento sarà riportato l’elenco dei soggetti finanziati in ordine cronologico con il relativo CUP e importo finanziato. + - title: Quali sono i documenti necessari al fine di predisporre correttamente la richiesta di trasferimento delle risorse? + content: "Alla domanda di erogazione del finanziamento, il Comune dovrà allegare: Il certificato di regolare esecuzione del RUP; l’eventuale check list applicabile compilata secondo le indicazione delle linee guida fornite." + - title: Entro quanto tempo dovrà essere contrattualizzato il fornitore rispetto al Decreto di Finanziamento? + content: Il fornitore dovà essere contrattualizzato al massimo entro 6 mesi (180 gg) dalla data di notifica del Decreto di Finanziamento. + - title: Entro quando dovranno essere portate a termine le attività di migrazione e di attivazione dei servizi? + content: Le attività di migrazione e di attivazione dei servizi dovranno essere portate a termine entro 8 mesi (240 gg), a partire dalla data di contrattualizzazione del fornitore. + - title: Quando il processo di migrazione e attivazione dei servizi si intende concluso con esito positivo per per i servizi attivati sulla Piattaforma pagoPA? + content: Il processo di riterrà concluso quando sarà stata effettuata una transazione con esito positivo con la corretta applicazione del codice tassonomico per ogni singolo servizio incluso nel progetto. + - title: Cosa si intende per transazione con esito positivo per pagoPA? + content: Per transazione con esito positivo si intende sia una transazione reale eseguita da un cittadino, nel caso in cui la stagionalità del singolo servizio di incasso lo consenta, oppure - in caso contrario - una transazione reale con importo di valore simbolico (es. 0,01€) ma con codice tassonomico e IUV reale, al fine di poter verificare l’effettiva e corretta integrazione del servizio di incasso in modalità end-to-end (cd. transazione di test) + - title: Qual è il metodo di calcolo del voucher? + content: L’importo del voucher è determinato dal prodotto dell'importo unitario dei servizi attivati (in funzione della classe di popolazione residente del Soggetto Attuatore) e il numero totale dei servizi attivati. + - title: Misura 1.4.3 app IO + description: Le indicazioni pratiche per risolvere le problematiche tecniche ricorrenti + sectionId: measure-1-4-3-appio + accordions: + - title: "Come viene calcolato l'importo forfettario previsto dall'Avviso ''Adozione app IO'' della Misura 1.4.3?" + content: "L’importo del finanziamento concedibile ai Comuni è individuato in un importo forfettario determinato secondo il seguente criterio:

a. per i Comuni fino a 5.000 ab.: app IO: €243 per servizio (min.3 max 50);
b. per i Comuni 5.001 - 20.000 ab. app IO: €343 per servizio (min.3 max 50);
c. per i Comuni 20.001 - 100.000 ab. app IO: €728 per servizio (min.5 max 50);
d. per i Comuni 100.001 - 250.000 ab. app IO: €1.099 per servizio (min.5 max 50);
e. per i Comuni > 250.000 ab. app IO: €3.187 per servizio (min.5 max 50)." + - title: Quali enti della PA possono presentare domanda? + content: I Soggetti Attuatori, ovvero coloro che possono accedere allo strumento predisposto dall'Avviso, sono i Comuni. + - title: Qual è l'obiettivo dell'Avviso "Adozione app IO" della Misura 1.4.3? + content: L'obiettivo del presente Avviso riferito alla Misura 1.4.3 è la migrazione e l’attivazione dei servizi digitali (app IO) seguendo una logica di “pacchetti” che identificano il numero minimo di servizi da integrare a fronte di una singola adesione all’Avviso con il fine ultimo di raggiungere una integrazione cd. full per ciascun Comune, come specificato nell'Allegato 2. + - title: È possibile accedere al finanziamento in caso di realizzazione del progetto prima della pubblicazione dell'Avviso "Adozione app IO" riferito della Misura 1.4.3? + content: Si, è possibile accedere al finanziamento previsto dal presente Avviso nel caso in cui l'attuazione dei servizi digitali (app IO) sia stata realizzata a decorrere dal 01 Aprile 2021, con risorse finanziarie proprie. + - title: È possibile accedere al finanziamento in caso di realizzazione del progetto, con l'ausilio di Fondi pubblici, prima della pubblicazione dell'Avviso "Adozione app IO" della Misura 1.4.3? + content: No, non è possibile accedere al finanziamento previsto dall'Avviso riferito alla Misura 1.4.3 nel caso in cui l'attuazione degli stessi servizi digitali (app IO) sia stata realizzata con altri finanziamenti pubblici, nazionali, regionali o europei, secondo quanto previsto dall'art. 7 dell'Avviso. Può essere invece finanziata l'attivazione di nuovi servizi, non inclusi nel precedente finanziamento. + - title: Entro quando è possibile inoltrare la domanda di accesso al finanziamento? + content: La domanda di partecipazione può essere presentata a partire dalla data di pubblicazione dell'Avviso fino ad esaurimento delle risorse disponibili, e comunque non oltre alle ore 23.59 del 2 settembre 2022. + - title: Entro quanto tempo dovrà essere contrattualizzato il fornitore rispetto al Decreto di Finanziamento? + content: Il fornitore dovà essere contrattualizzato al massimo entro 6 mesi (180 gg) dalla data di notifica del Decreto di Finanziamento. + - title: Entro quando dovranno essere portate a termine le attività di migrazione e di attivazione dei servizi? + content: Le attività di migrazione e di attivazione dei servizi dovranno essere portate a termine entro 8 mesi (240 gg), a partire dalla data di contrattualizzazione del fornitore. + - title: Quando il processo di migrazione e attivazione dei servizi si intende concluso con esito positivo per i servizi attivati sull’app IO? + content: Il processo si riterrà concluso con esito positivo quando le richieste di pubblicazione saranno approvate dalla pagoPA S.p.A e tutti i servizi saranno visibili in App. + - title: Misura 1.4.4 + description: Le indicazioni pratiche per risolvere le problematiche tecniche ricorrenti + sectionId: measure-1-4-4 + accordions: + - title: Qual è l'importo del finanziamento concedibile? + content: L'importo del finanziamento riconoscibile è pari a €14.000 al termine della realizzazione del progetto. + - title: Sono previste risorse espressamente dedicate ai territori delle regioni Abruzzo, Basilicata, Campania, Calabria, Molise, Puglia, Sardegna, Sicilia? + content: Si, l'Avviso destina il 40% delle risorse al finanziamento di Soggetti Attuatori ubicati nelle regioni Abruzzo, Basilicata, Campania, Calabria, Molise, Puglia, Sardegna, Sicilia, nel rispetto della priorità trasversale del PNRR relativa al “superamento dei divari territoriali” di cui all’art. 2 comma 6 bis del decreto- legge 31 maggio 2021 n.77, convertito in legge 29 luglio 2021, n. 108. + - title: Quali enti della PA possono presentare domanda? + content: I soggetti attuatori, ovvero coloro che possono accedere allo strumento predisposto dall'Avviso, sono i Comuni. In seguito saranno pubblicati avvisi ad hoc per altre tipologie di pubbliche amministrazioni. + - title: Quali interventi possono essere finanziati dall'Avviso della Misura 1.4.4? + content: "Gli interventi che possono essere finanziati sono: adesione alla piattaforma di identità digitale SPID, adesione alla piattaforma di identità digitale CIE ed erogazione di un piano formativo su disposizioni normative, linee guida e best practices in caso di integrazione a SPID e CIE con protocollo SAML2. Per ulteriori dettagli si rimanda all'Allegato 2 del presente Avviso." + - title: È possibile accedere al finanziamento per l'adozione di una sola delle due piattaforme di identità digitale SPID/CIE? + content: Si, è possibile accedere al finanziamento previsto dall'Avviso al fine di adottare una sola delle due piattaforme, SPID o CIE, qualora una di esse sia stata già adottata dall'ente con protocollo SAML2, come specificato nell'Allegato 2. + - title: Nel caso in cui il Comune non abbia adottato nessuna piattaforma di identità digitale SPID e CIE, può fare richiesta per l'adozione di una sola delle due? + content: No, qualora lo scenario di partenza dell'ente sia qualificato dall'assenza di entrambe le piattaforme di identità digitale SPID e CIE, dovrà necessariamente adottarle entrambe, come specificato nell'Allegato 2. + - title: In quanto tempo deve essere concluso il progetto di integrazione? + content: Il progetto di integrazione deve essere concluso nel termine perentorio di 10 mesi dalla data di contrattualizzazione del fornitore, come specificato nell'Allegato 2. + - title: Quale standard di autenticazione deve applicare il Comune nell'adozione delle piattaforme di identità digitale? + content: OpenID Connect (OIDC) è lo standard di autenticazione attualmente utilizzato dalla quasi totalità delle moderne applicazioni web e mobile nel mondo privato ed è fortemente raccomandato, come specificato nell'Allegato 2. In alternativa è necessaria l'erogazione di un piano formativo, idoneo a costruire le basi per un successivo passaggio tecnologico. + - title: È possibile accedere al finanziamento in caso di progetti già avviati per integrazione SPID/CIE? + content: Si, è possibile accedere al finanziamento previsto dall'Avviso nel caso in cui il processo di adozione della piattaforma di identità digitale SPID/CIE sia stato avviato a decorrere dal 1° febbraio 2020 con fondi propri. + - title: Entro quando è possibile inoltrare la domanda di accesso al finanziamento? + content: La domanda può essere presentata a partire dalla data di pubblicazione fino ad esaurimento delle risorse disponibili, e comunque, entro e non oltre le ore 23:59 del 02/09/2022, come specificato nell'Avviso. + - title: Quando si considera raggiunto l’obiettivo di integrazione a CIE? + content: Per CIE sarà necessario che il soggetto attuatore abbia pubblicato l'adesione a CIE e messo in esercizio i servizi online. Farà fede la data di richiesta di adesione, purché la pubblicazione e messa in esercizio dei servizi avvenga entro e non oltre i 60 giorni decorrenti dalla data della richiesta di adesione a CIE. + - title: Quando si considera raggiunto l’obiettivo di integrazione a SPID? + content: Per SPID sarà necessario che il soggetto attuatore abbia eseguito i test tecnici di integrazione e abilitato i servizi online all’accesso tramite SPID. Farà fede la data di richiesta per il primo collaudo tecnico ad AgID il cui esito è positivo. + - title: Link utili per tematiche tecniche su SPID + content: 'Domande frequenti:
https://www.spid.gov.it/domande-frequenti/
https://helpdesk.spid.gov.it/knowledgebase.php?category=2

Risorse per sviluppatori:
https://developers.italia.it/it/spid/#resourcecontent-1' + - title: Link utili per tematiche tecniche su CIE + content: 'Domande frequenti:
https://federazione.servizicie.interno.gov.it/faq

Risorse per sviluppatori:
https://developers.italia.it/it/cie' + + noResults: Nessun risultato trovato support: tag: Supporto title: Non hai trovato le risposte che cerchi? Vuoi inviare suggerimenti o ricevere supporto? cards: - - title: Contatti - description: Compila il modulo per inviarci i tuoi suggerimenti o per avere chiarimenti sull'iniziativa - isModal: true + - title: Assistenza + description: Compila il modulo per richiedere chiarimenti e approfondire temi di interesse. + link: /supporto/assistenza diff --git a/contents/home-page/home.yml b/contents/home-page/home.yml index 377f749d0..ea852dbdd 100644 --- a/contents/home-page/home.yml +++ b/contents/home-page/home.yml @@ -1,5 +1,11 @@ name: Homepage - PA digitale 2026 headerTitle: Dipartimento per la trasformazione digitale +heroMainBanner: + title: Entra in PA digitale 2026 + body: PA digitale 2026 è il punto di accesso alle risorse per la transizione digitale. Accedi alla piattaforma e attiva il profilo della tua PA. Scopri come candidare la tua amministrazione agli avvisi e richiedere i fondi. + firstButtonLabel: SCOPRI DI PIù + firstButtonAriaLabel: Scopri di più (Collegamento esterno - Apre su nuova scheda) + linkTo: https://innovazione.gov.it/dipartimento/focus/italia-digitale-2026/ heroDigital: title: Italia digitale 2026 body: Il 27% delle risorse totali del PNRR è dedicato alla crescita digitale del Paese. Italia digitale 2026 è la strategia promossa dal Ministro per l'innovazione tecnologica e la transizione digitale all’interno del PNRR @@ -7,12 +13,18 @@ heroDigital: firstButtonAriaLabel: VAI AL SITO Italia digitale 2026 (Collegamento esterno - Apre su nuova scheda) linkTo: https://innovazione.gov.it/dipartimento/focus/italia-digitale-2026/ heroPnrr: - category: COME FUNZIONA PA digitale 2026 - title: Come accedere alle misure del PNRR - body: PA digitale 2026 è la piattaforma per accedere alle risorse dedicate alla transizione digitale e assistere le amministrazioni nel percorso verso Italia digitale 2026 + category: Candidature + title: Candida la tua PA agli avvisi dedicati + body: Partecipa agli avvisi per richiedere i finanziamenti e avviare il processo di transizione digitale. + firstButtonLabel: SCOPRI DI PIÙ + firstButtonAriaLabel: Scopri di più (Collegamento esterno - Apre su nuova scheda) + link: /come-partecipare/candida-pa +heroClassificazione: + category: Classificazione + title: Classificazione dati e servizi + body: La classificazione dati e servizi digitali deve essere effettuata da tutte le PA ed è necessaria per avviare il processo di migrazione al cloud. firstButtonLabel: SCOPRI DI PIÙ - firstButtonAriaLabel: Scopri di più su come accedere alle opportunità del PNRR - secondButtonLabel: VEDI I BENEFICIARI + firstButtonAriaLabel: Scopri di più (Collegamento esterno - Apre su nuova scheda) heroContribute: category: Come contribuire title: Partecipa al cambiamento, contribuisci a Identità Digitale! @@ -37,6 +49,33 @@ contributions: alt: GitHub logo title: GitHub heroCarouselNewsTitle: Notizie e aggiornamenti +noticesCarouselTitle: Avvisi pubblici +noticesCarouselArchive: +- dataFine: '2022-02-28' + titolo: Comuni capoluogo di Città metropolitane hanno presentato progetti + codiceBando: a015t0000029a6uAAA + dataInizio: '2022-02-07' + nomeDellaMisura: 1.2 Abilitazione e facilitazione migrazione al Cloud +- dataFine: '2022-02-28' + titolo: Test report + codiceBando: a017Y00000QN2NjQAL + dataInizio: '2022-02-22' + nomeDellaMisura: 1.4.4 Adozione identità digitale +- dataFine: '2022-02-28' + titolo: 1.4.3 Adozione pagoPA e AppIO + codiceBando: a015t0000028X0CAAU + dataInizio: '2022-02-23' + nomeDellaMisura: Test report +- dataFine: '2022-02-28' + Titolo: SDM + codiceBando: a017Y00000QN8zlQAD + dataInizio: '2022-02-19' + nomeDellaMisura: 1.2 Abilitazione e facilitazione migrazione al Cloud +- dataFine: '2022-03-08' + titolo: Avviso 3 + codiceBando: a015t0000029bipAAA + dataInizio: '2022-02-08' + nomeDellaMisura: 1.2 Abilitazione e facilitazione migrazione al Cloud opportunity: title: Le misure cards: @@ -59,7 +98,7 @@ opportunity: title: Accessibilità id: access - number: 1.4.3 - title: Adozione PagoPA e app IO + title: Adozione pagoPA e app IO id: adoz-pago - number: 1.4.4 title: Adozione identità digitale @@ -87,61 +126,55 @@ heroCarouselNews: category: Avviso pubblico title: "Milano, Napoli e Roma città capofila per il progetto Mobility as a Service for Italy" description: Pubblicata la graduatoria dell’avviso pubblico. Nei prossimi mesi un nuovo bando per ampliare l’iniziativa - source: 'Fonte: innovazione.gov.it' + source: 'innovazione.gov.it' linkTo: 'https://innovazione.gov.it/notizie/articoli/milano-napoli-e-roma-citta-capofila-per-il-progetto-mobility-as-a-service/' - id: 2 category: Approfondimento title: "Cosa servirà alle PA per partecipare agli avvisi pubblici" description: Come funzionerà la registrazione e di cosa avranno bisogno le amministrazioni nelle diverse fasi progettuali - source: 'Fonte: innovazione.gov.it' + source: 'innovazione.gov.it' linkTo: 'https://innovazione.gov.it/notizie/articoli/pa-digitale-2026-cosa-servira-alle-pa-per-partecipare-agli-avvisi-pubblici/' - id: 3 category: Novità title: "La svolta digitale delle grandi amministrazioni centrali" description: Grazie al PNRR, un piano di interventi per ridisegnare e digitalizzare alcuni servizi fondamentali della PA - source: 'Fonte: innovazione.gov.it' + source: 'innovazione.gov.it' linkTo: 'https://innovazione.gov.it/notizie/articoli/la-svolta-digitale-delle-grandi-amministrazioni-centrali/' - id: 4 category: Novità title: "I progetti Sportello Digitale Unico e accessibilità entrano nel vivo" description: AgID al lavoro su due importanti misure del PNRR sulla digitalizzazione della Pubblica amministrazione - source: 'Fonte: agid.gov.it' + source: 'agid.gov.it' linkTo: 'https://www.agid.gov.it/it/agenzia/stampa-e-comunicazione/notizie/2022/02/21/pa-digitale-2026-i-progetti-sportello-digitale-unico-accessibilita-entrano-vivo' - id: 5 category: Approfondimento title: "Le misure per una PA protagonista della transizione digitale" description: Disponibile un approfondimento sulle quattordici misure del PNRR di PA digitale 2026 - source: 'Fonte: innovazione.gov.it' + source: 'innovazione.gov.it' linkTo: 'https://innovazione.gov.it/notizie/articoli/le-misure-per-una-pa-protagonista-della-transizione-digitale/' - id: 6 category: Novità title: "Pubblicato il bando per il Polo Strategico Nazionale" description: Al via la gara europea per la gestione dei servizi cloud per la Pubblica Amministrazione. Scade il 16 marzo il termine per presentare le offerte - source: 'Fonte: innovazione.gov.it' + source: 'innovazione.gov.it' linkTo: 'https://innovazione.gov.it/notizie/articoli/pubblicato-il-bando-per-il-polo-strategico-nazionale/' - id: 7 category: Comunicato stampa title: "Anagrafe digitale: al via il cambio di residenza online" description: Attiva da febbraio la prima fase di applicazione, che verrà estesa in tutta Italia - source: 'Fonte: innovazione.gov.it' + source: 'innovazione.gov.it' linkTo: 'https://innovazione.gov.it/notizie/articoli/anagrafe-digitale-al-via-il-cambio-di-residenza-online/' - - id: 8 - category: Avvis pubblico - title: "Servizio civile digitale: al via il nuovo Avviso per gli enti" - description: Il servizio civile digitale espande il suo bacino di intervento con la pubblicazione del nuovo avviso per gli Enti - source: 'Fonte: innovazione.gov.it' - linkTo: 'https://innovazione.gov.it/notizie/articoli/servizio-civile-digitale-al-via-il-nuovo-avviso-per-gli-enti/' support: tag: Supporto - title: Scrivici per chiarimenti o per contribuire con le tue idee al progetto + title: Consulta le domande frequenti o scrivici per ricevere assistenza buttonLabel: scopri di più cards: - title: Domande frequenti - description: Scopri i dettagli dell’iniziativa e le informazioni chiave sulle opportunità del PNRR - isModal: false - - title: Contatti - description: Compila il modulo per inviarci i tuoi suggerimenti o per avere chiarimenti sull’iniziativa - isModal: true + description: Scopri i dettagli dell’iniziativa e consulta le risposte alle domande più frequenti. + link: /supporto/domande-frequenti + - title: Assistenza + description: Compila il modulo per richiedere chiarimenti e approfondire temi di interesse. + link: /supporto/assistenza heroMain: category: 'le misure del pnrr' title: Il punto di accesso alle risorse per la transizione digitale della PA @@ -162,7 +195,7 @@ homeCarousel: imageMobile: 'home-carousel-mobile-2.svg' button: 'scopri di più' buttonAriaLabel: 'Scopri di più su domande frequenti e contatti' - linkTo: '/come-funziona' + linkTo: '/iniziativa' - id: 3 title: Fase 3, avviare i progetti description: 'Dall’estate del 2022 le amministrazioni potranno avviare i primi progetti: un team dedicato fornirà alle PA assistenza tecnica nell’implementazione delle iniziative; un sistema di rendicontazione online organizzato per obiettivi semplificherà il percorso delle amministrazioni.' @@ -170,4 +203,4 @@ homeCarousel: imageMobile: 'home-carousel-mobile-3.svg' button: 'scopri di più' buttonAriaLabel: 'Scopri di più su domande frequenti e contatti' - linkTo: '/come-funziona' + linkTo: '/iniziativa' diff --git a/contents/come-funziona/come-funziona.yml b/contents/iniziativa/iniziativa.yml similarity index 87% rename from contents/come-funziona/come-funziona.yml rename to contents/iniziativa/iniziativa.yml index f76cd2c85..204d9fd5f 100644 --- a/contents/come-funziona/come-funziona.yml +++ b/contents/iniziativa/iniziativa.yml @@ -1,20 +1,20 @@ -title: Come funziona - PA digitale 2026 -name: Come Funziona - PA digitale 2026 +title: L'iniziativa - PA digitale 2026 +name: L'iniziativa - PA digitale 2026 hero: - title: 'La transizione digitale: semplice e a misura di PA' - body: A seconda della tipologia di misura e di PA, sarà possibile accedere alle risorse o attraverso delle soluzioni standard o attraverso la presentazione di progetti. + title: "PA digitale 2026: scopri l'iniziativa" + body: Candida la tua amministrazione agli avvisi pubblici per richiedere le risorse e avviare il processo di transizione digitale. list: - listItems: title: APPROFONDISCI items: - - item: Il calendario + - item: Attori coinvolti + anchor: attori-coinvolti + - item: Calendario anchor: calendario - - item: I beneficiari + - item: Beneficiari anchor: beneficiari - - item: Gli attori coinvolti - anchor: attori-coinvolti beneficiaries: - category: I Beneficiari + category: Beneficiari title: La digitalizzazione a misura di territorio categories: - icon: '/assets/icone-beneficiari/regioni.svg' @@ -24,8 +24,6 @@ beneficiaries: filterId: 'comuni' - linkLabel: 'Città metropolitane' filterId: 'citta-metropolitane' - - linkLabel: 'Enti regionali' - filterId: 'enti-regionali' - linkLabel: 'Province' filterId: 'province' - linkLabel: 'Province autonome' @@ -41,18 +39,12 @@ beneficiaries: filterId: 'universita' - linkLabel: 'Scuole' filterId: 'scuole' - - linkLabel: 'Istituti di alta formazione musicale e coreutica' - filterId: 'istituti-formazione' - - linkLabel: 'Enti di ricerca pubblica' - filterId: 'enti-ricerca-pubblica' - - linkLabel: 'Consorzi interuniversitari di ricerca' - filterId: 'consorzi-ricerca' - - linkLabel: 'Enti per il diritto allo studio, agenzia, consorzio' - filterId: 'enti-diritto' + - linkLabel: 'Istituti di Ricerca e AFAM' + filterId: 'istituti-ricerca-afam' - icon: '/assets/icone-beneficiari/pa-centrali.svg' name: 'Pubbliche Amministrazioni Centrali' items: - - linkLabel: 'Pubbliche Amministrazioni centrali' + - linkLabel: 'Pubbliche Amministrazioni Centrali' filterId: 'pa-centrali' - icon: '/assets/icone-beneficiari/asl.svg' name: 'Salute' @@ -86,24 +78,32 @@ involved: image: '/assets/consip-logo.svg' text: Consip è la centrale acquisti della Pubblica Amministrazione. Per il PNRR mette a disposizione strumenti per agevolare la realizzazione degli interventi, semplificando il processo di acquisto delle PA attraverso contratti quadro o piattaforme per la negoziazione. timeline: - category: "Il Calendario" + category: "Calendario" title: "Le fasi per la transizione digitale della PA" cards: - id: 1 active: false - time: Autunno 2021 - title: Conoscere le opportunità - text: 'Le PA hanno accesso a informazioni e materiali per prepararsi ad aderire agli avvisi, la cui pubblicazione è prevista per la primavera del 2022.' + time: LUGLIO 2020 + title: NextGenerationEU + text: L’Unione Europea approva un piano da €750 miliardi che ha l'obiettivo di rilanciare l'economia europea dopo la pandemia di COVID-19 e di renderla più verde e digitale. - id: 2 active: false - time: Primavera 2022 - title: Partecipare agli avvisi - text: 'I primi avvisi del PNRR dedicati alla transizione digitale della PA sono pubblicati: un’area riservata ne facilita l’adesione attraverso un modulo online.' + time: APRILE 2021 + title: Italia Domani + text: Il Governo italiano presenta “Italia Domani”, il Piano Nazionale di Ripresa e Resilienza (PNRR). Grazie all’integrazione di un Fondo Complementare, il totale degli investimenti previsti è di €222,1 miliardi. - id: 3 + time: APRILE 2021 + title: Italia digitale 2026 + text: "Con l’approvazione del PNRR, viene definito il piano strategico per la transizione digitale e la connettività del paese: Italia digitale 2026. Degli oltre 13 miliardi di euro, 6,74 sono dedicati alla digitalizzazione della PA." + - id: 4 + time: NOVEMBRE 2021 + title: PA digitale 2026 + text: Inizia il percorso di accompagnamento per aiutare le PA a conoscere le grandi opportunità del digitale previste dal PNRR. + - id: 5 active: true - time: Estate 2022 - title: Avviare i progetti - text: 'Le amministrazioni possono avviare i progetti: un team dedicato accompagna le PA. La rendicontazione degli interventi implementati è totalmente online.' + time: APRILE 2022 + title: Partono i primi avvisi + text: Su PA digitale 2026 le PA locali possono accedere attraverso soluzioni standard alle risorse del PNRR. pacchettiTabs: title: Soluzioni standard subtitle: Per le misure con una platea ampia di beneficiari (oltre 1.000 PA), è prevista una modalità di accesso per soluzioni standard. Un percorso semplificato e guidato che va dalla richiesta dei finanziamenti all’erogazione dei fondi. diff --git a/contents/come-funziona/soluzione-progetti.yml b/contents/iniziativa/soluzione-progetti.yml similarity index 90% rename from contents/come-funziona/soluzione-progetti.yml rename to contents/iniziativa/soluzione-progetti.yml index fd5cda472..df8a26778 100644 --- a/contents/come-funziona/soluzione-progetti.yml +++ b/contents/iniziativa/soluzione-progetti.yml @@ -1,5 +1,5 @@ -title: Come funziona - PA digitale 2026 -name: Come Funziona - PA digitale 2026 +title: L'iniziativa - PA digitale 2026 +name: L'iniziativa - PA digitale 2026 hero: title: 'Presentazione progetti' body: Per le misure con una platea ristretta di beneficiari (fino a 1.000 PA), è prevista una modalità di accesso attraverso la presentazione di progetti, sempre ispirata ai principi della semplicità e della riduzione degli oneri amministrativi. @@ -34,3 +34,10 @@ verticalTimeline: bodyParagraphl: "Le amministrazioni dovranno implementare, con il proprio personale o attraverso l’acquisto di servizi e forniture, il progetto in tutte le sue componenti effettuando le spese previste per la realizzazione delle attività: impegno delle risorse, svolgimento delle procedure di gara per l’acquisizione di lavori/servizi/forniture a seconda della tipologia di progetto, esecuzione dei pagamenti ai fornitori" littleTitler: 'RENDICONTAZIONE ED EROGAZIONE DEI FONDI' bodyParagraphr: "L’erogazione dei contributi seguirà alcuni step che possono prevedere un’anticipazione e delle tranches, fino al saldo, erogate “a rimborso”. In questo caso sarà necessario presentare tutta la documentazione che giustifica l’esecuzione della singola spesa. Anche in questo caso si prevedono procedure semplici per il trasferimento dei fondi e il costante supporto all’amministrazione destinataria delle risorse per assicurare uno spedito ed efficace trasferimento dei fondi." +heroMode: + category: "MODALITÀ DI ACCESSO 1" + title: "Modalità alternativa per accedere alle risorse per la transizione digitale" + body: Soluzioni standard
La modalità di accesso prevista per le misure con una platea ampia di beneficiari (oltre 1.000 PA). + link: /iniziativa/soluzioni-standard + btnLabel: SCOPRI DI PIù + btnAria: Scopri di più sulle soluzioni standard diff --git a/contents/come-funziona/soluzione-standard.yml b/contents/iniziativa/soluzione-standard.yml similarity index 88% rename from contents/come-funziona/soluzione-standard.yml rename to contents/iniziativa/soluzione-standard.yml index 8818ca5b6..63329abbe 100644 --- a/contents/come-funziona/soluzione-standard.yml +++ b/contents/iniziativa/soluzione-standard.yml @@ -1,5 +1,5 @@ -title: Come funziona - PA digitale 2026 -name: Come Funziona - PA digitale 2026 +title: L'iniziativa - PA digitale 2026 +name: L'iniziativa - PA digitale 2026 hero: title: "Soluzioni standard" body: Per le misure con una platea ampia di beneficiari (oltre 1.000 PA), è prevista una modalità di accesso per soluzioni standard. Un percorso semplificato e guidato che va dalla richiesta dei finanziamenti all'erogazione dei fondi. @@ -34,3 +34,10 @@ verticalTimeline: bodyParagraphl: "Attraverso “PA digitale 2026” le amministrazioni potranno accedere ad un’area riservata, per seguire la gestione amministrativa delle singole iniziative finanziate attraverso l’azione del Dipartimento per la trasformazione digitale. Con l’avvio degli avvisi avranno infatti la possibilità non solo di fare richiesta per i fondi, ma anche di produrre i dati relativi all’avanzamento delle iniziative, ricevere comunicazioni dedicate e inviare documentazioni ufficiali per l’erogazione delle risorse." littleTitler: 'EROGAZIONI PER OBIETTIVI' bodyParagraphr: 'Per semplificare l’erogazione delle risorse, i contributi saranno riconosciuti alle amministrazioni sulla base del raggiungimento di specifici obiettivi predefiniti. Il processo di rendicontazione sarà quindi alleggerito, e non sarà necessario rendicontare le singole spese effettuate per ottenere i fondi.' +heroMode: + category: "MODALITÀ DI ACCESSO 2" + title: "Modalità alternativa per accedere alle risorse per la transizione digitale" + body: Presentazione progetti
La modalità di accesso prevista per le misure con una platea ristretta di beneficiari (fino a 1.000 PA). + link: /iniziativa/presentazione-progetti + btnLabel: SCOPRI DI PIù + btnAria: Scopri di più su presentazione progetti diff --git a/contents/labels.yml b/contents/labels.yml index 1ea648c33..0f72defa6 100644 --- a/contents/labels.yml +++ b/contents/labels.yml @@ -21,3 +21,5 @@ ariaLabel: slimMenu: Menu progetti correlati breadcrumb: Sei qui externalLink: Link esterno +errors: + errorMatch: "Il valore inserito non è valido" diff --git a/contents/links.yml b/contents/links.yml index 553af7dcf..fe053c850 100644 --- a/contents/links.yml +++ b/contents/links.yml @@ -1,16 +1,32 @@ internalLinks: + initiative: + linkTo: '/iniziativa' + label: L'iniziativa + linkTop: '/#mainTop' opportunity: linkTo: '/misure' - label: Le misure + label: Misure linkTop: '/#mainTop' howitworks: - linkTo: '/come-funziona' - label: Come funziona + linkTo: '/iniziativa' + label: L'iniziativa + linkTop: '#mainTop' + notices: + linkTo: '/avvisi' + label: Avvisi + linkTop: '#mainTop' + howToPartecipate: + linkTo: '/come-partecipare' + label: Come partecipare linkTop: '#mainTop' support: linkTo: '/supporto' label: Supporto linkTop: '#mainTop' + avvisi: + linkTo: '/avvisi' + label: Avvisi + linkTop: '#mainTop' updates: linkTo: '/updates' label: Ricevi aggiornamenti @@ -64,9 +80,9 @@ externalLinks: linkTo: https://github.com/italia/ ariaLabel: 'GitHub Italia (link esterno)' dipartimento: - label: Dipartimento per la Trasformazione Digitale + label: Dipartimento per la trasformazione digitale linkTo: https://innovazione.gov.it - ariaLabel: 'Dipartimento per la Trasformazione Digitale (Collegamento esterno - Apre su nuova scheda)' + ariaLabel: 'Dipartimento per la trasformazione digitale (Collegamento esterno - Apre su nuova scheda)' ministeroMitd: label: "Ministero per l'innovazione tecnologica e la transizione digitale" linkTo: 'https://innovazione.gov.it/' @@ -75,6 +91,10 @@ externalLinks: linkTo: https://ec.europa.eu/info/index_it ariaLabel: 'Unione Europea (Collegamento esterno - Apre su nuova scheda)' label: 'Unione Europea' + accedi: + linkTo: https://areariservata.padigitale2026.gov.it/sis_SpidPage + ariaLabel: "Accedi all'area privata" + label: 'Accedi' repubblica: linkTo: https://www.governo.it/ ariaLabel: 'Governo Italiano (Collegamento esterno - Apre su nuova scheda)' diff --git a/contents/note-legali-page/note-legali.md b/contents/note-legali-page/note-legali.md index 830bf6d0c..db71eae86 100644 --- a/contents/note-legali-page/note-legali.md +++ b/contents/note-legali-page/note-legali.md @@ -6,7 +6,7 @@ La Presidenza del Consiglio dei Ministri - Dipartimento per la Trasformazione Di ### **Licenza dei contenuti** In applicazione del principio *open by default* ai sensi dell’articolo 52 del decreto legislativo 7 marzo 2005, n. 82 (CAD) e salvo dove diversamente specificato (compresi i contenuti incorporati di terzi), i dati, i documenti e le informazioni pubblicati sul sito sono rilasciati con [licenza CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/legalcode.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='CC-BY 4.0 (Collegamento esterno - Apre su nuova scheda)'}. -Gli utenti sono quindi liberi di condividere (riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato) e modificare (trasformare il materiale e utilizzarlo per opere derivate) per qualsiasi fine, anche commerciale con il solo onere di attribuzione, senza apporre restrizioni aggiuntive. +Gli utenti sono quindi liberi di condividere (riprodurre, distribuire, comunicare al pubblico, esporre in pubblico) rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato e modificare (trasformare il materiale e utilizzarlo per opere derivate) per qualsiasi fine, anche commerciale con il solo onere di attribuzione, senza apporre restrizioni aggiuntive. ### **Collegamenti a siti esterni e contenuti incorporati** Eventuali collegamenti a siti esterni di terzi, indicati nel presente sito, nonché eventuali contenuti incorporati di terzi sono forniti come semplice servizio agli utenti. L’indicazione dei collegamenti a siti esterni di terzi o l’inserimento di contenuti incorporati di terzi non implica da parte della Presidenza del Consiglio dei Ministri alcun tipo di approvazione o condivisione di responsabilità in relazione alla legittimità, alla completezza e alla correttezza delle informazioni contenute nei siti indicati. diff --git a/contents/opportunity-page/opportunity.yml b/contents/opportunity-page/opportunity.yml index 9cccbed2d..6f6f23b2f 100644 --- a/contents/opportunity-page/opportunity.yml +++ b/contents/opportunity-page/opportunity.yml @@ -18,22 +18,14 @@ selectBeneficiaries: label: 'Comuni' - value: 'citta-metropolitane' label: 'Città metropolitane' - - value: 'consorzi-ricerca' - label: 'Consorzi interuniversitari di ricerca' - value: 'enti-servizio-civile' label: 'Enti iscritti all’albo del servizio civile' - - value: 'enti-ricerca-pubblica' - label: 'Enti di ricera pubblica' - - value: 'enti-diritto' - label: 'Enti per il diritto allo studio, agenzie, consorzi' - - value: 'enti-regionali' - label: 'Enti regionali' - - value: 'istituti-formazione' - label: 'Istituti di alta formazione musicale e coreutica' + - value: 'istituti-ricerca-afam' + label: 'Istituti di Ricerca e AFAM' - value: 'province' label: 'Province' - value: 'province-autonome' - label: 'Province Autonome' + label: 'Province autonome' - value: 'pa-centrali' label: 'Pubbliche Amministrazioni Centrali' - value: 'regioni' @@ -66,11 +58,10 @@ beneficiaries:
  • avere significativi risparmi della spesa pubblica nella gestione dei data center che possono essere reinvestiti nello sviluppo di nuovi servizi.
    • stalls: '280 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/infrastrutture-digitali.html' + accessLabel: Presentazione Progetto + updates: Il 28 gennaio 2022 è stato pubblicato il bando per la realizzazione del Polo Strategico Nazionale (PSN). La proposta per la creazione del Polo, su cui si basa la gara, è stata individuata dal Dipartimento per la trasformazione digitale a dicembre 2021 secondo il modello di partenariato pubblico privato. La procedura è affidata a Difesa Servizi S.p.A., società in house del Ministero della Difesa, in qualità di centrale di committenza. - number: 1.2 id: abili-faci-migr title: Abilitazione e facilitazione migrazione al Cloud @@ -94,12 +85,11 @@ beneficiaries:
  • l’utilizzo di soluzioni in cloud permette alle amministrazioni di beneficiare di risparmi significativi da reinvestire nello sviluppo di nuovi servizi, maggiore trasparenza sui costi e sull’utilizzo dei servizi, agilità e scalabilità nella gestione delle infrastrutture;
  • la migrazione al cloud prevede un miglioramento dell’efficienza energetica delle infrastrutture della PA e maggiore sostenibilità ambientale grazie alla dismissione dei data center meno efficienti.
    • - stalls: '16,600 enti' - solutionType: '/come-funziona/soluzioni-standard' + stalls: '16,500 enti' + solutionType: '/iniziativa/soluzioni-standard' accessSectionId: soluzioni-standard - accessLabel: Soluzioni standard - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/abilitazione-e-facilitazione-migrazione-al-cloud.html' + accessLabel: Soluzioni Standard + moreInfoLink: 'https://areariservata.padigitale2026.gov.it/Pa_digitale2026_avvisi' - number: 1.3.1 id: piatt-dig-naz title: Piattaforma Digitale Nazionale Dati @@ -125,11 +115,10 @@ beneficiaries:

    Vantaggi per la PA

    Per fornire servizi digitali a cittadini e imprese, gli enti devono scambiarsi informazioni in modo efficiente e sicuro. La Piattaforma semplifica questo scambio permettendo agli enti pubblici di accedere alle informazioni in possesso di altri enti: in questo modo la Pubblica Amministrazione non chiederà al cittadino o all’impresa dati già in suo possesso, applicando il principio Once Only.

    stalls: '170 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/dati-e-interoperabilita.html' + accessLabel: Presentazione Progetto + moreInfoLink: 'https://areariservata.padigitale2026.gov.it/Pa_digitale2026_avvisi' - number: 1.3.2 id: sport-digi-unic title: Sportello Digitale Unico @@ -149,22 +138,19 @@ beneficiaries: label: Province autonome - value: universita label: Università - - value: 'enti-diritto' - label: 'Enti per il diritto allo studio, agenzie, consorzi' + - value: istituti-ricerca-afam + label: Istituti di Ricerca e AFAM description: Facilitare l’implementazione dello “Sportello Digitale Unico” (Single Digital Gateway), ovvero supportare l’attuazione del regolamento europeo che ha l’obiettivo di uniformare l’accesso ai servizi digitali in tutto i Paesi membri dell'UE. stalls: '230 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/dati-e-interoperabilita.html' + accessLabel: Presentazione Progetto + updates: Il Dipartimento per la trasformazione digitale ha siglato un accordo di collaborazione con AgID, in quanto soggetto attuatore, per l’implementazione della misure. La Corte dei Conti ha registrato l’accordo rendendolo pienamente operativo. Per tutti gli aggiornamenti visita la sezione dedicata del sito AgID. - number: 1.4.1 id: esp-serv-pubb title: Esperienza dei servizi pubblici money: '613 milioni di euro' tags: - - value: citta-metropolitane - label: "Città metropolitane" - value: comuni label: Comuni - value: scuole @@ -178,12 +164,11 @@ beneficiaries:
  • opportunità per tutte le PA, anche quelle con meno risorse, di poter garantire un’esperienza d’uso semplice, efficace, trasparente e accessibile;
  • risparmio di risorse, automatizzando e riusando soluzioni già collaudate, chiavi in mano.
    • - stalls: '16,500 enti' - solutionType: '/come-funziona/soluzioni-standard' + stalls: '15,900 enti' + solutionType: '/iniziativa/soluzioni-standard' accessSectionId: soluzioni-standard accessLabel: Soluzioni standard - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/servizi-digitali-e-cittadinanza-digitale.html' + moreInfoLink: 'https://areariservata.padigitale2026.gov.it/Pa_digitale2026_avvisi' - number: 1.4.2 id: access title: Accessibilità @@ -208,14 +193,13 @@ beneficiaries:
  • implementazione di tecnologie assistive necessarie alle postazioni di lavoro dei lavoratori con disabilità.
    • stalls: '55 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/servizi-digitali-e-cittadinanza-digitale.html' + accessLabel: Presentazione Progetto + updates: Il Dipartimento per la trasformazione digitale ha siglato un accordo di collaborazione con AgID, in quanto soggetto attuatore, per l’implementazione della misure. La Corte dei Conti ha registrato l’accordo rendendolo pienamente operativo. Per tutti gli aggiornamenti visita la sezione dedicata del sito AgID. - number: 1.4.3 id: adoz-pago - title: Adozione PagoPA e app IO + title: Adozione pagoPA e app IO money: '750 milioni di euro' tags: - value: comuni @@ -226,30 +210,24 @@ beneficiaries: label: ASL - label: Aziende Ospedaliere value: aziende-ospedaliere - - value: enti-regionali - label: Enti Regionali + - label: Province autonome + value: province-autonome - value: universita label: Università - - value: enti-diritto - label: Enti diritto allo studio, agenzie e consorzi - - value: istituti-formazione - label: Istituti alta formazione musicale e coreutica - - value: enti-ricerca-pubblica - label: Enti di ricerca pubblica - - value: consorzi-ricerca - label: Consorzi interuniversitari di ricerca + - value: istituti-ricerca-afam + label: Istituti di Ricerca e AFAM description: | Accelerare l'adozione di pagoPA, la piattaforma digitale per i pagamenti verso le Pubbliche Amministrazioni, e dell’app IO quale principale punto di contatto tra Enti e cittadini per la fruizione dei servizi pubblici digitali.

    Vantaggi per la PA

    pagoPA consente alle Pubbliche Amministrazioni di gestire gli incassi in modo centralizzato ed efficiente, offrendo sistemi automatici di rendicontazione e riconciliazione con un significativo risparmio in termini di risorse, tempi e costi e assicurando un servizio migliore ai cittadini.

    IO permette alle diverse PA, locali o nazionali, di raccogliere tutti i servizi, le comunicazioni e i relativi documenti in un unico luogo e di interfacciarsi in modo semplice, rapido e sicuro con i cittadini.

    - stalls: '17,500 enti' - solutionType: '/come-funziona/soluzioni-standard' + stalls: '16,800 enti' + solutionType: '/iniziativa/soluzioni-standard' accessSectionId: soluzioni-standard - accessLabel: Soluzioni standard - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/servizi-digitali-e-cittadinanza-digitale.html' + accessLabel: Soluzioni Standard + moreInfoLink: 'https://areariservata.padigitale2026.gov.it/Pa_digitale2026_avvisi' + goToButton: true - number: 1.4.4 id: adoz-id title: Adozione identità digitale @@ -267,30 +245,26 @@ beneficiaries: value: aziende-ospedaliere - value: province label: Province + - value: citta-metropolitane + label: Città metropolitane - value: altre-pa-locali label: Altre PAL - value: universita label: Università - - value: enti-diritto - label: Enti diritto allo studio, agenzie e consorzi - - value: istituti-formazione - label: Istituti alta formazione musicale e coreutica - - value: enti-ricerca-pubblica - label: Enti di ricerca pubblica - - value: consorzi-ricerca - label: Consorzi interuniversitari di ricerca + - value: istituti-ricerca-afam + label: Istituti di Ricerca e AFAM description: | Favorire l'adozione dell’identità digitale (Sistema Pubblico di Identità Digitale, SPID e Carta d'Identità Elettronica, CIE) e dell'Anagrafe nazionale della popolazione residente (ANPR).

    Vantaggi per la PA

    Le soluzioni di identità digitale SPID e CIE consentono alle amministrazioni di abbandonare i diversi sistemi di autenticazione gestiti localmente, permettendo di risparmiare risorse (in termini di lavoro e costo necessari per il rilascio e la manutenzione delle credenziali) ed offrire un accesso sicuro e veloce ed omogeneo ai servizi online su tutto il territorio nazionale.

    Con ANPR le amministrazioni potranno dialogare in maniera efficiente tra di loro, avendo  a disposizione un punto di riferimento unico di dati e informazioni anagrafiche, dal quale poter reperire informazioni certe e sicure per poter erogare servizi integrati e più efficienti per i cittadini. Per la Pubblica Amministrazione significa guadagnare in efficienza superando le precedenti frammentazioni, ottimizzare le risorse, semplificare e automatizzare le operazioni relative ai servizi anagrafici, consultare o estrarre dati, monitorare le attività ed effettuare analisi e statistiche

    - stalls: '10,300 enti' - solutionType: '/come-funziona/soluzioni-standard' + stalls: '22,300 enti' + solutionType: '/iniziativa/soluzioni-standard' accessSectionId: soluzioni-standard - accessLabel: Soluzioni standard - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/servizi-digitali-e-cittadinanza-digitale.html' + accessLabel: Soluzioni Standard + moreInfoLink: 'https://areariservata.padigitale2026.gov.it/Pa_digitale2026_avvisi' + goToButton: true - number: 1.4.5 id: digi-avvisi title: Digitalizzazione degli avvisi pubblici @@ -306,11 +280,10 @@ beneficiaries:

    Vantaggi per la PA

    Accedere a un sistema di notifica digitale permetterà alla PA di abbattere le spese vive legate all’attuale processo di notifica (stampa cartacea e spedizione degli atti), anche in caso di inadempimento da parte del cittadino. La certezza delle notifiche, inoltre, consente di ridurre una cospicua parte del contenzioso e i relativi costi di gestione.

    stalls: '7,900 enti' - solutionType: '/come-funziona/soluzioni-standard' + solutionType: '/iniziativa/soluzioni-standard' accessSectionId: soluzioni-standard accessLabel: Soluzioni standard - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/servizi-digitali-e-cittadinanza-digitale.html' + moreInfoLink: 'https://areariservata.padigitale2026.gov.it/Pa_digitale2026_avvisi' - number: 1.4.6 id: maas title: MaaS @@ -326,11 +299,10 @@ beneficiaries:

    L'utilizzo di soluzioni di Mobility as a Service (MaaS) miglioreranno i sistemi di trasporto, ridurranno il traffico urbano, gli incidenti stradali e, grazie ad un minore utilizzo dell’auto privata, vi sarà un’importante diminuzione dei consumi energetici, delle emissioni e dell’inquinamento. 

    La PA potrà quindi raggiungere obiettivi di sostenibilità economica, ambientale e sociale per l’intera collettività.

    stalls: '10 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/servizi-digitali-e-cittadinanza-digitale.html' + accessLabel: Presentazione Progetto + updates: L’avviso pubblico del 22 novembre 2021 ha portato alla selezione di Milano, Napoli e Roma come città capofila per il progetto Mobility as a Service for Italy. Nei prossimi mesi sarà pubblicato un nuovo bando per ampliare l’iniziativa. - number: 1.5 id: cyber title: Cybersecurity @@ -348,11 +320,11 @@ beneficiaries:
  • abilitare una gestione e un monitoraggio efficienti del rischio informatico.
    • stalls: '6 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/cybersecurity-sicurezza-informatica.html' + accessLabel: Presentazione Progetto + updates: La Corte dei Conte ha registrato l'accordo tra il Dipartimento per la trasformazione digitale e l'Agenzia per la cybersicurezza, rendendo l'Agenzia soggetto attuatore della misura. Per tutti gli aggiornamenti visita la pagina dedicata sul sito dell'Agenzia. + - number: 1.6 id: digi-gran-amm title: Digitalizzazione grandi amministrazioni centrali @@ -362,11 +334,10 @@ beneficiaries: label: PA Centrali description: Digitalizzare le grandi amministrazioni centrali, a partire dai processi fondamentali per semplificare l’erogazione di servizi al cittadino, aumentando allo stesso tempo l'efficienza dell’apparato pubblico. stalls: '7 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/digitalizzazione-delle-grandi-amministrazioni-centrali.html' + accessLabel: Presentazione Progetto + updates: Il Dipartimento per la trasformazione digitale ha stretto accordi di collaborazione con tutte le grandi amministrazioni coinvolte dalla misura: INPS, Ministero della Giustizia, INAIL, Ministero dell’Interno, Ministero delle Difesa, Guardia di Finanza e Consiglio di Stato. Gli accordi sono stati registrati dalla Corte dei Conti, dando ufficialmente il via all’implementazione delle singole iniziative. Per maggiori informazioni visita innovazione.gov.it. - number: 1.7.1 id: servi-civi title: Servizio civile digitale @@ -380,11 +351,10 @@ beneficiaries:

    Vantaggi per la PA

    Una cittadinanza in grado di utilizzare consapevolmente le possibilità offerte dalle tecnologie digitali consente all’amministrazione di pubblica di erogare servizi anche in modalità digitale, migliorando quindi la qualità dell’offerta e il rapporto tra cittadini e istituzioni.

    stalls: '100 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/competenze-digitali-di-base.html' + accessLabel: Presentazione Progetto + updates: Il Dipartimento per la trasformazione digitale della Presidenza del Consiglio dei ministri, ha individuato il Dipartimento per le politiche giovanili e il Servizio Civile Universale quale Soggetto attuatore della misura. Il 26 gennaio il Dipartimento ha quindi pubblicato il primo avviso pubblico per gli enti. - number: 1.7.2 id: centri-facili title: Centri di facilitazione digitale @@ -400,11 +370,10 @@ beneficiaries:

    Vantaggi per la PA

    L’iniziativa consentirà di sviluppare e potenziare le capacità digitali anche in un’amministrazione pubblica, incluse le scuole, in modo da abilitare l’evoluzione del servizio seguendo le esigenze della cittadinanza e offrire un servizio di assistenza rivolto anche alle categorie svantaggiate.

    stalls: '21 enti' - solutionType: '/come-funziona/presentazione-progetti' + solutionType: '/iniziativa/presentazione-progetti' accessSectionId: presentazione-progetto - accessLabel: Presentazione progetti - moreInfoLabel: 'Leggi di più su Italia Domani' - moreInfoLink: 'https://italiadomani.gov.it/it/Interventi/investimenti/competenze-digitali-di-base.html' + accessLabel: Presentazione Progetto + moreInfoLink: 'https://areariservata.padigitale2026.gov.it/Pa_digitale2026_avvisi' modal: selectRepresent: - value: public-administration @@ -413,6 +382,13 @@ modal: label: Fornitore IT - value: other label: Altro + selectArgument: + - value: Accesso al portale + label: Accesso al portale + - value: Iscrizione newsletter + label: Iscrizione alla newsletter + - value: Generale + label: Generale selectInQuanto: - value: dirigente-administration label: Dirigente dell’amministrazione @@ -443,18 +419,24 @@ modal: requiredLabel: Questo campo è richiesto emailLabel: EMAIL* emailValidationLabel: Per favore inserisci un'indirizzo email valido. - representLabel: RAPPRESENTO* + argumentLabel: Argomento* + measureLabel: Misura* selectPlaceholder: Scegli una voce dall’elenco enteValidationLabel: Per favore inserisci una denominazione ente valida. enteTypeLabel: TIPO DI ENTE/STRUTTURA* - enteNameLabel: NOME ENTE/STRUTTURA* + enteNameLabel: NOME STRUTTURA* inQuantoLabel: IN QUANTO* directContactLabel: CONTATTO DIRETTO directContactInfo: Un Team dedicato è a tua disposizione per ricevere
    chiarimenti     sugli investimenti o approfondire alcuni temi addMessageLabel: Voglio aggiungere un messaggio + nameLabel: Nome richiedente:* + objectLabel: Oggetto* messageSelectLabel: ARGOMENTO MESSAGGIO - messageLabel: TESTO MESSAGGIO + descriptionLabel: Testo messaggio* + telLabel: "Contatto telefonico" radioGroupLabel: DICHIARO + representLabel: RAPPRESENTO* + messageLabel: TESTO MESSAGGIO comunicationRadio: Acconsento a essere contattato per comunicazioni specifiche* privacyRadio: Ho letto e compreso privacyRadioLinkLabel: l’informativa privacy diff --git a/contents/privacy-page/privacy.md b/contents/privacy-page/privacy.md index 028fc9c58..d5bf2da2e 100644 --- a/contents/privacy-page/privacy.md +++ b/contents/privacy-page/privacy.md @@ -1,143 +1,129 @@ -# Informativa privacy + -A norma degli articoli 13 e 14 del Regolamento UE 2016/679 (GDPR) vogliamo -fornirti un'informativa semplice e chiara su come trattiamo i dati personali che -ci fornisci direttamente o di cui comunque potremo venire in possesso tramite -contatto con il sito web padigitale2026.gov.it. +## Informativa privacy -## Titolare del trattamento +### 1. Oggetto del trattamento -Il Titolare del trattamento è la Presidenza del Consiglio dei Ministri - -Dipartimento per la trasformazione digitale, con sede in Largo Pietro di Brazzà -86, 00186 Roma, contattabile ai seguenti recapiti: +Ai sensi del Regolamento (UE) 2016/679 del Parlamento europeo e del Consiglio del 27 aprile 2016 recante la disciplina europea per la protezione delle persone fisiche con riguardo al trattamento dei dati personali, nonché alla libera circolazione di tali dati (General Data Protection Regulation, in seguito "**Regolamento**"), e nel rispetto del decreto legislativo 30 giugno 2003, n. 196 e s.m.i., questo documento descrive le modalità di trattamento dei dati personali dei soggetti coinvolti e/o interessati a vario titolo alle iniziative finanziate nell’ambito del Piano Nazionale di Ripresa e Resilienza (in seguito, anche “**PNRR**”), nonché a tutte le attività a queste connesse espletabili nell’ambito della piattaforma [www.padigitale2026.gov.it](https://padigitale2026.gov.it/){class="text-decoration-none font-weight-semibold"} (la “**Piattaforma**” o il “**Sito**”). +La presente informativa è resa ai sensi degli articoli 13 e 14 del Regolamento. -- Email: [segreteria.trasformazionedigitale@governo.it](mailto:segreteria.trasformazionedigitale@governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Indirizzo Email (link esterno)'} -- PEC: [diptrasformazionedigitale@pec.governo.it](mailto:diptrasformazionedigitale@pec.governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Indirizzo PEC (link esterno)'} +### 2. Titolare del trattamento e Responsabile per la protezione dei dati - Data Protection Officer -## Responsabile per la protezione dei dati +Il Titolare del trattamento (il “**Titolare**” o l’“**Amministrazione Centrale**”) è la **Presidenza del Consiglio dei Ministri - Dipartimento per la trasformazione digitale**, con sede in Largo Pietro di Brazzà 86, 00186 Roma, contattabile ai seguenti recapiti: + +- Email: [segreteria.trasformazionedigitale@governo.it](mailto:segreteria.trasformazionedigitale@governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Invia un Email a: segreteria.trasformazionedigitale@governo.it (link esterno - Apertura nuova scheda)'} +- PEC: [diptrasformazionedigitale@pec.governo.it](mailto:diptrasformazionedigitale@pec.governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Invia una PEC a: diptrasformazionedigitale@pec.governo.it (link esterno - Apertura nuova scheda)'} Il Responsabile per la protezione dei dati - Data Protection Officer, è contattabile ai seguenti recapiti: -- Email: [responsabileprotezionedatipcm@governo.it](mailto:responsabileprotezionedatipcm@governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Indirizzo Email (link esterno)'} -- PEC: [USG@mailbox.governo.it](mailto:USG@mailbox.governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Indirizzo PEC (link esterno)'} - -## Come vengono trattati i tuoi dati personali - periodo di conservazione - base giuridica - -La richiesta di materiali o informazioni in modalità automatizzata o l'invio -facoltativo, esplicito e volontario di messaggi per il tramite dell’apposito -form o mediante indirizzi di contatto del sito, comportano l'acquisizione dei -dati di contatto del mittente, necessari a rispondere alla richiesta, nonché dei -dati personali inclusi nelle comunicazioni. - -Tali dati saranno trattati dal Titolare esclusivamente al fine di - e per il -periodo necessario a - gestire le interazioni con l'utenza o, con riferimento -alle richieste di materiali o informazioni in modalità automatizzata, fornire il -servizio richiesto per il periodo in cui lo stesso sarà attivo. - -La base giuridica di tale trattamento è da rinvenirsi nei compiti istituzionali -affidati al Titolare, volti a favorire la conoscenza sugli investimenti per la -digitalizzazione della PA previsti dal Piano Nazionale di Ripresa e Resilienza -(PNRR) approvato dal governo italiano all’interno del programma europeo -NextGenerationEU. - -## Chi potrà conoscere i dati personali - -I dati personali raccolti potranno essere oggetto di comunicazione a soggetti, -interni o esterni alla Presidenza del Consiglio dei Ministri, nei confronti dei -quali la comunicazione si configura come necessaria per il perseguimento delle -finalità sopra specificate, compresi soggetti terzi che forniscono un servizio -al Titolare, ad esempio per la fornitura di servizi tecnologici di questo -portale, e che tratteranno detti dati personali in qualità di responsabili del -trattamento ai sensi e per gli effetti di cui all’articolo 28 del GDPR. - -L’elenco dei responsabili del trattamento può essere richiesto al Titolare in -qualsiasi momento, scrivendo a -[segreteria.trasformazionedigitale@governo.it](mailto:segreteria.trasformazionedigitale@governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Indirizzo Email (link esterno)'}. - -## Trasferimento dei dati - -I dati potranno essere liberamente trasferiti fuori dal territorio nazionale a -Paesi situati nell'Unione Europea. Per la fornitura di alcuni servizi -tecnologici, il Titolare potrebbe avvalersi di soggetti ubicati al di fuori -dell’Unione Europea. L'eventuale trasferimento dei dati in Paesi situati al di -fuori dell'Unione Europea avverrà, in ogni caso, nel rispetto delle garanzie -appropriate e opportune ai fini del trasferimento stesso, ai sensi della -normativa applicabile. - -## Quali sono i tuoi diritti - -- **Diritto di accedere ai dati**: puoi ottenere conferma e informazioni sul trattamento. -- **Diritto di rettifica**: puoi rettificare dati inesatti o integrarli. -- **Diritto di cancellazione**: nei casi di legge, puoi chiedere l'oblio. -- **Diritto di limitazione al trattamento**: nei casi di legge, puoi chiedere - di limitare il trattamento. -- **Diritto di opporsi al trattamento**: per particolari motivi puoi opporti al - trattamento per l'esecuzione di un compito di interesse pubblico o connesso - all'esercizio di pubblici poteri. -- **Diritto alla portabilità dei dati**: non hai diritto alla portabilità dei - tuoi dati quando il trattamento è necessario per eseguire un compito di - interesse pubblico o nell’esercizio di funzioni pubbliche o adempiere a - obblighi legali. - -Per maggiori informazioni o esercitare i tuoi diritti contatta il Titolare agli -indirizzi sopra indicati. Se invece ritieni che il trattamento dei dati -personali a te riferiti avvenga in violazione di quanto previsto dal GDPR, hai -anche diritto di proporre reclamo, ai sensi dell’art. 77 del GDPR, al Garante -per la protezione dei dati personali. - -## Cookie - -Questa sezione fornisce informazioni dettagliate sull'uso dei cookie, su come -sono utilizzati dal sito e su come gestirli, in attuazione dell’art. 122 del -decreto legislativo 30 giugno 2003, n. 196, nonché nel rispetto delle -“[Linee guida cookie e altri strumenti di tracciamento](https://www.garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/9677876){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Linee guida cookie e altri strumenti di tracciamento (collegamento esterno)'}” -emanate dal Garante per la protezione dei dati personali con provvedimento del -10 giugno 2021. - -padigitale2026.gov.it utilizza cookie tecnici al fine di garantire il corretto -funzionamento delle procedure e migliorare l'esperienza d'uso dei propri -visitatori, il cui uso non è strumentale alla raccolta di dati personali -identificativi dell'utente. Per questo motivo non abbiamo bisogno del tuo -consenso per memorizzare i cookie. - -Utilizziamo anche i seguenti cookie analitici: - -- Il servizio Google Analytics, la cui policy può essere visionata a questo - link [a questo link](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Uso di cookie di Google Analytics (link esterno)'}. - Al fine di rispettare la privacy degli utenti, il servizio è utilizzato con la - modalità “anonymizeIp” che consente di mascherare gli indirizzi IP degli - utenti che navigano sul sito (maggiori informazioni sulla funzionalità [a questo link](https://support.google.com/analytics/answer/2763052?hl=it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Anonimizzazione (o mascheramento) degli indirizzi IP in Google Analytics (link esterno)'}) - e non ne permettiamo la condivisione. -- il servizio "Web Analytics Italia" (WAI) fornito da AGID che raccoglie dati - statistici anonimi mediante IP anonimizzato relativi alle visite del sito - Internet da parte degli utenti. - -Inoltre noi e i nostri fornitori ci asteniamo dal combinare questi cookie con -altre elaborazioni né li trasmettiamo a terzi. Tali cookie vengono conservati -per un periodo non superiore a 13 mesi dal momento della raccolta, salvo che la -loro ulteriore conservazione non si renda necessaria per l’accertamento di -reati. - -## Come disabilitare i cookie (opt-out) sul proprio dispositivo - -La maggior parte dei browser accetta i cookie automaticamente, ma è possibile -rifiutarli. - -Se non si desidera ricevere o memorizzare i cookie, si possono modificare le -impostazioni di sicurezza del browser utilizzato, secondo le istruzioni rese -disponibili dai relativi fornitori ai link di seguito indicati. Nel caso in cui -si disabilitino tutti i cookie, il sito potrebbe non funzionare correttamente. - -- [Chrome](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Chrome (link esterno)'} -- [Firefox](https://support.mozilla.org/it/kb/protezione-antitracciamento-avanzata-firefox-desktop?redirectlocale=it&redirectslug=Attivare+e+disattivare+i+cookie){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Firefox (link esterno)'} -- [Safari](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/mac){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Safari (link esterno)'} -- [Edge](https://support.microsoft.com/it-it/help/4027947/microsoft-edge-delete-cookies){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Edge (link esterno)'} -- [Opera](https://help.opera.com/en/latest/web-preferences/#cookies){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Opera (link esterno)'} +- Email: [responsabileprotezionedatipcm@governo.it](mailto:responsabileprotezionedatipcm@governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Invia un Email a: responsabileprotezionedatipcm@governo.it (link esterno - Apertura nuova scheda)'} +- PEC: [USG@mailbox.governo.it](mailto:USG@mailbox.governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Invia una PEC a: USG@mailbox.governo.it (link esterno - Apertura nuova scheda)'} + +### 3. Finalità del trattamento + +I dati personali trasmessi per il tramite della Piattaforma, anche attraverso compilazione e inoltro di moduli, vengono trattati per: + +
      +
    1. fornire assistenza e rispondere alle richieste di informazioni degli utenti per il tramite dell’apposito form presente sul Sito, mediante contatto telefonico (se fornito) o attraverso appositi materiali o informazioni fornite in modalità automatizzata;
      2. +
    2. istruire un procedimento amministrativo a seguito della presentazione delle domande di partecipazione agli avvisi pubblicati sulla Piattaforma (in questo caso la finalità viene perseguita durante tutta la fase di gestione della procedura di accesso alle agevolazioni, incluse quella endoprocedimentale, procedimentale, istruttoria e di erogazione dell’agevolazione);
      3. +
    3. assolvere eventuali obblighi di legge, contabili e fiscali.
      4. +
    + +### 4. Tipologia di dati conferiti + +**4.1 Premessa** + +In ottemperanza alle disposizioni previste nel Regolamento (UE) 2021/241 (Dispositivo per la Ripresa e la Resilienza “RRF”) e dal Decreto Legge 77 del 2021 convertito in Legge 29 luglio 2021, n. 108, con riferimento al conferimento dei dati nell’ambito delle iniziative del PNRR, si ricorda che: + +- al Soggetto Attuatore è demandata l’attuazione dei singoli progetti finanziati nell’ambito del PNRR. I Soggetti Attuatori sono chiamati a svolgere una costante e completa attività di rilevazione dei dati afferenti ai progetti finanziati, registrando le informazioni ricomprese nel set minimo di dati di attuazione finanziaria, fisica e procedurale da raccogliere, conservare e trasmettere, individuato all’interno del Protocollo Unico di Colloquio v. 2.2 di novembre 2020 e s.m.i. di cui alla Circolare MEF n. 18 del 30 aprile 2014 revisionato sulla base delle specificità attuative del PNRR e comunicato tramite apposita nota circolare del Servizio Centrale per il PNRR; + +- all’Amministrazione Centrale è demandato, per il tramite delle funzioni preposte, il monitoraggio e il presidio continuo dell’attuazione dei progetti, verificando da un lato l’avanzamento dei dati finanziari, di realizzazione fisica e procedurale degli investimenti e delle riforme e dall’altro il livello di conseguimento di milestone e target, nonché di tutti gli ulteriori elementi informativi necessari per la rendicontazione alla Commissione Europea. A tal fine, le stesse Amministrazioni Centrali sono chiamate, per i progetti di propria competenza, ad assicurare registrazione, raccolta, validazione e trasmissione dei dati di monitoraggio, ivi inclusi quelli rilevati dai Soggetti Attuatori, delle agevolazioni finanziarie concesse nell’ambito del Piano Nazionale di Ripresa e Resilienza e ad assicurare la registrazione, la conservazione, la tracciabilità e l’affidabilità dei dati oggetto d’osservazione. + +**4.2 Dati personali oggetto di trattamento** + +Con riferimento alla finalità di cui al punto A, sezione 3 di questa informativa, l’Amministrazione Centrale tratterà i seguenti dati personali di natura comune: + +- e-mail; + +- numero di telefono; + +- eventuali ulteriori dati personali, di natura comune, anagrafici e/o di contatto, inclusi nelle comunicazioni. + +Con riferimento alla finalità di cui ai punti B e C, sezione 3 di questa Informativa, l’Amministrazione Centrale tratterà i seguenti dati personali: + +- dati relativi ai soggetti coinvolti nell’attuazione, quali i Soggetti Attuatori, realizzatori, destinatari degli interventi, incluso codice fiscale e/o partita IVA. + +### 5. Soggetti del trattamento + +Il Titolare tratta i dati personali forniti dai soggetti coinvolti e/o interessati a vario titolo alle iniziative finanziate nell’ambito del Piano Nazionale di Ripresa e Resilienza. + +Il trattamento dei dati personali forniti dagli interessati potrà essere effettuato dal personale appositamente od occasionalmente autorizzato e istruito sulla base di specifiche istruzioni in ordine alle finalità e alle modalità del trattamento, da società, enti o soggetti nominati Responsabili del + +trattamento ai sensi dell’articolo 28 del Regolamento, che, per conto del Titolare, forniscono specifici servizi elaborativi o attività connesse, strumentali o di supporto adottando tutte quelle misure tecniche e organizzative adeguate a tutelare i diritti, le libertà e i legittimi interessi che sono riconosciuti per legge agli interessati, nonché da soggetti incaricati di fornire soluzioni IT per la gestione delle attività di sviluppo e manutenzione della Piattaforma. + +L’elenco dei responsabili del trattamento può essere richiesto al Titolare in qualsiasi momento, scrivendo a [segreteria.trasformazionedigitale@governo.it](mailto:segreteria.trasformazionedigitale@governo.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Invia un Email a: segreteria.trasformazionedigitale@governo.it (link esterno - Apertura nuova scheda)'} + +### 6. Modalità del trattamento e ambito di circolazione dei dati + +I dati personali sono trattati secondo i principi di liceità, correttezza, trasparenza e vengono acquisiti e conservati con l’ausilio di sistemi e strumenti, anche elettronici, idonei a garantirne la sicurezza e la riservatezza secondo le modalità previste dalle leggi e dai regolamenti vigenti. + +I dati personali potranno essere condivisi, per finalità istituzionali, con soggetti nei confronti dei quali la comunicazione e/o l’eventuale diffusione sia prevista da disposizioni di legge, da regolamenti o dalla normativa comunitaria, ovvero da soggetti pubblici e organi di controllo per lo svolgimento delle loro funzioni istituzionali quali Commissione Europea ed altri Enti e/o Autorità con finalità ispettive, contabili-amministrative e di verifica (es. Istituti di credito, Unità di Audit, ANAC, GdF, OLAF, Corte dei Conti europea-ECA, Procura europea-EPPO ecc.). + +### 7. Base giuridica del trattamento + +La liceità del trattamento dei dati personali trova fondamento (i) ai sensi dell’articolo 6, comma 1, lettera b) del Regolamento, nell’esecuzione di un contratto di cui l’interessato è parte o delle misure precontrattuali adottate su richiesta dello stesso interessato (es. in fase di gestione di attività operative volte a garantire l’eventuale erogazione di contributi o ai fini della gestione dei processi amministrativi, contabili e fiscali); (ii) ai sensi dell’articolo 6, comma 1, lettera c) del Regolamento, nell’adempimento di un obbligo legale al quale è soggetta l’Amministrazione Centrale (es. in fase di gestione dell’attività istruttoria o in fase di comunicazione dei dati in adempimento ai generali obblighi di trasparenza ai sensi del d.lgs. 33/2013 e ss.mm.); (iii) ai sensi dell’articolo 6, comma 1, lettera e) del Regolamento e dell’articolo 2-sexies del Codice privacy, nell'esecuzione dei compiti di interesse pubblico o comunque connessi all'esercizio dei propri pubblici poteri (es. nell’esecuzione delle attività di monitoraggio, analisi, ricerca e nell’esecuzione di attività di comunicazione e promozione relativamente all’attività istituzionale). + +### 8. Trasferimento dei dati + +Per la fornitura di alcuni servizi tecnologici, il Titolare potrebbe avvalersi di soggetti ubicati al di fuori dell’Unione Europea. L'eventuale trasferimento dei dati in Paesi situati al di fuori dell'Unione Europea avverrà, in ogni caso, nel rispetto delle garanzie appropriate e opportune ai fini del trasferimento stesso, ai sensi della normativa applicabile e con particolare riferimento agli art. 44 e ss. del Regolamento. + +### 9. Tempo di conservazione dei dati personali + +Nel rispetto delle norme previste dalla normativa vigente per la conservazione degli atti e dei documenti della P.A., i dati personali saranno conservati per un periodo di tempo non superiore a quello necessario agli scopi per i quali essi sono stati raccolti o successivamente trattati conformemente a quanto previsto dagli obblighi di legge. + +### 10. Diritti degli interessati + +- **Diritto di accedere ai dati**: è possibile ottenere conferma e informazioni sul trattamento. +- **Diritto di rettifica**: è possibile rettificare dati inesatti o integrarli. +- **Diritto alla cancellazione**: nei casi di legge, l’interessato ha diritto di ottenere la cancellazione. +- **Diritto di limitazione di trattamento**: nei casi di legge, l’interessato può chiedere di limitare il trattamento. +- **Diritto di opporsi al trattamento**: per particolari motivi è possibile opporsi al trattamento per l'esecuzione di un compito di interesse pubblico o connesso all'esercizio di pubblici poteri. +- **Diritto alla portabilità dei dati**: l’interessato non ha diritto alla portabilità dei dati quando il trattamento è necessario per eseguire un compito di interesse pubblico o nell’esercizio di funzioni pubbliche o adempiere a obblighi legali. + +Per maggiori informazioni o per esercitare i propri diritti, l’interessato può contattare il Titolare agli indirizzi sopra indicati. Se invece si ritiene che il trattamento dei dati personali avvenga in violazione di quanto previsto dal Regolamento, è possibile proporre reclamo, ai sensi dell’art. 77 del Regolamento, al Garante per la protezione dei dati personali. + +### 11. Cookie + +Questa sezione fornisce informazioni dettagliate sull'uso dei cookie, su come sono utilizzati dal Sito e su come gestirli, in attuazione dell’art. 122 del decreto legislativo 30 giugno 2003, n. 196, nonché nel rispetto delle “[Linee guida cookie e altri strumenti di tracciamento](garanteprivacy.it/web/guest/home/docweb/-/docweb-display/docweb/9677876){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Linee guida cookie e altri strumenti di tracciamento (link esterno - Apertura nuova scheda)'}” emanate dal Garante per la protezione dei dati personali con provvedimento del 10 giugno 2021. + +Il Sito utilizza cookie tecnici al fine di garantire il corretto funzionamento delle procedure e migliorare l'esperienza d'uso dei propri visitatori, il cui uso non è strumentale alla raccolta di dati personali identificativi dell'utente. Per questo motivo non è necessario il consenso dell’utente per la memorizzazione dei cookie. + +**Come disabilitare i cookie (opt-out) sul proprio dispositivo** + +La maggior parte dei browser accetta i cookie automaticamente, ma è possibile rifiutarli. + +Se non si desidera ricevere o memorizzare i cookie, si possono modificare le impostazioni di sicurezza del browser utilizzato, secondo le istruzioni rese disponibili dai relativi fornitori ai link di + +seguito indicati. Nel caso in cui si disabilitino tutti i cookie, il Sito potrebbe non funzionare correttamente. + + +- [Chrome](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Scopri di più su come gestire i cookie per Chrome (link esterno - Apertura nuova scheda)'} +- [Firefox](https://support.mozilla.org/it/kb/protezione-antitracciamento-avanzata-firefox-desktop?redirectlocale=it&redirectslug=Attivare+e+disattivare+i+cookie){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Scopri di più su come gestire i cookie per Firefox (link esterno - Apertura nuova scheda)'} +- [Safari](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/mac){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Scopri di più su come gestire i cookie per Safari (link esterno - Apertura nuova scheda)'} +- [Edge](https://support.microsoft.com/it-it/help/4027947/microsoft-edge-delete-cookies){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Scopri di più su come gestire i cookie per Edge (link esterno - Apertura nuova scheda)'} +- [Opera](https://help.opera.com/en/latest/web-preferences/#cookies){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Scopri di più su come gestire i cookie per Opera (link esterno - Apertura nuova scheda)'} Le presenti informazioni sono aggiornate alla data riportata in calce a questa pagina. -

    ultimo aggiornamento: 24/01/2022

    +

    ultimo aggiornamento: 31/03/2022

    diff --git a/contents/ricevi-assistenza/ricevi-assistenza.yml b/contents/ricevi-assistenza/ricevi-assistenza.yml new file mode 100644 index 000000000..9fc239fc7 --- /dev/null +++ b/contents/ricevi-assistenza/ricevi-assistenza.yml @@ -0,0 +1,38 @@ +name: FAQ - PA digitale 2026 +hero: + title: Domande frequenti + subtitle: Esplora le risposte alle domande più frequenti o fai una ricerca per parola chiave +sidebar: + - sectionTitle: 1. Trova le risposte ai dubbi più comuni + sectionId: digital-identity + sectionActive: true + - sectionTitle: 2. Apri una richiesta di assistenza + sectionId: select-administration + sectionActive: false + - sectionTitle: 3. Richiedi ulteriore supporto + sectionId: verify-data + sectionActive: false + - sectionTitle: 4. Ricevi aggiornamenti + sectionId: confirm-subscription + sectionActive: false +verticalTimeline: + - index: 0 + title: 'Trova le risposte ai dubbi più comuni' + icon: '/assets/ricevi-assistenza-1.svg' + headerParagraph: "All’interno della sezione “Domande frequenti” puoi consultare le risposte alle domande più frequenti riguardo al funzionamento della piattaforma." + sectionId: 'digital-identity' + - index: 1 + title: 'Apri una richiesta di assistenza' + icon: '/assets/ricevi-assistenza-2.svg' + headerParagraph: 'Se non hai trovato una risposta alla tua domanda, puoi ricevere assistenza compilando il modulo dedicato all’apertura di una nuova richiesta di supporto.' + sectionId: 'select-administration' + - index: 2 + title: 'Richiedi ulteriore supporto' + icon: '/assets/ricevi-assistenza-3.svg' + headerParagraph: 'Anche se hai ricevuto una risposta per risolvere il tuo problema, potresti aver bisogno di ulteriore supporto. In questo caso puoi riaprire la tua richiesta e ricevere, se necessario, assistenza telefonica.' + sectionId: 'verify-data' + - index: 3 + title: 'Ricevi aggiornamenti' + icon: '/assets/ricevi-assistenza-4.svg' + headerParagraph: 'Rimani aggiornato sull’evoluzione delle tue richieste di assistenza grazie alle notifiche della tua area riservata. Puoi inoltre consultare lo storico delle richieste.' + sectionId: 'confirm-subscription' \ No newline at end of file diff --git a/contents/seo.yml b/contents/seo.yml index a732b3458..46a7f3f59 100644 --- a/contents/seo.yml +++ b/contents/seo.yml @@ -17,7 +17,10 @@ opportunityPage: title: Le Misure del PNRR per la Transizione Digitale - PA digitale 2026 description: Scopri le misure del PNRR dedicate alla digitalizzazione della Pubblica Amministrazione italiana su PA Digitale 2026 comeFunzionaPage: - title: Come Funziona - PA digitale 2026 + title: L'iniziativa - PA digitale 2026 + description: Scopri le modalità per accedere ai fondi del PNRR per la digitalizzazione della Pubblica Amministrazione attraverso la piattaforma PA Digitale 2026 +comeParteciparePage: + title: Come Partecipare - PA digitale 2026 description: Scopri le modalità per accedere ai fondi del PNRR per la digitalizzazione della Pubblica Amministrazione attraverso la piattaforma PA Digitale 2026 faqPage: title: Domande Frequenti - PA digitale 2026 @@ -33,8 +36,21 @@ unsubscribePage: description: Annulla la tua email per ricevere agli aggiornamenti dalla piattaforma PA Digitale 2026 projectsSolutionPage: title: Presentazione progetti - PA digitale 2026 - description: Per le misure con una platea ristrettadi beneficiari (fino a 1.000 PA), è previstauna modalità di accesso attraversola presentazione di progetti, sempre ispirata ai principi della semplicità e della riduzione degli oneri amministrativi. + description: Per le misure con una platea ristrettadi beneficiari (fino a 1.000 PA), è previstauna modalità di accesso attraversola presentazione di progetti, sempre ispirata ai principi della semplicità e della riduzione degli oneri amministrativi. +assistenzaPage: + title: Assistenza - PA digitale 2026 + description: Un team dedicato è a tua disposizione per chiarire dubbi e approfondire temi di interesse. Compila il modulo sottostante e invia la richiesta. standardSolutionPage: title: Soluzioni standard - PA digitale 2026 description: Per le misure con una platea ampia di beneficiari (oltre 1.000 PA), è prevista una modalità di accesso per soluzioni standard. Un percorso semplificato e guidato che va dalla richiesta dei finanziamenti all'erogazione dei fondi. +creaProfiloPage: + title: Crea profilo - PA digitale 2026 + description: Per partecipare agli avvisi è necessario che il rappresentante legale di un'amministrazione presente su IPA (Indice dei domini digitali della Pubblica Amministrazione), o una persona incaricata, avvii la procedura di attivazione della PA sulla piattaforma. +candidaPaPage: + title: Candida PA - PA digitale 2026 + description: Per partecipare agli avvisi è necessario che il rappresentante legale di un'amministrazione presente su IPA (Indice dei domini digitali della Pubblica Amministrazione), o una persona incaricata, avvii la procedura di attivazione della PA sulla piattaforma. +riceviAssistenzaPage: + title: Ricevi assistenza - PA digitale 2026 + description: Per partecipare agli avvisi è necessario che il rappresentante legale di un'amministrazione presente su IPA (Indice dei domini digitali della Pubblica Amministrazione), o una persona incaricata, avvii la procedura di attivazione della PA sulla piattaforma. + diff --git a/contents/support-page/support.yml b/contents/support-page/support.yml index 0c0e2c0d5..05f6a2040 100644 --- a/contents/support-page/support.yml +++ b/contents/support-page/support.yml @@ -3,21 +3,24 @@ mainHero: title: Hai bisogno di chiarimenti o supporto? description: Consulta le le domande frequenti o scrivici per ricevere una risposta via email faqSection: - buttonLink: '/supporto/faq' + buttonLink: '/supporto/domande-frequenti' buttonLabel: Vai alle domande frequenti faqPreviewCards: - id: 1 - title: Cos'è Next Generation EU? - text: Next Generation EU (NGEU) è un piano Next da €750 miliardi di Euro che ha l'obiettivo di rilanciare l'economia europea dopo la pandemia di COVID-19 e di renderla più verde e digitale. + title: Chi può accedere a PA digitale 2026? + text: Il rappresentante legale dell'amministrazione, o una persona incaricata ad agire per suo conto, può accedere con SPID/CIE alla piattaforma. Durante la procedura di primo accesso alla piattaforma, è necessario selezionare e attivare il profilo della PA di riferimento. faqId: faq-1 + ariaLabel: Vai alla faq Chi può accedere a PA digitale 2026? - id: 2 - title: Cos’è Italia domani, il Piano nazionale di ripresa e resilienza (PNRR)? - text: Italia domani è il nome del Piano nazionale di ripresa e resilienza (PNRR) approvato dal Governo italiano il 29 aprile del 2021 all’interno del programma europeo Next Generation EU. L’Italia è la prima beneficiaria, in valore assoluto, del programma Next Generation EU, con un totale di €191,5 miliardi. Mediante un Fondo Complementare, finanziato direttamente dal bilancio dello Stato, il nostro Paese ha previsto un'integrazione di €30,6 mld. Il totale degli investimenti previsti è pertanto di €222,1 miliardi. + title: Quali sono i requisiti per il primo accesso a PA digitale 2026? + text: Per accedere alla piattaforma è necessario disporre della propria identità digitale (SPID o CIE) e della propria email istituzionale. Il rappresentante legale dell'amministrazione (o chi opera per suo conto) deve inoltre avere la possibilità di consultare la PEC dell'amministrazione per la quale intende operare. faqId: faq-2 + ariaLabel: Vai alla faq Quali sono i requisiti per il primo accesso a PA digitale 2026? - id: 3 - title: Chi può accedere alle risorse di Italia digitale 2026? - text: Il ruolo della PA, soprattutto quella locale, è centrale nell’implementazione di Italia digitale 2026. Le risorse a disposizione servono per permettere alle diverse amministrazioni di partecipare in prima persona al percorso di transizione digitale del Paese. + title: È possibile accedere alla piattaforma anche quando non si ricopre il ruolo di rappresentante legale dell'amministrazione? + text: Si. Nel caso in cui a effettuare l'accesso non sia direttamente il rappresentante legale ma una persona da lui incaricata, è presente una casella da spuntare per dichiarare di stare agendo per conto del rappresentante legale dell'amministrazione. Alla fine della procedura di primo accesso, il rappresentante legale della PA riceve una PEC con cui viene a informato del fatto che la persona incaricata ha agito per suo conto su PA digitale 2026. faqId: faq-3 + ariaLabel: Vai alla faq È possibile accedere alla piattaforma anche quando non si ricopre il ruolo di rappresentante legale dell'amministrazione? heroAssistance: title: Richiedi assistenza body: 'Se non hai trovato le informazioni che cercavi fra le domande frequenti, scrivici: ti risponderemo al più presto' diff --git a/package.json b/package.json index 2d62511ea..adf1f89dd 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "prop-types": "^15.7.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-google-recaptcha": "^2.1.0", "react-google-recaptcha-v3": "^1.9.7", "react-helmet": "^6.1.0", "react-hook-form": "^7.17.1", diff --git a/src/components/AccordionButtonFull.jsx b/src/components/AccordionButtonFull.jsx index 0fa85084c..f1f51808b 100644 --- a/src/components/AccordionButtonFull.jsx +++ b/src/components/AccordionButtonFull.jsx @@ -1,9 +1,7 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { Button, Collapse, Card, CardBody } from 'design-react-kit'; import { createUseStyles } from 'react-jss'; -import { navigate } from 'gatsby'; import PropTypes from 'prop-types'; -import { GlobalStateContext } from '../context/globalContext'; import { ExternalLink } from './ExternalLink'; const useStyles = createUseStyles({ @@ -31,6 +29,9 @@ const useStyles = createUseStyles({ display: 'flex', justifyContent: 'space-between', padding: '1.333rem 0.778rem', + '@media (max-width: 768px)': { + padding: '1.333rem 1.778rem', + }, flexDirection: 'column', alignItems: 'center', '@media (min-width: 992px)': { @@ -49,7 +50,7 @@ const useStyles = createUseStyles({ fontWeight: 'normal', }, '@media (min-width: 992px)': { - maxWidth: '70%', + maxWidth: '80%', fontSize: '1.778rem', paddingBottom: '0.833rem', }, @@ -59,7 +60,6 @@ const useStyles = createUseStyles({ display: 'flex', alignItems: 'baseline', flexBasis: '100%', - marginTop: '-1.111rem', }, '& .tag-title': { textTransform: 'uppercase', @@ -100,7 +100,10 @@ const useStyles = createUseStyles({ fontSize: '3.111rem', lineHeight: '1.15', textAlign: 'center', - marginBottom: '0.889rem', + marginBottom: '1.889rem', + '@media (max-width: 992px)': { + marginTop: '0.889rem', + }, '& span': { display: 'block', fontSize: '0.889rem', @@ -124,8 +127,11 @@ const useStyles = createUseStyles({ padding: '1.333rem 0.778rem', display: 'flex', flexDirection: 'column', + '@media (max-width: 768px)': { + padding: '1.333rem 1.778rem', + }, '@media (min-width: 992px)': { - padding: '0.444rem 2.222rem 1.778rem', + padding: '0.444rem 9.222rem 1.778rem 2.222rem', }, '& .description': { '@media (min-width: 992px)': { @@ -146,36 +152,9 @@ const useStyles = createUseStyles({ textTransform: 'lowercase', }, }, - '& .access': { - fontSize: '0.778rem', - lineHeight: '1.4', - letterSpacing: '0.5px', - textTransform: 'uppercase', - display: 'flex', - alignItems: 'baseline', - marginBottom: '1rem', - '& span': { - flexShrink: '0', - marginRight: '0.313rem', - }, - '& a': { - fontSize: '1.125rem', - lineHeight: '1', - fontWeight: '600', - color: '#0066CC', - textTransform: 'capitalize', - textDecoration: 'none', - '@media (min-width: 992px)': { - fontSize: '1rem', - }, - '&:hover': { - textDecoration: 'underline', - }, - }, - }, }, linkAccordion: { - textAlign: 'right', + marginTop: '1.5rem', '@media (min-width: 992px)': { marginTop: '2.222rem', }, @@ -183,13 +162,15 @@ const useStyles = createUseStyles({ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', - fontSize: '0.778rem', + fontSize: '16px', + '@media (max-width: 767px)': { + width: '100%', + textAlign: 'center', + justifyContent: 'center', + }, '& img': { marginLeft: '0.444rem', }, - '&:hover': { - textDecoration: 'underline', - }, }, }, button: { @@ -216,6 +197,7 @@ const useStyles = createUseStyles({ backgroundImage: 'url(/assets/chevron-up-white.svg)', '&:hover, &:focus': { backgroundImage: 'url(/assets/chevron-up-white.svg)', + zIndex: '2', }, }, '@media (max-width: 991px)': { @@ -247,10 +229,53 @@ const useStyles = createUseStyles({ }, description: { marginBottom: '1rem', + fontWeight: '400', + fontSize: '16px', + '& strong': { + fontSize: '18px', + }, }, stalls: { marginBottom: '1rem', }, + moreInfo: { + composes: 'info-row', + fontSize: '0.778rem', + lineHeight: '1.4', + display: 'flex', + alignItems: 'baseline', + '& + .info-row': { + marginTop: '15px', + }, + '& .label-info': { + flexBasis: '9.4rem', + flexShrink: '0', + marginRight: '1rem', + textTransform: 'uppercase', + }, + '& .value-info': { + fontSize: '0.88rem', + fontWeight: 600, + lineHeight: '1.25', + '&.updates': { + fontWeight: 'normal', + lineHeight: '1.5', + textTransform: 'none', + '& a': { + fontWeight: '600', + }, + }, + }, + '&.updates': { + '@media (max-width: 992px)': { + display: 'block', + '& .label-info': { + display: 'block', + marginBottom: '0.888rem', + }, + }, + }, + }, }); export const AccordionButtonFull = (props) => { @@ -263,15 +288,13 @@ export const AccordionButtonFull = (props) => { tags, description, stalls, - solutionType, accessLabel, - accessSectionId, moreInfoLabel, moreInfoLink, + updates, + goToButton, } = props.data; - const [, dispatch] = useContext(GlobalStateContext); - const eventHandler = () => { props.handleToggle(props.id); }; @@ -310,36 +333,32 @@ export const AccordionButtonFull = (props) => { > -
    -
    - Platea potenziale: {stalls} -
    -
    - Modalità di accesso:{' '} - +

    +
    + Platea potenziale + {stalls}
    -
    - - {moreInfoLabel} - - +
    + Modalità di accesso + {accessLabel}
    + {updates && ( +
    + Aggiornamenti + +
    + )} + {goToButton && ( +
    + + VAI AGLI AVVISI + +
    + )} diff --git a/src/components/Breadcrumb.jsx b/src/components/Breadcrumb.jsx index ba9141e2b..2b2cd2e52 100644 --- a/src/components/Breadcrumb.jsx +++ b/src/components/Breadcrumb.jsx @@ -1,32 +1,57 @@ import React from 'react'; import { Link } from 'gatsby'; import PropTypes from 'prop-types'; +import { createUseStyles } from 'react-jss'; import labels from '../../contents/labels.yml'; -export const Breadcrumb = ({ currentPage }) => ( -
    -
    -
    - +const useStyles = createUseStyles({ + breadcrumb: { + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', + '& .breadcrumb-item.active': { + pointerEvents: 'none', + cursor: 'default', + }, + }, + '& .breadcrumb-item a': { + fontWeight: '600', + fontSize: '18px', + '&.active': { + fontWeight: '400', + fontSize: '18px', + color: '#656566', + }, + }, + }, +}); + +export const Breadcrumb = ({ currentPage, noContainer }) => { + const classes = useStyles(); + return ( +
    +
    +
    + +
    -
    -); + ); +}; Breadcrumb.propTypes = { currentPage: PropTypes.string.isRequired, + noContainer: PropTypes.bool, }; diff --git a/src/components/HeroVideo.jsx b/src/components/HeroVideo.jsx new file mode 100644 index 000000000..b6c4600d4 --- /dev/null +++ b/src/components/HeroVideo.jsx @@ -0,0 +1,99 @@ +import React, { useState } from 'react'; +import { createUseStyles } from 'react-jss'; +import { Accordion, AccordionHeader, AccordionBody } from 'design-react-kit'; + +const useStyle = createUseStyles({ + heroVideo: { + display: 'flex', + padding: '82px 0 0 1.5rem', + alignItems: 'flex-start', + flexDirection: 'column', + minHeight: '412px', + '@media (max-width: 991px)': { + flexDirection: 'column', + padding: '40px 0', + }, + '& .collapse-div': { + border: 'none', + width: '100%', + }, + '& .collapse-header button': { + border: 'none', + display: 'inline-flex', + paddingLeft: '0', + '&::before': { + position: 'relative', + order: '2', + marginLeft: '5px', + }, + '&.collapsed': { + color: '#06c', + }, + }, + '& .collapse-body': { + paddingLeft: '0', + paddingRight: '0', + paddingBottom: '0', + }, + }, + info: { + display: 'flex', + flexDirection: 'column', + '& h4': { + fontSize: '1.688rem', + fontWeight: '700', + }, + }, + videoContainer: { + flexBasis: '55%', + height: '100%', + width: '100%', + aspectRatio: '16 / 9', + }, +}); + +export const HeroVideo = () => { + const classes = useStyle(); + const [collapseOpen, setCollapseOpen] = useState(false); + + return ( + <> +
    +
    +

    Guarda il video dedicato

    +

    Scopri come attivare il profilo della tua amministrazione su PA digitale 2026.

    +
    +
    + +
    + + setCollapseOpen(!collapseOpen)}> + Trascrizione del video + + + PA digitale 2026 è il punto di accesso alle risorse previste dal PNRR per la transizione digitale della PA. +

    +

    + Registrare la tua amministrazione è semplice:

    ● se sei un rappresentante legale di un Ente o un suo + incaricato, puoi accedere alla piattaforma con identità digitale SPID o CIE.

    ● Inserisci la tua + email istituzionale, e attiva il profilo dell’amministrazione indicando il nome della PA o il codice IPA. +

    ● Verifica i dati del tuo Ente: se c’è qualche incongruenza nei dati, modificali direttamente su + IPA.

    ● La conferma di registrazione avverrà cliccando sul link di verifica che riceverai alla PEC + del tuo Ente.

    +

    + Ora puoi candidare la tua amministrazione agli avvisi pubblici per renderla più digitale, sicura ed + efficiente. +     +     +
    + + ); +}; diff --git a/src/components/ProjectsCards.jsx b/src/components/ProjectsCards.jsx index d25ae6802..23c59f39a 100644 --- a/src/components/ProjectsCards.jsx +++ b/src/components/ProjectsCards.jsx @@ -88,6 +88,9 @@ const useStyles = createUseStyles({ marginBottom: '1.667rem', paddingRight: '0', }, + '@media (max-width: 767px)': { + maxWidth: '100%', + }, }, cardFooter: { '@media (max-width: 992px)': { @@ -95,6 +98,11 @@ const useStyles = createUseStyles({ width: '100%', justifyContent: 'center', }, + '& .btn': { + '@media (max-width: 767px)': { + width: '100%', + }, + }, }, columnCard: { composes: 'column-card', @@ -114,10 +122,10 @@ export const ProjectsCards = (item) => {
    -

    {projectsCardsItem.littleTitle}

    -

    + {projectsCardsItem.littleTitle} +

    {projectsCardsItem.title} -

    +     @@ -126,13 +134,17 @@ export const ProjectsCards = (item) => {
    -

    {projectsCardsItem.cardTitleLeft}

    +

    {projectsCardsItem.cardTitleLeft}

    {projectsCardsItem.cardTextLeft}

    - + {projectsCardsItem.buttonLabelLeft}
    @@ -149,7 +161,11 @@ export const ProjectsCards = (item) => {
    - + {projectsCardsItem.buttonLabelRight}
    diff --git a/src/components/TimelineVertical.jsx b/src/components/TimelineVertical.jsx index 02cd13365..dee514acd 100644 --- a/src/components/TimelineVertical.jsx +++ b/src/components/TimelineVertical.jsx @@ -24,6 +24,9 @@ const useStyle = createUseStyles({ top: '0', height: 'calc(100% - 72px)', }, + '@media (max-width: 767px)': { + left: '17px', + }, }, scrollIndicatorActive: { composes: 'scroll-indicator-active', @@ -40,6 +43,12 @@ const useStyle = createUseStyles({ '@media (max-width: 992px)': { marginLeft: '4.444rem', }, + '@media (max-width: 767px)': { + marginLeft: '3.444rem', + }, + '&:last-child': { + marginBottom: '0', + }, }, timelineNumber: { composes: 'timeline-number', @@ -60,8 +69,8 @@ const useStyle = createUseStyles({ top: '0', left: '-66px', }, - '@media (max-width: 574px)': { - left: '-57px', + '@media (max-width: 767px)': { + left: '-55px', }, '&.active': { background: '#0066CC', @@ -121,7 +130,7 @@ const useStyle = createUseStyles({ littleTitle: { display: 'block', marginTop: '1.111rem', - fontSize: '0.778', + fontSize: '0.778rem', fontWeight: '600', textTransform: 'uppercase', marginBottom: '0.444rem', @@ -245,8 +254,8 @@ export const TimelineVertical = ({ item }) => { return ( <> -
    - +
    +
    diff --git a/src/components/TimelineVerticalCards.jsx b/src/components/TimelineVerticalCards.jsx new file mode 100644 index 000000000..a457f65a5 --- /dev/null +++ b/src/components/TimelineVerticalCards.jsx @@ -0,0 +1,298 @@ +/* eslint-disable sonarjs/no-duplicate-string */ +/* eslint-disable complexity */ +/* eslint-disable eqeqeq */ +import React, { useEffect } from 'react'; +import { createUseStyles } from 'react-jss'; +import { Row, Col } from 'design-react-kit'; +import PropTypes from 'prop-types'; + +const useStyle = createUseStyles({ + timelineVertical: { + composes: 'timeline-vertical', + position: 'relative', + paddingBottom: '40px', + }, + scrollIndicator: { + position: 'absolute', + top: '0', + left: '-40px', + width: '4px', + height: 'calc(100% - 60px)', + background: '#C5E1F9', + display: 'none', + '@media (max-width: 992px)': { + left: '31px', + top: '0', + height: 'calc(100% - 72px)', + }, + '@media(min-width: 768px)': { + display: 'block', + }, + }, + scrollIndicatorActive: { + composes: 'scroll-indicator-active', + background: 'linear-gradient(0deg, #0073E6 0%, #004080 100%)', + width: '100%', + height: '0', + transition: '.3s ease', + maxHeight: '100%', + display: 'none', + '@media(min-width: 768px)': { + display: 'block', + }, + }, + timelinePointSection: { + composes: 'timeline-point-section', + marginBottom: '1.111rem', + position: 'relative', + minHeight: '373px', + display: 'flex', + boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.1)', + '@media (max-width: 992px)': { + marginLeft: '4.444rem', + }, + '@media (max-width: 767px)': { + marginLeft: '0', + }, + '&:nth-child(even)': { + '& img': { + order: '2', + marginRight: '4.375rem', + marginLeft: '0', + '@media (min-width: 992px) and (max-width: 1024px)': { + marginRight: '2rem', + }, + '@media (max-width: 991px)': { + order: '0', + margin: '0 0 1.111rem 0', + }, + }, + '& .point-header': { + '& .circle': { + background: '#F7FAFD', + height: '140%', + width: '320px', + position: 'absolute', + left: 'unset', + right: '-160px', + top: '50%', + transform: 'translateY(-50%)', + zIndex: '-9', + borderRadius: '50%', + '@media (max-width: 991px)': { + right: 'unset', + width: '140%', + height: '420px', + top: '-310px', + left: '50%', + transform: 'translateX(-50%)', + }, + }, + '& .header-info': { + marginRight: '2.111rem', + '@media (max-width: 991px)': { + marginRight: '0', + }, + }, + }, + }, + }, + timelineNumber: { + composes: 'timeline-number', + background: '#FFFFFF', + border: '6px solid #FFFFFF', + boxShadow: '0px 0px 40px rgba(0, 0, 0, 0.1)', + width: '38px', + height: '38px', + borderRadius: '50%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + position: 'absolute', + left: '-57px', + top: '0', + transition: '.2s ease', + '@media (max-width: 992px)': { + top: '0', + left: '-66px', + }, + '@media (max-width: 574px)': { + left: '-57px', + }, + '&.active': { + background: '#0066CC', + transition: '.2s ease', + '& span': { + color: '#FFFFFF', + border: 'none', + transition: '.2s ease', + }, + }, + '& span': { + fontSize: '1rem', + fontWeight: '700', + color: '#0066CC', + border: '1px solid #0066CC', + borderRadius: '50%', + width: '32px', + height: '26px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + }, + pointHeader: { + display: 'flex', + alignItems: 'center', + padding: '0 2.5rem', + overflow: 'hidden', + position: 'relative', + composes: 'point-header', + width: '100%', + '& .circle': { + background: '#F7FAFD', + height: '140%', + width: '320px', + position: 'absolute', + left: '-160px', + top: '50%', + transform: 'translateY(-50%)', + zIndex: '-9', + borderRadius: '50%', + }, + '& img': { + maxWidth: '160px', + marginRight: '5rem', + marginLeft: '3.611rem', + '@media (min-width: 992px) and (max-width: 1024px)': { + marginRight: '2rem', + marginLeft: '2.111rem', + }, + }, + '@media (max-width: 991px)': { + flexDirection: 'column', + marginBottom: '2.333rem', + padding: '1.444rem', + paddingBottom: '0', + justifyContent: 'center', + '& img': { + width: '134px', + height: '134px', + margin: '0 0 1.111rem 0', + }, + '& .circle': { + right: 'unset', + width: '140%', + height: '420px', + top: '-310px', + left: '50%', + transform: 'translateX(-50%)', + }, + }, + }, + headerInfo: { + marginRight: '0', + maxWidth: '450px', + composes: 'header-info', + '@media (max-width: 991px)': { + margin: '0', + textAlign: 'center', + }, + }, + headerTitle: { + fontSize: '1.5rem', + fontWeight: '700', + color: '#33485C', + marginBottom: '1.111rem', + }, + headerParagraph: { + fontSize: '1rem', + lineHeight: '24px', + '@media (max-width: 991px)': { + marginBottom: 0, + }, + }, + littleTitle: { + display: 'block', + marginTop: '1.111rem', + fontSize: '0.778rem', + fontWeight: '600', + textTransform: 'uppercase', + marginBottom: '0.444rem', + }, + bodyParagraph: { + fontSize: '1rem', + lineHeight: '28px', + }, + littleIcon: { + height: '48px', + }, +}); + +export const TimelineVerticalCards = ({ item }) => { + // eslint-disable-next-line sonarjs/cognitive-complexity + useEffect(() => { + const sectionsContainer = document.querySelector('.timeline-vertical'); + + const scrollIndicatorHandler = () => { + const timelineYpos = sectionsContainer.getBoundingClientRect(); + let top = timelineYpos.top; + let bottom = timelineYpos.bottom; + if (top <= '100' && bottom >= '700') { + const sectionsContainerHeight = sectionsContainer.getBoundingClientRect().height; + const scrollIndicator = sectionsContainer.querySelector('.scroll-indicator-active'); + if (top < 0) { + top = top * -1; + } + if (bottom < 0) { + bottom = bottom * -1; + } + const partialValue = bottom - top; + const percentageScroll = 100 - (100 * partialValue) / sectionsContainerHeight; + scrollIndicator.style.height = `${percentageScroll}%`; + } + }; + window.addEventListener('scroll', scrollIndicatorHandler); + }, []); + const classes = useStyle(); + + return ( + <> +
    + + +
    +
    +
    +
    + {item.map((elem, k) => ( +
    +
    + {parseInt(elem.index, 10) + 1} +
    +
    +
    + +
    +

    {elem.title}

    +

    +
    +
    +
    + ))} +
    + +     +
    + + ); +}; + +TimelineVerticalCards.propTypes = { + item: PropTypes.array, +}; diff --git a/src/components/Totop.jsx b/src/components/Totop.jsx new file mode 100644 index 000000000..2cea6e3d7 --- /dev/null +++ b/src/components/Totop.jsx @@ -0,0 +1,68 @@ +import React, { useEffect } from 'react'; +import { createUseStyles } from 'react-jss'; +import { Icon } from 'design-react-kit'; + +const useStyle = createUseStyles({ + totop: { + position: 'sticky', + width: '55px', + height: '55px', + borderRadius: '50%', + background: '#06c', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + zIndex: '99', + composes: 'totop', + cursor: 'pointer', + top: '35px', + left: 'calc(100% - 80px)', + marginRight: '-75px', + '@media (max-width: 1099px)': { + marginRight: '0', + }, + '@media (max-width: 991px)': { + top: '75px', + marginTop: '40px', + }, + }, +}); + +export const Totop = () => { + useEffect(() => { + const sectionsContainer = document.querySelector('.timeline-vertical'); + + const scrollIndicatorHandler = () => { + const timelineYpos = sectionsContainer.getBoundingClientRect(); + let top = timelineYpos.top; + let bottom = timelineYpos.bottom; + if (top <= '100' && bottom >= '700') { + const sectionsContainerHeight = sectionsContainer.getBoundingClientRect().height; + const scrollIndicator = sectionsContainer.querySelector('.scroll-indicator-active'); + if (top < 0) { + top = top * -1; + } + if (bottom < 0) { + bottom = bottom * -1; + } + const partialValue = bottom - top; + const percentageScroll = 100 - (100 * partialValue) / sectionsContainerHeight; + scrollIndicator.style.height = `${percentageScroll}%`; + } + }; + window.addEventListener('scroll', scrollIndicatorHandler); + }, []); + const classes = useStyle(); + + const totopHandler = () => { + window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); + }; + + return ( + <> +
    + +
    + + ); +}; diff --git a/src/components/carousel/Carousel.jsx b/src/components/carousel/Carousel.jsx index 0dca8d732..be452f522 100644 --- a/src/components/carousel/Carousel.jsx +++ b/src/components/carousel/Carousel.jsx @@ -1,3 +1,4 @@ +/* eslint-disable sonarjs/no-duplicate-string */ import React from 'react'; import { createUseStyles } from 'react-jss'; import { Row, Col, Card, CardBody, CardTitle, CardText } from 'design-react-kit'; @@ -26,9 +27,9 @@ const useStyles = createUseStyles({ textTransform: 'uppercase', }, '& h4.card-title': { - color: '#0066CC', + color: '#33485C', fontSize: '1.125rem', - fontWeight: 'bold', + fontWeight: '600', lineHeight: '1.26', '@media (min-width: 992px)': { minHeight: '2.889rem', @@ -70,16 +71,17 @@ const useStyles = createUseStyles({ }, }, heroCarouselTitle: { - color: '#fff', + color: '#33485C', fontSize: '1.556rem', + fontWeight: '600', whiteSpace: 'nowrap', - backgroundColor: '#0066CC', }, newsUpdateSection: { backgroundColor: '#fff', - padding: '1.111rem 0 4rem', + padding: '5.556rem 0', '& .swiper': { margin: '0 -1.111rem', + paddingTop: '20px', '@media (max-width: 992px)': { margin: '0', }, @@ -101,6 +103,34 @@ const useStyles = createUseStyles({ heroLink: { textDecoration: 'none', marginTop: 'auto', + display: 'inline-flex', + marginLeft: '5px', + }, + titleLink: { + fontSize: '1rem', + color: '#06c', + fontWeight: '600', + textDecoration: 'none', + '&:hover': { + color: '#06c', + textDecoration: 'underline', + }, + '& .source': { + display: 'inline-flex', + alignItems: 'center', + '@media (max-width: 992px)': { + marginTop: '0.5rem', + }, + }, + '& img': { + marginLeft: '0.5rem', + }, + }, + titleCardLink: { + textDecoration: 'none', + '&:hover': { + color: '#06c', + }, }, }); // const carousel = React.createRef(); @@ -113,19 +143,22 @@ export const HeroCarousel = ({ content, title }) => { {element.category} - {element.title} +
    + {element.title} +
    {element.description} - -
    +
    + Fonte: + {element.source} -
    - + +
    @@ -134,14 +167,27 @@ export const HeroCarousel = ({ content, title }) => { return ( <>
    -
    +
    {title ? ( - + + + +
    + Scopri tutto su innovazione.gov.it + +
    +     +     ) : ( '' @@ -156,7 +202,7 @@ export const HeroCarousel = ({ content, title }) => { }} pagination title={title} - id="news-carousel" + idCarousel="news-carousel" />
    diff --git a/src/components/carousel/HomeCarousel.jsx b/src/components/carousel/HomeCarousel.jsx index 7ef388f2a..22ecac453 100644 --- a/src/components/carousel/HomeCarousel.jsx +++ b/src/components/carousel/HomeCarousel.jsx @@ -41,7 +41,7 @@ const useStyles = createUseStyles({ '& h4.card-title': { color: '#0066CC', fontSize: '1.778rem', - fontWeight: 'bold', + fontWeight: '600', lineHeight: '1.43', marginBottom: '0.889rem', '@media (min-width: 992px)': { @@ -113,7 +113,7 @@ const useStyles = createUseStyles({ padding: '0 1.667rem 1.667rem', margin: '0 -1.667rem -1.667rem', '@media (max-width: 992px)': { - margin: '0 -1.667rem -1.667rem', + margin: '20px -1.667rem -1.667rem', }, }, '& .swiper-wrapper .swiper-slider': { diff --git a/src/components/carousel/NoticesCarousel.jsx b/src/components/carousel/NoticesCarousel.jsx new file mode 100644 index 000000000..28c3389b8 --- /dev/null +++ b/src/components/carousel/NoticesCarousel.jsx @@ -0,0 +1,221 @@ +import React from 'react'; +import { createUseStyles } from 'react-jss'; +import { Row, Col, Card, CardBody, CardTitle } from 'design-react-kit'; +import PropTypes from 'prop-types'; +import { Link } from 'gatsby'; +import { DesktopSwiper } from '../DesktopSwiper'; + +const useStyles = createUseStyles({ + heroCards: { + composes: 'card-bg rounded', + height: '100%', + boxShadow: '0px 0px 80px rgba(0, 43, 85, 0.05)', + '&.card.card-bg': { + '@media (max-width: 992px)': { + marginLeft: '0', + }, + }, + '& .card-body': { + // boxShadow: '0px 0px 20px rgb(0 43 85 / 4%);', + display: 'flex', + flexDirection: 'column', + '& .category': { + fontSize: '0.778rem', + fontWeight: '600', + color: '#33485C', + marginBottom: '1rem', + textTransform: 'uppercase', + }, + '& .card-text': { + color: '#33485C', + fontSize: '1rem', + fontFamily: 'Titillium Web', + fontWeight: '400', + lineHeight: '1.24', + marginBottom: '1.125rem', + '@media (min-width: 992px)': { + marginBottom: '0.778rem', + fontSize: '0.889rem', + lineHeight: '1.44', + }, + }, + '& .source': { + color: '#33485C', + fontSize: '1rem', + fontWeight: '600', + lineHeight: '1.24', + display: 'inline-flex', + alignItems: 'center', + '@media (min-width: 992px)': { + fontSize: '0.889rem', + lineHeight: '1.44', + }, + '& img': { + marginLeft: '0.278rem', + }, + }, + }, + '&.card:after': { + content: 'none', + }, + }, + noticesCarouselTitle: { + color: '#33485C', + fontSize: '1.556rem', + whiteSpace: 'nowrap', + fontWeight: '600', + margin: 0, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + noticesSection: { + backgroundColor: '#fff', + padding: '5.556rem 0', + '& .swiper': { + margin: '0 -1.111rem', + '@media (max-width: 992px)': { + margin: '0', + }, + }, + '& .swiper-wrapper': { + padding: '1rem 1.667rem 1.667rem', + margin: '0 -1.667rem -1.667rem', + '@media (max-width: 992px)': { + margin: '0 -1.667rem -1.667rem', + }, + }, + '& .swiper-slider': { + padding: '1.111rem', + }, + '& .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet': { + margin: '0 0.889rem', + }, + '& .btn': { + '@media (max-width: 767px)': { + width: '100%', + }, + }, + }, + noticeLabel: { + fontSize: '0.778rem', + fontWeight: '400', + lineHeight: '1.444rem', + marginBottom: '1.389rem', + color: '#5A768A', + '@media (max-width:991px)': { + fontSize: '0.875rem', + }, + }, + dueDate: { + fontSize: '0.778rem', + fontWeight: '600', + lineHeight: '1.444rem', + color: '#33485C', + '@media (max-width:991px)': { + fontSize: '1rem', + }, + }, + dueDateDigit: { + fontSize: '0.833rem', + fontWeight: '400', + marginLeft: '5px', + '@media (max-width:991px)': { + fontSize: '1rem', + }, + }, + noticeInfo: { + composes: 'notice-info', + fontSize: '1.111', + fontWeight: '600', + lineHeight: '1.444rem', + color: '#06c', + '@media (max-width:991px)': { + fontSize: '1.125rem', + }, + }, + cardWrapper: { + textDecoration: 'none', + '&:hover': { + textDecoration: 'none', + '& .notice-info': { + textDecoration: 'underline', + }, + }, + }, +}); + +export const NoticesCarousel = ({ content, title }) => { + const classes = useStyles(); + const records = content; + const formatDate = (stringDate) => { + const date = new Date(stringDate); + return date.toLocaleDateString('it-IT'); + }; + + const slides = records.map((element) => ( + <> + + + + + SCADENZA AVVISO {formatDate(element.dataFineBando)} + + + {element.nomeDellaMisura} + +

    {element.titolo}

    +     + +     + + )); + + return ( + <> +
    +
    + {title ? ( + + + + + + ) : ( + '' + )} + +
    + + scopri tutti + +
    +
    +
    + + ); +}; + +NoticesCarousel.propTypes = { + content: PropTypes.array.isRequired, + title: PropTypes.string, +}; diff --git a/src/components/carousel/Timeline.jsx b/src/components/carousel/Timeline.jsx index 666b12854..0b6a10c12 100644 --- a/src/components/carousel/Timeline.jsx +++ b/src/components/carousel/Timeline.jsx @@ -6,10 +6,10 @@ import { DesktopSwiper } from '../DesktopSwiper'; const useStyles = createUseStyles({ timelineSection: { - padding: '3.125rem 0 4.5rem 0', + padding: '0 0 4.5rem 0', overflow: 'hidden', '@media (min-width: 992px)': { - padding: '5.333rem 0 2.5rem 0', + padding: '0 0 2.5rem 0', }, '& .swiper': { margin: '0 -1.111rem', @@ -79,7 +79,6 @@ const useStyles = createUseStyles({ }, timelineCard: { marginTop: '1.875rem', - maxWidth: '15.278rem', '@media (min-width: 992px)': { marginTop: '1.667rem', maxWidth: '17.188rem', @@ -205,10 +204,10 @@ export const Timeline = ({ content }) => { {content.category ? ( -

    {content.category}

    -

    + {content.category} +

    {content.title} -

    +     ) : ( @@ -222,6 +221,9 @@ export const Timeline = ({ content }) => { slides={slides} breakpoints={{ slidesPerView: 1, + 768: { + slidesPerView: 2, + }, 992: { slidesPerView: 3, }, diff --git a/src/components/hero/Hero.jsx b/src/components/hero/Hero.jsx index 69423fc0b..bd7cb67e2 100644 --- a/src/components/hero/Hero.jsx +++ b/src/components/hero/Hero.jsx @@ -20,8 +20,8 @@ export const Hero = ({ className ); const containerClass = classNames('container', { - 'py-xl-5': yPaddingXLScreen, - 'px-3 px-md-0': xPadding, + 'py-3': yPaddingXLScreen, + 'px-3': xPadding, }); return (
    diff --git a/src/components/hero/HeroBody.jsx b/src/components/hero/HeroBody.jsx index 02d22b636..090f3abf1 100644 --- a/src/components/hero/HeroBody.jsx +++ b/src/components/hero/HeroBody.jsx @@ -5,10 +5,17 @@ import PropTypes from 'prop-types'; const useStyles = createUseStyles({ body: { color: '#33485C', - fontSize: '1rem', - fontFamily: 'Titillium Web', + fontSize: '1.5rem', + lineHeight: '1.5', '@media (min-width: 992px)': { - maxWidth: '26.667rem', + fontSize: '1.333rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + display: 'block', + }, + '@media (max-width: 991px)': { + fontSize: '1.25rem', }, }, }); diff --git a/src/components/hero/HeroCategory.jsx b/src/components/hero/HeroCategory.jsx index 8dd3777ad..d1078d0e5 100644 --- a/src/components/hero/HeroCategory.jsx +++ b/src/components/hero/HeroCategory.jsx @@ -11,7 +11,7 @@ const useStyles = createUseStyles({ export const HeroCategory = ({ title }) => { const classes = useStyles(); - return

    {title}

    ; + return {title}; }; HeroCategory.propTypes = { diff --git a/src/components/hero/HeroCtaContainer.jsx b/src/components/hero/HeroCtaContainer.jsx index 07c40401a..51288e978 100644 --- a/src/components/hero/HeroCtaContainer.jsx +++ b/src/components/hero/HeroCtaContainer.jsx @@ -2,7 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; export const HeroCtaContainer = ({ children }) => ( -
    {children}
    +
    + {children} +
    ); HeroCtaContainer.propTypes = { diff --git a/src/components/hero/HeroGraphic.jsx b/src/components/hero/HeroGraphic.jsx index a688ff936..319d3e8f9 100644 --- a/src/components/hero/HeroGraphic.jsx +++ b/src/components/hero/HeroGraphic.jsx @@ -4,11 +4,6 @@ import PropTypes from 'prop-types'; const useStyles = createUseStyles({ heroGraphic: {}, - '@media (max-width: 992px)': { - heroGraphic: { - order: -1, - }, - }, }); export const HeroGraphic = ({ className = '', children }) => { diff --git a/src/components/hero/HeroHowItWorks.jsx b/src/components/hero/HeroHowItWorks.jsx index 4819722ca..dad3142a3 100644 --- a/src/components/hero/HeroHowItWorks.jsx +++ b/src/components/hero/HeroHowItWorks.jsx @@ -13,22 +13,40 @@ const useStyles = createUseStyles({ width: '100%', '@media (min-width: 992px)': { position: 'absolute', - right: '0', - top: '95px', - maxWidth: '480px', + right: '122px', + top: '54px', + maxWidth: '350px', }, '@media (min-width: 1200px)': { - maxWidth: '580px', + maxWidth: '450px', + right: '155px', + }, + '@media (min-width: 1441px) and (max-width: 1680px)': { + right: '280px', + }, + '@media (min-width: 1700px)': { + right: '385px', + }, + '@media (max-width: 991px)': { + width: '80%', }, }, heroTitle: { - composes: 'no_doc', - fontSize: '2.222rem', - '@media (max-width: 992px)': { - display: 'flex', - justifyContent: 'center', - fontSize: '1.778rem', - textAlign: 'center', + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 991px)': { + fontSize: '2.25rem', + }, + }, + heroSubtitle: { + fontSize: '24px', + color: '#33485C', + lineHeight: '1.5', + '@media (max-width: 991px)': { + fontSize: '1.125rem', }, }, contentWrapper: { @@ -39,12 +57,15 @@ const useStyles = createUseStyles({ composes: 'it-hero-wrapper', position: 'relative', display: 'flex', + '&.it-hero-wrapper': { + alignItems: 'flex-start', + }, '&.it-hero-wrapper .it-hero-text-wrapper': { '@media (min-width: 992px)': { - padding: '5.333rem 0 3.889rem', + padding: '0', }, '@media (max-width: 991px)': { - padding: '5.333rem 0 3.889rem', + padding: '0 0 3.889rem', }, }, '&.overlap': { @@ -52,7 +73,7 @@ const useStyles = createUseStyles({ paddingBottom: '4rem', }, '&.bg-white': { - backgroundColor: '#fff', + backgroundColor: 'transparent !important', '& .it-hero-text-wrapper.bg-white span, h1, h2, h3, p': { color: '#33485C', }, @@ -90,6 +111,9 @@ const useStyles = createUseStyles({ '@media (min-width: 992px)': { marginRight: '2.611rem', }, + '@media (max-width: 991px)': { + textAlign: 'center', + }, }, buttonContainer: { composes: 'it-btn-container', @@ -147,7 +171,8 @@ const useStyles = createUseStyles({ }, }, listTitle: { - fontSize: '0.778rem', + composes: 'mb-3', + fontSize: '0.889rem', color: '#33485C', fontWeight: '600', marginBottom: '0.889rem', @@ -161,7 +186,7 @@ const useStyles = createUseStyles({ composes: 'list-item', textAlign: 'left', color: '#0066CC', - fontWeight: '600', + fontWeight: '400', marginBottom: '1rem', textDecoration: 'none', '@media (max-width: 991px)': { @@ -190,37 +215,39 @@ export const HeroHowItWorks = ({ title, body, image, list }) => {
    - +
    - +
    - {list.map((listItem) => ( -
    - {listItem.title} -
    - {listItem.items.map((item) => ( - - scrollIntoView(item.anchor)} - className={classes.listItem} - > - {item.item} - - - ))} -
    -
    - ))} + {list + ? list.map((listItem) => ( +
    + {listItem.title} +
    + {listItem.items.map((item) => ( + + scrollIntoView(item.anchor)} + className={classes.listItem} + > + {item.item} + + + ))} +
    +
    + )) + : ''}
    - +     diff --git a/src/components/hero/HeroHowToDo.jsx b/src/components/hero/HeroHowToDo.jsx new file mode 100644 index 000000000..f0254ec02 --- /dev/null +++ b/src/components/hero/HeroHowToDo.jsx @@ -0,0 +1,257 @@ +import React from 'react'; +import { createUseStyles } from 'react-jss'; +import { Row, Col, Hero, Container, Breadcrumb, BreadcrumbItem } from 'design-react-kit'; +import PropTypes from 'prop-types'; +import { HeroTitle } from './HeroTitle'; +import { HeroBackground } from './HeroBackground'; +import { HeroParagraph } from './HeroParagraph'; + +const useStyles = createUseStyles({ + heroImg: { + position: 'relative', + width: '100%', + '@media (min-width: 992px)': { + position: 'absolute', + right: '0', + top: '160px', + maxWidth: '530px', + }, + '@media (min-width: 1200px)': { + top: '48px', + maxWidth: '700px', + }, + }, + heroTitle: { + composes: 'no_doc', + fontSize: '2.5rem', + '@media (max-width: 992px)': { + display: 'flex', + justifyContent: 'center', + fontSize: '2.25rem', + textAlign: 'center', + }, + }, + contentWrapper: { + composes: 'it-hero-text-wrapper', + display: 'flex', + paddingBottom: '5.625rem', + }, + heroWrapper: { + composes: 'it-hero-wrapper', + position: 'relative', + display: 'flex', + alignItems: 'flex-start', + '&.it-hero-wrapper': { + minHeight: 'unset', + }, + '&.it-hero-wrapper .it-hero-text-wrapper': { + '@media (min-width: 992px)': { + padding: '48px 0 80px', + }, + '@media (max-width: 991px)': { + padding: '3.75rem 0 3.75rem', + }, + }, + '&.overlap': { + marginBottom: '-7rem', + paddingBottom: '4rem', + }, + '&.bg-white': { + backgroundColor: '#fff', + '& .it-hero-text-wrapper.bg-white span, h1, h2, h3, p': { + color: '#33485C', + }, + '& .it-hero-text-wrapper.bg-white span.list-item': { + fontSize: '1rem', + fontWeight: '600', + color: '#0066CC', + marginBottom: '0.889rem', + '&:last-child': { + marginBottom: '0', + }, + }, + }, + '&.bg-blue': { + backgroundColor: '#0066CC', + '& .bg-blue': { + color: '#fff', + }, + }, + '&.bg-blue .btn': { + color: '#0066CC', + }, + '& .container .it-hero-text-wrapper p': { + fontFamily: 'Titillium Web,Geneva,Tahoma,sans-serif', + fontSize: '1.333rem', + '@media (max-width: 992px)': { + fontSize: '1.25rem', + }, + }, + '& .container .it-hero-text-wrapper .btn': { + fontSize: '1rem', + }, + }, + textWrapper: { + '@media (min-width: 992px)': { + marginRight: '2.611rem', + }, + '& p': { + lineHeight: '1.5', + }, + }, + buttonContainer: { + composes: 'it-btn-container', + display: 'flex', + '& .btn+.btn': { + marginLeft: '1.875rem', + }, + '@media (max-width: 992px)': { + justifyContent: 'center', + flexDirection: 'column', + alignItems: 'center', + '& .btn+.btn': { + marginLeft: '0', + marginTop: '1.875rem', + }, + }, + }, + listWrapper: { + composes: 'mt-5', + display: 'flex', + '@media (max-width: 991px)': { + flexDirection: 'column', + textAlign: 'center', + }, + }, + list: { + composes: 'list', + display: 'flex', + flexDirection: 'column', + '& + .list': { + marginTop: '2.222rem', + '@media (min-width: 992px)': { + marginTop: '0', + }, + }, + '@media (min-width: 992px)': { + paddingRight: '1.333rem', + '& + .list': { + padding: '0 1.333rem', + }, + '&:not(:last-child)': { + '& .list-items-wrapper': { + position: 'relative', + }, + '& .list-items-wrapper::after': { + content: '""', + height: '100%', + width: '1px', + position: 'absolute', + top: '0', + right: '-1.333rem', + background: '#B6C5D6', + }, + }, + }, + }, + listTitle: { + fontSize: '0.778rem', + color: '#33485C', + fontWeight: '600', + marginBottom: '0.889rem', + }, + listItemsWrapper: { + composes: 'list-items-wrapper', + display: 'flex', + flexDirection: 'column', + }, + listItem: { + composes: 'list-item', + textAlign: 'left', + color: '#0066CC', + fontWeight: '600', + marginBottom: '1rem', + textDecoration: 'none', + '@media (max-width: 991px)': { + textAlign: 'center', + }, + '&:focus': { + outline: '2px solid #ff9900', + boxShadow: 'none', + }, + '&:hover': { + textDecoration: 'underline', + }, + }, + breadWhite: { + paddingTop: '1.563rem', + '& a': { + color: 'white', + }, + '& .breadcrumb': { + padding: '0.75rem 0', + }, + '& .breadcrumb-item': { + textDecoration: 'underline', + fontWeight: '600', + '&.active': { + textDecoration: 'none', + fontWeight: '400', + '& a': { + textDecoration: 'none', + pointerEvents: 'none', + }, + '&::before': { + color: 'white', + fontWeight: '700', + }, + }, + }, + }, +}); + +export const HeroHowToDo = ({ title, body, image, imageMob }) => { + const classes = useStyles(); + + return ( + +
    + + + + + + Home + + + + Come partecipare + + +
    + +
    + + +
    + + + + +
    + +     +     +
    + +     + ); +}; + +HeroHowToDo.propTypes = { + title: PropTypes.string, + body: PropTypes.string, + image: PropTypes.string, + imageMob: PropTypes.string, + list: PropTypes.array, +}; diff --git a/src/components/hero/HeroImage.jsx b/src/components/hero/HeroImage.jsx index 8ea70746d..b1f502d9c 100644 --- a/src/components/hero/HeroImage.jsx +++ b/src/components/hero/HeroImage.jsx @@ -28,6 +28,12 @@ const useStyles = createUseStyles({ color: ['var(--white)', '!important'], }, }, + heroSectionDark: { + backgroundColor: '#0066CC', + }, + heroSectionLight: { + backgroundColor: '#F0F6FC', + }, heroTitle: { composes: 'hero-title', color: '#33485C', @@ -44,10 +50,14 @@ const useStyles = createUseStyles({ }, }, }, + outlineBtn: { + backgroundColor: 'transparent', + border: '1px solid #06c', + color: '#06c', + }, heroImage: { composes: 'row align-items-center', '@media (min-width: 768px)': { - flexWrap: 'nowrap !important', '& .hero-graphic-img': { order: 2, }, @@ -68,10 +78,16 @@ const useStyles = createUseStyles({ '@media (min-width: 992px)': { fontSize: '1.333rem', }, + '@media (max-width: 991px)': { + fontSize: '1.25rem', + }, }, '& .graphic-image': { + '@media (max-width: 991px)': { + maxWidth: '50%', + }, '@media (max-width: 767px)': { - maxWidth: '15.6rem', + maxWidth: '80%', margin: '0 auto 2.5rem', }, }, @@ -92,12 +108,39 @@ const useStyles = createUseStyles({ width: '220px', }, }, + '&.hero-main .hero-title': { + fontSize: '2.222rem', + color: '#fff', + }, + '&.hero-main .hero-body': { + color: '#fff', + }, + '&.hero-main .btn': { + backgroundColor: '#fff', + color: '#0066CC', + fontWeight: '600', + '&:hover': { + color: '#004d99', + }, + '@media (max-width: 767px)': { + width: '100%', + }, + }, + '& .btn': { + '@media (max-width: 767px)': { + width: '100%', + }, + }, }, }); export const HeroImage = ({ ctaContainer, smallText, + mainHero, + dark, + light, + outlineBtn, category, title, body, @@ -115,19 +158,25 @@ export const HeroImage = ({ const [, dispatch] = useContext(GlobalStateContext); return ( - -
    -
    + +
    +
    {category ? : ''} - +
    {ctaContainer ? ( {firstInternal ? ( @@ -137,7 +186,7 @@ export const HeroImage = ({ {firstButtonLabel} @@ -145,8 +194,8 @@ export const HeroImage = ({ {secondButtonLabel ? ( dispatch({ type: 'SET:HOW_SECTION_ID', @@ -164,7 +213,7 @@ export const HeroImage = ({ '' )}
    - + {imageAlt}
    @@ -188,4 +237,8 @@ HeroImage.propTypes = { imageUrl: PropTypes.string, imageAlt: PropTypes.string, heroTitleId: PropTypes.string, + mainHero: PropTypes.bool, + dark: PropTypes.bool, + light: PropTypes.bool, + outlineBtn: PropTypes.bool, }; diff --git a/src/components/hero/HeroImageBackground.jsx b/src/components/hero/HeroImageBackground.jsx index 40057ffa4..b93cd254f 100644 --- a/src/components/hero/HeroImageBackground.jsx +++ b/src/components/hero/HeroImageBackground.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { createUseStyles } from 'react-jss'; import PropTypes from 'prop-types'; import { Row, Col, Hero } from 'design-react-kit'; +import { Breadcrumb } from '../Breadcrumb'; import { HeroTitle } from './HeroTitle'; import { HeroBackground } from './HeroBackground'; import { HeroButton } from './HeroButton'; @@ -19,22 +20,29 @@ const useStyles = createUseStyles({ }, }, heroTitle: { - composes: 'no_doc title-hero', - fontSize: '2.222rem', - '@media (max-width: 992px)': { - display: 'flex', - justifyContent: 'center', - fontSize: '1.778rem', + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 991px)': { + fontSize: '2.25rem', textAlign: 'center', + display: 'block', + }, + }, + heroSubtitle: { + fontSize: '24px', + color: '#33485C', + lineHeight: '1.5', + '@media (max-width: 991px)': { + fontSize: '1.125rem', }, }, contentWrapper: { composes: 'it-hero-text-wrapper', paddingLeft: '0 !important', zIndex: 2, - '@media (max-width: 992px)': { - marginBottom: '4rem', - }, }, heroWrapper: { composes: 'it-hero-wrapper', @@ -44,9 +52,9 @@ const useStyles = createUseStyles({ '&:not(.overlap)': { minHeight: 'auto', '& .container .it-hero-text-wrapper': { - padding: '5rem 0', + padding: '0 0 5rem', '@media (max-width: 992px)': { - padding: '4rem 0 1rem', + paddingBottom: '0', }, '& .title-hero': { fontSize: '2.5rem', @@ -72,7 +80,7 @@ const useStyles = createUseStyles({ paddingBottom: '5rem', }, '&.bg-white': { - backgroundColor: '#fff', + backgroundColor: 'transparent !important', '& .it-hero-text-wrapper.bg-white span, h1, h2, h3, p': { color: '#33485C', }, @@ -166,13 +174,14 @@ export const HeroImageBackground = ({ return (
    -
    +
    + -
    +
    - +
    {noButton ? ( '' diff --git a/src/components/hero/HeroMode.jsx b/src/components/hero/HeroMode.jsx new file mode 100644 index 000000000..49739908d --- /dev/null +++ b/src/components/hero/HeroMode.jsx @@ -0,0 +1,236 @@ +import React, { useContext } from 'react'; +import { createUseStyles } from 'react-jss'; +import { Link } from 'gatsby'; +import PropTypes from 'prop-types'; +import { ExternalLink } from '../ExternalLink'; +import { GlobalStateContext } from '../../context/globalContext'; +import { HeroCategory } from './HeroCategory'; +import { HeroTitle } from './HeroTitle'; +import { HeroBody } from './HeroBody'; +import { HeroCtaContainer } from './HeroCtaContainer'; +import { HeroGraphic } from './HeroGraphic'; +import { Hero } from './Hero'; + +const useStyles = createUseStyles({ + btnPrimaryLight: { + // eslint-disable-next-line sonarjs/no-duplicate-string + backgroundColor: 'var(--white)', + color: 'var(--primary)', + }, + verticalDelimiter: { + composes: 'd-none d-xl-block mr-4', + borderLeft: '1px solid #E6E9F2', + }, + whiteHighContrast: { + color: 'var(--white)', + '&:hover': { + // Needed to grant high contrast for a11y + color: ['var(--white)', '!important'], + }, + }, + heroSectionDark: { + backgroundColor: '#0066CC', + }, + heroSectionLight: { + backgroundColor: '#F0F6FC', + }, + heroTitle: { + composes: 'hero-title', + color: '#33485C', + fontSize: '2rem', + lineHeight: '1.25', + '@media (min-width: 992px)': { + fontSize: '2.667rem', + }, + }, + a11yHighContrast: { + '@global': { + noscript: { + color: 'white', + }, + }, + }, + outlineBtn: { + backgroundColor: 'transparent', + border: '1px solid #06c', + color: '#06c', + }, + heroImage: { + composes: 'row align-items-center', + '@media (min-width: 768px)': { + '& .hero-graphic-img': { + order: 2, + }, + }, + '@media (min-width: 991.99px)': { + padding: '2.222rem 0', + flexDirection: 'row', + }, + '& .hero-category': { + color: '#33485C', + fontSize: '0.889rem', + }, + '& .hero-body': { + color: '#33485C', + fontSize: '1.5rem', + lineHeight: '1.5', + marginBottom: '2rem', + '@media (min-width: 992px)': { + fontSize: '1.333rem', + }, + '@media (max-width: 991px)': { + fontSize: '1.25rem', + }, + }, + '& .graphic-image': { + '@media (max-width: 991px)': { + maxWidth: '50%', + }, + '@media (max-width: 767px)': { + maxWidth: '80%', + margin: '0 auto 2.5rem', + }, + }, + '&.hero-small .hero-body': { + '@media (max-width: 992px)': { + fontSize: '1rem', + textAlign: 'left', + }, + }, + '&.hero-small .hero-title': { + '@media (max-width: 992px)': { + display: 'block', + textAlign: 'left', + }, + }, + '&.hero-small .graphic-image': { + '@media (max-width: 992px)': { + width: '220px', + }, + }, + '&.hero-main .hero-title': { + fontSize: '2.222rem', + color: '#fff', + }, + '&.hero-main .hero-body': { + color: '#fff', + }, + '&.hero-main .btn': { + backgroundColor: '#fff', + color: '#0066CC', + fontWeight: '600', + '&:hover': { + color: '#004d99', + }, + '@media (max-width: 767px)': { + width: '100%', + }, + }, + '& .btn': { + '@media (max-width: 767px)': { + width: '100%', + }, + }, + }, +}); + +export const HeroMode = ({ + ctaContainer, + smallText, + mainHero, + outlineBtn, + category, + title, + body, + firstInternal, + firstButtonHref, + firstButtonLabel, + firstButtonAriaLabel, + secondButtonLabel, + secondButtonAriaLabel, + imageUrl, + imageAlt, + heroTitleId, +}) => { + const classes = useStyles(); + const [, dispatch] = useContext(GlobalStateContext); + + return ( + +
    +
    +
    + {category ? : ''} + + +
    + {ctaContainer ? ( + + {firstInternal ? ( + + {firstButtonLabel} + + ) : ( + + {firstButtonLabel} + + )} + {secondButtonLabel ? ( + + dispatch({ + type: 'SET:HOW_SECTION_ID', + payload: { howId: 'beneficiari' }, + }) + } + > + {secondButtonLabel} + + ) : ( + '' + )} + + ) : ( + '' + )} +
    + + {imageAlt} + +
    +     + ); +}; + +HeroMode.propTypes = { + ctaContainer: PropTypes.bool, + smallText: PropTypes.bool, + category: PropTypes.string, + title: PropTypes.string, + body: PropTypes.string, + firstInternal: PropTypes.bool, + firstButtonHref: PropTypes.string, + firstButtonLabel: PropTypes.string, + firstButtonAriaLabel: PropTypes.string, + secondButtonHref: PropTypes.string, + secondButtonLabel: PropTypes.string, + secondButtonAriaLabel: PropTypes.string, + imageUrl: PropTypes.string, + imageAlt: PropTypes.string, + heroTitleId: PropTypes.string, + mainHero: PropTypes.bool, + outlineBtn: PropTypes.bool, +}; diff --git a/src/components/hero/HeroSolutions.jsx b/src/components/hero/HeroSolutions.jsx new file mode 100644 index 000000000..de4883f42 --- /dev/null +++ b/src/components/hero/HeroSolutions.jsx @@ -0,0 +1,162 @@ +import React from 'react'; +import { createUseStyles } from 'react-jss'; +import { Row, Col, Hero, Container } from 'design-react-kit'; +import PropTypes from 'prop-types'; +import { HeroTitle } from './HeroTitle'; +import { HeroBackground } from './HeroBackground'; +import { HeroParagraph } from './HeroParagraph'; + +const useStyles = createUseStyles({ + heroImg: { + position: 'relative', + width: '100%', + '@media (min-width: 992px)': { + position: 'absolute', + right: '122px', + top: '54px', + maxWidth: '300px', + }, + '@media (min-width: 1200px)': { + maxWidth: '300px', + right: '260px', + }, + '@media (max-width: 1200px)': { + top: '94px', + }, + '@media (min-width: 1700px)': { + right: '385px', + }, + '@media (min-width: 1441px) and (max-width: 1680px)': { + right: '380px', + }, + '@media (max-width: 991px)': { + width: '60%', + top: '0', + }, + '@media (max-width: 767px)': { + width: '80%', + }, + }, + heroTitle: { + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 991px)': { + fontSize: '2.25rem', + }, + }, + heroSubtitle: { + fontSize: '24px', + color: '#33485C', + lineHeight: '1.5', + '@media (max-width: 991px)': { + fontSize: '1.125rem', + }, + }, + contentWrapper: { + composes: 'it-hero-text-wrapper', + display: 'flex', + }, + heroWrapper: { + composes: 'it-hero-wrapper', + position: 'relative', + display: 'flex', + '&.it-hero-wrapper': { + alignItems: 'flex-start', + minHeight: 'unset', + }, + '&.it-hero-wrapper .it-hero-text-wrapper': { + '@media (min-width: 992px)': { + padding: '0', + }, + '@media (max-width: 991px)': { + padding: '0 0 3.889rem', + }, + }, + '&.overlap': { + marginBottom: '-7rem', + paddingBottom: '4rem', + }, + '&.bg-white': { + backgroundColor: 'transparent !important', + '& .it-hero-text-wrapper.bg-white span, h1, h2, h3, p': { + color: '#33485C', + }, + '& .it-hero-text-wrapper.bg-white span.list-item': { + fontSize: '1rem', + fontWeight: '600', + color: '#0066CC', + marginBottom: '0.889rem', + '&:last-child': { + marginBottom: '0', + }, + }, + }, + '&.bg-blue': { + backgroundColor: '#0066CC', + '& .bg-blue': { + color: '#fff', + }, + }, + '&.bg-blue .btn': { + color: '#0066CC', + }, + '& .container .it-hero-text-wrapper p': { + fontFamily: 'Titillium Web,Geneva,Tahoma,sans-serif', + fontSize: '1.333rem', + '@media (max-width: 992px)': { + fontSize: '1.25rem', + }, + }, + '& .container .it-hero-text-wrapper .btn': { + fontSize: '1rem', + }, + }, + textWrapper: { + '@media (min-width: 992px)': { + marginRight: '2.611rem', + }, + '@media (max-width: 991px)': { + textAlign: 'center', + }, + }, +}); + +export const HeroSolutions = ({ title, body, image }) => { + const classes = useStyles(); + + return ( + +
    + + + +
    + + +
    + + +
    + + + + +     +
    + +     +     +
    + +     + ); +}; + +HeroSolutions.propTypes = { + title: PropTypes.string, + body: PropTypes.string, + image: PropTypes.string, +}; diff --git a/src/components/modal/ModalMessage.jsx b/src/components/modal/ModalMessage.jsx index 05a1b1b26..24eae697b 100644 --- a/src/components/modal/ModalMessage.jsx +++ b/src/components/modal/ModalMessage.jsx @@ -571,14 +571,14 @@ export const ModalMessage = () => { - + spinner
    - */}
    diff --git a/src/components/modal/ModalUpdatesButton.jsx b/src/components/modal/ModalUpdatesButton.jsx index 1844e18c4..9319305b5 100644 --- a/src/components/modal/ModalUpdatesButton.jsx +++ b/src/components/modal/ModalUpdatesButton.jsx @@ -1,12 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import { createUseStyles } from 'react-jss'; -import { Container, Row, Col, Button } from 'design-react-kit'; +import { Container, Row, Col } from 'design-react-kit'; +import { Link } from 'gatsby'; const useStyles = createUseStyles({ modalButtonContainer: { border: '1px solid #0066CC', - padding: '0.5rem 5.556rem', + padding: '1.5rem 1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', @@ -15,15 +16,24 @@ const useStyles = createUseStyles({ fontSize: '1.333rem', fontWeight: '700', color: '#33485C', - maxWidth: '60%', + '@media (max-width: 767px)': { + textAlign: 'center', + }, }, '& .btn': { - padding: '0.444rem 0.889rem', whiteSpace: 'nowrap', + color: '#fff', + '@media (max-width: 991px)': { + marginTop: '20px', + }, + '@media (max-width: 767px)': { + width: '100%', + }, }, '@media (max-width: 991px)': { flexDirection: 'column', padding: '0.889rem 1.333rem', + alignItems: 'flex-start', '& p': { maxWidth: '100%', marginBottom: '1rem', @@ -34,9 +44,14 @@ const useStyles = createUseStyles({ fontSize: '1.556rem', fontWeight: '600', color: '#33485C', + lineHeight: '1.556rem', '@media (max-width: 992px)': { textAlign: 'center', }, + '@media (max-width: 767px)': { + display: 'block', + textAlign: 'center', + }, }, buttonInfo: { fontSize: '0.889rem', @@ -44,6 +59,9 @@ const useStyles = createUseStyles({ color: '#33485C', '@media (max-width: 992px)': { display: 'block', + }, + '@media (max-width: 767px)': { + display: 'block', textAlign: 'center', }, }, @@ -55,7 +73,7 @@ const useStyles = createUseStyles({ }, }); -export const ModalUpdatesButton = ({ label, buttonLabel, hasTitle, handleToggle }) => { +export const ModalUpdatesButton = ({ label, buttonLabel, hasTitle }) => { const classes = useStyles(); return ( @@ -64,7 +82,7 @@ export const ModalUpdatesButton = ({ label, buttonLabel, hasTitle, handleToggle - Le misure + Le misure @@ -84,14 +102,13 @@ export const ModalUpdatesButton = ({ label, buttonLabel, hasTitle, handleToggle

    {label}

    - +
    diff --git a/src/layouts/AssistenzaPage.jsx b/src/layouts/AssistenzaPage.jsx new file mode 100644 index 000000000..42b1be375 --- /dev/null +++ b/src/layouts/AssistenzaPage.jsx @@ -0,0 +1,773 @@ +/* eslint-disable sonarjs/no-duplicate-string */ +/* eslint-disable max-lines-per-function */ +/* eslint-disable sonarjs/cognitive-complexity */ +import React, { useState, useEffect } from 'react'; +import { createUseStyles } from 'react-jss'; +import { announce } from '@react-aria/live-announcer'; +import { Row, Col, Input, Breadcrumb, BreadcrumbItem } from 'design-react-kit'; +import Select from 'react-select'; +import ReCAPTCHA from 'react-google-recaptcha'; +import content from '../../contents/assistenza/assistenza.yml'; +import notificationsLabel from '../../contents/notifications.yml'; +import labels from '../../contents/labels.yml'; +import links from '../../contents/links.yml'; +const { privacy } = links.internalLinks; +import seo from '../../contents/seo.yml'; +import { SEO } from '../components/SEO'; + +const { title: seoTitle, description: seoDescription } = seo.assistenzaPage; +const { successMessage: successLabels } = notificationsLabel; +const { errors } = labels; + +const useStyles = createUseStyles({ + modalUpdatesContainer: { + '&.modal-dialog': { + maxWidth: '90%', + '@media (max-width: 991px)': { + maxWidth: '100%', + margin: '0', + }, + }, + '&.modal-dialog .modal-content .modal-header': { + padding: '0', + marginBottom: '0.444rem', + }, + '&.modal-dialog .modal-content .modal-body': { + padding: '0', + marginTop: '2.667rem', + }, + '& .modal-content': { + padding: '4.444rem 5.556rem', + '@media (max-width: 991px)': { + padding: '3.778rem 0.833rem 4.444rem', + }, + }, + '&.modal-dialog .modal-content .modal-header .modal-title': { + fontSize: '1.333rem', + fontWeight: '700', + color: '#33485C', + maxWidth: '70%', + '@media (max-width: 991px)': { + maxWidth: '100%', + }, + }, + }, + close: { + '@media (max-width: 991px)': { + position: 'absolute', + top: '0.556rem', + right: '-0.5rem', + }, + '&:focus': { + outline: '2px solid #ff9900', + boxShadow: 'none', + }, + '&.btn': { + background: 'none', + boxShadow: 'none', + }, + '&.btn:hover': { + background: 'none', + }, + '&.btn.btn-secondary:active': { + background: 'none', + boxShadow: 'none', + }, + '&.btn span': { + fontSize: '0.778rem', + color: '#0066CC', + fontWeight: '600', + marginRight: '1.333rem', + '@media (max-width: 991px)': { + fontSize: '0.875rem', + }, + }, + }, + modalSubtitle: { + fontSize: '1rem', + color: '#33485C', + }, + formMessage: { + '& p': { + fontSize: '0.889rem', + color: '#33485C', + fontWeight: '400', + }, + '& [class$="-control"]': { + border: 'none', + borderBottom: '1px solid #5c6f82', + borderRadius: '0', + boxShadow: 'none', + }, + '& [class$="-ValueContainer"]': { + fontSize: '0.889rem', + color: '#808080', + }, + '& [class$="-indicatorSeparator"]': { + display: 'none', + }, + '& [class$="-menu"]': { + margin: '0', + border: 'none', + boxShadow: '0px 0px 80px rgba(0, 43, 85, 0.1)', + borderTopLeftRadius: '0', + borderTopRightRadius: '0', + borderBottomLeftRadius: '4px', + borderBottomRightRadius: '4px', + }, + '& [class$="-MenuList"]': { + padding: '0', + + '& [class$="-option"]': { + fontSize: '0.889rem', + color: '#0066CC', + background: '#fff', + }, + }, + '& [class$="-indicatorContainer"] svg': { + fill: '#33485C', + }, + '& [class$="-singleValue"]': { + fontSize: '0.889rem', + fontWeight: '700', + color: '#17324d', + }, + '& [class$="-placeholder"]': { + color: '#737374', + }, + '& .select.is-invalid [class$="-control"]': { + borderColor: '#F83E5A', + }, + '& .select.focused': { + borderColor: '#f90', + boxShadow: '0 0 0 2px #f90', + outline: '0', + }, + '& .select': { + '&:focus': { + borderColor: '#f90', + boxShadow: '0 0 0 2px #f90', + outline: '0', + }, + }, + '& .css-1n7v3ny-option': { + textDecoration: 'underline', + }, + '& .form-check': { + borderBottom: '1px solid #e6e6e6', + padding: '1.111rem 0.444rem', + }, + '& .form-check .form-check-label': { + fontSize: '0.889rem', + fontWeight: '600', + color: '#17324D', + }, + '& .form-group': { + margin: '0', + }, + '& .form-group label': { + color: '#17324d', + textTransform: 'uppercase', + }, + '& .form-group input[type="text"]': { + fontSize: '0.889rem', + '&:focus': { + border: '2px solid #f90', + boxShadow: '0 0 0 2px #f90', + outline: '0', + }, + }, + '& .form-group input[type="text"].is-invalid': { + borderBottom: 'solid 2px #F83E5A', + }, + '& .form-group input[type="email"]': { + fontSize: '0.889rem', + '&:focus': { + border: '2px solid #f90', + boxShadow: '0 0 0 2px #f90', + outline: '0', + }, + }, + '& .form-group input[type="email"].is-invalid': { + borderBottom: 'solid 2px #F83E5A', + }, + '& .invalid-feedback': { + color: '#F83E5A !important', + }, + '& small.error-label': { + fontSize: '0.778rem', + color: '#F83E5A', + padding: '0 0.444rem', + fontWeight: '400', + position: 'absolute', + }, + }, + modalLabel: { + fontSize: '0.778rem', + color: '#33485C', + fontWeight: '600', + }, + maxLengthLabel: { + fontSize: '0.778rem', + color: '#737374', + marginLeft: '0.444rem', + }, + selectLabel: { + fontSize: '0.778rem', + fontWeight: '600', + color: '#17324d', + padding: '0 0.563rem', + textTransform: 'uppercase', + marginBottom: '0', + }, + notification: { + composes: 'notification with-icon dismissable', + zIndex: '9999', + display: 'block', + opacity: '0', + visibility: 'hidden', + transition: '.3s ease', + bottom: 'unset', + top: '16px', + left: '50%', + transform: 'translateX(-50%)', + '&.show': { + opacity: '1', + visibility: 'visible', + transition: '.3s ease', + }, + '&.with-icon.success': { + borderColor: '#00CF86', + }, + }, + modalFooterLabel: { + composes: 'mb-3', + fontSize: '0.889rem', + '& a': { + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline', + }, + }, + }, + spinner: { + composes: 'spinner hidden ml-3', + maxHeight: '2.667rem', + '&.hidden': { + display: 'none', + }, + }, + titleUpdate: { + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 991px)': { + fontSize: '2.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + subtitleUpdate: { + fontSize: '1.333rem', + color: '#33485C', + lineHeight: '1.5', + '@media (max-width: 991px)': { + fontSize: '1.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + mandatory: { + fontSize: '1rem', + marginTop: '6.25rem', + '@media (min-width: 991px)': { + marginTop: '6.25rem', + }, + }, + heroImg: { + maxWidth: '100%', + '@media (max-width: 991px)': { + width: '80%', + }, + }, + breadcrumb: { + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', + }, + }, + breadcrumbItem: { + '& a': { + color: '#5B6F82', + fontWeight: '600', + textDecoration: 'underline', + fontSize: '18px', + }, + '&::before': { + fontWeight: '600', + color: '#33485C', + }, + }, + breadcrumbItemActive: { + '& a': { + color: '#656566', + textDecoration: 'none', + fontSize: '18px', + pointerEvents: 'none', + }, + '&::before': { + fontSize: '18px', + fontWeight: '600', + color: '#33485C', + }, + }, + submitContainer: { + marginBottom: '12.5rem', + '@media (max-width: 991px)': { + marginBottom: '6rem', + }, + }, +}); + +export const AssistenzaPage = () => { + const textareaMaxLength = 300; + const [textareaDescriptionState, setTextareaDescriptionState] = useState('not-active'); + const [formFilled, setFormFilled] = useState(false); + const isInvalidValue = 'is-invalid'; + const formGroupValue = '.form-group'; + const errorLabelValue = 'error-label'; + + const [optionSelected, setOptionSelected] = useState(); + + const setFocusStyleOnSelect = () => { + const selectInputArr = document.querySelectorAll('#assistance-form .select input'); + selectInputArr.forEach((input) => { + const selectFocusHandler = () => { + const currentSelect = input.closest('.select'); + currentSelect.classList.add('focused'); + }; + const selectFocusOutHandler = () => { + const currentSelect = input.closest('.select'); + currentSelect.classList.remove('focused'); + }; + input.addEventListener('focus', selectFocusHandler); + input.addEventListener('focusout', selectFocusOutHandler); + }); + }; + + useEffect(() => { + setOptionSelected(new Event('selected')); + setFocusStyleOnSelect(); + }, []); + + useEffect(() => { + const form = document.querySelector('#assistance-form'); + const inputArr = form.querySelectorAll('[required]:not(select)'); + const selectArr = form.querySelectorAll('select[required]'); + let noInputValue = true; + let noSelectValue = true; + + const inputHandler = () => { + noInputValue = Array.prototype.slice.call(inputArr).find((input) => input.checkValidity() === false); + noInputValue ? (noInputValue = true) : (noInputValue = false); + inputArr.forEach((input) => { + if (input.checkValidity()) { + input.classList.remove(isInvalidValue); + const formGroup = input.closest(formGroupValue); + const errorLabel = formGroup.querySelector('small'); + if (errorLabel) { + errorLabel.classList.remove(errorLabelValue); + errorLabel.innerHTML = ''; + } + } + }); + setFormFilled(!noInputValue && !noSelectValue); + }; + + const selectHandler = () => { + noSelectValue = Array.prototype.slice.call(selectArr).find((select) => select.value === ''); + noSelectValue ? (noSelectValue = true) : (noSelectValue = false); + setFormFilled(!noInputValue && !noSelectValue); + }; + + inputArr.forEach((input) => { + input.addEventListener('input', inputHandler); + }); + selectArr.forEach((select) => { + select.addEventListener('selected', selectHandler); + }); + }, []); + + const textareaFocusHandler = () => { + setTextareaDescriptionState('active'); + }; + + const textareaFocusOutHandler = (event) => { + const currentTextarea = event.target; + if (currentTextarea.value === '') { + setTextareaDescriptionState(''); + } + }; + + const textareaInputHandler = (event) => { + const currentTextarea = event.target; + const currentContainer = currentTextarea.closest(formGroupValue); + const number = currentContainer.querySelector('.max-length-number'); + number.innerHTML = textareaMaxLength - parseInt(event.target.value.length, 10); + announce('Numero di caratteri rimanenti: ' + number.innerHTML); + }; + + const classes = useStyles(); + + const onChangeCaptcha = (value) => { + if (value !== null || value.trim() !== '') { + const elems = JSON.parse(document.getElementsByName('captcha_settings')[0].value); + elems['ts'] = JSON.stringify(new Date().getTime()); + document.getElementsByName('captcha_settings')[0].value = JSON.stringify(elems); + document.getElementsByName('submit')[0].disabled = false; + } + }; + + const handleArgument = (element) => { + const argumentInput = document.querySelector('#argument-select-input'); + const selectWrapper = argumentInput.closest('.select-wrapper'); + const hiddenSelect = selectWrapper.querySelector('select'); + hiddenSelect.value = element.value; + hiddenSelect.dispatchEvent(optionSelected); + }; + + const customInvalid = (event) => { + event.preventDefault(); + const currentTarget = event.target; + const currentValue = currentTarget.value; + if (currentValue !== '') { + const currentPattern = currentTarget.getAttribute('pattern'); + const currentType = currentTarget.getAttribute('type'); + if (currentType === 'email') { + const inputContainer = currentTarget.closest(formGroupValue); + const errorLabel = inputContainer.querySelector('small'); + errorLabel.classList.add(errorLabelValue); + errorLabel.innerHTML = emailValidationLabel; + currentTarget.classList.add(isInvalidValue); + } + if (currentPattern) { + const patternRegExp = new RegExp(currentPattern); + if (patternRegExp.test(currentValue)) { + return; + } else { + const inputContainer = currentTarget.closest(formGroupValue); + const errorLabel = inputContainer.querySelector('small'); + errorLabel.classList.add(errorLabelValue); + errorLabel.innerHTML = errorMatch; + currentTarget.classList.add(isInvalidValue); + } + } + } + }; + + const handleChangeTel = (event) => { + const currentTarget = event.target; + let value = event.target.value; + const inputContainer = currentTarget.closest(formGroupValue); + const errorLabel = inputContainer.querySelector('small'); + const regex = /^[0-9]+$/; + + if (!value.match(regex)) { + value = value.slice(0, -1); + errorLabel.classList.add(errorLabelValue); + errorLabel.innerHTML = errorMatch; + currentTarget.classList.add(isInvalidValue); + } else { + errorLabel.classList.remove(errorLabelValue); + errorLabel.innerHTML = ''; + currentTarget.classList.remove(isInvalidValue); + } + event.target.value = value; + }; + + const formHandler = (event) => { + const notificationElement = document.querySelector('.notification'); + const titleElement = notificationElement.querySelector('h5'); + const descriptionElement = notificationElement.querySelector('p'); + notificationElement.classList.add('show'); + notificationElement.classList.add('success'); + titleElement.innerHTML = `${successLabels.icon} ${successLabels.title}`; + descriptionElement.innerHTML = successLabels.description; + + setTimeout(() => { + event.target.reset(); + window.grecaptcha.reset(); + const selectArr = document.querySelectorAll('.select-wrapper [class$="-singleValue"]'); + selectArr.forEach((singleValue) => (singleValue.innerHTML = '')); + setFormFilled(false); + const submitBtn = document.querySelector('#assistance-form input[type="submit"]'); + submitBtn.disabled = true; + }, 500); + setTimeout(() => { + notificationElement.classList.remove('show'); + }, 5000); + }; + + const orgId = { + dev: '00D3N0000004K3l', + collaudo: '00D3N0000008lSz', + prod: '00D7Q000001NvsR', + }; + + const { + selectArgument, + emailValidationLabel, + emailLabel, + argumentLabel, + selectPlaceholder, + telLabel, + descriptionLabel, + objectLabel, + sendButtonLabel, + } = content.modal; + + const { errorMatch } = errors; + + return ( + <> + +
    +

    {content.name}

    +
    +
    + + + + + Home + + + + Supporto + + + + Assistenza + + + + +
    +
    + + + +

    Assistenza

    +
    + Un team dedicato è a tua disposizione per chiarire dubbi e approfondire temi di interesse. Compila il + modulo sottostante e invia la richiesta. +
    + + + + +     + + +
    + I campi con * sono obbligatori +
    + +     + + +
    + + + + + + + + + + + + + +
    + + + + + + +
    + +     + + + + + + + +
    + + + + {textareaMaxLength} caratteri a disposizione + +
    + +     + + + + + + + + + + +
    +

    + Cliccando su INVIA dichiaro di aver letto e compreso{' '} + + l'informativa privacy + +

    +
    + +
    +
    +
    + + +     +
    + + ); +}; diff --git a/src/layouts/CandidaPaPage.jsx b/src/layouts/CandidaPaPage.jsx new file mode 100644 index 000000000..cbb8e0193 --- /dev/null +++ b/src/layouts/CandidaPaPage.jsx @@ -0,0 +1,251 @@ +/* eslint-disable react/no-unescaped-entities */ +/* eslint-disable react-hooks/exhaustive-deps */ +/* eslint-disable no-undef */ +import React, { useState, useEffect } from 'react'; +import { Breadcrumb, BreadcrumbItem, Container, Row, Col } from 'design-react-kit'; +import { createUseStyles } from 'react-jss'; +import { announce } from '@react-aria/live-announcer'; +import faq from '../../contents/faq-page/faq.yml'; +import { SEO } from '../components/SEO'; +import seo from '../../contents/seo.yml'; +import content from '../../contents/candida-pa/candida-pa.yml'; +import { TimelineVerticalCards } from '../components/TimelineVerticalCards'; +/* import { Totop } from '../components/Totop'; */ +import { SideNavigationAccordion } from './sideNavigationAccordion'; + +const { title: seoTitle, description: seoDescription } = seo.candidaPaPage; + +const { sidebar, verticalTimeline } = content; + +const useStyles = createUseStyles({ + breadcrumb: { + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', + }, + }, + breadcrumbItem: { + '& a': { + color: '#5B6F82', + fontWeight: '600', + textDecoration: 'underline', + fontSize: '18px', + }, + '&::before': { + fontWeight: '600', + color: '#33485C', + }, + }, + breadcrumbItemActive: { + '& a': { + color: '#656566', + textDecoration: 'none', + fontSize: '18px', + }, + '&::before': { + fontSize: '18px', + fontWeight: '600', + color: '#33485C', + }, + }, + navigationContainer: { + borderTop: '1px solid #A9B9C3', + display: 'flex', + '@media (max-width: 991px)': { + flexDirection: 'column', + border: 'none', + }, + '& .content-container': { + '@media (min-width: 992px)': { + borderLeft: '1px solid #d9dadb', + }, + }, + }, + noResults: { + textAlign: 'center', + color: '#33485C', + margin: '0.833rem 0', + }, + inputContainer: { + position: 'relative', + '& .reset-btn': { + background: 'transparent', + border: '0', + position: 'absolute', + top: '15px', + right: '10px', + backgroundImage: 'url("../assets/close-black.svg")', + backgroundRepeat: 'no-repeat', + width: '1.1rem', + height: '1.1rem', + }, + }, + inputWrap: { + backgroundImage: 'url("../assets/icon-search.svg")', + '&:focus': { + outline: '2px solid #ff9900', + }, + }, + contentTitle: { + fontSize: '1.688rem', + fontWeight: '700', + }, + contentParagraph: { + fontSize: '1.125rem', + }, + cardReadMore: { + boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.1)', + display: 'flex', + flexDirection: 'column', + padding: '20px 30px 20px 55px', + position: 'relative', + }, + clip: { + position: 'absolute', + top: '24px', + left: '30px', + }, + cardTitle: { + fontWeight: '600', + color: '#0066CC', + fontSize: '1.125rem', + }, + cardInfo: { + fontWeight: '400', + fontSize: '0.875rem', + color: '#33485C', + }, + titleUpdate: { + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 425px)': { + fontSize: '2.375rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + subtitleUpdate: { + fontSize: '24px', + color: '#33485C', + lineHeight: '30px', + '@media (max-width: 425px)': { + fontSize: '1.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + heroImg: { + '@media (max-width: 425px)': { + maxWidth: '80%', + }, + }, +}); + +// eslint-disable-next-line sonarjs/cognitive-complexity +export const CandidaPaPage = () => { + const classes = useStyles(); + const [inputValue, setInputValue] = useState(''); + const [questions, setQuestions] = useState(faq.questions); + const [isMobile, setIsMobile] = useState(); + // const [, dispatch] = useContext(GlobalStateContext); + + useEffect(() => { + setIsMobile(window.innerWidth < 992); + window.addEventListener('resize', () => { + setIsMobile(window.innerWidth < 992); + }); + announce('Pagina caricata ' + faq.name); + }, []); + + useEffect(() => { + if (!isMobile) { + setInputValue(''); + setQuestions(faq.questions); + } + }, [isMobile]); + + return ( + <> + +
    +

    {faq.name}

    +
    +
    + + + + + + Home + + + + Come partecipare + + + + Candida la tua PA agli avvisi per la transizione digitale + + + + + + +

    Candida la tua PA agli avvisi per la transizione digitale

    +
    + Per candidare la tua amministrazione agli avvisi pubblici e{' '} + richiedere i finanziamenti segui la configurazione guidata per comporre e inviare il + documento di candidatura: potrai seguire lo stato di avanzamento della pratica in area riservata. +
    + + + + +     +
    +

    + Sezione domande frequenti +

    + +
    + {/* */} + +
    +

    Candida la tua amministrazione agli avvisi

    +

    + Il processo di candidatura agli avvisi pubblici prevede quattro passaggi: +

    +
    +     + + {/* +
    +

    Per approfondire

    + + + + + Banda ultra larga + Scarica il PDF (3.7MB) + + + +
    +     */} +
    +
    +     +
    + + ); +}; diff --git a/src/layouts/ComeFunzionaPage.jsx b/src/layouts/ComeFunzionaPage.jsx index 7fe4a784c..27ba53d96 100644 --- a/src/layouts/ComeFunzionaPage.jsx +++ b/src/layouts/ComeFunzionaPage.jsx @@ -1,21 +1,57 @@ import React, { useEffect, useContext } from 'react'; import { announce } from '@react-aria/live-announcer'; -import { support } from '../../contents/home-page/home.yml'; -import content from '../../contents/come-funziona/come-funziona.yml'; +import { Row, Col, Breadcrumb, BreadcrumbItem } from 'design-react-kit'; +import { createUseStyles } from 'react-jss'; +import content from '../../contents/iniziativa/iniziativa.yml'; import { SEO } from '../components/SEO'; import { Timeline } from '../components/carousel/Timeline'; import { ProjectsCards } from '../components/ProjectsCards'; import { HeroHowItWorks } from '../components/hero/HeroHowItWorks'; import seo from '../../contents/seo.yml'; import { GlobalStateContext } from '../context/globalContext'; -import { Involved } from './come-funziona/Involved'; -import { Beneficiaries } from './come-funziona/Beneficiaries'; -import { SupportSection } from './faq/SupportSection'; +// import { Breadcrumb } from '../components/Breadcrumb'; +import { Involved } from './iniziativa/Involved'; +import { Beneficiaries } from './iniziativa/Beneficiaries'; const { title: seoTitle, description: seoDescription } = seo.comeFunzionaPage; +const useStyles = createUseStyles({ + breadcrumb: { + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', + }, + }, + breadcrumbItem: { + '& a': { + color: '#5B6F82', + fontWeight: '600', + textDecoration: 'underline', + fontSize: '18px', + }, + '&::before': { + fontWeight: '600', + color: '#33485C', + }, + }, + breadcrumbItemActive: { + '& a': { + color: '#656566', + textDecoration: 'none', + fontSize: '18px', + pointerEvents: 'none', + }, + '&::before': { + fontSize: '18px', + fontWeight: '600', + color: '#33485C', + }, + }, +}); + export const ComeFunzionaPage = () => { const [{ howId }, dispatch] = useContext(GlobalStateContext); + const classes = useStyles(); useEffect(() => { if (howId) { @@ -39,6 +75,22 @@ export const ComeFunzionaPage = () => { return ( <> + {/* */} +
    + + + + + Home + + + + L'iniziativa + + + + +

    {content.name}

    @@ -47,23 +99,13 @@ export const ComeFunzionaPage = () => { body={content.hero.body} theme="bg-white" smallText="true" - image="come-funziona-hero.svg" + image="iniziativa-hero.svg" list={content.hero.list} /> - - - { - dispatch({ - type: 'SET:TOGGLE_MODAL_MESSAGE', - }); - }} - /> + + ); }; diff --git a/src/layouts/ComeParteciparePage.jsx b/src/layouts/ComeParteciparePage.jsx new file mode 100644 index 000000000..2d552903f --- /dev/null +++ b/src/layouts/ComeParteciparePage.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import content from '../../contents/come-partecipare/come-partecipare.yml'; +import { SEO } from '../components/SEO'; +import seo from '../../contents/seo.yml'; +import { HeroHowToDo } from '../components/hero/HeroHowToDo'; +import { Keypoints } from './come-fare/Keypoints'; +import { KeypointSection } from './come-fare/KeypointSection'; + +const { title: seoTitle, description: seoDescription } = seo.comeParteciparePage; + +export const ComeParteciparePage = () => ( + <> + +
    +

    {content.name}

    +
    + + + + + + {/* */} + +); diff --git a/src/layouts/CreaProfiloPage.jsx b/src/layouts/CreaProfiloPage.jsx new file mode 100644 index 000000000..a0244aff2 --- /dev/null +++ b/src/layouts/CreaProfiloPage.jsx @@ -0,0 +1,277 @@ +/* eslint-disable react/no-unescaped-entities */ +/* eslint-disable react-hooks/exhaustive-deps */ +/* eslint-disable no-undef */ +import React, { useState, useEffect } from 'react'; +import { Breadcrumb, BreadcrumbItem, Container, Row, Col } from 'design-react-kit'; +import { createUseStyles } from 'react-jss'; +import { announce } from '@react-aria/live-announcer'; +import faq from '../../contents/faq-page/faq.yml'; +import { SEO } from '../components/SEO'; +import seo from '../../contents/seo.yml'; +import content from '../../contents/crea-profilo/crea-profilo.yml'; +import { TimelineVerticalCards } from '../components/TimelineVerticalCards'; +import { HeroVideo } from '../components/HeroVideo'; +/* import { Totop } from '../components/Totop'; */ +import { SideNavigationAccordion } from './sideNavigationAccordion'; + +const { title: seoTitle, description: seoDescription } = seo.creaProfiloPage; + +const { sidebar, verticalTimeline } = content; + +const useStyles = createUseStyles({ + breadcrumb: { + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', + }, + }, + breadcrumbItem: { + '& a': { + color: '#5B6F82', + fontWeight: '600', + textDecoration: 'underline', + fontSize: '18px', + }, + '&::before': { + fontWeight: '600', + color: '#33485C', + }, + }, + breadcrumbItemActive: { + '& a': { + color: '#656566', + textDecoration: 'none', + fontSize: '18px', + }, + '&::before': { + fontSize: '18px', + fontWeight: '600', + color: '#33485C', + }, + }, + navigationContainer: { + borderTop: '1px solid #A9B9C3', + display: 'flex', + '@media (max-width: 991px)': { + flexDirection: 'column', + border: 'none', + }, + '& .content-container': { + '@media (min-width: 992px)': { + borderLeft: '1px solid #d9dadb', + }, + }, + }, + noResults: { + textAlign: 'center', + color: '#33485C', + margin: '0.833rem 0', + }, + inputContainer: { + position: 'relative', + '& .reset-btn': { + background: 'transparent', + border: '0', + position: 'absolute', + top: '15px', + right: '10px', + backgroundImage: 'url("../assets/close-black.svg")', + backgroundRepeat: 'no-repeat', + width: '1.1rem', + height: '1.1rem', + }, + }, + inputWrap: { + backgroundImage: 'url("../assets/icon-search.svg")', + '&:focus': { + outline: '2px solid #ff9900', + }, + }, + contentTitle: { + fontSize: '1.688rem', + fontWeight: '700', + }, + contentParagraph: { + fontSize: '1.125rem', + '& a': { + textDecoration: 'none', + '&:hover': { + textDecoration: 'underline', + }, + }, + }, + cardReadMore: { + boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.1)', + display: 'flex', + flexDirection: 'column', + padding: '20px 30px 20px 55px', + position: 'relative', + }, + clip: { + position: 'absolute', + top: '24px', + left: '30px', + }, + cardTitle: { + fontWeight: '600', + color: '#0066CC', + fontSize: '1.125rem', + }, + cardInfo: { + fontWeight: '400', + fontSize: '0.875rem', + color: '#33485C', + }, + titleUpdate: { + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 991px)': { + fontSize: '2.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + subtitleUpdate: { + fontSize: '1.333rem', + color: '#33485C', + lineHeight: '1.5', + '@media (max-width: 991px)': { + fontSize: '1.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + heroImg: { + maxWidth: '100%', + '@media (max-width: 425px)': { + maxWidth: '80%', + }, + }, +}); + +// eslint-disable-next-line sonarjs/cognitive-complexity +export const CreaProfiloPage = () => { + const classes = useStyles(); + const [inputValue, setInputValue] = useState(''); + const [questions, setQuestions] = useState(faq.questions); + const [isMobile, setIsMobile] = useState(); + // const [, dispatch] = useContext(GlobalStateContext); + + useEffect(() => { + setIsMobile(window.innerWidth < 992); + window.addEventListener('resize', () => { + setIsMobile(window.innerWidth < 992); + }); + announce('Pagina caricata ' + faq.name); + }, []); + + useEffect(() => { + if (!isMobile) { + setInputValue(''); + setQuestions(faq.questions); + } + }, [isMobile]); + + return ( + <> + +
    +

    {faq.name}

    +
    +
    + + + + + + Home + + + + Come partecipare + + + + Attiva il profilo della tua PA: identità digitale e dati IPA + + + + + + +

    Attiva il profilo della tua PA: identità digitale e dati IPA

    +
    + Per partecipare agli avvisi è necessario che il{' '} + rappresentante legale di un'amministrazione presente su IPA (Indice dei domicili + digitali della Pubblica Amministrazione), o una persona incaricata,{' '} + avvii la procedura di attivazione della PA sulla piattaforma. +
    + + + + +     +
    +

    + Sezione domande frequenti +

    + +
    + {/* */} + +
    +

    Attiva il profilo della tua amministrazione

    +

    + Il processo di attivazione della PA prevede quattro passaggi: +

    +
    +     + + +

    + Ti raccomandiamo quindi di verificare fin da subito l’accuratezza delle informazioni presenti su{' '} + + IPA + + . +

    +     +
    + +
    + {/* +
    +

    Per approfondire

    + + + + + Banda ultra larga + Scarica il PDF (3.7MB) + + + +
    +     */} +
    +
    +     +
    + + ); +}; diff --git a/src/layouts/FaqPage.jsx b/src/layouts/FaqPage.jsx index 0311238d5..69edea75b 100644 --- a/src/layouts/FaqPage.jsx +++ b/src/layouts/FaqPage.jsx @@ -1,3 +1,4 @@ +/* eslint-disable max-lines-per-function */ /* eslint-disable react/no-unescaped-entities */ /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable no-undef */ @@ -9,6 +10,7 @@ import faq from '../../contents/faq-page/faq.yml'; import { SEO } from '../components/SEO'; import seo from '../../contents/seo.yml'; import { GlobalStateContext } from '../context/globalContext'; +import content from '../../contents/faq-page/faq.yml'; import { SideNavigation } from './faq/SideNavigation'; import { QuestionSection } from './faq/QuestionSection'; import { SupportSection } from './faq/SupportSection'; @@ -35,6 +37,9 @@ const useStyles = createUseStyles({ width: '1.1rem', height: '1.1rem', }, + '& label': { + fontWeight: '400', + }, }, inputWrap: { backgroundImage: 'url("../assets/icon-search.svg")', @@ -155,8 +160,46 @@ export const FaqPage = () => { } }, [filterId, getNewQuestions, getQuestionsMobile, inputValue]); + useEffect(() => { + const sectionArr = document.querySelectorAll('.question-section'); + + const observerHandler = (entries) => { + const changeActive = (id) => { + const sideMenuActive = document.querySelector(`.sidebar-wrapper .list-item.active`); + const sideMenuRefer = document.querySelector(`.sidebar-wrapper .list-item[data-id=${id}]`); + + sideMenuActive && sideMenuActive.classList.remove('active'); + sideMenuRefer && sideMenuRefer.classList.add('active'); + }; + + entries.forEach((entry) => { + if (entry.intersectionRatio > 0.6 && entry.intersectionRatio < 0.7) { + changeActive(entry.target.id); + } + }); + }; + + const scrollHandler = () => { + const options = { + root: null, + rootMargin: '0px', + threshold: [0.6, 0.8], + trackVisibility: true, + delay: 200, + }; + + const observer = new IntersectionObserver(observerHandler, options); + sectionArr.forEach((section) => { + observer.observe(section); + }); + }; + window.addEventListener('scroll', scrollHandler); + }, []); + const resetInput = () => { setInputValue(''); + const searchInput = document.querySelector('#faq-search'); + searchInput.value = ''; setQuestions(faq.questions); }; @@ -166,7 +209,7 @@ export const FaqPage = () => {

    {faq.name}

    - +

    @@ -198,7 +241,12 @@ export const FaqPage = () => { - + {

    - { - dispatch({ type: 'SET:TOGGLE_MODAL_MESSAGE' }); - }} - /> + ); }; diff --git a/src/layouts/Footer.jsx b/src/layouts/Footer.jsx index 795e885ea..19d4871e7 100644 --- a/src/layouts/Footer.jsx +++ b/src/layouts/Footer.jsx @@ -1,9 +1,8 @@ -import React, { useContext } from 'react'; +import React from 'react'; import { Link } from 'gatsby'; import { createUseStyles } from 'react-jss'; import links from '../../contents/links.yml'; import { ExternalLink } from '../components/ExternalLink'; -import { GlobalStateContext } from '../context/globalContext'; const { internalLinks: { privacy, noteLegali }, @@ -20,20 +19,25 @@ const useStyle = createUseStyles({ '@media (min-width: 992px)': { display: 'flex', flexDirection: 'column', - alignItems: 'center', + alignItems: 'flex-start', padding: [40, 0], }, '@media (min-width: 1200px)': { justifyContent: 'space-between', flexDirection: 'row', + alignItems: 'center', }, '& .logos': { display: 'flex', flexDirection: 'column', - alignItems: 'center', + alignItems: 'flex-start', '@media (min-width: 992px)': { + alignItems: 'center', flexDirection: 'row', }, + '@media (max-width: 991px)': { + alignItems: 'center', + }, '& a': { '&:focus': { boxShadow: 'none', @@ -48,22 +52,26 @@ const useStyle = createUseStyles({ composes: 'it-footer-small-prints py-4', backgroundColor: '#01254C', '& a': { - color: '#27D1D6', + color: '#fff', }, }, seeMore: { - color: '#33485C', + color: '#06c', textDecoration: 'none', - fontWeight: 'bold', + fontWeight: '600', marginTop: '2.5rem', display: 'block', + textAlign: 'center', '&:hover': { textDecoration: 'underline', - color: '#33485C', + color: '#06c', }, '@media (min-width: 1200px)': { marginTop: '0', }, + '&:not(:last-child)': { + marginBottom: '15px', + }, }, departmentLogo: { display: 'block', @@ -75,7 +83,7 @@ const useStyle = createUseStyles({ display: 'inline-block', margin: 0, maxHeight: '2.5rem', - marginLeft: '2.5rem', + marginLeft: '1.5rem', marginRight: '1.2rem', paddingLeft: '1.5rem', borderLeft: '1px solid #E6E9F2', @@ -98,9 +106,16 @@ const useStyle = createUseStyles({ }, listItem: { composes: 'list-inline-item', - display: 'block', - '&+.list-inline-item': { - marginTop: '30px', + display: 'inline-flex', + '& a': { + color: '#27D1D6', + }, + '@media (max-width: 767px)': { + flexDirection: 'column', + '&+.list-inline-item': { + display: 'flex', + marginTop: '30px', + }, }, '@media (min-width: 992px)': { display: 'inline-block', @@ -119,7 +134,7 @@ const SlimFooter = () => { return (
    -
    +
    • @@ -148,11 +163,10 @@ const SlimFooter = () => { const MainFooter = () => { const classes = useStyle(); - const [{ activeItem }, dispatch] = useContext(GlobalStateContext); return (
      -
      +
      @@ -174,25 +188,12 @@ const MainFooter = () => { {dipartimento.label}
      -
      - {activeItem === 'come-funziona' ? ( - - Scopri l'iniziativa - - ) : ( - - dispatch({ - type: 'SET:HOW_SECTION_ID', - payload: { howId: 'attori-coinvolti' }, - }) - } - > - Scopri l'iniziativa +
      + <> + + Ricevi aggiornamenti - )} +
      diff --git a/src/layouts/Header.jsx b/src/layouts/Header.jsx index e5696cd61..22384abc6 100644 --- a/src/layouts/Header.jsx +++ b/src/layouts/Header.jsx @@ -80,21 +80,52 @@ const useStyle = createUseStyles({ }, }, topListLink: { - composes: 'border-0 p-0 mr-0', + composes: 'border-0 p-0 mr-0 my-0', + '& .list-item': { + display: 'inline-flex', + alignItems: 'center', + padding: '5px 24px', + '@media (max-width: 991px)': { + padding: '5px 0', + }, + }, + '& .list-item-link': { + display: 'inline-flex', + padding: '0', + alignItems: 'center', + '& img': { + maxHeight: '32px', + '&.eu-logo': { + marginLeft: '32px', + }, + '&.user-logo': { + maxHeight: '24px', + marginRight: '10px', + }, + }, + }, }, headerCenterWrapper: { height: 'auto', padding: [16, 0], '& .it-header-center-content-wrapper .it-brand-wrapper a .icon': { '&.site-logo': { - width: '3rem', - height: '3rem', + width: '60px', + height: '60px', }, '&.repubblica-logo': { width: '3.556rem', height: '4rem', + marginRight: '15px', }, }, + '&.it-header-center-wrapper .it-header-center-content-wrapper': { + alignItems: 'flex-start', + }, + }, + headerCenter: { + display: 'flex', + flexDirection: 'column', }, offCanvasWrapper: { padding: [13, 24], @@ -102,23 +133,18 @@ const useStyle = createUseStyles({ alignItems: 'center', marginBottom: 16, position: 'relative', - '&:before': { - content: '""', - position: 'absolute', - left: '24px', - bottom: '0', - width: '65px', - height: '1px', - backgroundColor: '#0066CC', - }, '@media (min-width: 992px)': { display: 'none', }, }, offCanvasTitle: { - marginLeft: 8, textDecoration: 'none', fontWeight: '700', + '& .icon': { + marginRight: '15px', + width: '39px', + height: '39px', + }, }, navbarNav: { width: '100%', @@ -148,6 +174,9 @@ const useStyle = createUseStyles({ boxShadow: 'none', }, }, + '& .nav-item.r-nav': { + marginLeft: 'auto', + }, }, linkListWrapperCustom: { '& ul li:not(:first-child)': { @@ -158,7 +187,7 @@ const useStyle = createUseStyles({ }, noShadow: { composes: 'shadow-none', - top: '30%', + top: '27%', }, menuWrapper: { composes: 'menu-wrapper', @@ -197,6 +226,11 @@ const useStyle = createUseStyles({ padding: '0', backgroundColor: 'transparent', boxShadow: 'none', + display: 'flex', + alignItems: 'center', + '& a': { + paddingRight: '5px', + }, '&:focus, &:hover': { color: '#0066CC', backgroundColor: 'transparent', @@ -206,11 +240,94 @@ const useStyle = createUseStyles({ '@media (min-width: 992px)': { display: 'none', }, + '@media (min-width: 359px) and (max-width: 360px)': { + whiteSpace: 'nowrap', + }, }, headerLink: { - composes: 'font-weight-bold', + composes: 'font-weight-semibold', cursor: 'pointer', }, + mainHeader: { + boxShadow: '0 20px 30px 5px rgb(0 0 0 / 5%)', + '& .it-header-slim-wrapper-content': { + padding: '0', + }, + '& .it-header-center-content-wrapper': { + padding: '0', + }, + '& .it-header-wrapper .it-nav-wrapper .it-header-navbar-wrapper': { + top: '27%', + }, + '& .it-header-slim-wrapper': { + '@media (max-width: 991px)': { + padding: '10px 0', + }, + }, + '& .it-header-slim-wrapper .it-header-slim-wrapper-content': { + '@media (max-width: 991px)': { + alignItems: 'flex-start', + }, + }, + }, + login: { + marginLeft: '1.38rem', + backgroundColor: '#0066CC', + display: 'flex', + alignItems: 'center', + padding: '0 1.38rem', + height: '100%', + '@media (max-width: 992px)': { + backgroundColor: 'transparent', + padding: '0', + }, + '@media (min-width: 359px) and (max-width: 360px)': { + marginLeft: 'auto', + }, + '&:hover': { + '& span': { + textDecoration: 'underline', + }, + }, + '& img': { + marginRight: '0.555rem', + '&.mobile': { + display: 'none', + marginTop: '5px', + height: '24px', + }, + '@media (max-width: 992px)': { + display: 'none', + margin: '0', + '&.mobile': { + display: 'block', + }, + }, + }, + '& span': { + fontSize: '1rem', + fontWeight: 'bold', + lineHeight: '1.3', + color: '#fff', + '@media (max-width: 992px)': { + display: 'none', + }, + }, + }, + headerLabel: { + composes: 'd-inline-flex flex-column font-weight-bold mt-15 d-lg-none', + marginTop: '15px', + '& .title-link': { + color: '#06c', + fontSize: '1.22222rem', + lineHeight: '1.25', + }, + '& .subtitle-link': { + color: '#06c', + fontSize: '1.11111rem', + fontWeight: '400', + }, + }, }); const SlimHeader = () => { @@ -222,7 +339,7 @@ const SlimHeader = () => { }; return ( - + { > {externalLinks.eu.label} + + {externalLinks.eu.label} + {externalLinks.eu.label} + {externalLinks.accedi.label} + ); @@ -292,9 +414,9 @@ const CenterHeader = () => { const classes = useStyle(); return ( - +
      - +
      @@ -307,13 +429,17 @@ const CenterHeader = () => {
      +
      + PA digitale 2026 + Le risorse per una PA protagonista della transizione digitale +
      ); }; const NavHeader = () => { - const [{ activeItem }, dispatch] = useContext(GlobalStateContext); + const [{ activeItem }] = useContext(GlobalStateContext); const [isOpen, setIsOpen] = useState(false); const closeMenu = () => setIsOpen(false); const toogleMenu = () => setIsOpen(!isOpen); @@ -352,6 +478,15 @@ const NavHeader = () => { {headerTitle}
      • + + + {internalLinks.initiative.label} + + { {internalLinks.opportunity.label} + + + Avvisi + + - {internalLinks.howitworks.label} + {internalLinks.howToPartecipate.label} - + { {internalLinks.support.label} - - -
    @@ -399,17 +527,21 @@ const NavHeader = () => { ); }; -export const Header = (props) => ( -
    - - -
    - - -
    -     -
    -); +export const Header = (props) => { + const classes = useStyle(); + + return ( +
    + + +
    + + +
    +     +
    + ); +}; Header.propTypes = { toggleModal: PropTypes.func, diff --git a/src/layouts/IndexPage.jsx b/src/layouts/IndexPage.jsx index 215fc9add..51ca5ee0a 100644 --- a/src/layouts/IndexPage.jsx +++ b/src/layouts/IndexPage.jsx @@ -1,116 +1,77 @@ -import React, { useContext, useEffect } from 'react'; -import { createUseStyles } from 'react-jss'; -import { announce } from '@react-aria/live-announcer'; +import React, { useEffect, useState } from 'react'; import { name, - heroMain, - heroDigital, + heroMainBanner, heroPnrr, - opportunity, heroCarouselNews, - homeCarousel, heroCarouselNewsTitle, + noticesCarouselTitle, support, } from '../../contents/home-page/home.yml'; -import { HeroImageBackground } from '../components/hero/HeroImageBackground'; -import { HeroImageBackgroundFull } from '../components/hero/HeroImageBackgroundFull'; import { HeroImage } from '../components/hero/HeroImage'; import { HeroCarousel } from '../components/carousel/Carousel'; -import { HomeCarousel } from '../components/carousel/HomeCarousel'; import { SEO } from '../components/SEO'; import seo from '../../contents/seo.yml'; -import labels from '../../contents/labels.yml'; -import { GlobalStateContext } from '../context/globalContext'; +import { NoticesCarousel } from '../components/carousel/NoticesCarousel'; import { SupportSection } from './faq/SupportSection'; -import { OpportunitySection } from './home/OpportunitySection'; const { title: seoTitle, description: seoDescription } = seo.homePage; -const { headerTitle, headerSubtitle } = labels; - -const useStyles = createUseStyles({ - mobileTitle: { - composes: 'px-3', - '@media (min-width: 992px)': { - display: 'none', - }, - '& .title': { - fontSize: '1.25rem', - color: '#0066CC', - fontWeight: 'bold', - }, - '& .description': { - fontSize: '1.25rem', - color: '#0066CC', - }, - }, -}); export const IndexPage = () => { - const classes = useStyles(); - const [, dispatch] = useContext(GlobalStateContext); + const [newsList, setNewsList] = useState([]); useEffect(() => { - announce('Pagina caricata ' + name); + (async () => { + try { + await fetch( + `https://raw.githubusercontent.com/teamdigitale/padigitale2026-opendata/main/dati/avvisi-latest.json` + ) + .then((res) => res.json()) + .then((data) => { + setNewsList(data.windows); + }); + } catch (error) { + console.log(error); + } + })(); }, []); return ( <> -
    -

    {headerTitle}

    -

    {headerSubtitle}

    -

    {name}

    - - - + - - { - dispatch({ - type: 'SET:TOGGLE_MODAL_MESSAGE', - }); - }} - /> + ); }; diff --git a/src/layouts/OpportunityPage.jsx b/src/layouts/OpportunityPage.jsx index 9bb7cdc73..fec055749 100644 --- a/src/layouts/OpportunityPage.jsx +++ b/src/layouts/OpportunityPage.jsx @@ -46,7 +46,7 @@ export const OpportunityPage = (props) => { diff --git a/src/layouts/RiceviAssistenzaPage.jsx b/src/layouts/RiceviAssistenzaPage.jsx new file mode 100644 index 000000000..2ff2e0566 --- /dev/null +++ b/src/layouts/RiceviAssistenzaPage.jsx @@ -0,0 +1,238 @@ +/* eslint-disable react/no-unescaped-entities */ +/* eslint-disable react-hooks/exhaustive-deps */ +/* eslint-disable no-undef */ +import React, { useState, useEffect } from 'react'; +import { Breadcrumb, BreadcrumbItem, Container, Row, Col } from 'design-react-kit'; +import { createUseStyles } from 'react-jss'; +import { announce } from '@react-aria/live-announcer'; +import faq from '../../contents/faq-page/faq.yml'; +import { SEO } from '../components/SEO'; +import seo from '../../contents/seo.yml'; +import content from '../../contents/ricevi-assistenza/ricevi-assistenza.yml'; +import { TimelineVerticalCards } from '../components/TimelineVerticalCards'; +/* import { Totop } from '../components/Totop'; */ +import { SideNavigationAccordion } from './sideNavigationAccordion'; + +const { title: seoTitle, description: seoDescription } = seo.riceviAssistenzaPage; + +const { sidebar, verticalTimeline } = content; + +const useStyles = createUseStyles({ + breadcrumb: { + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', + }, + }, + breadcrumbItem: { + '& a': { + color: '#5B6F82', + fontWeight: '600', + textDecoration: 'underline', + fontSize: '18px', + }, + '&::before': { + fontWeight: '600', + color: '#33485C', + }, + }, + breadcrumbItemActive: { + '& a': { + color: '#656566', + textDecoration: 'none', + fontSize: '18px', + }, + '&::before': { + fontSize: '18px', + fontWeight: '600', + color: '#33485C', + }, + }, + navigationContainer: { + borderTop: '1px solid #A9B9C3', + display: 'flex', + '@media (max-width: 991px)': { + flexDirection: 'column', + border: 'none', + }, + '& .content-container': { + '@media (min-width: 992px)': { + borderLeft: '1px solid #d9dadb', + }, + }, + }, + noResults: { + textAlign: 'center', + color: '#33485C', + margin: '0.833rem 0', + }, + inputContainer: { + position: 'relative', + '& .reset-btn': { + background: 'transparent', + border: '0', + position: 'absolute', + top: '15px', + right: '10px', + backgroundImage: 'url("../assets/close-black.svg")', + backgroundRepeat: 'no-repeat', + width: '1.1rem', + height: '1.1rem', + }, + }, + inputWrap: { + backgroundImage: 'url("../assets/icon-search.svg")', + '&:focus': { + outline: '2px solid #ff9900', + }, + }, + contentTitle: { + fontSize: '1.688rem', + fontWeight: '700', + }, + contentParagraph: { + fontSize: '1.125rem', + }, + cardReadMore: { + boxShadow: '0px 2px 20px rgba(0, 0, 0, 0.1)', + display: 'flex', + flexDirection: 'column', + padding: '20px 30px 20px 55px', + position: 'relative', + }, + clip: { + position: 'absolute', + top: '24px', + left: '30px', + }, + cardTitle: { + fontWeight: '600', + color: '#0066CC', + fontSize: '1.125rem', + }, + cardInfo: { + fontWeight: '400', + fontSize: '0.875rem', + color: '#33485C', + }, + titleUpdate: { + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 991px)': { + fontSize: '2.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + subtitleUpdate: { + fontSize: '1.333rem', + color: '#33485C', + lineHeight: '1.5', + '@media (max-width: 991px)': { + fontSize: '1.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + heroImg: { + maxWidth: '100%', + '@media (max-width: 425px)': { + maxWidth: '80%', + }, + }, +}); + +// eslint-disable-next-line sonarjs/cognitive-complexity +export const RiceviAssistenzaPage = () => { + const classes = useStyles(); + const [inputValue, setInputValue] = useState(''); + const [questions, setQuestions] = useState(faq.questions); + const [isMobile, setIsMobile] = useState(); + // const [, dispatch] = useContext(GlobalStateContext); + + useEffect(() => { + setIsMobile(window.innerWidth < 992); + window.addEventListener('resize', () => { + setIsMobile(window.innerWidth < 992); + }); + announce('Pagina caricata ' + faq.name); + }, []); + + useEffect(() => { + if (!isMobile) { + setInputValue(''); + setQuestions(faq.questions); + } + }, [isMobile]); + + return ( + <> + +
    +

    {faq.name}

    +
    +
    + + + + + + Home + + + + Come partecipare + + + + Trova le risposte alle tue domande o ricevi assistenza + + + + + + +

    Trova le risposte alle tue domande o ricevi assistenza

    +
    + All’interno della sezione dedicata al supporto puoi{' '} + consultare le risposte alle domande più frequenti o{' '} + aprire una richiesta per ricevere assistenza. +
    + + + + +     +
    +

    + Sezione domande frequenti +

    + +
    + {/* */} + +
    +

    Ricevi supporto dedicato su PA digitale 2026

    +

    + Il processo di assistenza può prevedere fino a quattro passaggi: +

    +
    +     + +
    +
    +     +
    + + ); +}; diff --git a/src/layouts/SolutionProjects.jsx b/src/layouts/SolutionProjects.jsx index 26814eee7..eb17b295b 100644 --- a/src/layouts/SolutionProjects.jsx +++ b/src/layouts/SolutionProjects.jsx @@ -1,34 +1,45 @@ import React, { useEffect, useContext } from 'react'; import { createUseStyles } from 'react-jss'; import { Breadcrumb, BreadcrumbItem, Row, Col } from 'design-react-kit'; -import content from '../../contents/come-funziona/soluzione-progetti.yml'; -import contentHowItWorks from '../../contents/come-funziona/come-funziona.yml'; +import content from '../../contents/iniziativa/soluzione-progetti.yml'; import { SEO } from '../components/SEO'; import seo from '../../contents/seo.yml'; import { GlobalStateContext } from '../context/globalContext'; -import { HeroImage } from '../components/hero/HeroImage'; +import { HeroSolutions } from '../components/hero/HeroSolutions'; import { TimelineVertical } from '../components/TimelineVertical'; -import { ProjectsCards } from '../components/ProjectsCards'; +import { HeroMode } from '../components/hero/HeroMode'; const { title: seoTitle, description: seoDescription } = seo.projectsSolutionPage; const useStyles = createUseStyles({ breadcrumb: { - '@media (min-width: 991px)': { - marginLeft: '0.722rem', + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', }, }, breadcrumbItem: { '& a': { color: '#5B6F82', - fontWeight: '700', + fontWeight: '600', textDecoration: 'underline', + fontSize: '18px', + }, + '&::before': { + fontWeight: '600', + color: '#33485C', }, }, breadcrumbItemActive: { '& a': { - color: '#5B6F82', + color: '#656566', textDecoration: 'none', + fontSize: '18px', + }, + '&::before': { + fontSize: '18px', + fontWeight: '600', + color: '#33485C', }, }, }); @@ -36,14 +47,13 @@ const useStyles = createUseStyles({ export const SolutionProjects = () => { const classes = useStyles(); - const { hero, verticalTimeline } = content; - const { projectsCardsItem } = contentHowItWorks; + const { hero, verticalTimeline, heroMode } = content; const [, dispatch] = useContext(GlobalStateContext); useEffect(() => { dispatch({ type: 'SET:ACTIVE_HEADER', - payload: { activeItem: 'come-funziona' }, + payload: { activeItem: 'iniziativa' }, }); return () => { dispatch({ type: 'SET:ACTIVE_HEADER' }); @@ -54,30 +64,46 @@ export const SolutionProjects = () => { <>

    {seoTitle}

    -
    + - - + ); }; diff --git a/src/layouts/SolutionStandard.jsx b/src/layouts/SolutionStandard.jsx index c3ce72c30..8ae7e541e 100644 --- a/src/layouts/SolutionStandard.jsx +++ b/src/layouts/SolutionStandard.jsx @@ -1,34 +1,45 @@ import React, { useEffect, useContext } from 'react'; import { createUseStyles } from 'react-jss'; import { Breadcrumb, BreadcrumbItem, Row, Col } from 'design-react-kit'; -import content from '../../contents/come-funziona/soluzione-standard.yml'; +import content from '../../contents/iniziativa/soluzione-standard.yml'; import { SEO } from '../components/SEO'; import seo from '../../contents/seo.yml'; -import contentHowItWorks from '../../contents/come-funziona/come-funziona.yml'; import { GlobalStateContext } from '../context/globalContext'; -import { HeroImage } from '../components/hero/HeroImage'; +import { HeroSolutions } from '../components/hero/HeroSolutions'; import { TimelineVertical } from '../components/TimelineVertical'; -import { ProjectsCards } from '../components/ProjectsCards'; +import { HeroMode } from '../components/hero/HeroMode'; const { title: seoTitle, description: seoDescription } = seo.standardSolutionPage; const useStyles = createUseStyles({ breadcrumb: { - '@media (min-width: 991px)': { - marginLeft: '0.722rem', + padding: '1.563rem 0 0', + '& .breadcrumb': { + padding: '0.75rem 0', }, }, breadcrumbItem: { '& a': { color: '#5B6F82', - fontWeight: '700', + fontWeight: '600', textDecoration: 'underline', + fontSize: '18px', + }, + '&::before': { + fontWeight: '600', + color: '#33485C', }, }, breadcrumbItemActive: { '& a': { - color: '#5B6F82', + color: '#656566', textDecoration: 'none', + fontSize: '18px', + }, + '&::before': { + fontSize: '18px', + fontWeight: '600', + color: '#33485C', }, }, }); @@ -36,14 +47,13 @@ const useStyles = createUseStyles({ export const SolutionStandard = () => { const classes = useStyles(); - const { hero, verticalTimeline } = content; - const { projectsCardsItem } = contentHowItWorks; + const { hero, verticalTimeline, heroMode } = content; const [, dispatch] = useContext(GlobalStateContext); useEffect(() => { dispatch({ type: 'SET:ACTIVE_HEADER', - payload: { activeItem: 'come-funziona' }, + payload: { activeItem: 'iniziativa' }, }); return () => { dispatch({ type: 'SET:ACTIVE_HEADER' }); @@ -54,30 +64,46 @@ export const SolutionStandard = () => { <>

    {seoTitle}

    -
    + - - + ); }; diff --git a/src/layouts/SupportPage.jsx b/src/layouts/SupportPage.jsx index 3d6c08629..ae6b36ab5 100644 --- a/src/layouts/SupportPage.jsx +++ b/src/layouts/SupportPage.jsx @@ -25,7 +25,7 @@ export const SupportPage = () => {

    {content.name}

    - + diff --git a/src/layouts/UpdatesPage.jsx b/src/layouts/UpdatesPage.jsx new file mode 100644 index 000000000..b78c236a8 --- /dev/null +++ b/src/layouts/UpdatesPage.jsx @@ -0,0 +1,728 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +/* eslint-disable sonarjs/no-identical-functions */ +/* eslint-disable react/no-unescaped-entities */ +/* eslint-disable max-lines-per-function */ +/* eslint-disable sonarjs/cognitive-complexity */ +import React, { useState, useEffect } from 'react'; +import { useForm, Controller } from 'react-hook-form'; +import { createUseStyles } from 'react-jss'; +import { Row, Col, Button, Input } from 'design-react-kit'; +import Select from 'react-select'; +import { announce } from '@react-aria/live-announcer'; +import { graphql, useStaticQuery } from 'gatsby'; +import seo from '../../contents/seo.yml'; +import { SEO } from '../components/SEO'; +import content from '../../contents/opportunity-page/opportunity.yml'; +import links from '../../contents/links.yml'; +import notificationsLabel from '../../contents/notifications.yml'; +import { Breadcrumb } from '../components/Breadcrumb'; + +const { success: successLabels, error: errorLabels, errorAddress: errorAddressLabel } = notificationsLabel; +const { title: seoTitle, description: seoDescription } = seo.supportPage; +const { privacy } = links.internalLinks; + +const useStyles = createUseStyles({ + modalUpdatesContainer: { + '&.modal-dialog': { + maxWidth: '90%', + '@media (max-width: 991px)': { + maxWidth: '100%', + margin: '0', + }, + }, + '&.modal-dialog .modal-content .modal-header': { + padding: '0', + marginBottom: '0.444rem', + }, + '&.modal-dialog .modal-content .modal-body': { + padding: '0', + marginTop: '2.667rem', + }, + '& .modal-content': { + padding: '4.444rem 5.556rem', + '@media (max-width: 991px)': { + padding: '3.778rem 0.833rem 4.444rem', + }, + }, + '&.modal-dialog .modal-content .modal-header .modal-title': { + fontSize: '1.333rem', + fontWeight: '700', + color: '#33485C', + maxWidth: '70%', + '@media (max-width: 991px)': { + maxWidth: '100%', + }, + }, + }, + close: { + '@media (max-width: 991px)': { + position: 'absolute', + top: '0.556rem', + right: '-0.5rem', + }, + '&:focus': { + outline: '2px solid #ff9900', + boxShadow: 'none', + }, + '&.btn': { + background: 'none', + boxShadow: 'none', + }, + '&.btn:hover': { + background: 'none', + }, + '&.btn.btn-secondary:active': { + background: 'none', + boxShadow: 'none', + }, + '&.btn span': { + fontSize: '0.778rem', + color: '#0066CC', + fontWeight: '600', + marginRight: '1.333rem', + '@media (max-width: 991px)': { + fontSize: '0.875rem', + }, + }, + }, + formBody: { + padding: '0', + marginBottom: '50px', + '& p': { + fontSize: '0.889rem', + color: '#33485C', + fontWeight: '400', + }, + '& [class$="-control"]': { + border: 'none', + borderBottom: '2px solid #5c6f82', + borderRadius: '0', + boxShadow: 'none', + height: '45px', + }, + '& [class$="-ValueContainer"]': { + height: '45px', + paddingLeft: '1.333rem', + fontSize: '0.889rem', + color: '#808080', + }, + '& [class$="-Input"]': { + height: '45px', + margin: '2px 0', + }, + '& [class$="-placeholder"]': { + color: '#767676', + }, + '& [class$="-indicatorSeparator"]': { + display: 'none', + }, + '& [class$="-menu"]': { + margin: '0', + border: 'none', + boxShadow: '0px 0px 80px rgba(0, 43, 85, 0.1)', + borderTopLeftRadius: '0', + borderTopRightRadius: '0', + borderBottomLeftRadius: '4px', + borderBottomRightRadius: '4px', + }, + '& [class$="-MenuList"]': { + padding: '0', + + '& [class$="-option"]': { + fontSize: '0.889rem', + color: '#0066CC', + background: '#fff', + }, + }, + '& [class$="-indicatorContainer"] svg': { + fill: '#33485C', + }, + '& [class$="-singleValue"]': { + fontSize: '0.889rem', + fontWeight: '700', + color: '#000', + }, + '& .select.is-invalid [class$="-control"]': { + borderColor: '#F83E5A', + }, + '& .select.focused': { + borderColor: '#f90', + boxShadow: '0 0 0 2px #f90', + outline: '0', + }, + '& .css-1n7v3ny-option': { + textDecoration: 'underline', + }, + '& .form-check': { + borderBottom: '1px solid #e6e6e6', + padding: '1.111rem 0.444rem', + }, + '& .form-check .form-check-label': { + fontSize: '0.889rem', + fontWeight: '600', + color: '#17324D', + }, + '& .form-group': { + margin: '0', + }, + '& .form-group input[type="text"]': { + paddingLeft: '1.333rem', + fontSize: '0.889rem', + '&:focus': { + border: '2px solid #f90', + boxShadow: '0 0 0 2px #f90', + outline: '0', + }, + }, + '& .form-group input[type="text"].is-invalid': { + borderBottom: 'solid 2px #F83E5A', + }, + '& .invalid-feedback': { + color: '#F83E5A !important', + }, + }, + enteContainer: { + '&.hidden': { + display: 'none', + }, + }, + errorLabel: { + fontSize: '0.778rem', + color: '#F83E5A', + padding: '0 0.444rem', + fontWeight: '400', + }, + selectLabel: { + fontSize: '0.778rem', + fontWeight: '600', + color: '#33485C', + paddingLeft: '9px', + marginBottom: '0', + }, + notification: { + composes: 'notification with-icon dismissable', + zIndex: '9999', + display: 'block', + opacity: '0', + visibility: 'hidden', + transition: '.3s ease', + bottom: 'unset', + top: '16px', + left: '50%', + transform: 'translateX(-50%)', + '&.show': { + opacity: '1', + visibility: 'visible', + transition: '.3s ease', + }, + '&.with-icon.success': { + borderColor: '#00CF86', + }, + }, + formFooterLabel: { + composes: 'mb-3', + fontSize: '0.889rem', + }, + spinner: { + composes: 'spinner hidden ml-3', + maxHeight: '2.667rem', + '&.hidden': { + display: 'none', + }, + }, + titleUpdate: { + fontSize: '2.5rem', + fontWeight: '700', + color: '#33485C', + lineHeight: '48px', + marginBottom: '30px', + '@media (max-width: 991px)': { + fontSize: '2.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + subtitleUpdate: { + fontSize: '24px', + color: '#33485C', + lineHeight: '1.5', + '@media (max-width: 991px)': { + fontSize: '1.25rem', + }, + '@media (max-width: 767px)': { + textAlign: 'center', + }, + }, + submitContainer: { + marginBottom: '12.5rem', + '@media (max-width: 991px)': { + marginBottom: '6rem', + }, + }, + heroImg: { + '@media (max-width: 991px)': { + width: '80%', + }, + }, + mandatory: { + fontSize: '1rem', + marginTop: '6.25rem', + '@media (min-width: 991px)': { + marginTop: '6.25rem', + }, + }, +}); + +const query = graphql` + query { + site { + siteMetadata { + apiUrl + } + } + } +`; + +export const UpdatesPage = () => { + const [inasmuchValue, setInasmuchValue] = useState(false); + const [inputValue, setInputValue] = useState(''); + const [enteState, setEnteState] = useState(''); + const [formValidate, setFormValidate] = useState(false); + const publicAdministrationValue = 'public-administration'; + + const { + site: { + siteMetadata: { apiUrl }, + }, + } = useStaticQuery(query); + + const { + control, + handleSubmit, + formState: { errors }, + reset, + } = useForm(); + + const classes = useStyles(); + + const setListenersToSelectOptions = () => { + const representSelectOptions = document.querySelector('#represent-select'); + const config = { childList: true, subtree: true }; + const setObserver = (mutationsList) => { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + let value = representSelectOptions.querySelector('div[class*="singleValue"]'); + value ? (value = value.innerHTML) : (value = ''); + let valueSelected = selectRepresent.find((valueObj) => { + if (value === valueObj.label) { + return valueObj; + } + }); + valueSelected = valueSelected?.value; + setEnteState(valueSelected); + } + } + }; + const observer = new MutationObserver(setObserver); + observer.observe(representSelectOptions, config); + }; + + const setFocusStyleOnSelect = () => { + const selectInputArr = document.querySelectorAll('#updates-form .select input'); + selectInputArr.forEach((input) => { + const selectFocusHandler = () => { + const currentSelect = input.closest('.select'); + currentSelect.classList.add('focused'); + }; + const selectFocusOutHandler = () => { + const currentSelect = input.closest('.select'); + currentSelect.classList.remove('focused'); + }; + input.addEventListener('focus', selectFocusHandler); + input.addEventListener('focusout', selectFocusOutHandler); + }); + }; + + const onSubmit = async (data) => { + console.log(data); + Object.keys(data).map(function (key) { + if (data[key] === undefined) { + delete data[key]; + } + if (key === 'enteSelect' || key === 'representative' || key === 'messageSelect') { + data[key] = data[key]?.value; + } + }); + + const spinner = document.querySelector('.spinner'); + spinner.classList.remove('hidden'); + + const notificationElement = document.querySelector('.notification'); + const titleElement = notificationElement.querySelector('h5'); + const descriptionElement = notificationElement.querySelector('p'); + + const closeNotification = notificationElement.querySelector('.notification-close'); + + const closeNotificationHandler = (event) => { + event.target.closest('.notification').classList.remove('show'); + closeNotification.removeEventListener('click', closeNotificationHandler); + }; + closeNotification.addEventListener('click', closeNotificationHandler); + + fetch(`${apiUrl}/users`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }) + .then(async (response) => { + const data = await response.json(); + const status = response.status; + setTimeout(() => { + if (status >= 200 && status <= 299) { + notificationElement.classList.add('show'); + notificationElement.classList.add('success'); + + titleElement.innerHTML = `${successLabels.icon} ${successLabels.title}`; + descriptionElement.innerHTML = successLabels.description; + announce('Inviato con successo'); + reset(data); + setTimeout(() => { + notificationElement.classList.remove('show'); + }, 5000); + } else { + notificationElement.classList.add('show'); + notificationElement.classList.add('error'); + announce("Errore nell'invio"); + if (data.message.includes('already exists')) { + titleElement.innerHTML = `${errorLabels.icon} ${errorAddressLabel.title}`; + descriptionElement.innerHTML = errorAddressLabel.description; + } else { + titleElement.innerHTML = `${errorLabels.icon} ${errorLabels.title}`; + descriptionElement.innerHTML = errorLabels.description; + } + } + }, 500); + }) + .catch((error) => { + console.log(error); + }) + .then(() => { + spinner.classList.add('hidden'); + announce('Invio in corso'); + }); + }; + + const onError = async (data) => { + console.log('error', data); + }; + + useEffect(() => { + announce('Pagina caricata ' + content.name); + }, []); + + const inQuantoHandler = (e) => { + setInasmuchValue(e.value); + }; + + useEffect(() => { + const inputArr = document.querySelectorAll('#updates-form input[data-form="true"]'); + const visibleInputArr = Array.prototype.slice.call(inputArr).filter((input) => { + if (!input.closest('.hidden')) { + return input; + } + }); + const isValidateInput = visibleInputArr.every((input) => { + if (input.value !== '') { + return input; + } + }); + + const isValidateSelectFunc = (enteState, inasmuchValue) => { + if (enteState || inasmuchValue) { + const inasmuchSelect = document.querySelector('#enteSelect'); + const isInasmuchVisible = !inasmuchSelect.closest('.hidden'); + if (enteState === publicAdministrationValue && inasmuchValue) { + return true; + } + if (enteState !== publicAdministrationValue && !inasmuchValue) { + return true; + } + if (enteState !== publicAdministrationValue && inasmuchValue && !isInasmuchVisible) { + return true; + } + } + return false; + }; + const isValidateSelect = isValidateSelectFunc(enteState, inasmuchValue); + + if (isValidateInput && isValidateSelect) { + setFormValidate(true); + } else { + setFormValidate(false); + } + setListenersToSelectOptions(); + setFocusStyleOnSelect(); + }, [enteState, inasmuchValue, inputValue]); + + const onInputHandler = (e) => { + setInputValue(e.target.value); + }; + + const { + selectRepresent, + selectInQuanto, + mandatoryAdvise, + requiredLabel, + emailValidationLabel, + emailLabel, + representLabel, + selectPlaceholder, + enteValidationLabel, + enteTypeLabel, + enteNameLabel, + inQuantoLabel, + sendButtonLabel, + } = content.modal; + return ( + <> + + +
    +

    {content.name}

    +
    +
    +
    +
    +
    + + + +

    Ricevi aggiornamenti

    +
    + Ricevi materiali e informazioni sulle novità e gli avvisi di Italia digitale 2026. +
    + + + + +     +     + + +
    + +     + + + ( + <> + + + {errors.address && errors.address.message} + + + )} + /> + + + + ( + + + {errors.enteType && errors.enteType.message} + + + )} + /> + + +
    + + + ( + <> + + + {errors.ente && errors.ente.message} + + + )} + /> + + +
    + + + + ( +