Add interactive tutorial guide to enhance user experience

package.json

@@ -12,6 +12,7 @@
   ],
   "dependencies": {
     "debug": "4",
+    "driver.js": "1",
     "immutable": "4"
   },
   "devDependencies": {

webapp/src/assets/svg/DiscoLogoBoule.vue

@@ -0,0 +1,75 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 680 300"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    xmlns:serif="http://www.serif.com/"
+    style="
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      stroke-linejoin: round;
+      stroke-miterlimit: 2;
+    "
+  >
+    <g transform="matrix(1,0,0,1,0,-366)">
+      <g
+        id="Logo-boule"
+        serif:id="Logo boule"
+        transform="matrix(1,0,0,1,0,366)"
+      >
+        <rect x="0" y="0" width="680" height="300" style="fill: none" />
+        <g id="Grid"></g>
+        <g id="Fonts"></g>
+        <g id="Logo">
+          <g transform="matrix(1,0,0,1,96.0983,141.879)">
+            <path
+              d="M0,98.538L11.554,98.538C27.54,98.538 38.222,96.068 43.601,91.125C49.268,86.04 52.103,77.101 52.103,64.311L52.103,34.226C52.103,21.439 49.268,12.574 43.601,7.631C37.64,2.546 26.958,0.002 11.554,0.002L0,0.002C-5.667,0.002 -8.502,2.764 -8.502,8.286L-8.502,90.254C-8.502,95.778 -5.667,98.538 0,98.538M-31.392,95.267L-31.392,3.271C-31.392,-5.448 -29.429,-11.772 -25.506,-15.694C-21.582,-19.619 -15.26,-21.581 -6.54,-21.581L11.554,-21.581C34.516,-21.581 50.938,-17.51 60.823,-9.373C70.704,-1.232 75.646,13.3 75.646,34.226L75.646,64.311C75.646,84.078 70.595,98.319 60.496,107.04C50.392,115.76 34.079,120.119 11.554,120.119L-6.54,120.119C-15.26,120.119 -21.582,118.157 -25.506,114.232C-29.429,110.309 -31.392,103.986 -31.392,95.267"
+              style="fill: rgb(96, 150, 186); fill-rule: nonzero"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,200.737,130.325)">
+            <path
+              d="M0,121.646L0,0.001C0,-4.066 0.653,-6.756 1.962,-8.065C3.27,-9.373 5.958,-10.027 10.028,-10.027L12.862,-10.027C16.929,-10.027 19.62,-9.373 20.927,-8.065C22.236,-6.756 22.89,-4.066 22.89,0.001L22.89,121.646C22.89,125.715 22.236,128.404 20.927,129.711C19.62,131.019 16.929,131.673 12.862,131.673L10.028,131.673C5.958,131.673 3.27,131.019 1.962,129.711C0.653,128.404 0,125.715 0,121.646"
+              style="fill: rgb(96, 150, 186); fill-rule: nonzero"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,250.44,134.251)">
+            <path
+              d="M0,114.232L0,110.744C0,106.82 0.655,104.313 1.962,103.222C3.271,102.132 5.594,102.17 8.938,103.332C19.981,106.82 31.753,108.563 44.255,108.563C54.283,108.563 61.476,107.403 65.837,105.076C70.196,102.753 72.376,98.829 72.376,93.303C72.376,88.944 71.069,85.456 68.452,82.839C65.979,80.224 61.041,76.665 53.629,72.158L23.545,54.063C9.01,45.343 1.744,33.501 1.744,18.53C1.744,6.905 5.668,-1.745 13.517,-7.413C21.365,-13.08 33.498,-15.914 49.922,-15.914C60.965,-15.914 71.069,-14.46 80.224,-11.554C84.148,-10.389 86.689,-9.157 87.855,-7.848C89.016,-6.54 89.599,-4.143 89.599,-0.655L89.599,3.051C89.599,6.976 89.054,9.411 87.964,10.355C86.873,11.302 84.509,11.264 80.879,10.246C71.722,7.194 61.402,5.669 49.922,5.669C41.203,5.669 34.914,6.686 31.065,8.72C27.213,10.756 25.289,14.245 25.289,19.184C25.289,22.672 26.232,25.581 28.123,27.904C30.009,30.23 33.644,32.993 39.023,36.188L69.979,55.154C79.424,60.822 86.111,66.456 90.035,72.049C93.958,77.645 95.92,84.73 95.92,93.303C95.92,117.867 78.553,130.146 43.819,130.146C30.882,130.146 19.185,128.473 8.72,125.132C5.086,123.97 2.726,122.734 1.636,121.426C0.545,120.118 0,117.72 0,114.232"
+              style="fill: rgb(96, 150, 186); fill-rule: nonzero"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,390.612,207.716)">
+            <path
+              d="M0,-32.699L0,2.181C0,13.374 2.797,21.657 8.393,27.032C13.987,32.411 23.033,35.098 35.535,35.098C47.16,35.098 56.534,33.572 63.656,30.521C66.272,29.505 68.378,29.614 69.978,30.848C71.576,32.084 72.376,34.372 72.376,37.715L72.376,40.985C72.376,44.036 71.757,46.363 70.523,47.961C69.287,49.561 66.926,51.013 63.438,52.321C55.444,55.227 45.998,56.681 35.099,56.681C15.186,56.681 0.437,52.249 -9.155,43.382C-18.748,34.52 -23.544,20.785 -23.544,2.181L-23.544,-32.699C-23.544,-70.485 -3.999,-89.38 35.099,-89.38C45.998,-89.38 55.154,-87.854 62.567,-84.801C66.634,-83.057 69.178,-81.566 70.196,-80.333C71.211,-79.096 71.722,-76.806 71.722,-73.466L71.722,-70.195C71.722,-66.126 71.14,-63.618 69.978,-62.674C68.813,-61.727 66.416,-61.836 62.785,-63.002C54.065,-66.343 44.69,-68.015 34.663,-68.015C22.598,-68.015 13.807,-65.181 8.285,-59.513C2.759,-53.845 0,-44.908 0,-32.699"
+              style="fill: rgb(39, 76, 119); fill-rule: nonzero"
+            />
+          </g>
+          <g transform="matrix(1,0,0,1,588.67,104.086)">
+            <path
+              d="M0,91.827C0,93.263 -1.164,94.427 -2.6,94.427L-10.812,94.427C-13.878,94.427 -16.818,95.644 -18.987,97.813L-26.444,105.27C-28.612,107.438 -29.831,110.38 -29.831,113.446L-29.831,114.773C-29.831,114.881 -29.838,114.986 -29.851,115.09C-29.931,115.697 -29.787,116.311 -29.365,116.755L-24.533,121.827C-24.288,121.75 -24.031,121.697 -23.76,121.697L-15.336,121.697C-13.9,121.697 -12.736,122.861 -12.736,124.297L-12.736,132.722C-12.736,134.157 -13.9,135.321 -15.336,135.321L-23.76,135.321C-25.196,135.321 -26.36,134.157 -26.36,132.722L-26.36,124.297C-26.36,124.19 -26.354,124.085 -26.34,123.982C-26.261,123.376 -26.405,122.762 -26.827,122.318L-31.661,117.244C-31.905,117.32 -32.161,117.373 -32.431,117.373L-38.704,117.373C-40.14,117.373 -41.304,116.209 -41.304,114.773L-41.304,108.5C-41.304,107.064 -40.14,105.9 -38.704,105.9L-37.377,105.9C-34.311,105.9 -31.371,104.681 -29.202,102.514L-21.743,95.055C-19.575,92.887 -18.357,89.946 -18.357,86.88L-18.357,82.945C-18.357,80.073 -19.59,77.341 -21.743,75.441L-21.744,75.44C-24.217,73.258 -27.402,72.054 -30.701,72.054L-46.162,72.054C-47.598,72.054 -48.762,70.89 -48.762,69.454L-48.762,48.265C-48.762,46.829 -47.598,45.665 -46.162,45.665L-24.973,45.665C-23.537,45.665 -22.373,46.829 -22.373,48.265L-22.373,64.508C-22.373,68.952 -19.814,73.133 -15.512,75.079C-13.968,75.778 -12.27,76.069 -10.575,76.069L-2.6,76.069C-1.164,76.069 0,77.233 0,78.669L0,91.827ZM-46.805,85.208C-46.917,85.223 -47.033,85.231 -47.149,85.231L-49.374,85.231C-49.653,85.231 -49.922,85.186 -50.174,85.103C-50.72,84.924 -51.322,85.089 -51.78,85.435L-61.131,92.512C-61.125,92.583 -61.11,92.651 -61.11,92.724L-61.11,96.703C-61.11,98.139 -62.274,99.303 -63.709,99.303L-67.688,99.303C-69.124,99.303 -70.288,98.139 -70.288,96.703L-70.288,92.724C-70.288,91.288 -69.125,90.124 -67.688,90.124L-63.709,90.124C-63.393,90.124 -63.092,90.183 -62.813,90.289C-62.272,90.495 -61.666,90.408 -61.205,90.058L-51.932,83.043C-51.954,82.908 -51.973,82.772 -51.973,82.631L-51.973,80.407C-51.973,78.972 -50.81,77.807 -49.374,77.807L-47.149,77.807C-45.713,77.807 -44.549,78.972 -44.549,80.407L-44.549,82.631C-44.549,82.748 -44.557,82.863 -44.572,82.975C-44.638,83.459 -44.426,83.94 -44.081,84.285L-37.833,90.532C-37.487,90.878 -37.006,91.09 -36.521,91.024C-36.409,91.01 -36.294,91.002 -36.177,91.002L-33.953,91.002C-32.517,91.002 -31.353,92.166 -31.353,93.601L-31.353,95.826C-31.353,97.262 -32.517,98.426 -33.953,98.426L-36.177,98.426C-37.613,98.426 -38.777,97.262 -38.777,95.825L-38.777,93.601C-38.777,93.484 -38.769,93.37 -38.754,93.258C-38.688,92.774 -38.9,92.294 -39.245,91.948L-45.496,85.699C-45.841,85.354 -46.321,85.142 -46.805,85.208M-56.521,125.099C-56.521,126.535 -57.685,127.699 -59.12,127.699L-72.278,127.699C-73.714,127.699 -74.877,126.535 -74.877,125.099L-74.877,111.942C-74.877,110.506 -73.714,109.342 -72.278,109.342L-59.12,109.342C-57.685,109.342 -56.521,110.506 -56.521,111.942L-56.521,125.099ZM-82.048,87.411C-81.98,87.64 -81.943,87.883 -81.943,88.135L-81.943,92.113C-81.943,93.55 -83.107,94.714 -84.543,94.714L-88.521,94.714C-89.958,94.714 -91.122,93.55 -91.122,92.113L-91.122,88.135C-91.122,86.699 -89.958,85.535 -88.521,85.535L-84.543,85.535C-84.221,85.535 -83.916,85.601 -83.63,85.708L-76.515,78.396C-76.37,78.247 -76.338,78.032 -76.402,77.834C-76.482,77.588 -76.527,77.327 -76.527,77.055L-76.527,68.63C-76.527,68.5 -76.517,68.372 -76.499,68.247C-76.437,67.838 -76.54,67.423 -76.833,67.13L-81.769,62.186C-82.116,61.839 -82.6,61.628 -83.087,61.691C-83.196,61.706 -83.308,61.714 -83.421,61.714L-87.4,61.714C-88.836,61.714 -90,60.55 -90,59.113L-90,55.135C-90,53.699 -88.836,52.535 -87.4,52.535L-83.421,52.535C-81.985,52.535 -80.821,53.699 -80.821,55.135L-80.821,59.113C-80.821,59.23 -80.829,59.346 -80.844,59.459C-80.91,59.945 -80.697,60.429 -80.351,60.775L-75.413,65.721C-75.121,66.014 -74.705,66.117 -74.296,66.057C-74.175,66.039 -74.052,66.03 -73.927,66.03L-65.502,66.03C-64.066,66.03 -62.902,67.194 -62.902,68.63L-62.902,77.055C-62.902,78.491 -64.066,79.655 -65.502,79.655L-73.927,79.655C-74.232,79.655 -74.521,79.593 -74.793,79.496L-81.863,86.76C-82.031,86.931 -82.117,87.181 -82.048,87.411M-35.236,16.688C-35.218,16.437 -35.161,16.197 -35.161,15.941C-35.161,11.579 -37.853,7.857 -41.661,6.312L-41.661,-68.483L-49.461,-68.483L-49.461,6.312C-53.269,7.857 -55.96,11.579 -55.96,15.941C-55.96,16.197 -55.903,16.437 -55.885,16.688C-90.859,21.699 -117.745,51.766 -117.745,88.126C-117.745,127.992 -85.427,160.31 -45.561,160.31C-5.694,160.31 26.624,127.992 26.624,88.126C26.624,51.766 -0.263,21.699 -35.236,16.688"
+              style="fill: rgb(39, 76, 119); fill-rule: nonzero"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: "DiscoLogoBoule",
+  props: {
+    customClass: {
+      default: "bi bi-info-circle w-7 h-7",
+      type: String,
+    },
+    viewBox: { default: "-1 -1 18 18", type: String },
+  },
+};
+</script>