<script setup lang="ts">
import Layout from '/@src/layouts/landing.vue'
import packageJson from '../../package.json'

useHead({
  title: '소액계약관리',
})

</script>

<template>
  <Layout>
    <div class="hero is-fullheight is-active">
      <div class="hero-body has-text-centered">
        <div class="container">
          <h1 class="title is-1 is-bold dark-white is-leading">
            Build fast & beautiful web apps with <span>Vuero</span>
          </h1>
          <h3 class="subtitle is-4">
            Premium Vue Dashboard & Webapp UI Kit
            <span class="tag is-primary is-rounded">{{ packageJson.version }}</span>
          </h3>

          <div class="buttons mb-2">
            <VButton
              href="https://go.cssninja.io/buy-vuero"
              color="primary"
              rounded
            >
              Buy Vuero Today
            </VButton>
          </div>

          <div class="trusted-by mb-4">
            <span>Trusted by <span>2000+ customers</span></span>
            <div class="rating">
              <VIcon icon="uiw:star-on" />
              <VIcon icon="uiw:star-on" />
              <VIcon icon="uiw:star-on" />
              <VIcon icon="uiw:star-on" />
              <VIcon icon="uiw:star-on" />
            </div>
          </div>

          <div class="hero-mockup-wrap">
            <div class="hero-mockup">
              <img
                class="light-image-block"
                src="/images/illustrations/landing/app-1.webp"
                alt=""
              >
              <img
                class="dark-image-block"
                src="/images/illustrations/landing/app-1-dark.webp"
                alt=""
              >
            </div>
            <div class="hero-mockup-gradient" />
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<style scoped lang="scss">
#vuero-demos,
#vuero-components {
  scroll-margin-top: 50px;
}
</style>
