site_logiciels/components/Common/Card/Benefit.vue

<!--
Carte "Avantage" de la section Avantages d'une page Logiciel
-->
<template>
  <LayoutContainer>
    <div>
      <div class="card-title">
        <h4>
          {{ benefit.title }}
        </h4>

        <span class="number">
          {{ benefit.number }}
        </span>
      </div>

      <v-divider thickness="1" />

      <div class="description">
        <p class="mr-4">
          {{ benefit.description }}
        </p>
      </div>

      <v-img :src="benefit.image" :alt="benefit.alt" cover />
    </div>
  </LayoutContainer>
</template>

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

defineProps({
  benefit: {
    type: Object as PropType<Benefit>,
    required: true,
  },
})
</script>

<style scoped lang="scss">
hr {
  opacity: 70%;
}

.v-img {
  height: 400px;
}

.card-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 1rem;

  h4 {
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.3rem;
    color: var(--on-primary-color);
  }

  .number {
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--on-primary-color-alt);
  }
}

.description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 7rem;

  p {
    font-weight: normal;
    font-size: 1rem;
    color: var(--on-primary-color);
    margin-top: 1rem;
    height: 5rem;
  }

  ul {
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--on-primary-color);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
</style>