site_logiciels/components/Common/Presentation.vue

<!--
Section "Présentation" d'une page Logiciel
-->
<template>
  <LayoutContainer>
    <v-row class="center-90">

      <!-- Colonne 1 (sous-titre, illustration logiciels, prix) -->
      <v-col cols="12" lg="5">
        <LayoutUISubTitle class="ml-8" >
          {{ title }}
        </LayoutUISubTitle>

        <v-img
          src="/images/components/presentation/Opentalent-disponible-su-Multi-support.png"
          alt="Ordinateur de bureau, ordinateur portable tablette et smartphone montrant le logiciel Opentalent"
          class="w-100"
        />

        <div class="pricing-rectangle rectangle-4 ml-6">
          <div class="logo-circle">
            <div class="content-flex ml-6">
              <v-img
                :src="logoSrc"
                :alt="logoAlt"
                class="software-logo"
              />
            </div>
          </div>

          <div v-if="pricingAmount" class="details">
            <p class="small-text">
              {{ pricingFromText }}
            </p>
            <p class="big-text">
              {{ pricingAmount }}
              <span class="smaller-text">
                {{ pricingPeriodText }}
              </span>
            </p>
            <p class="small-text">
              {{ pricingAnnouncementText }}
            </p>
          </div>
          <div v-else class="details medium-text">
            {{ pricingAltText }}
          </div>
        </div>
      </v-col>

      <!-- Colonne 2 (présentation, pictogrammes des fonctionnalités) -->
      <v-col cols="12" lg="6">
        <h3>
          {{ section1title }}
        </h3>

        <ul class="ml-12 mt-6">
          <li
            v-for="item in features"
            :key="item"
          >
            {{ item }}
          </li>
        </ul>

        <h3 class="mt-12 ml-6">
          {{ section2title }}
        </h3>

        <div class="picto-container">
          <div
            v-for="picto in pictos"
            :key="picto.text"
            class="picto"
          >
            <v-img :src="picto.src" class="img" />

            <p class="text">
              {{ picto.text }}
            </p>
          </div>
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { PropType } from "@vue/runtime-core";
import type { FeaturePicto } from "~/types/interface";

const route = useRoute();

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  section1title: {
    type: String,
    required: false,
    default: "Un outil complet en ligne"
  },
  section2title: {
    type: String,
    required: false,
    default: "Des caractéristiques uniques & dédiée"
  },
  features: {
    type: Object as PropType<Array<string>>,
    required: true
  },
  pictos: {
    type: Array as PropType<Array<FeaturePicto>>,
    required: true
  },
  logoSrc: {
    type: String,
    default: "",
  },
  logoAlt: {
    type: String,
    default: "",
  },
  pricingFromText: {
    type: String,
    required: false,
    default: "à partir de"
  },
  pricingAmount: {
    type: String,
    default: ""
  },
  pricingPeriodText: {
    type: String,
    required: false,
    default: "/ mois"
  },
  pricingAnnouncementText: {
    type: String,
    required: false,
    default: "payable annuellement"
  },
  pricingAltText: {
    required: false,
    default: ""
  }
});
</script>

<style scoped lang="scss">
.pricing-rectangle {
  display: flex;
  flex-direction: row;
  background-color: var(--secondary-color);
  width: 380px;
  height: 6rem;
  border-radius: 3rem;
  margin-top: 2rem;

  .logo-circle {
    background-color: #0e2d32;
    border-radius: 3rem;
    width: 7rem;
    height: 6rem;
  }

  .software-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    top:1rem;
    right: .5rem;
  }

  .details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--on-neutral-color);
    font-weight: 500;
    font-size: 1rem;
    width: 10rem;
    margin-left: 18px;
  }

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

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

  .smaller-text {
    font-size: 0.6em;
  }

  .medium-text {
    font-size: 1.5rem;
    font-weight: 400;
  }

  @media (max-width: 600px) {
    width: 280px;

    .details {
      margin-left: 0;
    }
  }
}

.picto-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  @media (max-width: 1240px) {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -4rem;

  .text {
    font-weight: 300;
    font-size: 0.9rem;
    margin-top: -3rem;
    text-align: center;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
  }

  .img {
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  @media (max-width: 600px) {
    width: 50%;
    margin: 0 auto;

    .text {
      width: 90%;
    }

    .img {
      width: 100%;
      height: 100%;
    }
  }
}

h3 {
  color: var(--on-primary-color);
  font-size: 34px;
  font-weight: 400;
  line-height: 38px;
  max-width: 90%;
}

h3:first-child {
  font-weight: 600;
  font-size: 3rem;
  line-height: 3rem;
  margin-left: 1rem;
  width: 35rem;
}
</style>