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">
            <p class="citation-school">
              {{ currentCitation }}
            </p>
          </v-col>
        </v-row>

        <v-col cols="6">
          <div class="subtitle-logiciel">
            <v-icon :size="10" class="fa-solid fa-circle icon-logiciel" :style="{color: iconColor}" />
            <h6>{{ currentSubtitle }}</h6>
          </div>
          <v-img src="/images/logiciels/school/screen2.png" class="screen-img-3" />
        </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";
    default:
      return "Citation par défaut";
  }
});

const currentSubtitle = computed(() => {
  switch (route.path) {
    case '/opentalent_school':
      return "Logiciel Opentalent School";
    case '/opentalent_artist':
      return "LOGICIEL OPENTALENT ARTIST STANDARD";
    default:
      return "Sous-titre 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>


.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 {
  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>