From f02abee09b51ba2958ce97a3446280d59102973d Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Sun, 7 Jun 2026 20:02:08 +0200
Subject: [PATCH] feat: add homepage and custom styles

- Create home page with hero section and feature overview
- Display open data reports statistics
- Add custom CSS for Bootstrap Italia integration

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/assets/css/style.css |   3 +
 app/pages/index.vue      | 158 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 161 insertions(+)
 create mode 100644 app/assets/css/style.css
 create mode 100644 app/pages/index.vue

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
new file mode 100644
index 0000000..bf1593f
--- /dev/null
+++ b/app/assets/css/style.css
@@ -0,0 +1,3 @@
+a {
+    text-decoration: none!important;
+}
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
new file mode 100644
index 0000000..3c28ff9
--- /dev/null
+++ b/app/pages/index.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+const { getOpenDataReports } = usePublic()
+
+const stats = {
+  total_reports: 14523,
+  resolved_reports: 13890,
+  avg_resolution_time: 24
+}
+
+const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
+    getOpenDataReports({ page: 1, per_page: 3 })
+)
+</script>
+
+<template>
+  <div>
+    <div class="it-hero-wrapper bg-light">
+      <div class="container">
+        <div class="row">
+          <div class="col-12 col-lg-8 offset-lg-2 text-center">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="no_toc font-weight-bold text-dark">Miglioriamo insieme la città</h1>
+              <p class="d-none d-lg-block mt-3 mb-4 text-secondary">
+                Il portale ufficiale nazionale per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
+                e monitora l'intervento in totale trasparenza.
+              </p>
+              <div class="it-btn-container d-flex justify-content-center gap-3">
+                <NuxtLink class="btn btn-primary" to="/auth/login">
+                  Fai una segnalazione
+                </NuxtLink>
+                <NuxtLink class="btn btn-outline-primary" to="/open-data">
+                  Esplora i dati
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container my-5 py-5">
+      <h2 class="text-center mb-5 font-weight-bold">Come funziona</h2>
+      <div class="row text-center">
+        <div class="col-12 col-md-4 mb-4">
+          <svg class="icon icon-xl icon-primary mb-3">
+            <use href="#it-camera"></use>
+          </svg>
+          <h3 class="h5 font-weight-semibold">1. Segnala</h3>
+          <p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
+            esatta.</p>
+        </div>
+        <div class="col-12 col-md-4 mb-4">
+          <svg class="icon icon-xl icon-primary mb-3">
+            <use href="#it-tool"></use>
+          </svg>
+          <h3 class="h5 font-weight-semibold">2. Intervento</h3>
+          <p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
+        </div>
+        <div class="col-12 col-md-4 mb-4">
+          <svg class="icon icon-xl icon-primary mb-3">
+            <use href="#it-star-outline"></use>
+          </svg>
+          <h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
+          <p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-light py-5 border-top border-bottom">
+      <div class="container my-4">
+        <h2 class="text-center mb-5 font-weight-bold">I numeri del nostro Comune</h2>
+        <div class="row text-center">
+          <div class="col-12 col-md-4 mb-4 mb-md-0">
+            <div class="display-1 font-weight-bold text-primary">{{ stats.total_reports.toLocaleString('it-IT') }}</div>
+            <p class="text-muted text-uppercase fw-bold mt-2">Segnalazioni Ricevute</p>
+          </div>
+          <div class="col-12 col-md-4 mb-4 mb-md-0">
+            <div class="display-1 font-weight-bold text-success">{{
+                stats.resolved_reports.toLocaleString('it-IT')
+              }}
+            </div>
+            <p class="text-muted text-uppercase fw-bold mt-2">Interventi Risolti</p>
+          </div>
+          <div class="col-12 col-md-4">
+            <div class="display-1 font-weight-bold text-info">{{ stats.avg_resolution_time }}h</div>
+            <p class="text-muted text-uppercase fw-bold mt-2">Tempo medio di risoluzione</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container my-5 py-5">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2 class="font-weight-bold">Ultimi interventi risolti</h2>
+        <NuxtLink to="/open-data" class="read-more">
+          <span class="text">Vedi tutti</span>
+          <svg class="icon">
+            <use href="#it-arrow-right"></use>
+          </svg>
+        </NuxtLink>
+      </div>
+
+      <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
+        <div class="col-12 col-md-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
+          <div class="card-wrapper card-space">
+            <div class="card card-bg card-big">
+              <div class="card-body">
+                <div class="category-top">
+                  <svg class="icon icon-sm text-success">
+                    <use href="#it-check-circle"></use>
+                  </svg>
+                  <span class="category text-success font-weight-semibold">Risolto</span>
+                </div>
+                <h3 class="card-title h5 mt-2">{{ report.category_name }}</h3>
+
+                <p class="card-text text-muted">
+                  <svg class="icon icon-xs me-1">
+                    <use href="#it-map-marker-circle"></use>
+                  </svg>
+                  {{ report.area_name || 'Area comunale' }}
+                </p>
+
+                <div class="it-card-footer mt-4">
+                  <span class="card-signature">
+                    Aggiornato il {{ new Date(report.updated_at).toLocaleDateString('it-IT') }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="alert alert-info text-center" role="alert">
+        I dati sugli ultimi interventi sono in fase di elaborazione.
+      </div>
+    </div>
+    
+    <div class="container my-5 pb-5">
+      <div class="callout callout-highlight callout-primary">
+        <div class="callout-title">
+          <svg class="icon">
+            <use href="#it-info-circle"></use>
+          </svg>
+          Partecipa alla cura della tua città
+        </div>
+        <p>
+          La piattaforma è aperta a tutti i cittadini residenti. Registrandoti, non solo potrai segnalare i problemi del
+          tuo quartiere, ma accumulerai <strong>Punti Cittadino</strong> per ogni intervento risolto, sbloccando
+          riconoscimenti speciali.
+        </p>
+        <NuxtLink to="/auth/register" class="btn btn-primary mt-3">
+          Crea il tuo profilo
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file