site_logiciels/components/Logiciels/School/Presentation.vue

<template>
  <LayoutContainer>
    <div id="Presentation">
      <LayoutUIPresentation
        :pictoImages="pictoData"
        :presentationText="presentationData"
        :logoSrc="'images/logo/logiciels/School-Blanc.png'"
      />
    </div>

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

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

const presentationData = {
  toolTitle: "Un outil complet en ligne",
  toolList: [
    "Logiciel de gestion et communication en ligne",
    "Destiné aux établissements d'enseignement artistique",
    "Gestion quotidienne et en temps réel",
    "Pilotage complet de votre structure",
  ],
  characteristicsTitle: "Des caractéristiques uniques & dédiées",
};
</script>

<style scoped>
.container-green {
  background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%), rgba(7, 27, 31, 0.3);
  height: 40rem;
}



.outil-ul {
  font-family: "Barlow";
  margin-left: 1rem;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}

.citation-school {
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  width: 38rem;
  line-height: 40px;
  color: #ffffff;
  font-style: italic;
  margin-top: 27rem;
  margin-left: 2rem;
}
.subtitle-logiciel {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 18px;
  color: #ffffff;
  margin-left: 5rem;
  margin-right: 15rem;
  margin-top: 4rem;
  top: 10rem;
}

.icon-logiciel {
  color: #fac20a;
  margin-right: 1rem;
}



</style>