I fixed the design of the Tutorial

src/Iframes/TutorialV1/Tuto/Components/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { currentStepStore } from "../Store/StepStore";
     import Steps from "./Steps.svelte";
+    import Welcome from "./Steps/Welcome.svelte";
     import Step1 from "./Steps/Step1.svelte";
     import Step2 from "./Steps/Step2.svelte";
     import Step3 from "./Steps/Step3.svelte";
@@ -14,18 +15,21 @@
     }
 </script>
 
-<div class="tuto tw-h-full tw-text-center tw-bg-dark-purple/95">
+<div class="tuto  tw-h-full tw-text-center tw-bg-transparent">
     <Steps 
         on:close={close}
         on:skip={close}
     >
+        {#if $currentStepStore === 0}
+            <Welcome />
+        {/if}
         {#if $currentStepStore === 1}
             <Step1 />
         {/if}
         {#if $currentStepStore === 2}
             <Step2 />
         {/if}
-        {#if $currentStepStore === 3}
+        {#if $currentStepStore === 3 }
             <Step3 />
         {/if}
     </Steps>

src/Iframes/TutorialV1/Tuto/Components/Steps.svelte

@@ -5,8 +5,14 @@
 
     const dispatch = createEventDispatcher();
 
+    const steps = ['Welcome', 'Move', 'Interact', 'Discover'];
+
+    const setStep = (index: number) => {
+    currentStepStore.set(index);
+    };
+
     function next(){
-        if($currentStepStore === 3)return;
+        if($currentStepStore === steps.length)return;
         currentStepStore.set($currentStepStore + 1);
     }
     function previous(){
@@ -16,54 +22,77 @@
     function close(){
         dispatch('close');
     }
-    function skip(){
-        dispatch('skip');
-    }
+    $: console.log('Current Step:', $currentStepStore);
 </script>
-<div class="body">
-    <slot></slot>
+<div class="tw-flex tw-flex-col tw-items-center tw-w-full  tw-pt-20 tw-pb-24 ">
+
+
 
-    <div class="progress-bar">
+    <div class="header  tw-p-3 tw-flex tw-justify-around tw-fixed tw-top-14 tw-w-full tw-h-3 tw-overflow-visible   ">
+        <nav class="tw-flex  tw-gap-2 tw-py-4 tw-text-sm tw-font-medium tw-items-center">
+            {#each steps as step, index}
+            <button
+                on:click={() => setStep(index)}
+                class="tw-relative tw-uppercase tw-text-white/50 tw-transition-all hover:tw-text-white tw-flex tw-flex-col tw-items-center"
+                class:tw-text-white={index === $currentStepStore}>
+                {step}
+                {#if index === $currentStepStore}
+                <span class="tw-left-0 tw-h-[4px] tw-w-[8em] tw-bg-blue-500 tw-rounded-full tw-flex tw-justify-self-center tw-mt-3"></span>
+                {/if}
+            </button>
+            {/each}
+        </nav>
     </div>
-</div>
-<div class="footer tw-p-3 tw-bg-medium-purple tw-flex tw-justify-around tw-fixed tw-bottom-0 tw-w-full tw-overflow-y-hidden tw-overflow-x-auto tw-flex-wrap tw-overflow-visible">
-    <div class="elispes tw-bg-medium-purple/60 tw-absolute tw-w-full -tw-top-10 tw-flex tw-flex-row tw-justify-center tw-align-middle">
-        <span class="elispe {1 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
-        <span class="elispe {2 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
-        <span class="elispe {3 === $currentStepStore ? 'tw-bg-light-blue' : 'tw-bg-lighter-purple'}"></span>
+
+    <slot></slot>
+
+  <!-- Étapes et actions -->
+    <div class="footer tw-p-3 tw-bg-[#1B2A41] tw-flex tw-justify-around tw-fixed tw-bottom-0 tw-w-full tw-overflow-visible tw-flex-wrap">
+        <!-- <div class="tw-w-full tw-h-[240px]  tw-rounded-full tw-overflow-hidden tw-shadow-inner tw-mt-3">
+            <div class="tw-h-full tw-transition-all tw-duration-500 tw-ease-in-out progress-bar animated-gradient" style="width: {progress}%"></div>
+        </div> -->
+
+            {#if $currentStepStore === 0}
+            <div class="tw-flex tw-w-full "> 
+            <button class=" tw-w-full tw-justify-center tw-mx-6 tw-h-[50px] tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
+                <span class="tw-px-4 tw-absolute tw-left-4"></span> {i18next.t('tuto.skipTutorial')}
+            </button>
+            <button class=" tw-w-full tw-bg-[#4156F6] tw-rounded-[8px] tw-h-[50px] tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
+                <span class="tw-px-4 tw-absolute tw-left-4"></span> {i18next.t('tuto.startTutorial')}
+                </button>
+            </div>
+
+            {:else if $currentStepStore === 3}
+
+            <button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-mx-4 tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
+                {i18next.t('tuto.finish')}
+                <span class="tw-px-4 tw-absolute tw-right-4"></span>
+            </button>
+
+            {:else}
+            <button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-mx-4 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
+                {i18next.t('tuto.next')}
+                <span class="tw-px-4 tw-absolute tw-right-4"></span>
+            </button>
+            {/if}
     </div>
-    <button class="btn {$currentStepStore === 1 ? 'disabled' : 'light outline'} tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={previous}>
-        <span class="tw-px-4 tw-absolute tw-left-4">&lt;</span> {i18next.t('tuto.previous')}
-    </button>
-    {#if $currentStepStore === 3}
-        <button class="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
-            {i18next.t('tuto.finish')}
-        </button>
-    {:else}
-        <button class="btn light tw-w-1/3 tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
-            {i18next.t('tuto.next')}
-            <span class="tw-px-4 tw-absolute tw-right-4">></span>
-        </button>
-    {/if}
-    <button class="btn blue-title tw-underline tw-decoration-light-blue tw-cursor-pointer" on:click|stopPropagation={skip}>
-        {i18next.t('tuto.skipAll')}
-    </button>
+
 </div>
+
 <style lang="scss">
-    .footer{
-        overflow: visible;
-        button{
-            max-height: 40px;
-            &:nth-child(1){
-                min-width: 160px;
-                max-width: 180px;
-            }
-            &:nth-child(2){
-                min-width: 150px;
-                max-width: 170px;
-            }
-        }
-    }
+
+.animated-gradient {
+  background-size: 200% 200%;
+  background-image: linear-gradient(to right, #6366f1, #3b82f6, #6366f1);
+  animation: gradient-x 3s ease infinite;
+}
+
+.progress-bar {
+  height: 6px;
+  width: 100%;
+  margin-top: 8px;
+}
+
     .elispes{
         height: 40px;
         .elispe{

src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte

@@ -1,13 +1,29 @@
 <script>
     import i18next from "i18next";
 </script>
-<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
-    <div class="title tw-text-white">
-        <h1 class="tw-p-3">{i18next.t('tuto.step1.title')}</h1>
-        <h2 class="tw-p-3 tw-text-2xl">{i18next.t('tuto.step1.subtitle')}</h2>
-        <p class="tw-text-xs tw-p-0">{i18next.t('tuto.step1.describe')}</p>
-    </div>
-    <div class="video">
+
+
+<div class=" tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-10  tw-mb-5 tw-text-white   tw-h-auto tw-px-5">
+
+
+
+        <h1>{i18next.t('tuto.step1.title')}</h1>
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+
+        <div class="tw-flex tw-flex-col  tw-items-center tw-justify-center tw-mt-[5em]  tw-gap-[15px]  tw-py-1 tw-w-full tw-h-full ">
+            <img src="resources/images/tutov1/move/wokamove.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2 " />
+            <img src="resources/images/tutov1/move/ZQSD.png" alt="Walk" class="tw-w-[30em] tw-h-auto tw-mb-2" />
+            <p class="tw-text-xl tw-p-0">{i18next.t('tuto.step1.use')} <strong> {i18next.t('tuto.step1.arowkeys')} </strong> {i18next.t('tuto.step1.or')} <strong> {i18next.t('tuto.step1.wasd')} </strong> {i18next.t('tuto.step1.aroundTheMap')}</p>
+
+
+            <p class=" tw-p-0"> <strong> {i18next.t('tuto.step1.tip')}</strong> {i18next.t('tuto.step1.describeTip')}</p>
+        </div>
+
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+        <img src="resources/images/tutov1/move/CamOFF.png" alt="Walk" class="tw-w-[120px] tw-h-auto tw-mb-2 tw-opacity-75" />
+        <p class="tw-text-l tw-p-0 tw-opacity-75">{i18next.t('tuto.step1.silentZone')}</p>
+
+    <!-- <div class="video">
         <video class="tw-w-full tw-rounded-lg" 
             poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step1-onboarding.png" 
             controls 
@@ -18,20 +34,21 @@
             <source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-1-onboarding.mp4" type="video/mp4">
             {i18next.t('tuto.videoNotLoaded')}
         </video>
-    </div>
-    <div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
-        <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10 tw-w-1/2 ">
-            <img src="resources/images/tutov1/step1/keyboard.svg" alt="keyboard" class="tw-w-40 tw-h-auto">
-            <p class="tw-text-l tw-text-center tw-py-5 tw-font-bold tw-w-full">{i18next.t('tuto.step1.arrow')}</p>
-        </div>
-        <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10 tw-w-1/2">
-            <img src="resources/images/tutov1/step1/right-click.svg" alt="mouse" class="tw-w-40 tw-h-auto">
-            <p class="tw-text-l tw-text-center tw-py-5 tw-font-bold tw-w-full">{i18next.t('tuto.step1.click')}</p>
-        </div>
-    </div>
+    </div> -->
+
 </div>
 <style lang="scss">
     /* Hide scrollbar for Chrome, Safari and Opera */
+
+    h1,h2,h3{
+        font-family: Roboto Condensed;
+        font-weight: bold
+    }
+
+    p{
+        font-family: Roboto , Arial;
+    }
+
     .ste::-webkit-scrollbar{
         display: none;
     }

src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte

@@ -1,13 +1,31 @@
 <script>
     import i18next from "i18next";
 </script>
-<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
-    <div class="title tw-text-white">
-        <h1 class="tw-p-3">{i18next.t("tuto.step2.title")}</h1>
-        <h2 class="tw-p-3 tw-text-2xl">{i18next.t("tuto.step2.subtitle")}</h2>
-        <p class="tw-text-xs tw-p-0">{i18next.t("tuto.step2.describe")}</p>
-    </div>
-    <div class="video">
+<div class="tw-flex tw-flex-col tw-mt-10  tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-8">
+
+        <h1>{i18next.t("tuto.step2.title")}</h1>
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+
+
+        <img src="resources/images/tutov1/interact/Bubble.png" alt="Walk" class="tw-w-[20em] tw-h-auto tw-mb-2 " />
+        <p class="tw-text-xl tw-p-0"> <strong> {i18next.t("tuto.step2.describe")} </strong> {i18next.t("tuto.step2.describe2")}</p>
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+
+
+        <div class="tw-flex tw-gap-3"> 
+            <div>  <img src="resources/images/tutov1/interact/Lock.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
+                <p class="tw-text-l tw-p-0">{i18next.t("tuto.step2.describe3")}</p>
+            </div>
+
+            <div> 
+                <img src="resources/images/tutov1/interact/ShareScreen.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
+                <p class="tw-text-l tw-p-0">{i18next.t("tuto.step2.describe4")}</p>
+            </div>
+
+        </div>
+
+
+    <!-- <div class="video">
         <video class="tw-w-full tw-rounded-lg" 
             poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step2-onboarding.png" 
             controls 
@@ -18,13 +36,15 @@
             <source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-2-onboarding.mp4" type="video/mp4">
             {i18next.t('tuto.videoNotLoaded')}
         </video>
-    </div>
-    <div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
+    </div> -->
+    <!-- <div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
         <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
             <img src="resources/images/tutov1/step2/woka-meet.png" alt="Meet in" class="tw-w-56 tw-h-auto">
             <p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">{i18next.t('tuto.step2.bubble')}</p>
         </div>
-    </div>
+    </div> -->
+
+
 </div>
 <style lang="scss">
     /* Hide scrollbar for Chrome, Safari and Opera */

src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte

@@ -3,12 +3,32 @@
     import i18next from "i18next";
 
 </script>
-<div class="ste tw-px-16 tw-py-5 tw-overflow-y-scroll tw-h-screen">
-    <div class="title tw-text-white">
-        <h1 class="tw-p-3">{i18next.t("tuto.step3.title")}</h1>
-        <h2 class="tw-p-3 tw-text-2xl">{i18next.t("tuto.step3.subtitle")}</h2>
-    </div>
-    <div class="video">
+<div class="tw-flex tw-flex-col tw-mt-10  tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-8">
+
+        <h1>{i18next.t("tuto.step3.title")}</h1>
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+
+
+        <img src="resources/images/tutov1/discover/Object.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2 " />
+        <p class="tw-p-3 tw-text-xl"><strong> {i18next.t("tuto.step3.interact")} </strong> {i18next.t("tuto.step3.likeSign")} {i18next.t("tuto.step3.sometimes")} <strong> {i18next.t("tuto.step3.closer")}</strong>  </p>
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+
+
+        <div class="tw-flex tw-gap-3"> 
+            <div> 
+            <img src="resources/images/tutov1/discover/GlobalMessage.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
+            <p class="tw-p-3 tw-text-s">{i18next.t("tuto.step3.describe3")}</p>
+            </div>
+
+            <div> 
+            <img src="resources/images/tutov1/discover/Silent.png" alt="Walk" class="tw-w-[10em] tw-h-auto tw-mb-2 " />
+            <p class="tw-p-3 tw-text-s">{i18next.t("tuto.step3.describe4")}</p>
+            </div>
+
+        </div>
+
+
+    <!-- <div class="video">
         <video class="tw-w-full tw-rounded-lg" 
             poster="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step3-onboarding.png" 
             controls 
@@ -19,13 +39,15 @@
             <source src="https://workadventure-chat-uploads.s3.eu-west-1.amazonaws.com/upload/video/step-3-onboarding.mp4" type="video/mp4">
             {i18next.t('tuto.videoNotLoaded')}
         </video>
-    </div>
-    <div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
+    </div> -->
+
+    <!-- <div class="description tw-p-3 tw-mb-16 tw-text-left tw-text-white tw-pb-20 tw-flex tw-row tw-w-full tw-items-center tw-justify-center tw-py-10">
         <div class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-p-10">
             <img src="resources/images/tutov1/step3/woka-action.png" alt="Meet in" class="tw-w-64 tw-h-auto">
             <p class="tw-text-xl tw-text-center tw-p-5 tw-font-bold">{i18next.t('tuto.step3.object')}</p>
         </div>
-    </div>
+    </div> -->
+
 </div>
 <style lang="scss">
     /* Hide scrollbar for Chrome, Safari and Opera */