From 6ffe30f6cc9f43fca3292b67d2b83b407829300c Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Thu, 18 Jun 2026 20:58:11 +0200
Subject: [PATCH] fix: type write of info page

---
 app/pages/info.vue | 166 ++++++++++++++++++++++++++++-----------------
 1 file changed, 102 insertions(+), 64 deletions(-)

diff --git a/app/pages/info.vue b/app/pages/info.vue
index b43d3ad..45b5528 100644
--- a/app/pages/info.vue
+++ b/app/pages/info.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { useMembers } from "~/composables/useMembers";
+
 useHead({
   title: 'Informazioni sul Progetto - Visione',
 })
+
+const { sortedMembers } = useMembers();
 </script>
 
 <template>
@@ -11,10 +15,10 @@ useHead({
         <div class="row">
           <div class="col-12 text-center">
             <div class="it-hero-text-wrapper p-4">
-              <h1 class="text-white font-weight-bold">Il Progetto Visione</h1>
+              <h1 class="text-white font-weight-bold">Il Progetto "Visione"</h1>
               <p class="text-white mt-3 lead font-weight-semibold">
-                La piattaforma digitale per la gestione intelligente delle segnalazioni urbane,
-                pensata per avvicinare cittadini e pubblica amministrazione.
+                La piattaforma digitale della Città Metropolitana di Bari per la partecipazione attiva,
+                la trasparenza e la gestione condivisa del territorio.
               </p>
             </div>
           </div>
@@ -25,16 +29,20 @@ useHead({
     <div class="container my-5 py-3">
       <div class="row">
         <div class="col-12 col-lg-8 offset-lg-2">
-          <h2 class="mb-4 font-weight-bold">Migliorare la qualità della vita in città</h2>
+          <h2 class="mb-4 font-weight-bold">Un nuovo dialogo tra Cittadini ed Ente</h2>
           <p class="lead text-muted">
-            Visione nasce dall'esigenza di fornire alle amministrazioni comunali uno strumento moderno per mappare,
-            gestire e risolvere disservizi presenti sul territorio (buche stradali, illuminazione guasta, rifiuti
-            abbandonati).
+            Il progetto nasce dall'esigenza di digitalizzare e ottimizzare i flussi di comunicazione tra la cittadinanza
+            e la Pubblica Amministrazione. Sostituisce i tradizionali canali non tracciabili con un unico punto di
+            accesso telematico.
           </p>
           <p>
-            Il sistema non si limita a raccogliere dati, ma automatizza l'assegnazione alle squadre operative competenti
-            tramite logiche geospaziali, traccia l'intero ciclo di vita della segnalazione e restituisce trasparenza ai
-            cittadini tramite un portale Open Data dedicato.
+            L'adozione della piattaforma persegue un triplice obiettivo strategico: ridurre drasticamente i tempi di
+            risposta
+            dell'Ente nella risoluzione dei disservizi (quali buche stradali, illuminazione guasta o degrado urbano),
+            responsabilizzare la <strong>cittadinanza attiva</strong> tramite meccanismi di partecipazione diretta e
+            fornire
+            agli organi competenti un quadro analitico costantemente aggiornato e geolocalizzato delle criticità del
+            territorio.
           </p>
         </div>
       </div>
@@ -42,7 +50,7 @@ useHead({
 
     <div class="bg-light py-5">
       <div class="container">
-        <h2 class="text-center mb-5 font-weight-bold">Come funziona il sistema</h2>
+        <h2 class="text-center mb-5 font-weight-bold">Come si articola l'ecosistema digitale</h2>
         <div class="row">
 
           <div class="col-12 col-md-4 mb-4">
@@ -50,14 +58,17 @@ useHead({
               <div class="card card-bg h-100">
                 <div class="card-body">
                   <BIIcon class="mb-3" color="primary" name="it-user" size="xl"/>
-                  <h3 class="card-title h5 font-weight-bold">Cittadini</h3>
+                  <h3 class="card-title h5 font-weight-bold">I Cittadini</h3>
                   <p class="card-text text-muted">
-                    Tramite autenticazione sicura (OTP via email o CIE), i cittadini possono inviare segnalazioni
-                    geolocalizzate complete di foto.
+                    L'accesso è garantito attraverso l'autocompletamento anagrafico e il supporto ai sistemi di identità
+                    digitale
+                    nazionali (<strong>CIE</strong>).
                     <br><br>
-                    Per incentivare la partecipazione, è integrato un sistema di <strong>gamification</strong>: ogni
-                    segnalazione valida e risolta fa guadagnare Punti Cittadino, premiando la cittadinanza attiva.
-                    Possono inoltre chattare con gli operatori e lasciare un feedback finale.
+                    Il cittadino può compilare form guidati inserendo descrizioni, documentazione fotografica e
+                    posizione esatta (GPS).
+                    Per incentivare la partecipazione, è previsto il conferimento di "<strong>Punti di Cittadinanza
+                    Attiva</strong>"
+                    per ogni segnalazione validata e risolta dall'Ente.
                   </p>
                 </div>
               </div>
@@ -69,13 +80,15 @@ useHead({
               <div class="card card-bg h-100">
                 <div class="card-body">
                   <BIIcon class="mb-3" color="primary" name="it-tool" size="xl"/>
-                  <h3 class="card-title h5 font-weight-bold">Operatori e Squadre</h3>
+                  <h3 class="card-title h5 font-weight-bold">Squadre Operative</h3>
                   <p class="card-text text-muted">
-                    Il personale comunale visualizza una dashboard con le segnalazioni in ingresso. Possono prenderle in
-                    carico, comunicare con l'utente e assegnarle alle squadre di intervento sul territorio.
+                    Gli operatori tecnici e logistici dell'Ente prendono in carico la segnalazione per l'immediata
+                    istruttoria.
                     <br><br>
-                    Il sistema gestisce l'intero flusso di stato: da <em>Aperta</em> a <em>In Revisione</em>, fino a
-                    <em>In Lavorazione</em> e <em>Risolta</em>.
+                    La piattaforma provvede a instradare automaticamente l'intervento alla squadra specializzata di
+                    turno in base alla
+                    categoria del problema e all'area geografica, garantendo un canale diretto per le comunicazioni di
+                    servizio e aggiornando in tempo reale lo stato dei lavori.
                   </p>
                 </div>
               </div>
@@ -87,14 +100,15 @@ useHead({
               <div class="card card-bg h-100">
                 <div class="card-body">
                   <BIIcon class="mb-3" color="primary" name="it-settings" size="xl"/>
-                  <h3 class="card-title h5 font-weight-bold">Amministrazione</h3>
+                  <h3 class="card-title h5 font-weight-bold">L'Amministrazione</h3>
                   <p class="card-text text-muted">
-                    Gli amministratori hanno il controllo completo della piattaforma. Possono definire le aree urbane
-                    tramite poligoni GeoJSON, gestire i permessi degli utenti, supervisionare i feedback e moderare
-                    eventuali abusi.
+                    Gli amministratori dispongono del controllo completo sulle operazioni, con privilegi di gestione dei
+                    profili e assegnazione delle nomine agli operatori.
                     <br><br>
-                    Hanno inoltre accesso a statistiche avanzate per individuare le criticità sul territorio e
-                    monitorare i tempi medi di risoluzione.
+                    L'Ente utilizza funzioni di ricerca avanzata e filtraggio per area geografica per prevenire le
+                    duplicazioni
+                    e si avvale di strumenti analitici per il monitoraggio continuo dei tempi medi di risoluzione e
+                    dell'efficienza dei servizi.
                   </p>
                 </div>
               </div>
@@ -107,38 +121,50 @@ useHead({
 
     <div class="container my-5 py-4">
       <div class="row align-items-center">
-        <div class="col-12 col-lg-6 mb-4 mb-lg-0">
-          <h2 class="font-weight-bold mb-4">Tecnologia e Indipendenza</h2>
+        <div class="col-12 col-lg-7 mb-4 mb-lg-0">
+          <h2 class="font-weight-bold mb-4">Sicurezza, Centralità e Conformità</h2>
+          <p class="mb-4">Per soddisfare gli elevati standard richiesti da un Ente Pubblico, il sistema adotta precise
+            scelte organizzative e architetturali:</p>
           <ul class="it-list">
-            <li>
-              <BIIcon class="me-2" color="primary" name="it-code-circle"/>
-              <strong>Architettura:</strong> Frontend reattivo e multipiattaforma sviluppato in <em>Vue.js/Nuxt 3</em>.
-              Backend ad altissime prestazioni scritto in <em>C++</em> utilizzando il framework <em>Drogon</em>.
+            <li class="d-flex align-items-start mb-3">
+              <BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-pa"/>
+              <div>
+                <strong>Modello Centralizzato:</strong> Tutta la gestione logica e la persistenza dei dati risiedono
+                lato server, garantendo tracciabilità totale dei passaggi di stato e convalida rigorosa dei permessi
+                utente.
+              </div>
             </li>
-            <li class="mt-3">
-              <BIIcon class="me-2" color="primary" name="it-lock"/>
-              <strong>Sicurezza:</strong> Accesso con OTP e sistema di autorizzazione Role-Based basato su token JWT.
+            <li class="d-flex align-items-start mb-3">
+              <BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-lock"/>
+              <div>
+                <strong>Sicurezza e Privacy:</strong> Tutte le comunicazioni sono interamente cifrate (tramite rigidi
+                protocolli crittografici) per garantire la massima conformità alle normative sulla protezione dei dati
+                personali.
+              </div>
             </li>
-            <li class="mt-3">
-              <BIIcon class="me-2" color="primary" name="it-piu"/>
-              <strong>Open Data:</strong> Piena aderenza alle linee guida AGID sulla trasparenza, con esportazione di
-              dati anonimizzati accessibili al pubblico.
+            <li class="d-flex align-items-start mb-3">
+              <BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-mail"/>
+              <div>
+                <strong>Accesso Operatori:</strong> Il personale tecnico comunale accede al sistema tramite un approccio
+                sicuro basato su One-Time Password (OTP) inviata sull'e-mail aziendale.
+              </div>
             </li>
           </ul>
         </div>
-        <div class="col-12 col-lg-5 offset-lg-1">
-          <div class="callout callout-highlight callout-warning">
+
+        <div class="col-12 col-lg-4 offset-lg-1">
+          <div class="callout callout-highlight callout-note">
             <div class="callout-title">
-              <BIIcon name="it-warning-circle"/>
-              Un approccio etico al codice sorgente
+              <BIIcon name="it-info-circle"/>
+              Customer Satisfaction Integrata
             </div>
             <p>
-              In risposta alle policy sempre più aggressive delle grandi piattaforme commerciali riguardo
-              l'addestramento non consensuale di modelli di Intelligenza Artificiale sui repository privati, lo sviluppo
-              di questo progetto è ospitato su un'istanza <strong>self-hosted di Gitea</strong>.
+              La piattaforma non si esaurisce con l'intervento tecnico, ma chiude il ciclo con un modulo dedicato alla
+              <strong>Valutazione della Qualità</strong>.
               <br><br>
-              Una scelta di principio per garantire il controllo totale, la privacy e la vera sovranità sui dati e sul
-              codice.
+              A risoluzione avvenuta, il cittadino viene invitato a esprimere un riscontro sulla tempestività e
+              sull'efficacia
+              del lavoro svolto, assicurando all'amministrazione un controllo qualità costante.
             </p>
           </div>
         </div>
@@ -150,24 +176,32 @@ useHead({
         <div class="card card-bg border-start border-primary border-5">
           <div class="card-body">
             <div class="row align-items-center">
-              <div class="col-12 col-md-8">
-                <h4 class="h5 font-weight-bold text-primary mb-2">Crediti Accademici</h4>
+              <div class="col-12 col-md-6 mb-4 mb-md-0">
+                <h4 class="h5 font-weight-bold text-primary mb-2">Il Team di Sviluppo</h4>
                 <p class="mb-1">
-                  Questo progetto è stato realizzato nell'ambito del corso di <strong>Laboratorio di
-                  Programmazione</strong> (tenuto dal Prof. Vessio).
-                </p>
-                <p class="text-muted small mb-0">
-                  Università degli Studi di Bari "Aldo Moro" - Dipartimento di Informatica.
+                  Questo portale è stato ideato e sviluppato per facilitare il percorso di transizione digitale
+                  e modernizzare l'infrastruttura telematica a disposizione della cittadinanza.
                 </p>
               </div>
-              <div class="col-12 col-md-4 mt-3 mt-md-0 text-md-end">
-                <p class="font-weight-bold mb-1">Sviluppato da:</p>
-                <ul class="list-unstyled mb-0">
-                  <li>Renato Loiacono</li>
-                  <li>Michelangelo Parisi</li>
-                  <li>Gabriele Schiraldi</li>
-                </ul>
+              <div class="col-12 col-md-6">
+                <div class="d-flex flex-wrap justify-content-md-end justify-content-center gap-4">
+                  <div
+                      v-for="member in sortedMembers"
+                      :key="member.name"
+                      class="d-flex flex-column align-items-center text-center"
+                      style="max-width: 90px;"
+                  >
+                    <img
+                        :alt="member.name"
+                        :src="member.image"
+                        class="rounded-circle mb-2 shadow-sm"
+                        style="width: 72px; height: 72px; object-fit: cover; border: 2px solid #0066cc;"
+                    >
+                    <span class="font-weight-bold small" style="line-height: 1.2;">{{ member.name }}</span>
+                  </div>
+                </div>
               </div>
+
             </div>
           </div>
         </div>
@@ -182,4 +216,8 @@ useHead({
   list-style-type: none;
   padding-left: 0;
 }
+
+h2 {
+  text-align: center;
+}
 </style>