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, face à la démobilisation des bénévoles concernant la gestion administrative, Guillaume imagine un outil collaboratif en ligne pour le secteur culturel. Cette idée émerge alors qu’il préside l’orchestre d’harmonie, membre du conseil d’administration de l’école de musique et de la Fédération des musiques du Faucigny, marquant le début du concept Openassos.',
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/1-Origine_Opentalent-outil_collaboratif_pour_la_culture.min.jpg',
  },
  {
    year: '2006',
    title: 'Développement et partenariat stratégique',
    description:
      "Michel, passionné par l'innovation technologique, rejoint Guillaume. Ensemble, ils développent Openassos avec le soutien de l’UFM de Haute-Savoie. Durant 2 ans, ils travaillent bénévolement pour donner 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:
      " L’Union des Fédérations Musicales de Haute-Savoie, séduite par le projet, invite à collaborer avec la CMF, élargissant l'impact d’Openassos. 2IOpenservice est alors officiellement créée, marquant une nouvelle ère dans la gestion culturelle digitale.",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/3-logo_2iOpenService.jpg',
  },
  {
    year: '2009',
    title: 'Musassos pour les petites et moyennes écoles associatives',
    description:
      'Pour répondre aux besoins spécifiques des écoles affiliées à la Confédération Musicale de France (CMF), 2iopenservice lance Musassos une solution adaptée pour les petites et moyennes écoles de musique associatives, facilitant leur gestion et leur 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 Adminassos devient accessible à tous ses adhérents, 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: 'Openassos devient Opentalent ',
    description:
      " Le logiciel s'étend au-delà de la musique, embrassant la danse, le théâtre, le crique et l’art. En partenariat avec la Fédération Française des Ecoles de Cirque (FFEC), Reso Cirque voit le jour, intégrant notre solution au cœur de la pratique circassienne. ",
    imageUrl:
      '/images/pages/qui-sommes-nous/chronologie/Logo_Opentalent_la_plateforme_culturel.jpg',
  },
  {
    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: '2020',
    title: 'Cap sur sur les conservatoires',
    description:
      'La nouvelle gamme Opentalent, représente une étape clé pour l’entreprise, désormais tournée vers les plus grands conservatoires. Des développements spécifiques ont été élaborés pour répondre aux exigences de ce secteur, consolidant ainsi la position d’Opentalent en tant qu’acteur incontournable du domaine culturel.',
    imageUrl: '/images/pages/qui-sommes-nous/chronologie/Conservatoire.png',
  },
  {
    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: 355px;
    width: 320px;

    @media (max-width: 1480px) {
      height: 350px;
      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>