site_logiciels/components/Logiciels/Manager/Network.vue

<template>
  <AnchoredSection id="network">
    <LayoutContainer>
      <v-row class="mt-12 center-90">
        <LayoutUISubTitle>
          Un réseau pyramidal
        </LayoutUISubTitle>
      </v-row>

      <v-row class="center-90">
        <v-col cols="12" lg="6" md="6">
          <LayoutUITitle>
            Opentalent Manager, un logiciel adapté à chacun
          </LayoutUITitle>

          <p class="pyramide-details ml-3 mt-6">
            Notre système s'adapte à toutes les structures de réseau pyramidal, quel que soit le nombre de niveau.
          </p>
        </v-col>

        <v-col cols="12" lg="6" md="6">
          <v-img
            src="/images/pages/opentalent_manager/network/Reseau_pyramidale_Opentalent_Manager.png"
            alt="Graphique réseau pyramidal de la CMF avec les fédérations, les écoles artistique et les structures pratiquantes"
            class="schema-manager"
          />
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
</script>

<style scoped lang="scss">
@media (min-width: 2000px) {
  .v-row {
    width: 70%;
  }
}

.pyramide-details {
  font-size: 2.125rem;
  font-weight: 400;
  line-height: 2.375rem;
  width: 40rem;
  max-width: 90%;
}
</style>