site_logiciels/components/About/Logiciels.vue

<template>
  <LayoutContainer id="software">
    <v-row class="mb-6 custom-row">
      <LayoutUISubTitle titleText="Ce qui nous anime" />
      <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
    </v-row>

    <v-row class="mb-12 custom-row">
      <v-col cols="3">
        <p style="text-align: justify" class="mr-4 ml-6">
          Découvrez notre gamme de logiciels de gestion & de communication
          adapté au secteur culturel. <br />
          Des fonctionnalités complètes:
        </p>
        <div class="mb-6"></div>
        <ul class="custom-list-style ml-6">
          <li v-for="(feature, index) in features" :key="index">
            {{ feature }}
          </li>
        </ul>
        <p style="text-align: justify" class="mr-4 ml-6 mt-6">
          À chaque logiciel sa spécificité !
        </p>
      </v-col>
      <v-col cols="3" v-for="(item, index) in items" :key="index">

        <div
          class="container-image"
          :style="{ backgroundImage: 'url(' + item.imageUrl + ')' }"
        >
          <div class="footer-container">
            <v-img class="logo" :src="item.logoUrl"></v-img>

            <nuxt-link :to="item.link">
              <v-btn
                :style="{ backgroundColor: item.buttonColor }"
                class="plus-button"
              >
                <v-icon>fas fa-plus</v-icon>
              </v-btn>
            </nuxt-link>
          </div>
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
const features = [
  "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 = [
  {
    imageUrl: "/images/solutions/artist.jpg",
    logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
    buttonColor: "#FAC20A",
    link: "/opentalent_artist",
  },
  {
    imageUrl: "/images/solutions/school.jpg",
    logoUrl: "/images/logo/logiciels/School-Blanc.png",
    buttonColor: "rgba(32, 147, 190)",
    link: "/opentalent_school",
  },

  {
    imageUrl: "/images/solutions/manager.png",
    logoUrl: "/images/logo/logiciels/Manager-Blanc.png",
    buttonColor: "#D8050B",
    link: "/opentalent_manager",
  },
];
</script>

<style scoped>
.v-container {
  padding: 0 !important;
}

.container {
  margin-top: 1rem;
  background: #f8f8f8;
}
:deep().title {
  width: 100% !important;
}
.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.container-image {
  position: relative;
  background-image: url("/images/solutions/school.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: 0;
  cursor: pointer;
}


.footer-container {
  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%;
  background: var(--Vert-60, #64afb7);
  color: white;
}


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

.plus-button .v-icon {
  color: #ffffff;
  font-size: 2rem;
}

.plus-button,
.v-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-top-left-radius: 10% !important;
}

.custom-list-style {
  list-style: none;
  padding-left: 0;
}

.custom-list-style li {
  margin-left: 0.8rem;
  position: relative;
  margin-bottom: 10px;
}

.custom-list-style li:before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background-color: black;
  border-radius: 50%;
}



</style>