site_logiciels/components/About/Logiciels.vue

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

      <v-row no-gutters class="mb-12">
        <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. Des fonctionnalités complètes:
          </p>
   
          <ul class="custom-list-style ml-6" >
            <li v-for="(feature, index) in features" :key="index">{{ feature }}</li>
          </ul>
        </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="overlay"></div>
            <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>
  </div>
</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/Artist-Blanc.png",
    buttonColor: "#D8050B",
    link: "/opentalent_manager",
  },
];
</script>

<style scoped>

:deep().title{
  width: 100% !important;
}
.container {
  max-width: 1700px;
}
.container-image {
  position: relative;
  background-image: url("/images/solutions/school.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 300px;
  height: 400px;
  z-index: 0;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

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

.plus-button {
  background-color: #fac20a;
  height: 70px;
  z-index: 3;
  border-bottom-right-radius: none !important;
}

.v-btn {
  height: 80px !important;
  border-bottom-right-radius: none !important;
}

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

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

ul.custom-list-style li:before {
  content: '- '; 
  padding-right: 5px; 
}

</style>