|
|
@@ -1,52 +1,62 @@
|
|
|
<template>
|
|
|
<AnchoredSection id="webinars">
|
|
|
- <LayoutContainer id="Formations">
|
|
|
- <div class="container-green mt-12">
|
|
|
+ <LayoutContainer>
|
|
|
+ <div class="alt-theme pt-6 mt-12">
|
|
|
<v-row>
|
|
|
- <LayoutUISubTitle
|
|
|
- :iconSize="6"
|
|
|
- :iconClasses="iconClasses"
|
|
|
- :titleText="'Nos accompagnements sur-mesure'"
|
|
|
- title-color="#fff"
|
|
|
- />
|
|
|
+ <LayoutUISubTitle>
|
|
|
+ Nos accompagnements sur-mesure
|
|
|
+ </LayoutUISubTitle>
|
|
|
</v-row>
|
|
|
- <v-row class="mb-6 align-center">
|
|
|
- <v-col cols="6" v-for="(formation, index) in formations" :key="index">
|
|
|
- <div class="image-wrapper mb-6">
|
|
|
+
|
|
|
+ <v-row class="formation pb-6 align-center">
|
|
|
+ <v-col
|
|
|
+ cols="6"
|
|
|
+ v-for="(formation, index) in formations"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="mb-6">
|
|
|
<div :class="formation.overlayClass"></div>
|
|
|
<div
|
|
|
:style="{ backgroundImage: 'url(' + formation.image + ')' }"
|
|
|
class="background-img"
|
|
|
></div>
|
|
|
</div>
|
|
|
- <div class="col-details">
|
|
|
- <h4 class="session-title">
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h4>
|
|
|
{{ formation.sessions }}
|
|
|
</h4>
|
|
|
- <h3 class="formation-title">{{ formation.title }}</h3>
|
|
|
- <p class="formation-details">{{ formation.description }}</p>
|
|
|
- <br />
|
|
|
- <nuxt-link :to="formation.link">
|
|
|
- <v-btn class="formation-btn">{{ formation.buttonText }}</v-btn>
|
|
|
- </nuxt-link>
|
|
|
+
|
|
|
+ <h3>
|
|
|
+ {{ formation.title }}
|
|
|
+ </h3>
|
|
|
+
|
|
|
+ <p class="details mb-5">
|
|
|
+ {{ formation.description }}
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <v-btn :to="formation.link">
|
|
|
+ {{ formation.buttonText }}
|
|
|
+ </v-btn>
|
|
|
</div>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
</div>
|
|
|
|
|
|
- <v-row class="aling-center">
|
|
|
- <v-col cols="4">
|
|
|
- <v-container> </v-container>
|
|
|
+ <!--
|
|
|
+ TODO: Déplacer le "Quelques chiffres" dans un composant à part,
|
|
|
+ voir comment gérer ça avec les anchored sections
|
|
|
+ -->
|
|
|
+ <v-row class="align-center">
|
|
|
+ <v-col cols="12">
|
|
|
<v-row no-gutters>
|
|
|
- <LayoutUISubTitle
|
|
|
- :iconSize="6"
|
|
|
- :iconClasses="iconClasses"
|
|
|
- :titleText="'Quelques chiffres '"
|
|
|
- />
|
|
|
- <LayoutUITitle
|
|
|
- title="Pour les petits comme pour les GRANDS établissements d'enseignement artistique"
|
|
|
- title-color="#091d20"
|
|
|
- />
|
|
|
+ <LayoutUISubTitle>
|
|
|
+ Quelques chiffres
|
|
|
+ </LayoutUISubTitle>
|
|
|
+
|
|
|
+ <LayoutUITitle>
|
|
|
+ Pour les petits comme pour les GRANDS établissements d'enseignement artistique
|
|
|
+ </LayoutUITitle>
|
|
|
</v-row>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
@@ -59,47 +69,47 @@
|
|
|
class="d-flex justify-center align-center small-padding"
|
|
|
>
|
|
|
<CommonCardStat
|
|
|
- :number="'30 > 1 500'"
|
|
|
- text="Elèves"
|
|
|
- backgroundColor="#c3e5e7"
|
|
|
+ number="30 > 1 500"
|
|
|
+ text="Élèves"
|
|
|
/>
|
|
|
</v-col>
|
|
|
<v-col cols="12" lg="3" class="d-flex justify-center align-center">
|
|
|
<CommonCardStat
|
|
|
- :number="234"
|
|
|
+ number="234"
|
|
|
text="Clients"
|
|
|
- backgroundColor="#c3e5e7"
|
|
|
/>
|
|
|
</v-col>
|
|
|
<v-col cols="12" lg="3" class="d-flex justify-center align-center">
|
|
|
<CommonCardStat
|
|
|
- :number="'20 304'"
|
|
|
+ number="20 304"
|
|
|
text="Utilisateurs"
|
|
|
- backgroundColor="#c3e5e7"
|
|
|
/>
|
|
|
</v-col>
|
|
|
<v-col cols="12" lg="3" class="d-flex justify-center align-center">
|
|
|
<CommonCardStat
|
|
|
- :number="13"
|
|
|
+ number="13"
|
|
|
text="Années d'expérience"
|
|
|
- backgroundColor="#c3e5e7"
|
|
|
/>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
</v-container>
|
|
|
<v-row />
|
|
|
|
|
|
- <CommonCarouselClients :items="items" />
|
|
|
+ <CommonCarouselClients :items="items" >
|
|
|
+ <template v-slot:title>
|
|
|
+ Plus de <span class="alt-color">5000 structures</span> nous font confiance
|
|
|
+ </template>
|
|
|
+ </CommonCarouselClients>
|
|
|
</LayoutContainer>
|
|
|
</AnchoredSection>
|
|
|
</template>
|
|
|
|
|
|
-<script setup>
|
|
|
+<script setup lang="ts">
|
|
|
import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
|
|
|
+import { Formation } from "~/types/interface";
|
|
|
|
|
|
-const formations = ref([
|
|
|
+const formations: Array<Formation> = [
|
|
|
{
|
|
|
- id: 1,
|
|
|
image: "/images/logiciels/school/formation.png",
|
|
|
overlayClass: "image-overlay1",
|
|
|
sessions: "3 formations disponibles",
|
|
|
@@ -110,7 +120,6 @@ const formations = ref([
|
|
|
link: "/formations",
|
|
|
},
|
|
|
{
|
|
|
- id: 2,
|
|
|
image: "/images/logiciels/school/webinaire.png",
|
|
|
overlayClass: "image-overlay2",
|
|
|
sessions: "Toutes nos sessions",
|
|
|
@@ -120,27 +129,28 @@ const formations = ref([
|
|
|
buttonText: "Découvrir nos webinaires ",
|
|
|
link: "/webinaires",
|
|
|
},
|
|
|
-]);
|
|
|
-const items = ref([
|
|
|
+];
|
|
|
+
|
|
|
+const items: Array<{ src: string }> = [
|
|
|
{ src: "/images/reviews/school/review1.svg" },
|
|
|
{ src: "/images/reviews/school/review2.png" },
|
|
|
{ src: "/images/reviews/school/review3.png" },
|
|
|
{ src: "/images/reviews/school/review4.jpeg" },
|
|
|
{ src: "/images/reviews/school/review5.jpeg" },
|
|
|
{ src: "/images/reviews/school/review6.jpeg" },
|
|
|
-]);
|
|
|
+];
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
-:deep(.title){
|
|
|
- width: 60rem;
|
|
|
-}
|
|
|
.v-row {
|
|
|
max-width: 1600px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
+:deep(h2) {
|
|
|
+ width: 60rem;
|
|
|
+}
|
|
|
+
|
|
|
.background-img {
|
|
|
width: 600px;
|
|
|
height: 400px;
|
|
|
@@ -148,56 +158,43 @@ const items = ref([
|
|
|
background-position: center;
|
|
|
}
|
|
|
|
|
|
-.col-details {
|
|
|
- margin-right: 6rem;
|
|
|
-}
|
|
|
-
|
|
|
-.formation-btn {
|
|
|
- font-family: "Barlow";
|
|
|
- font-style: normal;
|
|
|
- width: 30rem;
|
|
|
- height: 4rem;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 1.5rem;
|
|
|
- line-height: 18px;
|
|
|
- background: transparent;
|
|
|
- color: #eff9fb;
|
|
|
- border: 1px solid #eff9fb;
|
|
|
- border-radius: 0.5rem;
|
|
|
- text-transform: none;
|
|
|
-}
|
|
|
-.formation-details {
|
|
|
- font-weight: 300;
|
|
|
- font-size: 1.2rem;
|
|
|
- line-height: 1.5rem;
|
|
|
- color: #eff9fb;
|
|
|
-}
|
|
|
-.formation-title {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 1.8rem;
|
|
|
- line-height: 26px;
|
|
|
- color: #ffffff;
|
|
|
- margin-bottom: 3rem;
|
|
|
-}
|
|
|
+.formation {
|
|
|
+ .v-btn {
|
|
|
+ font-family: "Barlow", serif;
|
|
|
+ font-style: normal;
|
|
|
+ width: 30rem;
|
|
|
+ height: 4rem;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ line-height: 18px;
|
|
|
+ background: transparent;
|
|
|
+ color: #eff9fb;
|
|
|
+ border: 1px solid #eff9fb;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
|
|
|
-.session-title {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 1.8rem;
|
|
|
- line-height: 26px;
|
|
|
- color: #ffffff;
|
|
|
- margin-bottom: 3rem;
|
|
|
-}
|
|
|
+ h3 {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 3rem;
|
|
|
+ }
|
|
|
|
|
|
-.container-green {
|
|
|
- background-color: #0e2d32;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- color: white;
|
|
|
-}
|
|
|
+ h4 {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 3rem;
|
|
|
+ }
|
|
|
|
|
|
-.card-container {
|
|
|
- margin-bottom: 20px;
|
|
|
- margin-left: 10rem;
|
|
|
- margin-right: 0rem;
|
|
|
+ .details {
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ line-height: 1.5rem;
|
|
|
+ color: #eff9fb;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
Olivier Massot