site_logiciels/components/Layout/Prefooter.vue

<template>
  <footer ref="footerElement">
    <LayoutContainer>
      <div v-if="lgAndUp" class="activities">
        <v-row class="custom-row">
          <v-col cols="4" class="text-center">
            <a href="/opentalent_artist"> 
              <v-img
                class="logo logo-jaune"
                src="/images/logo/logiciels/Artist-noir.png"
              />
            </a>
            <small class="text-logo"
              >Orchestres, chorales, danse, théâtre, cirque</small
            >
          </v-col>
          <div class="vertical-bar" />
          <v-col cols="4" class="text-center">
            <a href="/opentalent_manager"> 
              <v-img
                class="logo logo-rouge"
                src="/images/logo/logiciels/Manager-noir.png"
              />
            </a>
            <small class="text-logo"
              >Fédérations, confédérations, collectivités</small
            >
          </v-col>
          <div class="vertical-bar" />
          <v-col cols="3" class="text-center">
            <a href="/opentalent_school"> 
              <v-img
                class="logo logo-bleu ml-12"
                src="/images/logo/logiciels/School-noir.png"
              />
            </a>
            <small class="text-logo "
              >Tous les établissements d'enseignement artistique</small
            >
          </v-col>
        </v-row>
      </div>
    </LayoutContainer>
  </footer>
</template>


<script setup>
import { useDisplay } from "vuetify";
import { ref, provide } from "vue";

const footerElement = ref(null);

provide("footerElement", footerElement);
const { smAndDown, lgAndUp } = useDisplay();
</script>

<style scoped>

.custom-row{
  width: 90%;
  margin-left: auto;
  margin-right: auto;

}
.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vertical-bar {
  height: 4rem;
  border: 0.1rem solid rgb(205, 205, 205);
  margin-top: 3rem;
}


.activities {
  height: 10rem;
  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
}


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



</style>