site_logiciels/components/About/Logiciels.vue

<template>
  <AnchoredSection id="softwares">
    <LayoutContainer>
      <v-row class="mb-6 center-90">
        <LayoutUISubTitle> Nos logiciels </LayoutUISubTitle>

        <LayoutUITitle>
          Nos logiciels dédiés à chaque acteur culturel
        </LayoutUITitle>
      </v-row>

      <v-row class="mb-12 center-90">
        <v-col md="3">
          <p class="text-justify mr-4 ml-2 mb-6">
            Découvrez notre gamme de logiciels de gestion & de communication
            adapté au secteur culturel. <br />
            Des fonctionnalités complètes:
          </p>

          <ul class="ml-4">
            <li v-for="(feature, index) in features" :key="index">
              {{ feature }}
            </li>
          </ul>

          <p class="text-justify mr-4 mt-6">
            <b>À chaque logiciel sa spécificité !</b>
          </p>
        </v-col>

        <v-col
          v-for="(item, index) in items"
          :key="index"
          cols="12"
          md="3"
          :class="item.class"
        >
          <nuxt-link :to="item.link" class="software-link">
            <v-img :src="item.imageUrl" cover class="container-image">
              <footer>
                <v-img :src="item.logoUrl" :alt="item.logoAlt" class="logo" />

                <v-btn aria-label="Voir plus" class="plus-button">
                  <v-icon>fas fa-plus</v-icon>
                </v-btn>
              </footer>
            </v-img>
          </nuxt-link>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'

const features: Array<string> = [
  'Une gestion de vos contacts',
  'Un agenda collaboratif et interactif',
  'Une gestion du matériel et du stock',
  'Une communication simplifiée',
  "Un rapport d'activité complet",
  'Un site internet intégré',
  'Et bien plus encore...',
]

const items: Array<{
  imageUrl: string
  alt: string
  logoUrl: string
  logoAlt: string
  class: string
  link: string
}> = [
  {
    imageUrl:
      '/images/pages/qui-sommes-nous/logiciels/Opentalent_Artist_pour_les_structures_culturelles.jpg',
    alt: 'Partition tenue par une femme dans une chorale',
    logoUrl: '/images/logos/opentalent/Logo_Opentalent_Artist-blanc.png',
    logoAlt:
      'Logo Opentalent Artist - logiciel de gestion et de communication pour les orchestres, les chorales, les compagnies artistiques et troupes',
    class: 'artist',
    link: '/opentalent-artist',
  },
  {
    imageUrl:
      '/images/pages/qui-sommes-nous/logiciels/Opentalent_School_pour_les_etablissements_d_enseignement_artistique.JPG',
    alt: 'Deux jeunes filles jouant du violon',
    logoUrl: '/images/logos/opentalent/Logo_Opentalent_School-blanc.png',
    logoAlt:
      'Logo Opentalent School - logiciel de gestion et de communication pour les établissements d’enseignement artistique',
    class: 'school',
    link: '/opentalent-school',
  },
  {
    imageUrl:
      '/images/pages/qui-sommes-nous/logiciels/Opentalent_Manager_pour_les_reseaux_culturels.png',
    alt: 'Carte de réseau des structures de la confédération musicale de France',
    logoUrl: '/images/logos/opentalent/Logo_Opentalent_Manager-blanc.png',
    logoAlt:
      'Logo Opentalent Manager - logiciel de gestion et de communication pour les fédérations, les confédérations et les collectivités',
    class: 'manager',
    link: '/opentalent-manager',
  },
]
</script>

<style scoped lang="scss">
.container {
  padding: 0 !important;
  margin-top: 1rem;
  background: var(--neutral-color);
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin-left: 0.8rem;
  position: relative;
  margin-bottom: 6px;
}

li:before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background-color: var(--on-neutral-color);
  border-radius: 50%;
}

.software-link {
  > .container-image:hover {
    transform: scale(1.05);
  }
}

.container-image {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 370px;
  z-index: 0;
  border-radius: 12px 12px 0 12px;

  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
  }

  .logo {
    width: 100px;
    z-index: 2;
    margin-right: 10px;
  }

  .plus-button {
    width: 100px;
    height: 100px;
    border-radius: 50% 0 0 0;
    background: var(--primary-color);
    color: var(--on-primary-color);
    box-shadow: none !important;
    border-top-left-radius: 10% !important;
    margin-right: -10px;
    margin-bottom: -10px;
    z-index: 2;

    .v-icon {
      color: var(--on-primary-color);
      font-size: 2rem;
    }
  }
}

.plus-button:hover {
  filter: brightness(90%);
}

.container-image::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
}

.artist .plus-button {
  background: var(--artist-color);
}

.school .plus-button {
  background: var(--school-color);
}

.manager .plus-button {
  background: var(--manager-color);
}
</style>