45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
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>
|
|
|
|
<script setup>
|
|
</script>
|