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 <[email protected]>
This commit is contained in:
Copilot
@@ -0,0 +1,3 @@
|
||||
a {
|
||||
text-decoration: none!important;
|
||||
}
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user