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/logos/opentalent/Logo_Opentalent_Artist-gris.png"
              alt="Logo Opentalent Artist - logiciel de gestion et de communication pour les orchestres, les chorales, les compagnies artistiques et troupes"
            />
          </nuxt-link>

          <small class="text-logo">
            Orchestres, chorales, compagnies et troupes
          </small>
        </v-col>

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

        <v-col cols="4" class="text-center">
          <nuxt-link to="/opentalent-school">
            <v-img
              src="/images/logos/opentalent/Logo_Opentalent_School-gris.png"
              alt="Logo Opentalent School - logiciel de gestion et de communication pour les établissements d’enseignement artistique "
            />
          </nuxt-link>

          <small class="text-logo">
            É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/logos/opentalent/Logo_Opentalent_Manager-gris.png"
              alt="Logo Opentalent Manager - logiciel de gestion et de communication pour les fédérations, les confédérations et les collectivités"
            />
          </nuxt-link>

          <small class="text-logo">
            Fédérations, confédérations et 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/logos/opentalent/Logo_Opentalent_Artist_Griffe.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/logos/opentalent/Logo_Opentalent_School_Griffe.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/logos/opentalent/Logo_Opentalent_Manager_Griffe.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>