site_logiciels/components/Layout/Prefooter.vue

<template>
  <footer ref="footerElement">
    <LayoutContainer>
      <div v-if="lgAndUp" class="activities">
        <v-row>
          <v-col cols="4" class="text-center">
            <a href="/opentalent_artist"> 
              <v-img
                class="logo logo-jaune"
                src="/images/logo/logiciels/Artist-Blanc.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-Blanc.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-Blanc.png"
              />
            </a>
            <small class="text-logo ml-12"
              >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>
.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vertical-bar {
  height: 4rem;
  border: 0.1rem solid #ecfbfc;
  margin-top: 3rem;
}

.container {
  background: #091d20;
  color: aliceblue;
}

.activities {
  height: 12rem;
  background: #091d20;
  border-bottom: 0.4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.07);
}


.logo {
  margin-top: 2rem;
  width: 40.5rem;
  height: 77px;
}



</style>