192 lines
4.5 KiB
Vue
192 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import type { IndexCollectionItem } from '@nuxt/content'
|
|
|
|
const { footer, global } = useAppConfig()
|
|
|
|
defineProps<{
|
|
page: IndexCollectionItem
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<UPageHero
|
|
:ui="{
|
|
headline: 'flex items-center justify-center',
|
|
title: 'text-shadow-md max-w-lg mx-auto',
|
|
links: 'mt-4 flex-col justify-center items-center'
|
|
}"
|
|
>
|
|
<template #headline>
|
|
<Motion
|
|
:initial="{
|
|
scale: 1.1,
|
|
opacity: 0,
|
|
filter: 'blur(20px)'
|
|
}"
|
|
:animate="{
|
|
scale: 1,
|
|
opacity: 1,
|
|
filter: 'blur(0px)'
|
|
}"
|
|
:transition="{
|
|
duration: 0.6,
|
|
delay: 0.1
|
|
}"
|
|
>
|
|
<UColorModeAvatar
|
|
class="size-18 ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
|
|
:light="global.picture?.light!"
|
|
:dark="global.picture?.dark!"
|
|
:alt="global.picture?.alt!"
|
|
/>
|
|
</Motion>
|
|
</template>
|
|
|
|
<template #title>
|
|
<Motion
|
|
:initial="{
|
|
scale: 1.1,
|
|
opacity: 0,
|
|
filter: 'blur(20px)'
|
|
}"
|
|
:animate="{
|
|
scale: 1,
|
|
opacity: 1,
|
|
filter: 'blur(0px)'
|
|
}"
|
|
:transition="{
|
|
duration: 0.6,
|
|
delay: 0.1
|
|
}"
|
|
>
|
|
{{ page.title }}
|
|
</Motion>
|
|
</template>
|
|
|
|
<template #description>
|
|
<Motion
|
|
:initial="{
|
|
scale: 1.1,
|
|
opacity: 0,
|
|
filter: 'blur(20px)'
|
|
}"
|
|
:animate="{
|
|
scale: 1,
|
|
opacity: 1,
|
|
filter: 'blur(0px)'
|
|
}"
|
|
:transition="{
|
|
duration: 0.6,
|
|
delay: 0.3
|
|
}"
|
|
>
|
|
{{ page.description }}
|
|
</Motion>
|
|
</template>
|
|
|
|
<template #links>
|
|
<Motion
|
|
:initial="{
|
|
scale: 1.1,
|
|
opacity: 0,
|
|
filter: 'blur(20px)'
|
|
}"
|
|
:animate="{
|
|
scale: 1,
|
|
opacity: 1,
|
|
filter: 'blur(0px)'
|
|
}"
|
|
:transition="{
|
|
duration: 0.6,
|
|
delay: 0.5
|
|
}"
|
|
>
|
|
<div
|
|
v-if="page.hero.links"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<!-- <UButton v-bind="page.hero.links[0]" /> -->
|
|
<UButton
|
|
:color="global.available ? 'success' : 'error'"
|
|
variant="ghost"
|
|
class="gap-2"
|
|
:to="global.available ? global.meetingLink : ''"
|
|
:label="global.available ? 'Available for new projects' : 'Not available at the moment'"
|
|
>
|
|
<template #leading>
|
|
<span class="relative flex size-2">
|
|
<span
|
|
class="absolute inline-flex size-full rounded-full opacity-75"
|
|
:class="global.available ? 'bg-success animate-ping' : 'bg-error'"
|
|
/>
|
|
<span
|
|
class="relative inline-flex size-2 scale-90 rounded-full"
|
|
:class="global.available ? 'bg-success' : 'bg-error'"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</UButton>
|
|
</div>
|
|
</Motion>
|
|
|
|
<div class="gap-x-4 inline-flex mt-4">
|
|
<Motion
|
|
v-for="(link, index) of footer?.links"
|
|
:key="index"
|
|
|
|
:initial="{
|
|
scale: 1.1,
|
|
opacity: 0,
|
|
filter: 'blur(20px)'
|
|
}"
|
|
:animate="{
|
|
scale: 1,
|
|
opacity: 1,
|
|
filter: 'blur(0px)'
|
|
}"
|
|
:transition="{
|
|
duration: 0.6,
|
|
delay: 0.5 + index * 0.1
|
|
}"
|
|
>
|
|
<UButton
|
|
v-bind="{ size: 'md', color: 'neutral', variant: 'ghost', ...link }"
|
|
/>
|
|
</Motion>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- <UMarquee
|
|
pause-on-hover
|
|
class="py-2 -mx-8 sm:-mx-12 lg:-mx-16 [--duration:40s]"
|
|
>
|
|
<Motion
|
|
v-for="(img, index) in page.hero.images"
|
|
:key="index"
|
|
:initial="{
|
|
scale: 1.1,
|
|
opacity: 0,
|
|
filter: 'blur(20px)'
|
|
}"
|
|
:animate="{
|
|
scale: 1,
|
|
opacity: 1,
|
|
filter: 'blur(0px)'
|
|
}"
|
|
:transition="{
|
|
duration: 0.6,
|
|
delay: index * 0.1
|
|
}"
|
|
>
|
|
<NuxtImg
|
|
width="234"
|
|
height="234"
|
|
class="rounded-lg aspect-square object-cover"
|
|
:class="index % 2 === 0 ? '-rotate-2' : 'rotate-2'"
|
|
v-bind="img"
|
|
/>
|
|
</Motion>
|
|
</UMarquee> -->
|
|
</UPageHero>
|
|
</template>
|