site_logiciels/components/Layout/UI/ContainerVideo.vue

<template>
  <div id="Presentation">
    <LayoutContainer>
      <v-row class="container-green mt-12">
        <v-row>
          <v-col cols="6">
            <LayoutUISubTitle
              class="mt-6"
              :iconSize="5"
              :iconColor="iconColor"
              :titleText="'Logiciel Opentalent School'"
              :titleColor="'#ffffff'"
            />
            <p class="citation-school">
              {{ currentCitation }}
            </p>
          </v-col>
        </v-row>

        <v-col cols="6">
          <div class="screen-img-3"></div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const currentCitation = computed(() => {
  switch (route.path) {
    case "/opentalent_school":
      return "Pour les petits comme pour les grands établissements d’enseignement artistique.";
    case "/opentalent_artist":
      return "Le logiciel de gestion et communication au service de votre passion";
    case "/opentalent_manager":
      return "“ Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel.“.";
    default:
      return "Citation par défaut";
  }
});

const iconColor = computed(() => {
  if (route.path === "/opentalent_school") {
    return "rgba(32, 147, 190, 0.6)";
  } else if (route.path === "/opentalent_artist") return "#fac20a";
});
</script>

<style scoped>
.screen-img-3 {
  background-image: url("/images/logiciels/school/screen2.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

.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;
}

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