site_logiciels/components/Home/Solution.vue

<!--
Section "Solutions" de la page d'accueil
-->

<template>
  <LayoutContainer>
    <LayoutUISectionTitle class="alt-theme">
      3 solutions
    </LayoutUISectionTitle>

    <h4 class="text-center" >
      Trouvez la solution faites pour vous
    </h4>

    <v-row class="solutions center-90">
      <v-col
        v-for="(solution, index) in solutions"
        :key="index"
        cols="12"
        lg="4"
      >
        <v-container>
          <div class="d-flex justify-center align-left flex-column">
            <small>
              Opentalent
            </small>

            <h2>
              {{ solution.name }}
            </h2>

            <v-divider thickness="2"/>

            <p>
              {{ solution.description }}
            </p>

            <nuxt-link :to="solution.link">
              <v-row>
                <div :class="['image-container', solution.class]" >
                  <v-img :src="solution.image" />
                  <v-btn v-if="xlAndUp">Découvrir</v-btn>
                </div>
              </v-row>
            </nuxt-link>

            <v-row class="details">
              <v-col cols="12" sm="6">
                <ul>
                  <li
                    v-for="(sol, i) in solution.solutions.slice(0, 4)"
                    :key="i"
                  >
                    {{ sol }}
                  </li>
                </ul>
              </v-col>

              <v-col cols="12" sm="6">
                <ul>
                  <li
                    v-for="(sol, i) in solution.solutions.slice(4)"
                    :key="i"
                  >
                    {{ sol }}
                  </li>
                </ul>
              </v-col>
            </v-row>

            <v-row v-if="lgAndDown">
              <v-btn :to="solution.link">Découvrir</v-btn>
            </v-row>
          </div>
        </v-container>
      </v-col>
    </v-row>

    <v-container class="footer">
      <v-row >
        <v-col cols="12">
          <p>* en option</p>
        </v-col>
      </v-row>
    </v-container>
  </LayoutContainer>
</template>

<script setup lang="ts">

import type { SolutionItem } from "~/types/interface";
import { useDisplay } from "vuetify";

const { xlAndUp, lgAndDown } = useDisplay()

const solutions: Array<SolutionItem> = [
  {
    name: "Artist",
    description: "Orchestres, chorales, compagnies et troupes artistiques",
    image: "/images/logos/Logo_Opentalent_Artist-blanc.png",
    alt: "Partition tenue par une femme dans une chorale",
    link: "/opentalent_artist",
    class: "artist-image",
    solutions: [
      "Gestion des membres",
      "Agenda de la structure",
      "Matériel & médiathèque",
      "Export de données",
      "Communication",
      "Statistiques",
      "Site internet intégré",
      "Partage de données en réseau",
    ],
  },
  {
    name: "School",
    description: "Petits et grands établissements d'enseignement artistique",
    image: "/images/logos/Logo_Opentalent_School-blanc",
    alt: "Deux jeunes filles jouant du violon",
    link: "/opentalent_school",
    class: "school-image",
    solutions: [
      "Gestion des membres",
      "Préinscription en ligne *",
      "Agenda de la structure",
      "Suivi pédagogique",
      "Gestion administrative et financière",
      "Communication",
      "Site internet intégré",
      "Statistiques",
    ]
  },
  {
    name: "Manager",
    description: "Fédérations, confédérations et collectivités",
    image: "/images/logos/Logo_Opentalent_Manager-blanc.png",
    alt: "Carte de réseau des structures de la confédération musicale de France",
    link: "/opentalent_manager",
    class: "manager-image",
    solutions: [
      "Gestion des membres",
      "Agenda du réseau",
      "Matériel & médiathèque",
      "Gestion administrative",
      "Statistiques du réseau",
      "Cotisations",
      "Site internet intégré",
      "Communication",
    ],
  },
];
</script>

<style scoped lang="scss">
.container {
  background: var(--primary-color);
  height: 40rem;
  position: relative;

  @media (max-width: 1240px) {
    height: 100%;
    margin-bottom: 0;
  }
}

h4 {
  margin-top: 0.5rem;
  font-size: 2.8rem;
  line-height: 42px;
  text-align: center;
  color: var(--on-primary-color);
  width: 100%;

  @media (max-width: 1240px) {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  @media (max-width: 600px) {
    font-size: 1.6rem;
  }
}

@media (min-width: 600px) {
  h3 {
    margin-bottom: 3rem
  }
}

.v-row.solutions {
  small {
    font-weight: 600;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-primary-color);
  }

  h2 {
    font-weight: 400;
    font-size: 30px;
    line-height: 2rem;
    color: var(--on-primary-color-alt);
    margin-bottom: 1rem;
  }

  .v-divider {
    color: var(--on-primary-color-alt);
    width: 350px;
    opacity: 0.7;
  }

  p {
    font-size: 1.3rem;
    line-height: 1.5rem;
    margin-top: 1rem;
    color: var(--on-primary-color);
    font-style: normal;
    width: 20rem;
  }

  .image-container {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 10px 10px;
    width: 350px;
    height: 300px;
    margin-top: 2rem;
    margin-left: 0.9rem;
    margin-bottom: 1rem;

    .v-img {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 200px;
    }

    @media (max-width: 1240px) {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }

  .image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    border-radius: 0 0 10px 10px;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .v-btn {
    left: 50%;
    font-size: 0.8rem;
    border-radius: 6px;
    background: var(--secondary-color);
    color: var(--on-secondary-color);

    @media (min-width: 1240px) {
      position: absolute;
      z-index: 100;
      bottom: 40%;
      transform: translateX(-50%);
      display: none;
    }

    @media (max-width: 1240px) {
      left: auto;
      width: 90%;
      margin: 24px auto;
    }
  }

  .image-container:hover .v-btn {
    display: block;
  }

  .artist-image {
    background-image: url(/images/pages/home/solution/Opentalent_Artist_pour_les_structures_culturelles.jpg);
  }

  .artist-image:hover::before {
    opacity: 1;
    cursor: pointer;
  }

  .school-image {
    background-image: url(/images/pages/home/solution/Opentalent_School_pour_les_etablissements_d_enseignement_artistique.jpg);
  }

  .school-image:hover::before {
    opacity: 1;
    cursor: pointer;
  }

  .manager-image {
    background-image: url(/images/pages/home/solution/Opentalent_Manager_pour_les_reseaux_culturels.png);
  }

  .manager-image:hover::before {
    opacity: 1;
    cursor: pointer;
  }

  .details {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%;

    ul {
      margin-top: 0.9rem;
      max-width: 100%;
      white-space: pre-wrap;
      margin-left: 1rem;
    }

    li {
      text-align: start;
      font-size: 16px;
      line-height: 18px;
      color: var(--primary-color);
      margin: 6px 0;

      @media (max-width: 1240px) {
        font-size: 1.1rem;
        color: var(--on-primary-color);
      }
    }

    @media (max-width: 1240px) {
      margin: 0 auto;
    }

    @media (max-width: 600px) {
      padding: 18px;

      ul {
        margin-top: 0;
      }

      .v-col-12 {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

  }
}

.footer {
  p {
    text-align: right;
    font-size: 14px;

    @media (max-width: 1240px) {
      font-size: 1.1rem;
      color: var(--on-primary-color);
    }
  }
}
</style>