site_logiciels/components/Layout/Footer/Solutions.vue

<template>
  <div id="solutions">
    <LayoutContainer>
      <v-row class="center-90">
        <v-col cols="12">
          <LayoutUISubTitle>
            NOS LOGICIELS OPENTALENT
          </LayoutUISubTitle>

          <LayoutUITitle>
            Ces solutions peuvent aussi vous intéresser
          </LayoutUITitle>
        </v-col>
      </v-row>

      <v-row
        v-if="showArtist"
        class="row-artist center-90"
      >
        <v-col cols="6" md="2">
          <NuxtLink to="/opentalent_artist">
            <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
          </NuxtLink>
        </v-col>

        <v-col cols="6" md="10">
          <!-- list v-chip-->
          <v-chip-group column disabled>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Orchestres</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Chorales</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Compagnies de danse</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Compagnies de théatre</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Compagnies de Cirque</span>
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>

      <v-row
        v-if="showManager"
        class="row-manager center-90"
      >
        <v-col cols="6" md="2">
          <NuxtLink to="/opentalent_manager">
          <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
        </NuxtLink>
        </v-col>

        <v-col cols="6" md="10">
          <!-- list v-chip-->
          <v-chip-group column disabled>
            <v-chip class="ma-2 chip-custom" color="primary" label>
              <span class="chip-detail">Fédérations</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" color="primary" label>
              <span class="chip-detail">Confédérations</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" color="primary" label>
              <span class="chip-detail">Collectivités</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" color="primary" label>
              <span class="chip-detail">Réseaux</span>
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>

      <v-row
        v-if="showSchool"
        class="row-school center-90"
      >
        <v-col cols="6" md="2">
          <NuxtLink to="/opentalent_school">
            <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
          </NuxtLink>
        </v-col>

        <v-col cols="6" md="10">
          <!-- list v-chip-->
          <v-chip-group column disabled>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Conservatoire</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Écoles d'art</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">École de musique</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">École de danse</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">École de théâtre</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">École de cirque</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">MJC</span>
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  showArtist: {
    type: Boolean,
    required: false,
    default: true
  },
  showSchool: {
    type: Boolean,
    required: false,
    default: true
  },
  showManager: {
    type: Boolean,
    required: false,
    default: true
  },
})
</script>

<style scoped lang="scss">
.chip-detail {
  color: var(--on-neutral-color);

  @media (max-width: 600px) {
    width: 100%;
    text-align: center;
  }
}

.chip-custom {
  opacity: 1;
  color: var(--on-primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 3rem;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 16px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.2em;

  @media (max-width: 600px) {
    font-size: 10px !important;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    :deep(.v-chip__content) {
      width: 100%;
    }
  }
}

.row-artist,
.row-school,
.row-manager {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top: 1px solid var(--on-primary-color-alt);
}

.solution-title {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: var(--on-neutral-color);
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.logo {
  width: 15rem;
  height: 10rem;
  margin-left: .5rem;
  margin-right: 2rem;
}
</style>