286 lines
6.2 KiB
Vue
286 lines
6.2 KiB
Vue
<script setup lang="ts">
|
|
import { useMembers } from "~/composables/useMembers";
|
|
|
|
const { sortedMembers } = useMembers();
|
|
|
|
const footerLinks = [
|
|
{ label: "Home", path: "/" },
|
|
{ label: "Esplora i dati", path: "/open-data" },
|
|
{ label: "Come funziona", path: "/info" },
|
|
];
|
|
|
|
const supportItems = [
|
|
{ label: "E-mail", value: "[email protected]", href: "mailto:[email protected]" },
|
|
{ label: "Telefono", value: "+39 080 468 2010", href: "tel:+390804682010" },
|
|
{ label: "Supporto", value: "Lun - Ven, 9:00 - 18:00" },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="it-footer">
|
|
<div class="it-footer-main">
|
|
<div class="container footer-main-content">
|
|
<section class="footer-brand-section">
|
|
<div class="it-brand-wrapper">
|
|
<NuxtLink to="/" data-focus-mouse="false" class="footer-brand-link">
|
|
<img alt="Logo Visione" class="footer-brand-logo" src="/logo-light.svg"/>
|
|
<div class="it-brand-text">
|
|
<h2>Visione</h2>
|
|
<h3>Un occhio per la sicurezza di Bari</h3>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="footer-content-section">
|
|
<div class="footer-support">
|
|
<h4>Assistenza per i cittadini</h4>
|
|
<ul class="footer-support-list">
|
|
<li v-for="item in supportItems" :key="item.label">
|
|
<span class="footer-support-label">{{ item.label }}:</span>
|
|
<a v-if="item.href" :href="item.href">{{ item.value }}</a>
|
|
<span v-else>{{ item.value }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="footer-members">
|
|
<div class="footer-members-grid">
|
|
<div
|
|
v-for="member in sortedMembers"
|
|
:key="member.name"
|
|
class="footer-member-card"
|
|
>
|
|
<img :src="member.image" :alt="member.name" class="footer-member-image">
|
|
<div class="footer-member-name">{{ member.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="it-footer-small-prints clearfix">
|
|
<div class="container">
|
|
<div class="footer-lower-bar">
|
|
<ul class="footer-primary-menu list-inline mb-0">
|
|
<li v-for="link in footerLinks" :key="link.path" class="list-inline-item">
|
|
<NuxtLink :to="link.path">{{ link.label }}</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
<ul class="it-footer-small-prints-list list-inline mb-0">
|
|
<li class="list-inline-item"><a href="/note-legali">Note legali</a></li>
|
|
<li class="list-inline-item"><a href="/privacy">Privacy policy</a></li>
|
|
<li class="list-inline-item"><a href="/sitemap.xml">Mappa del sito</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.footer-main-content {
|
|
padding-top: 2.5rem;
|
|
padding-bottom: 2.5rem;
|
|
}
|
|
|
|
.footer-brand-section {
|
|
padding-bottom: 1.75rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.28);
|
|
}
|
|
|
|
.footer-brand-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-brand-logo {
|
|
width: 52px;
|
|
height: 52px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.footer-brand-section .it-brand-text h2 {
|
|
margin-bottom: 0.25rem;
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.footer-brand-section .it-brand-text h3 {
|
|
margin-bottom: 0;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.footer-content-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.footer-support {
|
|
max-width: 30rem;
|
|
}
|
|
|
|
.footer-support h4 {
|
|
margin-bottom: 1.25rem;
|
|
font-size: 1.3rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-support-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.footer-support-label {
|
|
font-weight: 700;
|
|
margin-right: 0.35rem;
|
|
}
|
|
|
|
.footer-members {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.footer-members-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(110px, 140px));
|
|
gap: 1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.footer-member-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-member-image {
|
|
width: 100%;
|
|
max-width: 126px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
background: rgba(255, 255, 255, 0.16);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.footer-member-name {
|
|
font-size: 0.95rem;
|
|
line-height: 1.25;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footer-lower-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.footer-primary-menu,
|
|
.it-footer-small-prints-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem 1.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-primary-menu .list-inline-item,
|
|
.it-footer-small-prints-list .list-inline-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.footer-primary-menu a,
|
|
.it-footer-small-prints-list a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-primary-menu a:hover,
|
|
.footer-primary-menu a:focus,
|
|
.it-footer-small-prints-list a:hover,
|
|
.it-footer-small-prints-list a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.footer-content-section {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.footer-support {
|
|
max-width: none;
|
|
}
|
|
|
|
.footer-members {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.footer-lower-bar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.footer-main-content {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.footer-brand-link {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.footer-brand-section .it-brand-text h2 {
|
|
font-size: 1.45rem;
|
|
}
|
|
|
|
.footer-brand-section .it-brand-text h3 {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.footer-support h4 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.footer-support-list {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.footer-members-grid {
|
|
width: 100%;
|
|
grid-template-columns: repeat(2, minmax(110px, 1fr));
|
|
}
|
|
|
|
.footer-primary-menu,
|
|
.it-footer-small-prints-list {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 479.98px) {
|
|
.footer-members-grid {
|
|
grid-template-columns: 1fr;
|
|
max-width: 150px;
|
|
}
|
|
}
|
|
</style>
|