gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
app/components/Footer.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<NewsletterCta />
<PageSection tone="brand" :padded="false" content-size="default" padt="sm" padb="sm" class="footer">
<div class="footer--inner">
<SectionContent pad="xs" class="footer--logo">
<NuxtImg :src="logoDefault" :alt="brand.logoAlt" class="logo-img" />
</SectionContent>
<SectionContent pad="xs">
<div class="footer--grid">
<div class="footer--grid--orchestre">
<div class="nav--item">L'équipe</div>
<div class="nav--item">Nous contacter</div>
</div>
<div class="footer--grid--nav1">
<div class="nav--title">Nous soutenir</div>
<div class="nav--item">Mécénat</div>
<div class="nav--item">XXXX</div>
</div>
<div class="footer--grid--nav2">
<div class="nav--title">Rejoignez-nous</div>
<div class="nav--item">Recrutement</div>
<div class="nav--item">Académie d'Orchestre</div>
</div>
<div class="footer--grid--social">
<div class="nav--title">Nos réseaux</div>
<div class="nav--item nav--social">
<a class="social" href="...">
<NuxtImg :src="logoInstagram" alt="logo Instagram" height="37" width="37" class="social__icon" />
<span class="social__label">Instagram</span>
</a>
<a class="social" href="...">
<NuxtImg :src="logoyt" alt="logo You Tube" height="28" width="37" class="social__icon" />
<span class="social__label">YouTube</span>
</a>
<a class="social" href="...">
<NuxtImg :src="logofacebook" alt="logo Facebook" height="37" width="35" class="social__icon" />
<span class="social__label">Facebook</span>
</a>
<a class="social" href="...">
<NuxtImg :src="logolinkedin" alt="logo LinkedIn" height="37" width="37" class="social__icon" />
<span class="social__label">LinkedIn</span>
</a>
</div>
</div>
</div>
</SectionContent pad="xs">
</div>
</PageSection>
<PageSection :padded="false" content-size="default" padt="sm" padb="sm">
<SectionContent>
<div class="footer_logos">
<div><img class="footer_logos--img" :src="logoPrefet" height="80" alt="logo Préfet de la région d'Île-de-France" /></div>
<div><img class="footer_logos--img" :src="logoIdf" height="80" alt="logo Région Île-de-France" /></div>
<div><img class="footer_logos--img" :src="logoParis" height="80" alt="logo Région Paris" /></div>
</div>
</SectionContent>
</PageSection>
<PageSection :padded="false" content-size="default" padt="sm" padb="sm">
<SectionContent>
<div class="footer_mentions">
<div class="footer_mentions--item">© Orchestre national d’Île-de-France - 2026</div>
<div class="footer_mentions--item">Conditions générales de vente</div>
<div class="footer_mentions--item">Mentions légales</div>
</div>
</SectionContent>
</PageSection>
</template>
<script setup>
import logoDefault from '/img/logos/logo_orchestre_red.svg'
import logoInstagram from '/img/icones/instagram_gradient.svg'
import logoyt from '/img/icones/youtube_play_rouge.svg'
import logofacebook from '/img/icones/facebook_rond_bleu.svg'
import logolinkedin from '/img/icones/linkedin_bleu.png'
import logoPrefet from '@/assets/img/logos/logo_pref_idf.webp'
import logoIdf from '@/assets/img/logos/logo_region_idf.webp'
import logoParis from '@/assets/img/logos/logo_region_paris.webp'
const { brand } = useAppConfig()
</script>
<style lang="scss">
.footer {
color: var(--c-text-invert);
font-family: var(--font-roboto);
font-weight: var(--fw-extralight);
&--logo {
max-width: 250px;
img {
filter: invert(100%) sepia(96%) saturate(18%) hue-rotate(237deg) brightness(127%) contrast(105%);
}
}
&--grid {
display: grid;
@media (max-width: 400px) {
grid-template-columns: 1fr;
row-gap: 20px;
}
@media (min-width: 400px) {
grid-template-columns: 1fr 1fr;
column-gap: 30px;
row-gap: 40px;
}
@media (min-width: 900px) {
grid-template-columns: 1.2fr 1fr 1fr 1fr;
column-gap: 50px;
row-gap: 50px;
}
align-items: start;
margin-top: 20px;
}
.nav {
&--title {
padding-bottom: 12px;
font-weight: var(--fw-black);
}
&--item {
padding-bottom: 6px;
}
&--social {
display: grid;
grid-template-columns: max-content max-content;
column-gap: 5px;
row-gap: 6px;
align-items: center;
.social {
display: contents;
&__icon {
display: block;
padding: 4px;
border-radius: 5px;
background-color: rgb(255 255 255 / 83%);
}
}
}
}
}
.footer_logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 15px;
row-gap: 20px;
&--img {
object-fit: contain;
max-height: 70px;
@media (max-width: 300px) {
max-width: 210px;
}
@media (min-width: 300px) {
max-width: 290px;
}
@media (min-width: 400px) {
max-width: 390px;
}
@media (min-width: 900px) {
max-width: 390px;
}
}
}
.footer_mentions {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 15px;
row-gap: 12px;
font-family: var(--font-roboto);
font-weight: var(--fw-medium);
font-size: 12px;
}
</style>