site_logiciels/components/Common/Presentation.vue

<!--
Section "Présentation" d'une page Logiciel
-->
<template>
  <div id="Presentation">
    <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/logiciels/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>
  </div>
</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>