81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UPageHero
|
|
:title="t('home.heroTitle')"
|
|
:description="t('home.heroDescription')"
|
|
:links="[{
|
|
label: t('home.getStarted'),
|
|
to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
|
|
target: '_blank',
|
|
trailingIcon: 'i-lucide-arrow-right',
|
|
size: 'xl',
|
|
}, {
|
|
label: t('home.useTemplate'),
|
|
to: 'https://github.com/nuxt-ui-templates/starter',
|
|
target: '_blank',
|
|
icon: 'i-simple-icons-github',
|
|
size: 'xl',
|
|
color: 'neutral',
|
|
variant: 'subtle',
|
|
}]"
|
|
/>
|
|
|
|
<UPageSection
|
|
id="features"
|
|
:title="t('home.featuresTitle')"
|
|
:description="t('home.featuresDescription')"
|
|
:features="[{
|
|
icon: 'i-lucide-rocket',
|
|
title: t('home.feature1Title'),
|
|
description: t('home.feature1Description'),
|
|
}, {
|
|
icon: 'i-lucide-palette',
|
|
title: t('home.feature2Title'),
|
|
description: t('home.feature2Description'),
|
|
}, {
|
|
icon: 'i-lucide-zap',
|
|
title: t('home.feature3Title'),
|
|
description: t('home.feature3Description'),
|
|
}, {
|
|
icon: 'i-lucide-blocks',
|
|
title: t('home.feature4Title'),
|
|
description: t('home.feature4Description'),
|
|
}, {
|
|
icon: 'i-lucide-code-2',
|
|
title: t('home.feature5Title'),
|
|
description: t('home.feature5Description'),
|
|
}, {
|
|
icon: 'i-lucide-shield-check',
|
|
title: t('home.feature6Title'),
|
|
description: t('home.feature6Description'),
|
|
}]"
|
|
/>
|
|
|
|
<UPageSection>
|
|
<UPageCTA
|
|
:title="t('home.ctaTitle')"
|
|
:description="t('home.ctaDescription')"
|
|
variant="subtle"
|
|
:links="[{
|
|
label: t('home.startBuilding'),
|
|
to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
|
|
target: '_blank',
|
|
trailingIcon: 'i-lucide-arrow-right',
|
|
color: 'neutral',
|
|
}, {
|
|
label: t('home.viewOnGitHub'),
|
|
to: 'https://github.com/nuxt-ui-templates/starter',
|
|
target: '_blank',
|
|
icon: 'i-simple-icons-github',
|
|
color: 'neutral',
|
|
variant: 'outline',
|
|
}]"
|
|
/>
|
|
</UPageSection>
|
|
</div>
|
|
</template>
|