site_logiciels/components/Home/Promotion.vue

<template>
  <LayoutContainer>
    <v-row class="gestion">
      <v-col>
        <LayoutUISectionTitle class="alt-theme">
          GESTION ET PROMOTION
        </LayoutUISectionTitle>

        <v-row>
          <v-col>
            <div class="text-block">
              <span class="highlight">Simplifiez</span>-vous la vie avec un
              outil

              <span class="inline-pic-container">
                <v-img
                  src="/images/pages/home/promotion/Visuel_d_un_Pianiste.png"
                  alt="Vignette d’une personne jouant sur un piano"
                />
              </span>

              tout-en-un pour la gestion et la promotion

              <span class="inline-pic-container">
                <v-img
                  src="/images/pages/home/promotion/Visuel_de_Danseuse.png"
                  alt="Vignette d’une danseuse"
                />
              </span>

              de votre structure culturelle.

              <span class="inline-pic-container">
                <v-img
                  src="/images/pages/home/promotion/Visuel_d_un_Comedien.PNG"
                  alt="Vignette d’un homme faisant un spectacle de mime dans une salle de spectacle"
                />
              </span>
            </div>
          </v-col>
        </v-row>
      </v-col>
    </v-row>

    <v-row class="demo">
      <v-col>
        <v-img
          v-if="!playVideo"
          src="/images/pages/home/promotion/Ordinateur_portable_avec_ecran_logiciel_Opentalent.jpg"
          alt="Vidéo corporate de l’entreprise Opentalent"
          class="screen"
        >
          <v-icon
            icon="fas fa-play"
            class="play-icon"
            @click="playVideo = true"
          />
        </v-img>

        <iframe
          v-else
          class="screen"
          :src="`https://www.youtube.com/embed/Gpl4gAWNc3s?autoplay=1&rel=0`"
          title="Vidéo corporate Opentalent"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
          aria-label="Vidéo corporate Opentalent"
          aria-description="Vidéo corporate Opentalent : découvrez l’histoire de l’entreprise, son agenda et ses logiciels culturels"
        ></iframe>
      </v-col>
    </v-row>

    <v-row class="outil center-90">
      <v-col>
        <v-row>
          <v-col>
            <h3>Un outil complet et intuitif pour chaque structure</h3>
          </v-col>
        </v-row>

        <v-row class="pictos">
          <v-col cols="12" lg="6">
            <v-row>
              <v-col cols="3">
                <img
                  src="/images/pages/home/promotion/Logiciel_en_ligne_SaaS.svg"
                  alt="Icône nuage cloud"
                />
              </v-col>
              <v-col cols="9">
                <p>Logiciel de gestion et communication en ligne</p>
              </v-col>
            </v-row>

            <v-row>
              <v-col cols="3">
                <img
                  src="/images/pages/home/promotion/Site_internet_intégré.svg"
                  alt="Icône site internet"
                />
              </v-col>
              <v-col cols="9">
                <p>Site web intégré et simple d’usage</p>
              </v-col>
            </v-row>
          </v-col>

          <v-col cols="12" lg="6">
            <v-row>
              <v-col cols="3">
                <img
                  src="/images/pages/home/promotion/Visibilite_augmente_avec_l_agenda_culturel_Opentalent.svg"
                  alt="Icône avion en papier"
                />
              </v-col>
              <v-col cols="9">
                <p>Augmentez votre visibilité avec l'agenda culturel</p>
              </v-col>
            </v-row>

            <v-row>
              <v-col cols="3">
                <img
                  src="/images/pages/home/promotion/Icone_communication_en_reseau.svg"
                  alt="Icône de deux enveloppes"
                />
              </v-col>
              <v-col cols="9">
                <p>Communiquez en réseau</p>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
const playVideo: Ref<boolean> = ref(false)
</script>

<style scoped lang="scss">
.highlight {
  color: var(--secondary-color);
}

.v-row.gestion {
  > .v-col {
    margin-bottom: 4rem;
    background: var(--primary-color);

    @media (max-width: 600px) {
      min-height: 550px;
      padding: 0 5%;
    }
  }

  .text-block {
    font-weight: 600;
    font-size: 3rem;
    text-align: center;
    color: var(--on-primary-color);
    height: 20rem;
    width: 45rem;
    margin: 2rem auto 28rem;

    @media (max-width: 600px) {
      padding: 0 5%;
    }
  }

  .inline-pic-container {
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
  }

  .v-img {
    height: 75px;
    width: 115px;
    max-width: 100%;
    border-radius: 5rem;
  }

  @media (max-width: 960px) {
    > .v-col {
      margin-bottom: 0;
    }

    .text-block {
      font-weight: 500;
      font-size: 2rem;
      line-height: 3.5rem;
      height: 10rem;
      width: 40rem;
      margin: 3rem auto 5rem;
      max-width: 100%;
    }

    .v-img {
      width: 3.2rem;
      border-radius: 5rem;
    }
  }
}

.v-row.demo {
  max-height: 350px;

  .v-col {
    display: flex;
  }

  @media (max-width: 1280px) {
    max-height: 1000px;
  }

  .screen {
    position: relative;
    width: 900px;
    max-width: 900px;
    height: 675px;
    object-fit: cover;
    margin: 2rem auto;
    text-align: center;
    border-radius: 20px;
    transition: transform 0.2s;
    bottom: 30rem;
  }

  video.screen {
    object-fit: contain;
    background: black;
    transform: scale(1.1);
  }

  iframe.screen {
    object-fit: contain;
    background: black;
    transform: scale(1.1);
    border: none;
    aspect-ratio: 16/9;
  }

  @media (max-width: 1280px) {
    .screen {
      margin-top: -12px;
      bottom: 0;
      width: 100%;
      border-radius: 0;
    }
  }

  @media (min-width: 600px) {
    .screen:hover {
      transform: scale(1.1);
    }
  }

  .play-icon {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--on-primary-color);
    cursor: pointer;
    z-index: 100;
  }
}

.outil {
  margin-bottom: 36px;

  @media (max-width: 600px) {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  h3 {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 3rem;
    text-align: center;
  }

  .pictos {
    .v-row {
      border-bottom: solid 2px var(--on-neutral-color-extra-light);
      border-top: solid 2px var(--on-neutral-color-extra-light);
      margin: -2px 0 0;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    > .v-col-12 {
      padding-top: 0;
      padding-bottom: 0;
    }

    .v-col-3 {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }

    img {
      width: 50px;
      height: 50px;
      margin-right: 2rem;

      @media (max-width: 600px) {
        margin-right: 0;
      }
    }

    p {
      font-weight: 400;
      font-size: 20px;
      line-height: 26px;
      width: 25rem;
      max-width: 100%;
      color: var(--primary-color);

      @media (max-width: 600px) {
        width: 90%;
        margin-bottom: 0;
      }
    }
  }
}
</style>