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 benefits">
      <v-col v-for="(benefit, index) in benefits" :key="index" cols="12" md="4">
        <CommonCardBenefit :benefit="benefit" />
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import type { Benefit } from '~/types/interface'

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>