Files
webapp/app/components/hero/HeroBackground.vue
2026-03-12 16:54:22 +07:00

29 lines
664 B
Vue

<template>
<div
class="absolute left-0 top-0 w-full overflow-hidden bg-slate-900"
:style="{ height: `${height}px` }"
>
<ClientOnly>
<DotLottieVue
src="/animations/supply-chain.lottie"
autoplay
loop
:layout="{ fit: 'cover', align: [0.5, 0.5] }"
class="absolute inset-0 h-full w-full"
/>
</ClientOnly>
<div class="absolute inset-0 bg-gradient-to-b from-slate-900/45 via-slate-900/35 to-slate-900/65" />
</div>
</template>
<script setup lang="ts">
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
withDefaults(defineProps<{
height?: number
}>(), {
height: 860
})
</script>