diff --git a/assets/images/bitmap/cgep-vanier-grand.png b/assets/images/bitmap/cgep-vanier-grand.png
new file mode 100644
index 0000000..8355525
Binary files /dev/null and b/assets/images/bitmap/cgep-vanier-grand.png differ
diff --git a/assets/images/bitmap/cgep-vanier.png b/assets/images/bitmap/cgep-vanier.png
new file mode 100644
index 0000000..05510e1
Binary files /dev/null and b/assets/images/bitmap/cgep-vanier.png differ
diff --git a/assets/images/bitmap/conference-offf.png b/assets/images/bitmap/conference-offf.png
new file mode 100644
index 0000000..bcef50e
Binary files /dev/null and b/assets/images/bitmap/conference-offf.png differ
diff --git a/assets/images/bitmap/hero-confidentialite.png b/assets/images/bitmap/hero-confidentialite.png
new file mode 100644
index 0000000..0c549d4
Binary files /dev/null and b/assets/images/bitmap/hero-confidentialite.png differ
diff --git a/assets/images/bitmap/hero-formation.png b/assets/images/bitmap/hero-formation.png
new file mode 100644
index 0000000..8308773
Binary files /dev/null and b/assets/images/bitmap/hero-formation.png differ
diff --git a/assets/images/bitmap/hero-international.png b/assets/images/bitmap/hero-international.png
new file mode 100644
index 0000000..20c8aa1
Binary files /dev/null and b/assets/images/bitmap/hero-international.png differ
diff --git a/assets/images/bitmap/partir-en-stage.png b/assets/images/bitmap/partir-en-stage.png
new file mode 100644
index 0000000..35f383b
Binary files /dev/null and b/assets/images/bitmap/partir-en-stage.png differ
diff --git a/assets/images/bitmap/stage-alternance.png b/assets/images/bitmap/stage-alternance.png
new file mode 100644
index 0000000..0225162
Binary files /dev/null and b/assets/images/bitmap/stage-alternance.png differ
diff --git a/assets/videos/stills/still-1.mp4 b/assets/videos/stills/still-1.mp4
index feee269..47ef5e5 100644
Binary files a/assets/videos/stills/still-1.mp4 and b/assets/videos/stills/still-1.mp4 differ
diff --git a/assets/videos/stills/still-2.mp4 b/assets/videos/stills/still-2.mp4
index 37c5441..4fe1cb0 100644
Binary files a/assets/videos/stills/still-2.mp4 and b/assets/videos/stills/still-2.mp4 differ
diff --git a/assets/videos/stills/still-3.mp4 b/assets/videos/stills/still-3.mp4
index acf70cf..1789615 100644
Binary files a/assets/videos/stills/still-3.mp4 and b/assets/videos/stills/still-3.mp4 differ
diff --git a/assets/videos/transitions/transition-1-to-2.mp4 b/assets/videos/transitions/transition-1-to-2.mp4
index c14d56d..fa4cbe8 100644
Binary files a/assets/videos/transitions/transition-1-to-2.mp4 and b/assets/videos/transitions/transition-1-to-2.mp4 differ
diff --git a/assets/videos/transitions/transition-1-to-3.mp4 b/assets/videos/transitions/transition-1-to-3.mp4
index 898feba..84ca136 100644
Binary files a/assets/videos/transitions/transition-1-to-3.mp4 and b/assets/videos/transitions/transition-1-to-3.mp4 differ
diff --git a/assets/videos/transitions/transition-2-to-1.mp4 b/assets/videos/transitions/transition-2-to-1.mp4
index 7d8c804..2efbf83 100644
Binary files a/assets/videos/transitions/transition-2-to-1.mp4 and b/assets/videos/transitions/transition-2-to-1.mp4 differ
diff --git a/assets/videos/transitions/transition-2-to-3.mp4 b/assets/videos/transitions/transition-2-to-3.mp4
index 42563eb..9d51c61 100644
Binary files a/assets/videos/transitions/transition-2-to-3.mp4 and b/assets/videos/transitions/transition-2-to-3.mp4 differ
diff --git a/assets/videos/transitions/transition-3-to-1.mp4 b/assets/videos/transitions/transition-3-to-1.mp4
index c5f7c0d..86e858b 100644
Binary files a/assets/videos/transitions/transition-3-to-1.mp4 and b/assets/videos/transitions/transition-3-to-1.mp4 differ
diff --git a/assets/videos/transitions/transition-3-to-2.mp4 b/assets/videos/transitions/transition-3-to-2.mp4
index b6ec92a..1a5052c 100644
Binary files a/assets/videos/transitions/transition-3-to-2.mp4 and b/assets/videos/transitions/transition-3-to-2.mp4 differ
diff --git a/components/landingButtonAction.vue b/components/landingButtonAction.vue
new file mode 100644
index 0000000..7e8cdd0
--- /dev/null
+++ b/components/landingButtonAction.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="contents">
+        <button class="duration-500 font-poppins text-xl font-bold py-3 px-10 text-white bg-gris border-solid border-[3px] border-gris hover:bg-gris hover:border-white rounded-[10px]">
+            <slot />
+        </button>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/simpleSection.vue b/components/simpleSection.vue
new file mode 100644
index 0000000..a9eab25
--- /dev/null
+++ b/components/simpleSection.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+    headingTitle: string;
+    paragraphText: string;
+    imageSrc: string;
+    imageAlt: string;
+}>();
+</script>
+
+
+<template>
+    <section class="grid grid-cols-1 xl:grid-cols-5 xl:gap-14 mb-12 md:mb-24">
+        <div class="col-span-3 xl:flex xl:flex-col xl:gap-4">
+            <AnimatedHeading class="text-noir mb-8" :title="headingTitle" />
+            <p class="text-noir my-5 xl:m-0" v-html="paragraphText"/>
+        </div>
+        <img class="col-span-2 xl:place-self-end w-auto mx-auto" :src="imageSrc" :alt="imageAlt">
+    </section>
+</template>
\ No newline at end of file
diff --git a/components/slidingText.vue b/components/slidingText.vue
index 12e1fee..76bf8a7 100644
--- a/components/slidingText.vue
+++ b/components/slidingText.vue
@@ -11,37 +11,37 @@ class="slider my-14 md:my-24" reverse="true" style="
                 <p class="text">Intégration</p>
             </div>
             <div class="item" style="--position: 2">
-                <img class="vector" src="../assets/images/svg/sliding-vector.svg" alt="Vector">
+                <img class="vector" src="@/assets/images/svg/sliding-vector.svg" alt="Vector">
             </div>
             <div class="item" style="--position: 3">
                 <p class="text">Webdesign</p>
             </div>
             <div class="item" style="--position: 4">
-                <img class="vector" src="../assets/images/svg/sliding-vector.svg" alt="Vector">
+                <img class="vector" src="@/assets/images/svg/sliding-vector.svg" alt="Vector">
             </div>
             <div class="item" style="--position: 5">
                 <p class="text">Développement</p>
             </div>
             <div class="item" style="--position: 6">
-                <img class="vector" src="../assets/images/svg/sliding-vector.svg" alt="Vector">
+                <img class="vector" src="@/assets/images/svg/sliding-vector.svg" alt="Vector">
             </div>
             <div class="item" style="--position: 7">
                 <p class="text">Communication</p>
             </div>
             <div class="item" style="--position: 8">
-                <img class="vector" src="../assets/images/svg/sliding-vector.svg" alt="Vector">
+                <img class="vector" src="@/assets/images/svg/sliding-vector.svg" alt="Vector">
             </div>
             <div class="item" style="--position: 9">
                 <p class="text">Motion Design</p>
             </div>
             <div class="item" style="--position: 10">
-                <img class="vector" src="../assets/images/svg/sliding-vector.svg" alt="Vector">
+                <img class="vector" src="@/assets/images/svg/sliding-vector.svg" alt="Vector">
             </div>
             <div class="item" style="--position: 11">
                 <p class="text">UI / UX Design</p>
             </div>
             <div class="item" style="--position: 12">
-                <img class="vector" src="../assets/images/svg/sliding-vector.svg" alt="Vector">
+                <img class="vector" src="@/assets/images/svg/sliding-vector.svg" alt="Vector">
             </div>
         </div>
     </div>
diff --git a/components/transparentButtonY.vue b/components/transparentButtonY.vue
new file mode 100644
index 0000000..55a8562
--- /dev/null
+++ b/components/transparentButtonY.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+    to: string;
+}>();
+</script>
+
+
+<template>
+    <RouterLink :to="to" class="duration-500 font-poppins text-xl font-medium p-3 text-jaune bg-transparent border-solid border-[4px] border-jaune hover:bg-jaune hover:text-white rounded-[10px]">
+        <slot />
+    </RouterLink>
+</template>
\ No newline at end of file
diff --git a/components/transparentButtonYMini.vue b/components/transparentButtonYMini.vue
new file mode 100644
index 0000000..bba4a00
--- /dev/null
+++ b/components/transparentButtonYMini.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+    to: string;
+}>();
+</script>
+
+
+<template>
+    <RouterLink :to="to" class="duration-500 font-poppins text-sm font-medium py-2 px-3 text-jaune bg-transparent border-solid border-2 border-jaune hover:bg-jaune hover:text-white rounded-[10px]">
+        <slot />
+    </RouterLink>
+</template>
\ No newline at end of file
diff --git a/components/yearsTable.vue b/components/yearsTable.vue
new file mode 100644
index 0000000..24ac093
--- /dev/null
+++ b/components/yearsTable.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="hidden lg:grid mt-20 grid-cols-3 justify-items-center items-start">
+        <div class="text-center w-64">
+            <p class="font-poppins text-5xl text-noir font-bold mb-28">1ère <br>Année</p>
+            <div class="grid grid-cols-1 gap-24">
+                <p class="font-manrope text-2xl text-noir font-extrabold p-5">Création numérique</p>
+                <p class="font-manrope text-2xl text-noir font-extrabold">Stratégie <br>de communication</p>
+                <p class="font-manrope text-2xl text-noir font-extrabold">Développement web</p>
+            </div>
+        </div>
+        <div class="text-center w-64">
+            <p class="font-poppins text-5xl text-noir font-bold mb-28">2ème <br>Année</p>
+            <div class="grid grid-cols-1 gap-24">
+                <p class="font-manrope text-2xl text-noir font-extrabold border-4 border-jaune rounded p-5">Création numérique</p>
+                <p class="font-manrope text-2xl text-noir font-extrabold">Stratégie <br>de communication</p>
+                <p class="font-manrope text-2xl text-noir font-extrabold">Développement web</p>
+            </div>
+        </div>
+        <div class="text-center w-64">
+            <p class="font-poppins text-5xl text-noir font-bold mb-28">3ème <br>Année</p>
+            <div class="grid grid-cols-1 gap-24 border-4 border-jaune rounded pt-20 pb-10">
+                <p class="font-manrope text-2xl text-noir font-extrabold"><br></p>
+                <p class="font-manrope text-2xl text-noir font-extrabold">Création <br>Numérique</p>
+                <p class="font-manrope text-2xl text-noir font-extrabold"><br></p>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/pages/candidater.vue b/pages/candidater.vue
index 0bbce2d..2994167 100644
--- a/pages/candidater.vue
+++ b/pages/candidater.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import heroImg from '../assets/images/bitmap/hero-candidater.png';
+import heroImg from '@/assets/images/bitmap/hero-candidater.png';
+import candidaterImg from '@/assets/images/bitmap/candidater-section.png';
 </script>
 
 <template>
     <main>
-        <MyHero :image=heroImg alt="Bâtiment MMI" title="Candidater"/>
+        <MyHero :image=heroImg alt="Étudiants de MMI" title="Candidater"/>
 
         <div class="margin"> 
 
             <SecondHeading title-black="Rejoignez le département " title-yellow="MMI Montbéliard" />
-            
-            <section class="grid grid-cols-1 xl:grid-cols-5 xl:gap-14 mb-12 md:mb-24">
-                <div class="col-span-3 xl:flex xl:flex-col xl:gap-8">
-                    <AnimatedHeading class="text-noir mb-8" title="Pourquoi choisir MMI Montbéliard ?" />
-                    <p class="text-noir my-5 xl:m-0">
-                        Le département MMI Montbéliard offre une formation pluridisciplinaire qui permet de maîtriser la création de contenu multimédia, le design, le développement web, et la communication digitale, entre autres compétences. Vous évoluerez dans un environnement stimulant où vous participerez à des projets concrets et collaborerez avec des professionnels du secteur. Nos espaces de travail sont équipés des dernières technologies pour vous accompagner dans le développement de vos projets. De plus, vous aurez l’opportunité d’intégrer des entreprises partenaires lors de stages, enrichissant ainsi votre expérience et vos perspectives professionnelles.
-                    </p>
-                </div>
-                <img class="col-span-2 xl:place-self-end w-auto mx-auto" src="../assets/images/bitmap/candidater-section.png" alt="">
-            </section>
+
+            <SimpleSection
+                heading-title="Pourquoi choisir MMI Montbéliard ?"
+                paragraph-text="Le département MMI Montbéliard offre une formation pluridisciplinaire qui permet de maîtriser la création de contenu multimédia, le design, le développement web, et la communication digitale, entre autres compétences. Vous évoluerez dans un environnement stimulant où vous participerez à des projets concrets et collaborerez avec des professionnels du secteur. Nos espaces de travail sont équipés des dernières technologies pour vous accompagner dans le développement de vos projets. De plus, vous aurez l’opportunité d’intégrer des entreprises partenaires lors de stages, enrichissant ainsi votre expérience et vos perspectives professionnelles."
+                :image-src=candidaterImg
+                image-alt="Étudiants de MMI"
+            />
 
             <section id="ici" class="xl:grid xl:grid-cols-2">
                 <div class="text-left">
diff --git a/pages/confidentialite.vue b/pages/confidentialite.vue
index 8e436cc..00bd416 100644
--- a/pages/confidentialite.vue
+++ b/pages/confidentialite.vue
@@ -1,3 +1,78 @@
+<script setup lang="ts">
+import heroImg from '@/assets/images/bitmap/hero-confidentialite.png';
+</script>
+
+
 <template>
-    <div/>
+    <main>
+        <MyHero :image=heroImg alt="Étudiants dans l'amphithéâtre" title="Confidentialité"/>
+        <section class="margin">
+            <SecondHeading title-black="Politique de " title-yellow="confidentialité" />
+            <h3 class="text-noir uppercase">
+                Collecte et utilisation des données
+            </h3>
+            <p class="text-noir mt-1 md:mt-3">
+                Sur notre site, nous respectons votre vie privée. Les seules données personnelles collectées sont celles que vous fournissez volontairement via notre formulaire de contact. Ces informations peuvent inclure :
+            </p>
+            <ul class="text-noir list-disc ml-5">
+                <li>
+                    <p>Votre nom</p>
+                </li>
+                <li>
+                    <p>Votre adresse e-mail</p>
+                </li>
+                <li>
+                    <p>Tout autre renseignement que vous choisissez de partager dans le champ de message</p>
+                </li>
+            </ul>
+            <p class="text-noir mb-6 md:mb-8">
+                <br>Ces données sont collectées uniquement dans le but de répondre à vos demandes et de vous fournir les informations ou services demandés.
+            </p>
+            <h3 class="text-noir uppercase">
+                Conservation des données
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Vos données sont conservées uniquement le temps nécessaire pour répondre à vos sollicitations ou pour toute durée légale requise. Une fois ce délai écoulé, elles sont supprimées de manière sécurisée.
+            </p>
+            <h3 class="text-noir uppercase">
+                Partage des données
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Les informations collectées via le formulaire de contact ne sont ni vendues, ni louées, ni partagées avec des tiers.
+            </p>
+            <h3 class="text-noir uppercase">
+                Sécurité des données
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Nous mettons en œuvre des mesures techniques et organisationnelles pour garantir la sécurité de vos données personnelles et éviter leur perte, utilisation abusive ou accès non autorisé.
+            </p>
+            <h3 class="text-noir uppercase">
+                Vos droits
+            </h3>
+            <p class="text-noir mt-1 md:mt-3">
+                Conformément aux lois en vigueur sur la protection des données, vous disposez des droits suivants :
+            </p>
+            <ul class="text-noir list-disc ml-5">
+                <li>
+                    <p>Accéder à vos données personnelles</p>
+                </li>
+                <li>
+                    <p>Demander leur rectification ou suppression</p>
+                </li>
+                <li>
+                    <p>Retirer votre consentement à tout moment</p>
+                </li>
+            </ul>
+            <p class="text-noir mb-6 md:mb-8">
+                <br>Pour exercer ces droits, vous pouvez nous contacter via l'adresse e-mail mentionnée sur la page contact.
+            </p>
+            <h3 class="text-noir uppercase">
+                Modifications de cette politique
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Nous nous réservons le droit de mettre à jour cette politique de confidentialité à tout moment. Toute modification sera publiée sur cette page avec une date de mise à jour.
+                <br>Date de dernière mise à jour : 14 Janvier 2025
+            </p>
+        </section>
+    </main>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 25c9cc8..1440a0a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import SlidingText from '~/components/slidingText.vue';
-import heroImg from '../assets/images/bitmap/home-test.png';
+import heroImg from '@/assets/images/bitmap/home-test.png';
 
 
 const containerHeight = ref(0);
@@ -59,7 +59,7 @@ onUnmounted(() => {
                         Le BUT MMI allie créativité, expertise digitale et développement web pour former des professionnels polyvalents, capables de concevoir des projets innovants et de s'adapter aux évolutions du secteur numérique. Grâce à une approche pratique et une immersion professionnelle, les étudiants développent des compétences en design, programmation et gestion de projets digitaux. Ce parcours d'excellence prépare les talents de demain à relever les défis du numérique en constante évolution.
                     </p>
                 </div>
-                <img class="h-28 md:h-40 lg:h-48 col-span-2 xl:place-self-end w-auto mx-auto px-10" src="../assets/images/svg/mmi_logo-header.svg" alt="Logo MMI">
+                <img class="h-28 md:h-40 lg:h-48 col-span-2 xl:place-self-end w-auto mx-auto px-10" src="@/assets/images/svg/mmi_logo-header.svg" alt="Logo MMI">
             </section>
 
             <section class="mb-12 md:mb-24">
diff --git a/pages/international.vue b/pages/international.vue
index 8e436cc..295cf8e 100644
--- a/pages/international.vue
+++ b/pages/international.vue
@@ -1,3 +1,47 @@
+<script setup lang="ts">
+import heroImg from '@/assets/images/bitmap/hero-international.png'
+import stageImg from '@/assets/images/bitmap/partir-en-stage.png'
+import offfImg from '@/assets/images/bitmap/conference-offf.png'
+import vanierImg from '@/assets/images/bitmap/cgep-vanier.png'
+</script>
+
+
 <template>
-    <div/>
+    <main>
+        <MyHero :image=heroImg alt="Étudiants de MMI au Canada" title="International"/>
+
+        <div class="margin">
+            <SecondHeading class="lg:w-3/5 xl:w-2/5 mx-auto" title-black="Partir à " title-yellow="l'étranger"/>
+
+            <SimpleSection 
+            heading-title="Partir en stage" 
+            paragraph-text="Le département MMI vous propose l'opportunité d'explorer et de vous familiariser avec les métiers du numérique à travers des stages ou des périodes d'alternance à l'international. Cette expérience enrichissante et valorisante permet aux étudiants de développer leurs compétences linguistiques tout en perfectionnant leur maîtrise des aspects techniques." 
+            :image-src=stageImg
+            image-alt="Étudiant MMI en stage"    
+            />
+
+            <SimpleSection 
+            heading-title="Festival OFFF" 
+            paragraph-text="Notre département organise depuis plusieurs années un voyage à Barcelone, permettant à certains étudiants de prendre part au OFFF, un festival international consacré à l'art numérique. <br/><br/>En participant à des conférences animées par des personnalités du domaine numérique, les étudiants développent leur culture artistique tout en s'immergeant dans la diversité culturelle de la ville." 
+            :image-src=offfImg
+            image-alt="Conférence du festival OFFF"    
+            />
+
+            <SimpleSection 
+            heading-title="Un semestre d'étude au cœur du Canada" 
+            paragraph-text="Notre département est partenaire avec deux cégeps de renom au Canada, offrant à nos étudiants une immersion académique et culturelle enrichissante. Cette opportunité permet chaque année à quelques étudiants d'effectuer un semestre à Montréal ou à Matane, tout en renforçant leurs compétences professionnelles dans des domaines spécialisés." 
+            :image-src=vanierImg
+            image-alt="CGEP de Vanier"    
+            />
+
+            <section class="-mt-12 md:-mt-16 grid grid-cols-1 xl:grid-cols-5 xl:gap-14 mb-12 md:mb-24">
+                <p class="text-noir mt-5 xl:m-0 col-span-3 xl:flex xl:flex-col xl:gap-4">
+                    Le Cégep de Matane offre un parcours dans les techniques d’intégration multimédia, permettant aux étudiants de développer leurs compétences en création de contenu numérique et en intégration de solutions multimédia.
+                </p>
+                <p class="text-noir mt-5 xl:m-0 col-span-2 xl:flex xl:flex-col xl:gap-4">
+                    À Montréal, le Cégep de Vanier propose une formation orientée sur le design et les travaux d’impression. Cette spécialisation permet aux étudiants de se familiariser avec les pratiques et techniques de l’industrie du design canadien.
+                </p>
+            </section>
+        </div>
+    </main>
 </template>
\ No newline at end of file
diff --git a/pages/la-formation.vue b/pages/la-formation.vue
index 2bf9843..bea79ce 100644
--- a/pages/la-formation.vue
+++ b/pages/la-formation.vue
@@ -1,44 +1,9 @@
-<template>
-    <div>
-        <div v-show="allLoaded" class="relative w-full h-screen flex items-center justify-center bg-gray-900">
-            <div class="relative w-full h-full overflow-hidden">
-                <video
-                    v-for="video in allVideos"
-                    v-show="currentVideo === video.name"
-                    :key="video.name"
-                    ref="videos"
-                    :src="video.src"
-                    autoplay
-                    muted
-                    loop
-                    class="w-full h-full"
-                    @ended="onVideoEnded"
-                />
-            </div>
-
+<script setup lang="ts">
+import alternanceImg from '@/assets/images/bitmap/stage-alternance.png';
+import vanierImg from '@/assets/images/bitmap/cgep-vanier-grand.png';
+import heroImg from '@/assets/images/bitmap/hero-formation.png';
 
-            <div class="absolute bottom-10 flex space-x-4">
-                <button
-                    v-for="year in otherYears"
-                    :key="year"
-                    class="px-4 py-2 bg-white text-black rounded-lg shadow-md hover:bg-gray-200"
-                    @click="changeYear(year)"
-                >
-                    Les {{ year }}ème année
-                </button>
-            </div>
-        </div>
-        <div v-show="!allLoaded">
-            loader
-        </div>
-        <div>
-            dzkdziub
-        </div>
-    </div>
-</template>
-  
 
-<script setup lang="ts">
 const currentYear = ref(1);
 const isTransitioning = ref(false);
 const allLoaded = ref(false);
@@ -105,7 +70,7 @@ function changeYear(newYear: number) {
         currentVideo.value = `still-${newYear}`;
         playCurrentVideo();
         isTransitioning.value = false;
-    }, 5000); // Durée de la vidéo de transition
+    }, 7000); // Durée de la vidéo de transition
 }
 
 function onVideoEnded() {
@@ -115,4 +80,168 @@ function onVideoEnded() {
         isTransitioning.value = false;
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+
+<template>
+    <main>
+        <div class="hidden xl:block">
+            <div v-show="allLoaded" class="relative w-full h-screen flex items-center justify-center bg-noir">
+                <div class="relative w-screen overflow-hidden">
+                    <video
+                        v-for="video in allVideos"
+                        v-show="currentVideo === video.name"
+                        :key="video.name"
+                        ref="videos"
+                        :src="video.src"
+                        autoplay
+                        muted
+                        loop
+                        class="w-full h-full"
+                        @ended="onVideoEnded"
+                    />
+                </div>
+                <div class="absolute top-1/2 translate-y-1/4 w-4/5 flex justify-between">
+                    <LandingButtonAction
+                        v-for="year in otherYears"
+                        :key="year"
+                        class="px-4 py-2 bg-white text-black rounded-lg shadow-md hover:bg-gray-200"
+                        @click="changeYear(year)"
+                    >
+                        Les {{ year }}
+                        <span v-if="year === 1">
+                            <sup>ères</sup>
+                        </span>
+                        <span v-else>
+                            <sup>èmes</sup>
+                        </span>
+                        années
+                    </LandingButtonAction>
+                </div>
+                <div class="absolute flex flex-col gap-2 items-center -translate-y-1/4 top-1/2 bg-gris rounded-xl py-6 px-14 ">
+                    <img class="w-64" src="../assets/images/svg/mmi_logo-white.svg" alt="Logo MMI">
+                    <h1 class="uppercase font-poppins font-bold text-4xl text-white">La Formation</h1>
+                </div>
+            </div>
+            <div v-show="!allLoaded" class="bg-gris flex justify-center items-center w-full h-screen">
+                <span class="loader"/>
+            </div>
+        </div>
+
+        <MyHero class="xl:hidden" :image=heroImg alt="Bâtiment MMI" title="MMI Montbéliard"/>
+
+        <div class="margin xl:pt-10">
+            
+            <section class="mb-12 md:mb-24">
+                <SecondHeading class="lg:w-4/5 xl:w-3/5 mx-auto" title-black="Les parcours " title-yellow="disponibles" />
+                <p class="text-noir">
+                    La formation MMI propose trois parcours. Chacun permet d'acquérir des compétences spécifiques afin de répondre aux besoins du secteur numérique et de la communication.
+                </p>
+            </section>
+            
+        </div>
+        <ParcoursSection class="-mt-20 hidden lg:block" />
+
+        <ParcoursSectionMini class="-mt-14 lg:hidden" />
+
+        <div class="margin">
+            <section class="mb-12 md:mb-24">
+                <AnimatedHeading class="text-noir mb-8" title="Le programme" />
+                <p class="text-noir my-5 xl:m-0">
+                    En première année, vous explorez toutes les spécialités pour acquérir une base solide et découvrir ce qui vous plaît. À partir de la deuxième année, vous pourrez choisir l’un des trois parcours proposés et vous y spécialiser jusqu’à la fin du Bachelor.
+                    <br>
+                    En troisième année, vous suivrez principalement des cours liés à votre spécialité, ainsi que quelques enseignements généraux comme l'anglais.
+                    <br>
+                    Cette organisation vous donne le temps d'explorer chaque parcours et de choisir celui qui vous correspond le mieux pour vous perfectionner dans ce domaine.
+                </p>
+
+                <YearsTable />
+            </section>
+
+            <SimpleSection
+                heading-title="Stage et alternance"
+                paragraph-text="Au cours de cette formation, des stages en entreprise sont obligatoires en 2ème et 3ème année. Le stage de 2ème année dure 10 semaines, tandis que celui de 3ème année s’étend sur 16 semaines, généralement de mars à la fin de l'année scolaire. Ces périodes vous permettent d'acquérir une solide expérience professionnelle.<br><br>Il est également possible de signer un contrat d’alternance dès la 2ème année jusqu'à la fin de la formation. En alternance, vous suivrez un rythme précis entre école et entreprise et serez dispensé de stage, étant déjà en activité professionnelle."
+                :image-src="alternanceImg"
+                image-alt="Étudiants de MMI en stage"
+            />   
+
+            <SimpleSection
+                heading-title="L'international"
+                paragraph-text="Le département est en partenariat avec des universités étrangères, offrant ainsi aux étudiants la possibilité de partir un semestre à l’étranger. Cette expérience permet de découvrir de nouvelles cultures, d'améliorer ses compétences linguistiques et d’élargir ses connaissances dans un environnement international.<br><br>En étudiant dans des établissements partenaires, vous pourrez enrichir votre parcours académique et personnel, développer votre ouverture d'esprit et renforcer votre profil professionnel dans un contexte global."
+                :image-src="vanierImg"
+                image-alt="CGEP de Vanier"
+                style="margin-bottom: 20px;"
+            />      
+
+            <div class="flex justify-center xl:justify-start">
+                <TransparentButtonY class="hidden md:block w-fit" to="/international">
+                    Découvrir
+                </TransparentButtonY>
+                <TransparentButtonYMini class="md:hidden" to="/international">
+                    Découvrir
+                </TransparentButtonYMini>
+            </div>
+        </div>
+    </main>
+</template>
+
+
+
+<style scoped>
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    border: 3px solid;
+    border-color: #FFF #FFF transparent transparent;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+.loader::after,
+.loader::before {
+    content: '';  
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border: 3px solid;
+    border-color: transparent transparent #FFD53E#FFD53E;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: rotationBack 0.5s linear infinite;
+    transform-origin: center center;
+}
+.loader::before {
+    width: 32px;
+    height: 32px;
+    border-color: #FFF #FFF transparent transparent;
+    animation: rotation 1.5s linear infinite;
+}
+    
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+} 
+@keyframes rotationBack {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(-360deg);
+    }
+}
+    
+
+
+</style>
\ No newline at end of file
diff --git a/pages/mentions-legales.vue b/pages/mentions-legales.vue
index 888fb80..ab89e57 100644
--- a/pages/mentions-legales.vue
+++ b/pages/mentions-legales.vue
@@ -5,7 +5,7 @@ import heroImg from '@/assets/images/bitmap/hero-mentions.png';
 
 <template>
     <main>
-        <MyHero :image=heroImg alt="Bâtiment MMI" title="Mentions légales"/>
+        <MyHero :image=heroImg alt="Étudiants avec leurs ordinateurs" title="Mentions légales"/>
         <section class="margin">
             <SecondHeading class="lg:w-3/5 xl:w-2/5 mx-auto" title-black="Mentions " title-yellow="légales" />
             <h3 class="text-noir uppercase">
@@ -27,6 +27,12 @@ import heroImg from '@/assets/images/bitmap/hero-mentions.png';
             <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
                 Infomaniak
             </p>
+            <h3 class="text-noir uppercase">
+                Crédits Photographiques
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Université de Franche-Comté.
+            </p>
             <h3 class="text-noir uppercase">
                 Propriété intellectuelle
             </h3>