site_logiciels/components/Layout/UI/SolutionsFooter.vue

<template>
  <div id="solutions">
    <LayoutContainer>
      <v-row>
        <v-col cols="12">
          <h4 class="solution-title text-center">
            Ces solutions peuvent vous intéresser
          </h4>
        </v-col>
      </v-row>

      <v-row v-if="!hideArtistRow"  class="row-artist">
        <v-col cols="3">
          <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
        </v-col>

        <v-col cols="2">
          <h5 class="solution-name">Opentalent Artist</h5>
        </v-col>

        <v-col cols="7">
          <!-- list v-chip-->
          <v-chip-group active-class="primary--text" column>
            <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">Compagnie de Cirque</span>
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>

      <v-row v-if="!hideManagerRow" class="row-manager">
        <v-col cols="3">
          <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
        </v-col>

        <v-col cols="2">
          <h5 class="solution-name">Opentalent Manager</h5>
        </v-col>

        <v-col cols="7">
          <!-- list v-chip-->
          <v-chip-group active-class="primary--text" column>
            <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="!hideSchoolRow" class="row-school">
        <v-col cols="3">
          <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
        </v-col>

        <v-col cols="2">
          <h5 class="solution-name">Opentalent Artist</h5>
        </v-col>

        <v-col cols="7">
          <!-- list v-chip-->
          <v-chip-group active-class="primary--text" column>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Agenda</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Facturation</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Comptabilité</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Communication</span>
            </v-chip>
            <v-chip class="ma-2 chip-custom" label>
              <span class="chip-detail">Site internet</span>
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";

const route = useRoute();

// Check the URL and set variables to determine which rows to hide
const hideManagerRow = route.path.includes("opentalent_manager");
const hideArtistRow = route.path.includes("opentalent_artist");
const hideSchoolRow = route.path.includes("opentalent_school");
</script>

<style scoped>
.chip-detail {
  color: #000000;
}
.chip-custom {
  color: white;
  border: 1px solid #0e2d32;
  border-radius: 3rem;
  text-transform: uppercase;

  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;

  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.2em;
}

.row-artist,
.row-school,
.row-manager {
  border-top: 1px solid #d1cdc7;
  margin-left: 2rem;
  margin-right: 2rem;
}

.solution-name {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #0e2d32;
}

.row-artist, .row-school, .row-manager {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.solution-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #000000;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

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