site_logiciels/components/Formation/Solutions.vue

<template>
  <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 class="row-artist">
      <v-col cols="3">
        <v-img
          src="/images/opentalent_artist_black.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"
            label
          >
            <span>Agenda</span>
          </v-chip>
          <v-chip
            class="ma-2"
            label
          >
            <span>Facturation</span>
          </v-chip>
          <v-chip
            class="ma-2 chip"
            label
          >
            <span>Comptabilité</span>
          </v-chip>
          <v-chip
            class="ma-2 chip"
            label
          >
            <span>Communication</span>
          </v-chip>
          <v-chip
            class="ma-2 chip"
            label
          >
            <span>Site internet</span>
          </v-chip>
        </v-chip-group>
      </v-col>
    </v-row>

    <v-row class="row-artist">
      <v-col cols="3">
        <v-img
          src="/images/opentalent_manager_black.jpg"
          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"
            color="primary"
            label
          >
            <span>Agenda</span>
          </v-chip>
          <v-chip
            class="ma-2 chip"
            color="primary"
            label
          >
            <span>Facturation</span>
          </v-chip>
          <v-chip
            class="ma-2 chip"
            color="primary"
            label
          >
            <span>Comptabilité</span>
          </v-chip>
          <v-chip
            class="ma-2 chip"
            color="primary"
            label
          >
            <span>Communication</span>
          </v-chip>
          <v-chip
            class="ma-2 chip"
            color="primary"
            label
          >
            <span>Site internet</span>
          </v-chip>
        </v-chip-group>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup></script>

<style scoped>
.chip {
  /* position: inherit; */
  color: black;
  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;

  /* identical to box height, or 114% */
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.2em;
}

.row-artist {
  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 {
  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: 10rem;
  height: 10rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
</style>