site_logiciels/components/Common/Avantages.vue

<template>
  <LayoutContainer>
    <v-row class="center-90">
      <LayoutUISubTitle>
        Découvrez les avantages de la solution
      </LayoutUISubTitle>

      <LayoutUITitle>
        {{ title }}
      </LayoutUITitle>
    </v-row>

    <v-row  class="center-90">
      <v-col
        cols="12"
        md="4"
        offset-md="1"
        v-for="(benefit, index) in benefits"
        :key="index"
      >
        <CommonCardBenefit
          :benefit="benefit"
        />
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { Benefit } from "~/types/interface";
import { useDisplay } from "vuetify";

const props = defineProps({
  benefits: {
    type: Array as PropType<Array<Benefit>>,
    required: true
  },
  title: {
    type: String,
    required: false,
    default: "Des avantages concrets"
  }
})
</script>

<style scoped lang="scss">
.v-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>