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

docs: various marketing improvements (#3400)

Browse Source 
Co-authored-by: HugoRCD <hugo.richard@epitech.eu>
This commit is contained in:
Sébastien Chopin
2025-02-26 14:25:52 +01:00
committed by GitHub
parent d787cd1a2c
commit 2e8403c7e4
25 changed files with 384 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,20 @@
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'
import { joinURL } from 'ufo'
const title = 'Activate your Nuxt UI Pro License'
const description = 'Enable Nuxt UI Pro in your production projects by activating your license key received by email and get invited to the GitHub private repository.'
const route = useRoute()
const { url } = useSiteConfig()
useSeoMeta({
title,
description,
ogTitle: `${title} - Nuxt UI Pro`,
ogDescription: description
})
defineOgImageComponent('Docs', {
headline: 'Pro'
ogDescription: description,
ogImage: joinURL(url, '/pro/og-image.png')
})
const schema = z.object({
@@ -70,46 +69,52 @@ onMounted(() => {
</script>
<template>
<UPageHero headline="License Activation" :title="title" :description="description">
<template #top>
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
<StarsBg />
</template>
<div>
<UCard class="lg:w-1/2 m-auto backdrop-blur-sm">
<UForm
:schema="schema"
:validate-on="['blur']"
:state="state"
class="space-y-4"
@submit="submit"
>
<UFormField label="License Key" name="license">
<UInput v-model="state.license" autocomplete="off" :ui="{ root: 'flex' }" />
</UFormField>
<UFormField label="GitHub Username" name="username">
<UInput v-model="state.username" autocomplete="off" :ui="{ root: 'flex' }" />
</UFormField>
<UButton type="submit" :loading="activating" :disabled="state.license?.length !== 36 || !state.username">
Activate the license
</UButton>
<UAlert v-if="successMessage" color="success" variant="subtle" :title="successMessage">
<template #description>
The GitHub invitation to <NuxtLink to="https://github.com/nuxt/ui-pro/invitations" external target="_blank" class="font-bold text-primary hover:underline">
Nuxt UI Pro repository
</NuxtLink> has been sent and
you can now use your license key in your projects, checkout the
<NuxtLink class="font-bold underline" to="/pro/getting-started/installation">
installation guide
</NuxtLink>
</template>
</UAlert>
<UAlert v-else-if="errorMessage" color="error" variant="subtle" :title="errorMessage" />
</UForm>
</UCard>
<p class="text-sm text-center text-neutral-500 dark:text-neutral-400 my-4">
If you purchased a license with multiple seats, activate the license key for each of your team members.
</p>
</div>
</UPageHero>
<UMain>
<UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative' }">
<template #top>
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
<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 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)' }">
<UForm
:schema="schema"
:validate-on="['blur']"
:state="state"
class="space-y-4"
@submit="submit"
>
<UFormField label="License Key" name="license">
<UInput v-model="state.license" autocomplete="off" :ui="{ root: 'flex' }" />
</UFormField>
<UFormField label="GitHub Username" name="username">
<UInput v-model="state.username" autocomplete="off" :ui="{ root: 'flex' }" />
</UFormField>
<UButton type="submit" :loading="activating" :disabled="state.license?.length !== 36 || !state.username">
Activate the license
</UButton>
<UAlert v-if="successMessage" color="success" variant="subtle" :title="successMessage">
<template #description>
The GitHub invitation to <NuxtLink to="https://github.com/nuxt/ui-pro/invitations" external target="_blank" class="font-bold text-primary hover:underline">
Nuxt UI Pro repository
</NuxtLink> has been sent and
you can now use your license key in your projects, checkout the
<NuxtLink class="font-bold underline" to="/pro/getting-started/installation">
installation guide
</NuxtLink>
</template>
</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>
</div>
</UPageHero>
</UMain>
</template>