site_logiciels/components/Layout/UI/Presentation.vue

<template>
  <div id="Presentation">
    <LayoutContainer>
      <v-row class="mt-12">
        <v-col cols="4">
          <LayoutUISubTitle
            :iconSize="5"
            :iconColor="iconColor"
            :titleText="titleText"
          />
          <v-img src="/images/logiciels/school/screen.jpg" class="screen-img" />

          <div
            :style="{ backgroundColor: backgroundColor }"
            class="rectangle-4"
          >
            <div :style="{ backgroundColor: circleColor }" class="black-circle">
              <div class="content-flex">
                <v-img :src="logoSrc" class="logo-manager" />
                <div class="pricing-details">
                  <p class="pricing-small-text">{{ pricingFromText }}</p>
                  <p class="pricing-big-text">
                    {{ pricingAmount }}
                    <span class="smaller-text">{{ pricingPeriodText }}</span>
                  </p>
                  <p class="pricing-small-text">
                    {{ pricingAnnouncementText }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </v-col>

        <v-col cols="6">
          <LayoutUITitle :title="presentationText.toolTitle" />
          <ul class="outil-ul ml-12 mt-6">
            <li
              class="outil-list"
              v-for="item in presentationText.toolList"
              :key="item"
            >
              {{ item }}
            </li>
          </ul>
          <h2 class="mt-12 ml-6 presentation-caracteristique">
            {{ presentationText.characteristicsTitle }}
          </h2>
            <div class="picto-container">
              <div
                class="picto-group"
                v-for="picto in pictoImages"
                :key="picto.text"
              >
                <div
                  :style="{ backgroundImage: 'url(' + picto.src + ')' }"
                  class="picto-img"
                ></div>
                <p class="picto-text" :style="{ color: pictoColor }">
                  {{ picto.text }}
                </p>
              </div>
            </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

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

const route = useRoute();

const pricingAmount = computed(() => {
  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
    return "20€";
  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
    return "14€";
  }else {
    return "Sur devis";
  }
});

const logoSrc = computed(() => {
  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
    return "/images/logo/logiciels/OT_Artist-BLANC.png";
  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
    return "/images/logo/logiciels/OT_School-blanc.png";
  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
    return "/images/logo/logiciels/OT_Manager-BLANC.png";
  }
});

const titleText = computed(() => {
  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
    return "Présentation d'Opentalent Artist";
  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
    return "Présentation d'Opentalent School";
  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
    return "Présentation d'Opentalent Manager";
  } else {
    return "Titre par défaut"; 
  }
});

const iconColor = computed(() => {
  if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
    return "#fac20a";
  } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
    return "rgba(32, 147, 190, 0.6)";
  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
    return "#d8050b";
  } else {
    return "rgba(32, 147, 190, 0.6)"; 
  }
});
const props = defineProps({
  pictoImages: {
    type: Array,
    default: () => [],
  },
  pictoColor: {
    type: String,
    default: "#000000",
  },
  presentationText: {
    type: Object,
    default: () => ({
      toolTitle: "Default Title",
      toolList: [],
      characteristicsTitle: "Default Characteristics Title",
    }),
  },
  logoSrc: {
    type: String,
    default: "",
  },
  pricingFromText: {
    type: String,
  },
  pricingAmount: {
    type: String,
    default: "sur devis",
  },
  pricingPeriodText: {
    type: String,
  },
  pricingAnnouncementText: {
    type: String,
  },
  backgroundColor: {
    type: String,
    default: "rgba(32, 147, 190, 0.2)",
  },
  circleColor: {
    type: String,
    default: "#091d20",
  },
});


</script>

<style scoped>
.picto-img {
  width: 200px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.presentation-caracteristique {
  color: #071b1f;
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px;
}
.pricing-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: black;
  font-weight: 500;
  font-size: 1rem;
  margin-left: 7rem;
  margin-top: -4rem;
  width: 10rem;
}

.pricing-small-text {
  font-size: 0.6em;
}

.pricing-big-text {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2rem;
  margin-left: 1rem;
}

.smaller-text {
  font-size: 0.6em;
}
.black-circle {
  border-radius: 3rem;
  background: #091d20;
  width: 7rem;
  height: 6rem;
}


.logo-manager {
  top: 0.2rem;
}
.rectangle-4 {
  width: 20rem;
  height: 6rem;
  background: rgba(32, 147, 190, 0.2);
  border-radius: 3rem;
  margin-left: 5rem;
  margin-top: 2rem;
}
.picto-text {
  font-weight: 300;
  font-size: 0.9rem;
  margin-top: -3rem;
  text-align: center;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}
.picto-container {
  display: flex;
  flex-direction: row;
}

.picto-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -4rem;
}
.outil-list {
  margin-left: 1rem;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
}
.picto-container {
  display: flex;
  flex-direction: row;
}

.screen-img {
  margin-top: 2rem;
  margin-left: 3rem;
}
</style>