diff --git a/assets/css/main.css b/assets/css/main.css
index d7f7ade..35597b2 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
 
 @tailwind base;
 @tailwind components;
diff --git a/assets/images/bitmap/canada.png b/assets/images/bitmap/canada.png
new file mode 100644
index 0000000..1972279
Binary files /dev/null and b/assets/images/bitmap/canada.png differ
diff --git a/assets/images/bitmap/hero-mentions.png b/assets/images/bitmap/hero-mentions.png
new file mode 100644
index 0000000..217b2e1
Binary files /dev/null and b/assets/images/bitmap/hero-mentions.png differ
diff --git a/assets/images/bitmap/situation.png b/assets/images/bitmap/situation.png
new file mode 100644
index 0000000..f28f34c
Binary files /dev/null and b/assets/images/bitmap/situation.png differ
diff --git a/assets/images/svg/sliding-vector.svg b/assets/images/svg/sliding-vector.svg
new file mode 100644
index 0000000..1fba2a9
--- /dev/null
+++ b/assets/images/svg/sliding-vector.svg
@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 0.251953C23.7145 0.653852 23.426 1.05342 23.1343 1.45064C17.0651 9.71667 9.66489 16.9627 1.22286 22.9053C0.817623 23.1905 0.409998 23.4727 0 23.752C0.409907 24.0313 0.817454 24.3136 1.2226 24.599C9.66272 30.544 17.0626 37.7897 23.1342 46.0538C23.4258 46.4509 23.7144 46.8503 24 47.252C24.2853 46.8502 24.5736 46.4505 24.8651 46.0534C30.9318 37.7853 38.3324 30.539 46.7763 24.5987C47.1819 24.3135 47.5897 24.0312 48 23.752C47.5896 23.4729 47.1816 23.1908 46.776 22.9056C38.3301 16.9677 30.9294 9.72106 24.865 1.45116C24.5735 1.05378 24.2852 0.654031 24 0.251953ZM23.9993 2.63691C17.9872 10.7402 10.7091 17.8661 2.4325 23.7523C10.7073 29.6407 17.985 36.7664 23.9993 44.8681C30.0088 36.7627 37.2871 29.6364 45.5654 23.7523C37.2853 17.8704 30.0066 10.7439 23.9993 2.63691Z" fill="url(#paint0_linear_986_65)"/>
+<defs>
+<linearGradient id="paint0_linear_986_65" x1="0" y1="23.752" x2="48" y2="23.752" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD53E"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/videos/Logo_Com_1.mp4 b/assets/videos/Logo_Com_1.mp4
new file mode 100644
index 0000000..955b704
Binary files /dev/null and b/assets/videos/Logo_Com_1.mp4 differ
diff --git a/assets/videos/Logo_Crea_1.mp4 b/assets/videos/Logo_Crea_1.mp4
new file mode 100644
index 0000000..e0006d4
Binary files /dev/null and b/assets/videos/Logo_Crea_1.mp4 differ
diff --git a/assets/videos/Logo_Dev_1.mp4 b/assets/videos/Logo_Dev_1.mp4
new file mode 100644
index 0000000..80712d4
Binary files /dev/null and b/assets/videos/Logo_Dev_1.mp4 differ
diff --git a/components/animatedHeading.vue b/components/animatedHeading.vue
index 70ec0e0..906e244 100644
--- a/components/animatedHeading.vue
+++ b/components/animatedHeading.vue
@@ -40,7 +40,7 @@ onMounted(() => {
     width: 25%;
     background: #FFD53E;
     transition: width .4s;
-    z-index: 20;
+    /* z-index: 20; */
     /* animation: allerretour 1s ease-in-out forwards; */
 }
 
diff --git a/components/discoverButton.vue b/components/discoverButton.vue
new file mode 100644
index 0000000..b6d587e
--- /dev/null
+++ b/components/discoverButton.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+    to: string;
+}>();
+</script>
+
+
+<template>
+    <NuxtLink :to="to" class="contents">
+        <div class="flex items-center space-x-16 text-noir py-2 px-7 border-solid border-[1px] border-noir w-fit hover:bg-noir hover:text-white duration-500">
+            <p>Découvrir </p>
+            <p>→</p>
+        </div>
+    </NuxtLink>
+</template>
\ No newline at end of file
diff --git a/components/myHero.vue b/components/myHero.vue
index 455a3fd..54701d8 100644
--- a/components/myHero.vue
+++ b/components/myHero.vue
@@ -19,7 +19,7 @@ const getLink = (path: string) => {
             <img :src=image class="object-cover max-h-full w-full rounded-xl" :alt=alt>
         </div>
         <img class="hidden xl:block absolute top-[24%] left-1/2 -translate-x-1/2 h-24" src="@/assets/images/svg/mmi_logo-white.svg" alt="Logo MMI">
-        <h1 class="uppercase text-white absolute top-[22%] md:top-[17%] xl:top-[48%] left-1/2 -translate-x-1/2">
+        <h1 class="uppercase w-full text-center text-white absolute top-[22%] md:top-[17%] xl:top-[48%] left-1/2 -translate-x-1/2">
             {{title}}
         </h1>
         <div class="absolute top-[34%] xl:top-[70%] w-full text-center">
diff --git a/components/parcoursSection.vue b/components/parcoursSection.vue
new file mode 100644
index 0000000..5706d2e
--- /dev/null
+++ b/components/parcoursSection.vue
@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <ul id="cards">
+            <li id="card1" class="card">
+                <div class="card-body">
+                    <div class="card-body-content text-noir">
+                        <h3 class="card-body-content-title">Développement Web et <br>Dispositifs Interactifs</h3>
+                        <p class="card-body-content-desc">Le parcours développement web et dispositifs interactifs en BUT MMI forme aux compétences techniques en programmation, création de sites web, applications mobiles, bases de données, et technologies interactives. <br>
+                            Ce parcours vous dotera des compétences techniques nécessaires pour concevoir des sites internet complets. Vous explorerez différents langages de programmation, notamment HTML, JavaScript, CSS, et Vue.js, afin de réaliser des sites fonctionnels et modernes.</p>
+                        <DiscoverButton to="/parcours/developpement" />
+                    </div>
+                    <video autoplay loop muted class="w-full aspect-square flex items-center" src="@/assets/videos/Logo_Dev_1.mp4"/>
+                </div>
+            </li>
+            <li id="card2" class="card">
+                <div class="card-body">
+                    <div class="card-body-content text-noir">
+                        <h3 class="card-body-content-title">Création Numérique</h3>
+                        <p class="card-body-content-desc">Le parcours création numérique en BUT MMI développe la créativité en conception numérique, incluant interfaces, supports de communication, montage vidéo, motion design et 3D. <br>
+                            Ce parcours vous plongera dans la création de supports visuels variés, allant des maquettes de sites web aux affiches et vidéos. Vous apprendrez à maîtriser des logiciels tels qu’After Effects, Photoshop et Illustrator pour donner vie à vos projets visuels.</p>
+                        <DiscoverButton to="/parcours/creation" />
+                    </div>
+                    <video autoplay loop muted class="w-full aspect-square flex items-center" src="@/assets/videos/Logo_Crea_1.mp4"/>
+                </div>
+            </li>
+            <li id="card3" class="card">
+                <div class="card-body">
+                    <div class="card-body-content text-noir">
+                        <h3 class="card-body-content-title">Stratégie de Communication <br>Numérique et Design d'Expérience</h3>
+                        <p class="card-body-content-desc">Le parcours stratégie de communication numérique et design d'expérience en BUT MMI forme à la stratégie de communication, incluant création de contenu, médias sociaux, relations publiques, et marketing digital. <br>
+                            Ce parcours vous enseignera les stratégies efficaces pour transmettre des messages percutants. Vous découvrirez comment optimiser le référencement d’un site web, interpréter des données analytiques, et mettre en place des stratégies pour captiver une audience.
+                        </p>
+                        <DiscoverButton to="/parcours/communication" />
+                    </div>
+                    <video autoplay loop muted class="w-full aspect-square flex items-center" src="@/assets/videos/Logo_Com_1.mp4"/>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+
+
+<style scoped>
+
+
+
+#cards {
+	list-style: none;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: repeat(3, 87vh);
+	gap: 4vw;
+	padding-bottom: calc(3 * 1.5em);
+}
+
+#card1 {
+	--index: 1;
+}
+#card2 {
+	--index: 2;
+}
+#card3 {
+	--index: 3;
+}
+
+.card {
+	position: sticky;
+	top: 0;
+	padding-top: calc((var(--index) ) * 1.5em);
+}
+
+.card-body {
+    background-color: white;
+	box-sizing: border-box;
+    border: solid 2px rgba(169, 169, 169, 0.6);
+    border-left: 0px;
+    border-right: 0px;
+	padding: 56px;
+
+	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
+
+    height: 87vh;
+	transition: all 0.5s;
+
+    display: grid;
+    align-items: center;
+    grid-template-columns: repeat(4, 1fr);
+}
+
+.card-body-content {
+    grid-column: span 3;
+    margin-right: 60px;
+}
+
+.card-body-content-desc {
+    margin: 56px 0px;
+}
+
+</style>
\ No newline at end of file
diff --git a/components/parcoursSectionMini.vue b/components/parcoursSectionMini.vue
new file mode 100644
index 0000000..25e243b
--- /dev/null
+++ b/components/parcoursSectionMini.vue
@@ -0,0 +1,107 @@
+<template>
+    <div>
+        <ul id="cards">
+            <li id="card1" class="card">
+                <div class="card-body">
+                    <div class="card-body-content text-noir">
+                        <h3 class="card-body-content-title">Développement Web et <br>Dispositifs Interactifs</h3>
+                        <p class="card-body-content-desc">Le parcours développement web et dispositifs interactifs en BUT MMI forme aux compétences techniques en programmation, création de sites web, applications mobiles, bases de données, et technologies interactives. <br>
+                            Ce parcours vous dotera des compétences techniques nécessaires pour concevoir des sites internet complets. Vous explorerez différents langages de programmation, notamment HTML, JavaScript, CSS, et Vue.js, afin de réaliser des sites fonctionnels et modernes.</p>
+                        <DiscoverButton to="/parcours/developpement" />
+                    </div>
+                    <video autoplay loop muted class="bg-[#D9D9D9] h-28 mt-5" src="@/assets/videos/Logo_Dev_1.mp4"/>
+                </div>
+            </li>
+            <li id="card2" class="card">
+                <div class="card-body">
+                    <div class="card-body-content text-noir">
+                        <h3 class="card-body-content-title">Création Numérique</h3>
+                        <p class="card-body-content-desc">Le parcours création numérique en BUT MMI développe la créativité en conception numérique, incluant interfaces, supports de communication, montage vidéo, motion design et 3D. <br>
+                            Ce parcours vous plongera dans la création de supports visuels variés, allant des maquettes de sites web aux affiches et vidéos. Vous apprendrez à maîtriser des logiciels tels qu’After Effects, Photoshop et Illustrator pour donner vie à vos projets visuels.</p>
+                        <DiscoverButton to="/parcours/creation" />
+                    </div>
+                    <video autoplay loop muted class="bg-[#D9D9D9] h-28 mt-5" src="@/assets/videos/Logo_Crea_1.mp4"/>
+                </div>
+            </li>
+            <li id="card3" class="card">
+                <div class="card-body">
+                    <div class="card-body-content text-noir">
+                        <h3 class="card-body-content-title">Stratégie de Communication <br>Numérique et Design d'Expérience</h3>
+                        <p class="card-body-content-desc">Le parcours stratégie de communication numérique et design d'expérience en BUT MMI forme à la stratégie de communication, incluant création de contenu, médias sociaux, relations publiques, et marketing digital. <br>
+                            Ce parcours vous enseignera les stratégies efficaces pour transmettre des messages percutants. Vous découvrirez comment optimiser le référencement d’un site web, interpréter des données analytiques, et mettre en place des stratégies pour captiver une audience.
+                        </p>
+                        <DiscoverButton to="/parcours/communication" />
+                    </div>
+                    <video autoplay loop muted class="bg-[#D9D9D9] h-28 mt-5" src="@/assets/videos/Logo_Com_1.mp4"/>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+
+
+<style scoped>
+
+
+
+#cards {
+	list-style: none;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: repeat(3, 87vh);
+	gap: 4vw;
+	padding-bottom: calc(3 * 1.5em);
+}
+
+#card1 {
+	--index: 1;
+}
+#card2 {
+	--index: 2;
+}
+#card3 {
+	--index: 3;
+}
+
+.card {
+	position: sticky;
+	top: 0;
+	padding-top: calc((var(--index) ) * 1.5em);
+}
+
+.card-body {
+    background-color: white;
+	box-sizing: border-box;
+    border: solid 2px rgba(169, 169, 169, 0.6);
+    border-left: 0px;
+    border-right: 0px;
+	padding: 56px 24px;
+
+	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
+
+    height: 87vh;
+	transition: all 0.5s;
+    display: flex;
+    flex-direction: column;
+
+
+}
+
+@media (min-width: 768px) {
+    .card-body {
+        padding: 56px;
+    }
+}
+
+.card-body-content-desc {
+    margin: 20px 0px;
+}
+
+@media (min-width: 768px) {
+    .card-body-content-desc {
+        margin: 32px 0px;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/components/slidingText.vue b/components/slidingText.vue
new file mode 100644
index 0000000..12e1fee
--- /dev/null
+++ b/components/slidingText.vue
@@ -0,0 +1,134 @@
+<template>
+    <div
+class="slider my-14 md:my-24" reverse="true" style="
+        --width: 300px;
+        --height: 60px;
+        --quantity: 12; /* 6 textes + 6 vecteurs */
+        --gap: 0px; /* Ajustez cet espacement pour centrer */
+    ">
+        <div class="list">
+            <div class="item" style="--position: 1">
+                <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">
+            </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">
+            </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">
+            </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">
+            </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">
+            </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">
+            </div>
+        </div>
+    </div>
+</template>
+
+
+
+<style scoped>
+.slider {
+    width: 100%;
+    height: var(--height);
+    overflow: hidden;
+    position: relative;
+    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
+}
+
+.slider .list {
+    display: flex;
+    width: calc((var(--width) + var(--gap)) * var(--quantity));
+    position: relative;
+}
+
+.slider .list .item {
+    flex: 0 0 auto;
+    width: var(--width);
+    height: var(--height);
+    position: absolute;
+    left: 100%;
+    animation: autoRun 16s linear infinite;
+    animation-delay: calc((16s / var(--quantity)) * (var(--position) - 1))!important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.slider[reverse="true"] .item {
+    animation: reversePlay 16s linear infinite;
+}
+
+.text {
+    font-family: 'Space Grotesk', sans-serif;
+    font-weight: 300;
+    font-size: 2.5rem;
+    color: #000;
+}
+
+.vector {
+    display: block;
+    height: var(--height);
+    width: auto; /* Conserve les proportions */
+}
+
+@media (max-width: 768px) {
+    .text {
+        font-size: 1.5rem;
+    }
+    .vector {
+        height: 2rem;
+    }
+}
+
+/* Animation pour le déroulement normal */
+@keyframes autoRun {
+    from {
+        left: 100%;
+    }
+    to {
+        left: calc((var(--width) + var(--gap)) * -1);
+    }
+}
+
+/* Animation pour le déroulement inversé */
+@keyframes reversePlay {
+    from {
+        left: calc((var(--width) + var(--gap)) * -1);
+    }
+    to {
+        left: 100%;
+    }
+}
+
+.slider:hover .item {
+    animation-play-state: paused!important;
+    filter: grayscale(1);
+}
+
+.slider .item:hover {
+    filter: grayscale(0);
+}
+</style>
diff --git a/pages/candidater.vue b/pages/candidater.vue
index 71fdd55..0bbce2d 100644
--- a/pages/candidater.vue
+++ b/pages/candidater.vue
@@ -11,7 +11,7 @@ import heroImg from '../assets/images/bitmap/hero-candidater.png';
             <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:justify-between">
+                <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.
diff --git a/pages/index.vue b/pages/index.vue
index e128844..25c9cc8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,25 +1,8 @@
-<template>
-    <main>
-        <div class="my-[1%]">
-            <div class="absolute w-full max-w-[98%] mx-[1%] bg-black opacity-[45%] rounded-xl" :style="{ height: containerHeight + 'px' }"/>
-            <video id="intro" autoplay loop muted src="@/assets/videos/Video_introduction_MMI/Video_introduction_MMI.mp4" class="rounded-xl max-w-[98%] mx-[1%]"/>
-        </div>
-        <!-- <div class="hidden xl:block absolute w-full" :style="{ top: containerHeight / 4 + 'px'}">
-            <img class="h-24 mx-auto" src="@/assets/images/svg/mmi_logo-white.svg" alt="Logo">
-            <h1 class="uppercase text-white text-center mt-16 mb-14">MMI Montbéliard</h1>
-            <div class="flex justify-center space-x-24 mt-8">
-                <LandingButton to="/la-formation">Découvrir la formation</LandingButton>
-                <LandingButton to="/candidater">Candidater</LandingButton>
-            </div>
-        </div> -->
-        <div class="static">
-            <p class="">bla</p>
-        </div>
-    </main>
-</template>
+<script setup lang="ts">
+import SlidingText from '~/components/slidingText.vue';
+import heroImg from '../assets/images/bitmap/home-test.png';
 
 
-<script setup lang="ts">
 const containerHeight = ref(0);
 
 const calculateHeight = () => {
@@ -39,4 +22,90 @@ onUnmounted(() => {
     window.removeEventListener("resize", calculateHeight); 
 });
 
-</script>
\ No newline at end of file
+</script>
+
+
+<template>
+    <main>
+        <div class="my-[1%] hidden md:block">
+            <div class="absolute w-full max-w-[98%] mx-[1%] bg-black opacity-[45%] rounded-xl" :style="{ height: containerHeight + 'px' }"/>
+            <video id="intro" autoplay loop muted src="@/assets/videos/Video_introduction_MMI/Video_introduction_MMI.mp4" class="rounded-xl max-w-[98%] mx-[1%]"/>
+            <img class="hidden xl:block absolute top-[24%] left-1/2 -translate-x-1/2 h-24" src="@/assets/images/svg/mmi_logo-white.svg" alt="Logo MMI">
+            <h1 class="uppercase w-full text-center text-white absolute top-[22%] lg:top-[34%] xl:top-[48%] left-1/2 -translate-x-1/2">
+                MMI Montbéliard
+            </h1>
+            <div class="absolute top-[38%] lg:top-[50%] xl:top-[70%] w-full text-center">
+                <div class="block md:hidden space-x-[16%]">
+                    <LandingButtonMini to="/la-formation">Découvrir la formation</LandingButtonMini>
+                    <LandingButtonMini to="/candidater">Candidater</LandingButtonMini>
+                </div>
+                <div class="hidden md:block space-x-[16%]">
+                    <LandingButton to="/la-formation">Découvrir la formation</LandingButton>
+                    <LandingButton to="/candidater">Candidater</LandingButton>
+                </div>
+            </div>
+        </div>
+        
+        <MyHero class="md:hidden" :image=heroImg alt="Bâtiment MMI" title="MMI Montbéliard"/>
+
+        <div class="margin"> 
+
+            <SecondHeading class="lg:mx-24" title-black="La formation de 3 ans qui vous prépare aux " title-yellow="métiers du multimédia" />
+
+            <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="MMI qu'est-ce que c'est ?" />
+                    <p class="text-noir my-5 xl:m-0">
+                        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">
+            </section>
+
+            <section class="mb-12 md:mb-24">
+                <div class="">
+                    <AnimatedHeading class="text-noir mb-8" title="Des parcours qui vous mènent à la réussite" />
+                    <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>
+                </div>
+            </section>
+        </div>
+
+        <ParcoursSection class="-mt-20 hidden lg:block" />
+
+        <ParcoursSectionMini class="-mt-14 lg:hidden" />
+
+        <SlidingText />
+
+        <div class="margin">
+            <section class="my-36">
+                <AnimatedHeading class="text-noir mb-8" title="Donnez vie à des projets ambitieux" />
+                <p class="text-noir my-5 xl:m-0">
+                    Ces témoignages reflètent le parcours de nos étudiants, qui ont su tirer parti de notre formation pour s’épanouir dans le secteur numérique et la communication.
+                </p>
+            </section>
+
+            <section>
+                <AnimatedHeading class="text-noir mb-8" title="MMI c’est aussi des des rencontres et des parcours inspirants" />
+                <p class="text-noir">
+                    Intégrer le BUT MMI, c'est partir à la rencontre de professionnels, explorer des parcours variés et relever des défis concrets. Des expériences qui forgent des compétences et ouvrent de nouvelles perspectives, que ce soit à travers des projets locaux ou un semestre à l'international.
+                </p>
+                <div class="grid grid-cols-1 md:grid-cols-2 md:gap-24 xl:gap-44">
+                    <div>
+                        <img class="my-3 md:mt-8" src="@/assets/images/bitmap/situation.png" alt="photo mise en situation professionnelle" >
+                        <h3 class="text-noir border-l-[8px] md:border-l-[12px] border-jaune pl-2 md:pl-5">
+                            Des mises en situations <br>professionnelles
+                        </h3>
+                    </div>
+                    <div>
+                        <img class="my-3 mt-8" src="@/assets/images/bitmap/canada.png" alt="photo canada" >
+                        <h3 class="text-noir md:text-right border-0 border-l-[8px] md:border-l-0 md:border-r-[12px] border-gris pl-2 md:pr-5">
+                            Un semestre <br>au Canada
+                        </h3>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+</template>
\ No newline at end of file
diff --git a/pages/mentions-legales.vue b/pages/mentions-legales.vue
index 8e436cc..888fb80 100644
--- a/pages/mentions-legales.vue
+++ b/pages/mentions-legales.vue
@@ -1,3 +1,80 @@
+<script setup lang="ts">
+import heroImg from '@/assets/images/bitmap/hero-mentions.png';
+</script>
+
+
 <template>
-    <div/>
+    <main>
+        <MyHero :image=heroImg alt="Bâtiment MMI" 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">
+                Département MMI de Montbéliard
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Adresse : 4 Place Lucien Tharradin, 25200 Montbéliard
+                <br>Téléphone : 03 81 99 47 34
+            </p>
+            <h3 class="text-noir uppercase">
+                Directeur de la Publication
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Monsieur Xavier Senente
+            </p>
+            <h3 class="text-noir uppercase">
+                Hébergement du Site
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Infomaniak
+            </p>
+            <h3 class="text-noir uppercase">
+                Propriété intellectuelle
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                L’ensemble des contenus de ce site (textes, images, vidéos, logos, graphiques, etc.)
+                est la propriété du Département MMI de Montbéliard ou de partenaires ayant cédé les
+                droits d’utilisation.
+                <br>
+                Toute reproduction, distribution, modification ou utilisation sans autorisation écrite
+                préalable est strictement interdite.
+            </p>
+            <h3 class="text-noir uppercase">
+                Protection des Données Personnelles
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Ce site peut recueillir des données personnelles via des formulaires de contact ou
+                d’inscription. Ces informations sont traitées conformément à notre politique de
+                confidentialité, accessible [lien vers la politique de confidentialité].
+            </p>
+            <h3 class="text-noir uppercase">
+                Cookies
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Des cookies sont utilisés sur ce site pour améliorer l’expérience utilisateur.
+            </p>
+            <h3 class="text-noir uppercase">
+                Liens Hypertextes
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Ce site peut inclure des liens vers d’autres sites web. Le Département MMI de
+                Montbéliard n’est pas responsable du contenu de ces sites externes.
+            </p>
+            <h3 class="text-noir uppercase">
+                Responsabilité
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Le Département MMI de Montbéliard s’efforce de fournir des informations exactes et à
+                jour sur ce site, mais ne garantit pas l’exactitude, l’exhaustivité, ou la pertinence de ces
+                informations. Le Département décline toute responsabilité pour les erreurs ou omissions
+                dans le contenu.
+            </p>
+            <h3 class="text-noir uppercase">
+                Droit Applicable
+            </h3>
+            <p class="text-noir mt-1 mb-6 md:mt-3 md:mb-8">
+                Ce site est protégé par les lois françaises et internationales relatives aux droits d’auteur
+                et à la propriété intellectuelle. Tous les droits de reproduction sont réservés,
+            </p>
+        </section>
+    </main>
 </template>
\ No newline at end of file
diff --git a/pages/parcours/communication.vue b/pages/parcours/communication.vue
new file mode 100644
index 0000000..6e71569
--- /dev/null
+++ b/pages/parcours/communication.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>comm</div>
+</template>
\ No newline at end of file
diff --git a/pages/parcours/creation.vue b/pages/parcours/creation.vue
new file mode 100644
index 0000000..c09d477
--- /dev/null
+++ b/pages/parcours/creation.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>crea</div>
+</template>
\ No newline at end of file
diff --git a/pages/parcours/developpement.vue b/pages/parcours/developpement.vue
new file mode 100644
index 0000000..5c7fb14
--- /dev/null
+++ b/pages/parcours/developpement.vue
@@ -0,0 +1,3 @@
+<template>
+    <div>dev</div>
+</template>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index b5311c8..a6b49a9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,7 @@ export default {
       fontFamily: {
         poppins: "Poppins, sans-serif",
         manrope: "Manrope, sans-serif",
+        spacegrotesk: "Space Grotesk, sans-serif",
       },
       screens: {
         // 'tablet': '640px',