site_logiciels/components/Logiciels/Manager/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-img>
    </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-img>
    </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>