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/Home_logiciel/ecole_de_musique-piano.jpg"
              />
            </span>

            tout en un pour la gestion et la promotion

            <span class="inline-pic-container">
              <v-img
                src="/images/Home_logiciel/ecole_de_danse-danseuse.jpg"
              />
            </span>

            , de votre structure culturelle.

            <span class="inline-pic-container">
              <v-img
                src="/images/Home_logiciel/ecole_de_cirque.jpg"
              />
            </span>
          </p>
        </v-row>
      </v-col>
    </v-row>

    <v-row class="demo">
      <v-col>
        <v-img
          src="/images/home/écran.JPG"
          class="screen"
        >
          <v-icon icon="fas fa-play" class="play-icon" />
        </v-img>

      </v-col>
    </v-row>

    <v-row class="outil">
      <v-row>
        <v-col>
          <h3>
            Un outil complet et intuitif <br />
            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/pictoHome/network.svg" alt="network" />
            </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/pictoHome/website.svg" alt="website" />
            </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/pictoHome/visibility.svg" alt="visibility" />
            </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/pictoHome/communication.svg" alt="communication" />
            </v-col>
            <v-col cols="9">
              <p>
                Communiquez en réseau
              </p>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </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);
  }

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

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

  .v-img {
    height: auto;
    width: 7rem;
    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 2rem 5rem;
    }

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

.v-row.demo {
  .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);
      margin: 0;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;

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

    .v-col:first-child .v-row:first-child, .v-col-12:first-child .v-row:first-child {
      border-top: solid 2px var(--on-neutral-color-extra-light);
    }

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

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

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

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