site_logiciels/components/Logiciels/School/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-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>
  
    <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-custom"
          color="primary"
          label
          >
            <span class="chip-detail">Agenda</span>
          </v-chip>
          <v-chip
          class="ma-2 chip-custom"
          color="primary"
          label
          >
            <span class="chip-detail">Facturation</span>
          </v-chip>
          <v-chip
          class="ma-2 chip-custom"
          color="primary"
          label
          >
            <span class="chip-detail">Comptabilité</span>
          </v-chip>
          <v-chip
          class="ma-2 chip-custom"
          color="primary"
          label
          >
            <span class="chip-detail">Communication</span>
          </v-chip>
          <v-chip
          class="ma-2 chip-custom"
          color="primary"
          label
          >
            <span class="chip-detail">Site internet</span>
          </v-chip>
      </v-chip-group>
      </v-col>
  
    </v-row>
  </LayoutContainer>
  
  </template>
  
  <script setup>
  </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{
    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>