site_logiciels/components/Home/Promotion.vue

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

        <v-row>
          <p 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/Ecole_de_musique-Conservatoire.jpg"
                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/Compagnie_de_danse.jpg"
                alt="Vignette d’une danseuse"
              />
            </span>

            , de votre structure culturelle.

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

    <v-row class="demo">
      <v-col>
        <v-img
          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" />
        </v-img>

      </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/network.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/website.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/visibility.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/communication.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">

import { useDisplay } from "vuetify";

const { mdAndUp } = useDisplay()
</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: 430px;
      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;
    }

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

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

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

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

  @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;

      @media (max-width: 600px) {
        width: 90%;
      }
    }

    >.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;
    }

    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>