site_logiciels/components/Logiciels/Manager/Presentation.vue

<template>
  <LayoutContainer>
    <div id="Presentation">
      <LayoutUIPresentation
        :pictoImages="pictoData"
        :presentationText="presentationData"
        :logoSrc="'images/logo/logiciels/OT_Manager-BLANC.png'"
        :backgroundColor="'rgba(216, 5, 11, 0.2)'"
      />
    </div>

    <LayoutUIContainerVideo image-url="/images/logiciels/school/screen2.png" />
  </LayoutContainer>
</template>

<script setup>
const pictoData = [
  {
    src: "/images/logiciels/manager/picto1.png",
    text: "Logiciel de gestion et communication full web",
  },
  {
    src: "/images/logiciels/manager/picto2.png",
    text: "Site web intégré & simple d'usage",
  },
  {
    src: "/images/logiciels/manager/picto3.png",
    text: "Boostez votre visibilité & communication",
  },
  {
    src: "/images/logiciels/manager/picto4.png",
    text: "Communiquez en réseau",
  },
  {
    src: "/images/logiciels/manager/picto5.png",
    text: "Communiquez en réseau",
  },
  {
    src: "/images/logiciels/manager/picto6.png",
    text: "Communiquez en réseau",
  },
];

const presentationData = {
  toolTitle: "La solution de mise en réseau des organisations culturelles ",
  toolList: [
    "Logiciel de gestion et communication en ligne ",
    "Logiciel de gestion et communication en ligne ",
    "Gestion collaborative ",
    "Mise en valeur des activités des membres du réseau ",
  ],
  characteristicsTitle: "Des caractéristiques uniques & dédiées",
};
</script>

<style scoped>
:deep().pricing-big-text {
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.5rem;
  margin-top: 1rem;
}

:deep().picto-group {
  display: flex;
  flex-direction: column;
  margin-left: -4rem;
}

:deep().picto-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>