site_logiciels/components/About/Presentation.vue

<template>
  <AnchoredSection id="about">
    <LayoutContainer>
      <v-row class="my-4 center-90">
        <v-col cols="12">
          <LayoutUISubTitle> Qui sommes-nous ? </LayoutUISubTitle>
        </v-col>
      </v-row>

      <v-row class="my-6 center-90">
        <v-col cols="12">
          <div class="italic-title">
            “Imaginé par des musiciens pour des musiciens, Opentalent se veut
            être la référence pour la gestion et la promotion du spectacle
            vivant sur les territoires.”
          </div>
        </v-col>
      </v-row>

      <v-row class="history mb-12">
        <v-col cols="12" md="6">
          <v-img
            src="/images/pages/qui-sommes-nous/presentation/Concu_par_des_passiones_pour_des_passionnes.JPG"
            alt="Entretien dans un bureau entre un homme et une femme de dos"
            cover
          />
        </v-col>

        <v-col cols="12" md="6">
          <h3>Une histoire de passionnés</h3>

          <p class="mb-8">
            En 2005, Guillaume CORCOBA, musicien depuis toujours et à ce moment
            là président de l’orchestre d'harmonie de Cluses, mais également
            membre du conseil d'administration de l'école de musique de Cluses
            et de la Fédération des musiques du Faucigny, réfléchit à un outil
            collaboratif permettant de centraliser les informations des
            structures culturelles. Son objectif est de simplifier la gestion
            administrative de ces établissements et d’en faire la promotion,
            convaincu que le secteur culturel est indispensable à la société. Il
            est rapidement rejoint par Michel PERNET-SOLLIET, lui aussi
            musicien, et ils montent ensemble Openassos, qui deviendra quelques
            années plus tard, Opentalent. Opentalent c'est un ensemble de 3
            logiciels spécialement dédiés à la culture et un agenda culturel
            pour en faire la promotion.
          </p>

          <h3>La Culture au service du développement territorial</h3>

          <p>
            Qui n'a jamais entendu dire que la culture coûtait trop cher ? On
            l'entend, ah ça oui on l'a même trop entendu ! Mais la culture c'est
            avant tout un facteur de lien social incroyable. On se retrouve, on
            échange, on partage... on vit ensemble. On crée de vrais moments et
            on développe des groupes de passionnés. On participe à rendre nos
            collectivités attractives et surtout on les fait vivre, toute
            l'année, à toutes les saisons. Depuis plusieurs décennies, un grand
            nombre de territoires s'appuie sur le développement de la culture
            pour faire face à la désindustrialisation, à une croissance
            démographique ralentie ou encore une image défavorable. Ce modèle de
            développement par la culture pour pallier un déficit d’attractivité
            touristique inspire de plus en plus de politiques de développement
            territorial.
          </p>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
</script>

<style scoped lang="scss">
.italic-title {
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 40px;
  color: var(--primary-color);
  width: 80%;
  margin: auto;

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

.v-row.history {
  width: 80%;
  margin-left: auto;
  margin-right: auto;

  .v-col-12 {
    padding: 16px 5%;
  }

  .v-img {
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    margin: 0 auto;

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

  h3 {
    font-weight: 600;
    font-size: 42px;
    line-height: 42px;
    flex: none;
    margin-bottom: 3rem;
  }

  h4 {
    font-weight: 400;
    font-size: 34px;
    line-height: 38px;
    color: var(--primary-color);
    margin-bottom: 3rem;
    width: 25rem;
    text-align: justify;

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

  p {
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 2rem;

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

  @media (max-width: 1240px) {
    h3,
    h4,
    p,
    .v-img {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }
}
</style>