site_logiciels/components/Layout/Footer/Prefooter.vue

<!--
Première section du footer (galerie des logiciels)
-->

<template>
  <footer>
    <!-- Ecrans larges -->
    <LayoutContainer v-if="lgAndUp">
      <v-row>
        <v-col cols="4" class="text-center">
          <nuxt-link to="/opentalent_artist">
            <v-img src="/images/logo/logiciels/Artist-noir.png"/>
          </nuxt-link>

          <small class="text-logo">
            Orchestres, chorales, danse, théâtre, cirque
          </small>
        </v-col>

        <v-divider :vertical="true" />

        <v-col cols="4" class="text-center">
          <nuxt-link to="/opentalent_school">
            <v-img src="/images/logo/logiciels/School-noir.png"/>
          </nuxt-link>

          <small class="text-logo">
            Tous les établissements d'enseignement artistique
          </small>
        </v-col>

        <v-divider :vertical="true" />

        <v-col cols="3" class="text-center">
          <nuxt-link to="/opentalent_manager">
            <v-img src="/images/logo/logiciels/Manager-noir.png"/>
          </nuxt-link>

          <small class="text-logo">
            Fédérations, confédérations, collectivités
          </small>
        </v-col>
      </v-row>
    </LayoutContainer>

    <!-- Petits écrans -->
    <LayoutContainer v-else>
      <v-row class="justify-center">
        <v-col cols="3" class="border-right">
          <nuxt-link to="/opentalent_artist">
            <v-img src="/images/logo/logiciels/&_Jaune.png"/>
          </nuxt-link>
        </v-col>

        <v-col cols="1">
          <v-divider :vertical="true" />
        </v-col>

        <v-col cols="3">
          <nuxt-link to="/opentalent_school">
            <v-img src="/images/logo/logiciels/&_Bleu.png"/>
          </nuxt-link>
        </v-col>

        <v-col cols="1">
          <v-divider :vertical="true" />
        </v-col>

        <v-col cols="3">
          <nuxt-link to="/opentalent_manager">
            <v-img src="/images/logo/logiciels/&_Rouge.png"/>
          </nuxt-link>
        </v-col>
      </v-row>
    </LayoutContainer>
  </footer>
</template>

<script setup lang="ts">
import { useDisplay } from "vuetify";

const { lgAndUp } = useDisplay()
</script>

<style scoped lang="scss">
.container {
  height: 172px;
  width: 90%;
  margin: 0 auto;
  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
}

.v-img {
  margin-top: 2rem;
  height: 70px;
}

.v-divider {
  height: 4rem;
  border: 0.1rem solid rgb(205, 205, 205);
  margin-top: 3rem;
  opacity: 80%;
}
</style>