wondif_vue/app/components/Footer.vue

<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>