site_logiciels/components/About/Chronologie.client.vue

<template>
  <AnchoredSection id="history">
    <LayoutContainer class="alt-theme">
      <v-container>
        <v-row class="mb-6 mt-6 center-90">
          <v-col cols="12" md="6">
            <LayoutUISubTitle>
              Découvrez toute notre histoire
            </LayoutUISubTitle>
          </v-col>

          <v-col cols="12" md="6">
            <div class="carousel-controls">
              <v-btn
                icon="fas fa-chevron-left"
                aria-label="Précédent"
                @click="goPrevious"
              />
              <v-btn
                icon="fas fa-chevron-right"
                aria-label="Suivant"
                @click="goNext"
              />
            </div>
          </v-col>
        </v-row>
      </v-container>

      <v-row class="mb-12 center-90">
        <v-col cols="12">
          <Carousel
            ref="carousel"
            v-model="activeSlide"
            :items-to-show="lgAndUp ? 2 : 1"
            :items-to-scroll="1"
            :wrap-around="true"
          >
            <Slide
              v-for="(slide, index) in slides"
              :key="slide.title"
              :class="{ active: index === activeSlide }"
            >
              <div class="card">
                <div class="image-container">
                  <v-img :src="slide.imageUrl" cover />
                </div>

                <div class="description-container">
                  <span class="year">
                    {{ slide.year }}
                  </span>

                  <h4 v-html="slide.title" />

                  <p class="mb-6" v-html="slide.description" />
                </div>
              </div>

              <div class="timeline-container">
                <div v-if="slide.year" class="timeline">
                  <div
                    class="timeline-point"
                    :style="{
                      left: computePositionOnTimeline(slide.year) + '%',
                    }"
                  >
                    <p class="timeline-year">
                      {{ slide.year }}
                    </p>
                  </div>
                </div>
              </div>
            </Slide>
          </Carousel>
        </v-col>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import { Carousel, Slide } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'
import type { Ref } from 'vue'
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
import type { ChronologyItem } from '~/types/interface'

const activeSlide: Ref<number> = ref(0)

const { lgAndUp } = useDisplay()

const carousel: Ref<typeof Carousel | null> = ref(null)

const goPrevious = () => carousel.value!.prev()
const goNext = () => carousel.value!.next()

const computePositionOnTimeline = (year: string) => {
  const intYear = parseInt(year)

  if (!intYear || isNaN(intYear)) {
    return 0
  }
  const startYear = 2005
  const endYear = 2024
  return ((intYear - startYear) / (endYear - startYear)) * 100
}

const slides: Array<ChronologyItem> = [
  {
    year: '2005',
    title: "L'origine d'Opentalent",
    description:
      "Sous une pleine lune inspirante, Guillaume alors imagine un outil collaboratif en ligne révolutionnaire pour le secteur culturel. Cette idée germe alors qu'il est président d'orchestre et membre du CA d'une école de musique, marquant le début du concept Opentalent.",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/1-Origine_Opentalent-outil_collaboratif_pour_la_culture.jpg',
  },
  {
    year: '2006',
    title: 'Développement et partenariat stratégique',
    description:
      "Michel, passionné par l'innovation technologique, rejoint Guillaume. Ensemble, ils développent Opentalent avec le soutien de la Fédération de Haute-Savoie. Leur travail acharné bénévole durant 2 ans donne naissance à un logiciel SAS avant-gardiste, une première dans l'univers des structures culturelles.",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/2-Developpement_et_partenariat_strategique_Opentalent.jpg',
  },
  {
    year: '2008',
    title: "Naissance de l'entreprise 2iOpenservice",
    description:
      "La Fédération de Haute-Savoie, séduite par le projet, invite à collaborer avec la CMF, élargissant l'impact d'Opentalent. 2IOpenservice est alors officiellement créée, marquant une nouvelle ère dans la gestion culturelle digitale.  ",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/3-Naissance_de_l_entreprise_2IOpenservice-Opentalent.jpg',
  },
  {
    year: '2009',
    title: 'MusAssos - la réponse aux besoins pour les petites structures',
    description:
      'Pour répondre aux besoins spécifiques des écoles affiliées à la CMF, 2iopenservice lance MusAssos, une solution adapté aux petites et moyennes structures, facilitant la gestion et la promotion culturelle.',
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/4-Logiciel_MusAssos-pour_les_petites_et_moyennes_structures.png',
  },
  {
    year: '2010',
    title: "CMF Réseau <br> l'innovation communautaire",
    description:
      "La CMF adopte AdminFédé pour connecter ses adhérents, et AdminAsso devient accessible à tous, démocratisant l'accès aux outils de gestion artistique.",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/5-Confédération_Musicale_de_France-CMF_Réseau-AdminFédé_AdminAsso.png',
  },
  {
    year: '2014',
    title: 'Vers une Culture Multidisciplinaire avec FFEC',
    description:
      "Le logiciel d'Opentalent s'étend au-delà de l'enseignement artistique, embrassant l'art, la musique, le théâtre, la danse et le cirque. En partenariat avec la FFEC, Reso Cirque voit le jour, intégrant notre solution au cœur de la pratique circassienne.",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/6-FFEC_Reso_Cirque-Ouverture_vers_une_culture_multidisciplinaire.png',
  },
  {
    year: '2015',
    title: 'Refonte Technologique',
    description:
      'Nous modernisons notre gamme de logiciels pour la rendre plus sécurisée et compatible avec divers supports, marquant une étape clé dans notre évolution technologique.',
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/7-Refonte_technologique_des_logiciels_Opentalent_securitee_modernitee_intuitivitee.jpg',
  },
  {
    year: '2019',
    title: 'Nouvelle Génération Opentalent',
    description:
      "Avec des fonctionnalités améliorées et une interface utilisateur intuitive, la nouvelle génération d'Opentalent se démarque, prouvant notre engagement envers l'excellence et l'accessibilité.",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/8-Nouvelle_generation_Opentalent_moderne_securisee_experience_optimisee.jpg',
  },
  {
    year: '2024',
    title: 'Relooking du site Opentalent',
    description:
      'Le site Opentalent se réinvente, reflétant notre évolution et notre capacité à nous adapter aux tendances actuelles, tout en conservant notre essence originelle.',
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/9-Relooking_du_site_internet_Opentalent_agenda_et_logiciels_culturels.jpg',
  },
  {
    year: '',
    title: 'LE FUTUR AVEC VOUS... ',
    description:
      "Opentalent, plus qu'une gamme de logiciels ou un agenda culturel, c'est une aventure collective. Ensemble, poursuivons cette quête d'innovation et de partage culturel. <br> Rejoignez-nous dans cette aventure passionnante et façonnons l'avenir de la culture. <br><br> <strong> OPENTALENT, C'EST VOUS ! </strong>",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/10-Opentalent_ensemble_construisons_notre_futur.jpg',
  },
]
</script>

<style scoped lang="scss">
.v-col {
  padding: 0;
}

.carousel-controls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .v-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 2px solid;
    cursor: pointer;
    margin-right: 1rem;
    margin-bottom: 2rem;
    border-radius: 0;
  }
}

.carousel {
  padding-bottom: 72px;

  :deep(.carousel__viewport) {
    overflow: visible;
  }

  .carousel__slide {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
  }
  .carousel__slide.active {
    opacity: 1;
    transform: scale(1.1);
    transition:
      transform 0.3s ease-in-out,
      opacity 0.3s ease-in-out;
  }

  .card {
    display: flex;
    flex-direction: row;
    margin-bottom: 18px;

    @media (max-width: 600px) {
      flex-direction: column;
    }
  }

  .v-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .image-container,
  .description-container {
    height: 300px;
    width: 300px;

    @media (max-width: 1480px) {
      height: 320px;
      width: 260px;
    }

    @media (max-width: 600px) {
      width: 80%;
      height: auto;
    }
  }

  .image-container {
    .v-img {
      height: 100%;
      width: 100%;
      border-top-left-radius: 20%;
      border-bottom-left-radius: 20%;
    }

    @media (max-width: 600px) {
      margin: auto;

      .v-img {
        border-top-left-radius: 20%;
        border-top-right-radius: 20%;
        border-bottom-left-radius: 0;
      }
    }
  }

  .description-container {
    padding: 1rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--on-primary-color);
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;

    .year {
      font-size: 1.8rem;
      font-weight: 500;
    }

    h4 {
      font-size: 1rem;
      text-align: center;
    }

    p {
      align-items: center;
      padding: 1rem;
      font-size: 0.8rem;
      color: var(--secondary-color);
    }

    @media (max-width: 700px) {
      padding: 1rem 0;

      h4 {
        font-size: 1.6rem;
        text-align: left;
        padding: 1rem;
      }

      p {
        text-align: justify;
      }
    }

    @media (max-width: 600px) {
      margin: auto;
      border-top-right-radius: 0;
      border-bottom-left-radius: 20%;
      border-bottom-right-radius: 20%;
    }
  }
}

.timeline-container {
  width: 70%;
  padding: 10px 0;

  .timeline {
    top: 1rem;
    height: 1px;
    background-color: var(--neutral-color-alt);
    position: relative;
  }

  .timeline-point {
    position: relative;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--neutral-color);
  }

  .timeline-year {
    position: relative;
    top: 1rem;
    left: -1rem;
    font-size: 1.2rem;
    color: var(--neutral-color);
    font-weight: bold;
  }
}
</style>