International page + formation page + confidentialite page

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>

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>

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>

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>

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>

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>

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">

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>

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">

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>