Page d'accueil + Mentions légales

assets/css/main.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&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:[email protected]&display=swap');
 
 @tailwind base;
 @tailwind components;

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; */
 }
 

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>

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

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>

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>

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>