site_logiciels/components/Home/News.vue

<template>
  <LayoutContainer>
      <v-row>
        <v-col cols="6">
          <h6 class="small-title">Découvrez nos dernières actualités</h6>
          <h2 class="title">Quoi de neuf ?</h2>
        </v-col>

        <v-col cols="6">
          <v-btn class="btn-news" text>VOIR TOUTES LES ACTUALITÉS</v-btn>
        </v-col>
      </v-row>

      <v-row>
        <!-- caroussel des aactualités-->
        <v-col cols="12">
          <v-sheet
    class="mx-auto"
    max-width="800"
  >
    <v-slide-group
      v-model="model"
      class="pa-4"
      selected-class="bg-primary"
      show-arrows
    >
      <v-slide-group-item
        v-for="item in items"
        :key="i"
        v-slot="{ isSelected, toggle, selectedClass }"
      >
        <v-card
          color="grey-lighten-1"
          :class="['ma-4', selectedClass]"
          height="200"
          width="100"
          @click="toggle"
        >
          <div class="d-flex fill-height align-center justify-center">
            <v-scale-transition>
              <v-icon
                v-if="isSelected"
                color="white"
                size="48"
                icon="mdi-close-circle-outline"
              ></v-icon>
            </v-scale-transition>
          </div>
        </v-card>
      </v-slide-group-item>
    </v-slide-group>

    <v-expand-transition>
      <v-sheet
        v-if="model != null"
        height="200"
      >
        <div class="d-flex fill-height align-center justify-center">
          <h3 class="text-h6">
            Selected {{ model }}
          </h3>
        </div>
      </v-sheet>
    </v-expand-transition>
  </v-sheet>
        </v-col>
      </v-row>
  </LayoutContainer>
</template>

<script setup>

const items = ref([
  { src: "/images/reviews/review1.png" },
  { src: "/images/reviews/review2.png" },
  { src: "/images/reviews/review3.png" },
  { src: "/images/reviews/review4.png" },
  { src: "/images/reviews/review5.png" },
]);

</script>

<style scoped>
.carousel-card {
  width: calc(100% / 3 - 12px);
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  transition: 0.3s;
}

.carousel-card.active {
  transform: scale(1.05);
}

.small-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  width: 12rem;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 2rem;
  color: #071b1f;
  margin-top: 4.5rem;
}

.title {
  margin-top: 2rem;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  line-height: 42px;
  margin-left: 2rem;
  color: #071b1f;
}

.btn-news {
  color: #9edbdd;
  margin-left: 10rem;
  margin-top: 8rem;
  border-radius: 2rem;
  font-family: "Barlow";
  background: transparent;
  /** border color 9edbdd */
  border: 1px solid #9edbdd;
  border-radius: 6px;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
}
</style>