<script lang="ts" setup>
const links = ref([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageHero
      :links="links"
      description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
      headline="New release"
      orientation="horizontal"
      title="Ultimate Vue UI library"
  >
    <img
        alt="App screenshot"
        class="rounded-lg shadow-2xl ring ring-default"
        src="/img/img_1.png"
    >
  </UPageHero>
</template>
