feat: improved footer design
This commit is contained in:
gabdevele
+257
-29
@@ -1,43 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import MemberDot from "~/components/MemberDot.vue";
|
||||
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">
|
||||
<section>
|
||||
<div class="row clearfix">
|
||||
<div class="col-sm-12">
|
||||
<div class="it-brand-wrapper">
|
||||
<a href="#" data-focus-mouse="false" class="d-flex align-items-center">
|
||||
<img alt="Logo Visione" src="/logo-light.svg" style="width: 42px; height: 42px; margin-right: 12px;"/>
|
||||
|
||||
<div class="it-brand-text">
|
||||
<h2>Visione</h2>
|
||||
<h3 class="d-none d-md-block">Segnalazioni anonime e sicure</h3>
|
||||
</div>
|
||||
</a>
|
||||
<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>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-4 border-white border-top">
|
||||
<div class="row">
|
||||
<div class="col-12 pb-2">
|
||||
<div class="pb-2">
|
||||
<h4>Progetto di</h4>
|
||||
<div class="members-list d-flex justify-content-center align-items-center gap-5 flex-wrap w-100">
|
||||
<MemberDot
|
||||
v-for="member in sortedMembers"
|
||||
:key="member.name"
|
||||
:name="member.name"
|
||||
:image="member.image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@@ -46,12 +61,225 @@ const { sortedMembers } = useMembers();
|
||||
</div>
|
||||
<div class="it-footer-small-prints clearfix">
|
||||
<div class="container">
|
||||
<ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
|
||||
<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>
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Reference in New Issue
Block a user