site_logiciels/components/Home/Solution.vue

<template>
  <v-container>
    <div class="container">
      <p class="text-center solution-subtitle">3 solutions</p>
      <h3 class="text-center title">
        Trouvez la solution <br />
        faite pour vous
      </h3>

      <v-row>
        <v-col cols="4">
          <small class="opentalent-small">Opentalent</small>
          <h2 class="logiciel-name">Artist</h2>
          <hr />
          <p class="description-logiciel">
            Orchestre, chorales, compagnies de danse, théâtre et cirque
          </p>

          <v-row>
            <v-img src="/images/solutions/artist.jpg" class="solution-img">
            </v-img>
          </v-row>

          <v-row>
            <v-col cols="6">
              <ul>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
              </ul>
            </v-col>

            <v-col cols="6">
              <ul>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
              </ul>
            </v-col>
          </v-row>
        </v-col>

        <v-col cols="4">
          <small class="opentalent-small">Opentalent</small>
          <h2 class="logiciel-name">Manager</h2>
          <hr />
          <p class="description-logiciel">
            Orchestre, chorales, compagnies de danse, théâtre et cirque
          </p>

          <v-row>
            <v-img src="/images/solutions/manager.png" class="solution-img">
            </v-img>
          </v-row>

          <v-row>
            <v-col cols="6">
              <ul>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
              </ul>
            </v-col>

            <v-col cols="6">
              <ul>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
              </ul>
            </v-col>
          </v-row>
        </v-col>

        <v-col cols="4">
          <small class="opentalent-small">Opentalent</small>
          <h2 class="logiciel-name">School</h2>
          <hr />
          <p class="description-logiciel">
            Orchestre, chorales, compagnies de danse, théâtre et cirque
          </p>

          <v-row>
            <v-img src="/images/solutions/artist.jpg" class="solution-img">
            </v-img>
          </v-row>

          <v-row>
            <v-col cols="6">
              <ul>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
              </ul>
            </v-col>

            <v-col cols="6">
              <ul>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
                <li>Gestion des membres</li>
              </ul>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </div>

    <div class="white-content"></div>
  </v-container>
</template>

<style scoped>
.white-content {
  background-color: white;
  height: 100px;
  opacity: 0.5;
}

.solution-img {
  width: 500px;
  height: 300px;
}

.description-logiciel {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;

  /* or 125% */

  /* Vert 5 */
  color: #eff9fb;
}

.logiciel-name {
  /* H2 Headline */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 34px;

  /* identical to box height, or 113% */

  /* Vert 20 */
  color: #c3e5e7;
}

.opentalent-small {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 15px;

  /* or 150% */
  letter-spacing: 0.18em;
  text-transform: uppercase;

  /* NEUTRAL - BLANC */
  color: #ffffff;
}
.title {
  /* H2 Headline */
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;

  /* or 100% */
  text-align: center;

  color: #ffffff;
}

.solution-subtitle {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 68px;
  color: #c1eff0;
}
.container {
  width: 1600px;
  background: #0e2d32;
}
</style>