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-6 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-6">
            <li
              v-for="(feature, index) in features"
              :key="index"
            >
              {{ feature }}
            </li>
          </ul>

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

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

              <v-btn
                :to="item.link"
                class="plus-button"
              >
                <v-icon>fas fa-plus</v-icon>
              </v-btn>
            </footer>
          </v-img>
        </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, logoUrl: string, class: string, link: string}> = [
  {
    imageUrl: "/images/solutions/artist.jpg",
    logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
    class: "artist",
    link: "/opentalent_artist",
  },
  {
    imageUrl: "/images/solutions/school.jpg",
    logoUrl: "/images/logo/logiciels/School-Blanc.png",
    class: "school",
    link: "/opentalent_school",
  },
  {
    imageUrl: "/images/solutions/manager.png",
    logoUrl: "/images/logo/logiciels/Manager-Blanc.png",
    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: 10px;
}

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

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

  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: 80px;
    height: 80px;
    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;

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

  :hover .plus-button {
    transform: scale(1.2);
    transition: all 0.3s ease-in-out;
  }
}

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

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

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