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 mb-4">Trouvez la solution faite 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" class="discover-btn">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" class="discover-btn">Découvrir</v-btn>
            </v-row>

            <v-row>
              <v-btn
                v-if="solution.name === 'Artist'"
                to="shop/try/artist-premium"
                class="artist-premium-trial-btn"
              >
                Essai gratuit de 30 jours
              </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 { useDisplay } from 'vuetify'
import type { SolutionItem } from '~/types/interface'

const { xlAndUp, lgAndDown } = useDisplay()

const solutions: Array<SolutionItem> = [
  {
    name: 'Artist',
    description: 'Orchestres, chorales, compagnies et troupes artistiques',
    image: '/images/logos/opentalent/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/opentalent/Logo_Opentalent_School-blanc.png',
    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/opentalent/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);
  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;
  }

  .discover-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(--on-primary-color);
      margin: 6px 0;

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

    @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;
      }
    }
  }
}

.artist-premium-trial-btn {
  height: 36px;
  width: 100%;
  max-width: 350px;
  background: transparent;
  color: var(--on-primary-color);
  border: solid 2px var(--on-primary-color);
}

.footer {
  p {
    text-align: right;
    font-size: 14px;
    color: var(--on-primary-color);

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