replace tagline with typewriter

package.json

@@ -43,6 +43,7 @@
         "add": "^2.0.6",
         "element-plus": "^2.7.3",
         "lodash-es": "^4.17.21",
-        "medium-zoom": "^1.1.0"
+        "medium-zoom": "^1.1.0",
+        "typewriter-effect": "^2.21.0"
     }
 }

src/index.md

@@ -21,7 +21,7 @@ layout: home
         <div>
           <img src="/images/logos/describo-logo.webp" class="h-16 lg:h-32" />
         </div>
-      <div class="text-xl lg:text-3xl text-slate-600">Analyse and describe your data</div>
+        <div class="text-xl lg:text-3xl text-slate-600"><TagLine /></div>
     </div>
   </div>
   <div class="w-full md:w-1/2 flex flex-row items-center">
@@ -219,3 +219,7 @@ layout: home
 </div>
 
 <FooterComponent class="mt-6"/>
+
+<script setup>
+    import TagLine from "./vue-components/TagLine.vue";
+</script>

src/vue-components/TagLine.vue

@@ -0,0 +1,26 @@
+<template>
+    <div ref="typewriter"></div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+const typewriter = ref();
+
+onMounted(() => {
+    new Typewriter(typewriter.value, {
+        strings: [
+            "Transform your data.",
+            "Discover the information.",
+            "Explore the narratives.",
+            "Describe the insights.",
+            "Extract the value.",
+        ],
+        delay: 50,
+        deleteSpeed: "natural",
+        loop: true,
+        pauseFor: 1200,
+        autoStart: true,
+    });
+});
+</script>