portfolio/components/slides/Heading.vue

<template>
  <section
    class="relative flex h-screen snap-center items-center justify-center"
  >
    <div
      class="flex flex-wrap items-center justify-center gap-5 text-center text-primary-500"
    >
      <img
        v-animate="{ preset: 'slide-left', delay: 300 }"
        src="../../assets/icons/logo.svg"
        alt="Logo Xeovalyte"
        width="150"
      />
      <div class="space-y-2">
        <h1
          v-animate="{ preset: 'slide-up', delay: 450 }"
          class="sm:text-7xl text-6xl font-bold"
        >
          Xeovalyte
        </h1>
        <div
          v-animate="{ preset: 'slide-right', delay: 600 }"
          class="h-1 w-full rounded-full bg-primary-500"
        />
        <h3
          v-animate="{ preset: 'slide-down', delay: 750 }"
          class="text-4xl font-bold"
        >
          Timo Boomers
        </h3>
      </div>

      <Icon
        @click="scrollToElement('about')"
        size="2em"
        name="ph:arrow-fat-line-down"
        class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"
      />
    </div>
  </section>
</template>