Intro & Fetch

src/components/app/Intro.vue

@@ -0,0 +1,105 @@
+<script setup>
+import {onMounted} from "vue";
+import {useUi} from "@/pinia/ui";
+
+const ui = useUi()
+
+onMounted(() => {
+  const audio = new Audio('/DPIntro.mp4');
+  audio.play()
+
+  let $image = document.querySelector("#intro-image")
+  let $text = document.querySelector("#intro-text")
+  let $back = document.querySelector("#intro")
+
+  setTimeout(() => {
+    $image.setAttribute("class", 'active');
+  }, 3500)
+
+  setTimeout(() => {
+    $text.setAttribute("class", 'active');
+  }, 4500)
+
+  setTimeout(() => {
+    $text.setAttribute("class", 'inactive');
+    $image.setAttribute("class", 'inactive');
+
+    setTimeout(() => {
+      //ui.intro = false;
+      $back.setAttribute("class", 'inactive');
+      setTimeout(() => {
+        ui.intro = false;
+      }, 3000)
+    }, 3000)
+  }, 9000)
+})
+</script>
+
+<template>
+  <div id="intro" flex flex-center>
+    <div flex flex-column flex-center>
+      <img id="intro-image" src="/DigitalPower.png">
+      <h2 id="intro-text" noselect="" class="mt-4">Hacemos tus sueños <br> realidad</h2>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+#intro {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background: white;
+  z-index: 100000000;
+}
+
+.active {
+  animation: activate 3s forwards;
+}
+
+.inactive {
+  animation: deactivate 3s forwards;
+}
+
+img {
+  width: 240px;
+  pointer-events: none;
+  user-select: none;
+  margin-bottom: 1em;
+}
+
+h2 {
+  color: var(--primary);
+  margin: unset !important;
+  text-align: center;
+}
+
+img, h2 {
+  opacity: 0;
+}
+
+@keyframes activate {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes deactivate {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+
+</style>