arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 01:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: add landing page (#3448)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
2025-03-06 12:50:22 +01:00
committed by GitHub
parent 196ffbc989
commit 4f51d19e2b
16 changed files with 917 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/app/pages/pro/.content/templates.yml
View File

@@ -30,7 +30,7 @@ templates:
- title: Resizable multi-column layout
icon: i-lucide-columns-3
links:
- label: Live Preview
- label: Preview
to: https://dashboard-template.nuxt.dev
target: _blank
leadingIcon: i-logos-nuxt-icon
@@ -42,7 +42,7 @@ templates:
icon: i-simple-icons-github
color: neutral
variant: outline
- label: Live Preview
- label: Preview
to: https://vue-dashboard-template.nuxt.dev
target: _blank
leadingIcon: i-logos-vue
@@ -68,7 +68,7 @@ templates:
- title: Authentication pages (login, register)
icon: i-lucide-user-round-check
links:
- label: Live Preview
- label: Preview
to: https://saas-template.nuxt.dev
target: _blank
leadingIcon: i-logos-nuxt-icon
@@ -94,7 +94,7 @@ templates:
- title: Write content in YAML
icon: i-simple-icons-yaml
links:
- label: Live Preview
- label: Preview
to: https://landing-template.nuxt.dev
target: _blank
leadingIcon: i-logos-nuxt-icon
@@ -120,7 +120,7 @@ templates:
- title: Full-text search out of the box
icon: i-lucide-search
links:
- label: Live Preview
- label: Preview
to: https://docs-template.nuxt.dev
target: _blank
leadingIcon: i-logos-nuxt-icon
@@ -144,7 +144,7 @@ templates:
- title: Nuxt 4 Compatibility Enabled
icon: i-simple-icons-nuxtdotjs
links:
- label: Live Preview
- label: Preview
to: https://ui-pro-starter.nuxt.dev
target: _blank
leadingIcon: i-logos-nuxt-icon
@@ -156,7 +156,7 @@ templates:
variant: outline
icon: i-simple-icons-github
color: neutral
- label: Live Preview
- label: Preview
to: https://ui-pro-starter-vue.nuxt.dev
target: _blank
leadingIcon: i-logos-vue

23
docs/app/pages/pro/activate.vue
View File

@@ -70,14 +70,12 @@ onMounted(() => {
<template>
<UMain>
<UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative' }">
<template #top>
<StarsBg />
</template>
<UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative overflow-hidden', wrapper: 'lg:px-12', description: 'text-pretty' }">
<StarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="lg:border-y border-(--ui-border)">
<UCard class="lg:w-1/2 m-auto lg:rounded-none overflow-hidden" variant="outline" :ui="{ footer: 'bg-(--ui-bg-muted)' }">
<div class="px-4 py-10 lg:border border-(--ui-border) bg-(--ui-bg)">
<div class="max-w-xl mx-auto">
<UForm
:schema="schema"
:validate-on="['blur']"
@@ -107,12 +105,13 @@ onMounted(() => {
</UAlert>
<UAlert v-else-if="errorMessage" color="error" variant="subtle" :title="errorMessage" />
</UForm>
<template #footer>
<p class="text-sm text-center text-neutral-500 dark:text-neutral-400">
If you purchased a license with multiple seats, activate the license key for each member of your team.
</p>
</template>
</UCard>
<ProseHr />
<ProseNote>
If you purchased a license with multiple seats, activate the license key for each member of your team.
</ProseNote>
</div>
</div>
</UPageHero>
</UMain>

16
docs/app/pages/pro/index.vue
View File

@@ -26,15 +26,14 @@ useSeoMeta({
}"
>
<template #title>
<MDC :value="page.hero.title" unwrap="p" />
<MDC :value="page.hero.title" tag="span" unwrap="p" />
</template>
<template #description>
<MDC :value="page.hero.description" unwrap="p" />
</template>
<template #top>
<StarsBg />
<MDC :value="page.hero.description" tag="span" unwrap="p" />
</template>
<StarsBg />
<Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
</Motion>
@@ -84,7 +83,7 @@ useSeoMeta({
>
<template #description>
<Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.2 }">
<MDC :value="page.testimonial.quote" unwrap="p" class="before:content-[open-quote] after:content-[close-quote] " />
<MDC :value="page.testimonial.quote" tag="span" unwrap="p" class="before:content-[open-quote] after:content-[close-quote] " />
</Motion>
</template>
<Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.3 }">
@@ -120,10 +119,10 @@ useSeoMeta({
class="rounded-none border-t border-(--ui-border) bg-gradient-to-b from-(--ui-bg-muted) to-(--ui-bg)"
>
<template #title>
<MDC :value="page.mainSection.title" unwrap="p" />
<MDC :value="page.mainSection.title" tag="span" unwrap="p" />
</template>
<template #description>
<MDC :value="page.mainSection.description" unwrap="p" />
<MDC :value="page.mainSection.description" tag="span" unwrap="p" />
</template>
</UPageCTA>
<UPageSection
@@ -198,6 +197,7 @@ useSeoMeta({
orientation="horizontal"
>
<StarsBg />
<video
class="rounded-[var(--ui-radius)] z-10"
preload="none"

5
docs/app/pages/pro/pricing.vue
View File

@@ -26,9 +26,8 @@ useSeoMeta({
<template #title>
<MDC :value="page.pricing.title" unwrap="p" />
</template>
<template #top>
<StarsBg />
</template>
<StarsBg />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="flex flex-col bg-(--ui-bg) gap-8 lg:gap-0">
<UPricingPlan

101
docs/app/pages/pro/templates.vue
View File

@@ -16,59 +16,60 @@ useSeoMeta({
<!-- eslint-disable vue/no-v-html -->
<template>
<UPageHero :links="page.links" :ui="{ container: 'relative' }">
<template #top>
<div class="relative">
<UPageHero :links="page.links" :ui="{ container: 'relative' }">
<StarsBg />
</template>
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<template #title>
<MDC :value="page.hero.title" unwrap="p" />
</template>
<template #title>
<MDC :value="page.hero.title" unwrap="p" />
</template>
<template #description>
<MDC :value="page.hero.description" unwrap="p" />
</template>
</UPageHero>
<template #description>
<MDC :value="page.hero.description" unwrap="p" />
</template>
</UPageHero>
<UPageSection
v-for="(template, index) in page.templates"
:key="index"
:title="template.title"
:links="template.links"
:features="template.features"
orientation="horizontal"
class="lg:border-t border-(--ui-border)"
:ui="{
title: 'lg:text-4xl',
wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
container: 'lg:py-0'
}"
>
<template #description>
<MDC :value="template.description" unwrap="p" />
</template>
<UPageSection
v-for="(template, index) in page.templates"
:key="index"
:title="template.title"
:links="template.links"
:features="template.features"
orientation="horizontal"
class="lg:border-t border-(--ui-border)"
:ui="{
title: 'lg:text-4xl',
wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
container: 'lg:py-0',
links: 'gap-x-3'
}"
>
<template #description>
<MDC :value="template.description" unwrap="p" />
</template>
<div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
<Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
<UColorModeImage
v-if="template.thumbnail"
v-bind="template.thumbnail"
class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
width="656"
height="369"
loading="lazy"
/>
<UCarousel
v-else-if="template.images"
v-slot="{ item }"
:items="(template.images as any[])"
dots
>
<NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
</UCarousel>
<Placeholder v-else class="w-full h-full aspect-video" />
</Motion>
</div>
</UPageSection>
<div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
<Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
<UColorModeImage
v-if="template.thumbnail"
v-bind="template.thumbnail"
class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
width="656"
height="369"
loading="lazy"
/>
<UCarousel
v-else-if="template.images"
v-slot="{ item }"
:items="(template.images as any[])"
dots
>
<NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
</UCarousel>
<Placeholder v-else class="w-full h-full aspect-video" />
</Motion>
</div>
</UPageSection>
</div>
</template>