mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
docs(pro): disable launch offer
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
icon="i-lucide-rocket"
|
icon="i-lucide-rocket"
|
||||||
:actions="[
|
:actions="[
|
||||||
{
|
{
|
||||||
label: 'Get 20% OFF on UI Pro',
|
label: 'Buy Nuxt UI Pro',
|
||||||
to: '/pro/pricing',
|
to: '/pro/pricing',
|
||||||
trailingIcon: 'i-lucide-arrow-right'
|
trailingIcon: 'i-lucide-arrow-right'
|
||||||
}
|
}
|
||||||
|
|||||||
51
docs/app/components/Countdown.vue
Normal file
51
docs/app/components/Countdown.vue
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const endDate = new Date('2025-03-14T23:59:59Z')
|
||||||
|
const second = 1000
|
||||||
|
const minute = second * 60
|
||||||
|
const hour = minute * 60
|
||||||
|
const day = hour * 24
|
||||||
|
|
||||||
|
function getCountdown() {
|
||||||
|
const distance = Math.floor((endDate.getTime() - Date.now()))
|
||||||
|
return {
|
||||||
|
day: Math.floor(distance / day),
|
||||||
|
hour: Math.floor((distance % (day)) / (hour)),
|
||||||
|
minute: Math.floor((distance % (hour)) / (minute)),
|
||||||
|
second: Math.floor((distance % (minute)) / (second)),
|
||||||
|
distance
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const countdown = ref(getCountdown())
|
||||||
|
let interval: any
|
||||||
|
if (countdown.value.distance > 0) {
|
||||||
|
onMounted(() => {
|
||||||
|
interval = setInterval(() => {
|
||||||
|
countdown.value = getCountdown()
|
||||||
|
if (countdown.value.distance <= 0) {
|
||||||
|
clearInterval(interval)
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const plural = (value: number) => (value === 1 ? '' : 's')
|
||||||
|
const double = (value: number) => (value < 10 ? `0${value}` : value)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-gray-900 dark:text-white text-sm mb-3">
|
||||||
|
Nuxt UI v3 launch offer ends in:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center gap-2 text-center">
|
||||||
|
<template v-for="(value, key) in countdown" :key="key">
|
||||||
|
<div v-if="key !== 'distance'" class="flex flex-col items-center gap-2">
|
||||||
|
<UBadge color="primary" class="w-14 h-14 font-bold text-2xl flex items-center justify-center tabular-nums" variant="subtle">
|
||||||
|
{{ double(value) }}
|
||||||
|
</UBadge>
|
||||||
|
<span class="text-[10px] font-semibold text-gray-900 dark:text-white tracking-wide tabular-nums uppercase">{{ key }}{{ plural(value) }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -178,7 +178,7 @@ pricing:
|
|||||||
- title: Solo License
|
- title: Solo License
|
||||||
description: Design faster with all Nuxt UI Pro components.
|
description: Design faster with all Nuxt UI Pro components.
|
||||||
price: $149
|
price: $149
|
||||||
discount: $119
|
# discount: $119
|
||||||
billing_period: one-time payment
|
billing_period: one-time payment
|
||||||
billing_cycle: plus local taxes
|
billing_cycle: plus local taxes
|
||||||
class: bg-(--ui-bg-elevated)/50
|
class: bg-(--ui-bg-elevated)/50
|
||||||
@@ -200,7 +200,7 @@ pricing:
|
|||||||
- title: Team License
|
- title: Team License
|
||||||
description: Everything you need to deliver faster as a team.
|
description: Everything you need to deliver faster as a team.
|
||||||
price: $349
|
price: $349
|
||||||
discount: $279
|
# discount: $279
|
||||||
billing_period: one-time payment
|
billing_period: one-time payment
|
||||||
billing_cycle: plus local taxes
|
billing_cycle: plus local taxes
|
||||||
class: bg-(--ui-bg-elevated)/50
|
class: bg-(--ui-bg-elevated)/50
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ pricing:
|
|||||||
description: Get all Nuxt UI Pro components in a Figma kit to design your next application before coding. Everything you need, from wire-framing to high-fidelity web integration.
|
description: Get all Nuxt UI Pro components in a Figma kit to design your next application before coding. Everything you need, from wire-framing to high-fidelity web integration.
|
||||||
orientation: horizontal
|
orientation: horizontal
|
||||||
price: $149
|
price: $149
|
||||||
discount: $119
|
# discount: $119
|
||||||
billing_period: one-time payment
|
billing_period: one-time payment
|
||||||
billing_cycle: plus local taxes
|
billing_cycle: plus local taxes
|
||||||
terms: Solo & Team licenses available.
|
terms: Solo & Team licenses available.
|
||||||
@@ -39,7 +39,7 @@ pricing:
|
|||||||
- title: Solo
|
- title: Solo
|
||||||
description: Tailored for indie hackers, freelancers and solo founders.
|
description: Tailored for indie hackers, freelancers and solo founders.
|
||||||
price: $249
|
price: $249
|
||||||
discount: $199
|
# discount: $199
|
||||||
billing_period: one-time payment
|
billing_period: one-time payment
|
||||||
billing_cycle: plus local taxes
|
billing_cycle: plus local taxes
|
||||||
features:
|
features:
|
||||||
@@ -54,7 +54,7 @@ pricing:
|
|||||||
- title: Startup
|
- title: Startup
|
||||||
description: Best suited for small teams, startups and agencies.
|
description: Best suited for small teams, startups and agencies.
|
||||||
price: $499
|
price: $499
|
||||||
discount: $399
|
# discount: $399
|
||||||
billing_period: one-time payment
|
billing_period: one-time payment
|
||||||
billing_cycle: plus local taxes
|
billing_cycle: plus local taxes
|
||||||
features:
|
features:
|
||||||
@@ -70,7 +70,7 @@ pricing:
|
|||||||
- title: Organization
|
- title: Organization
|
||||||
description: Ideal for larger teams and organizations.
|
description: Ideal for larger teams and organizations.
|
||||||
price: $999
|
price: $999
|
||||||
discount: $799
|
# discount: $799
|
||||||
billing_period: one-time payment
|
billing_period: one-time payment
|
||||||
billing_cycle: plus local taxes
|
billing_cycle: plus local taxes
|
||||||
features:
|
features:
|
||||||
|
|||||||
@@ -12,37 +12,6 @@ useSeoMeta({
|
|||||||
ogDescription: page.description,
|
ogDescription: page.description,
|
||||||
ogImage: joinURL(url, '/pro/og-image.png')
|
ogImage: joinURL(url, '/pro/og-image.png')
|
||||||
})
|
})
|
||||||
|
|
||||||
const endDate = new Date('2025-03-14T23:59:59Z')
|
|
||||||
const second = 1000
|
|
||||||
const minute = second * 60
|
|
||||||
const hour = minute * 60
|
|
||||||
const day = hour * 24
|
|
||||||
|
|
||||||
function getCountdown() {
|
|
||||||
const distance = Math.floor((endDate.getTime() - Date.now()))
|
|
||||||
return {
|
|
||||||
day: Math.floor(distance / day),
|
|
||||||
hour: Math.floor((distance % (day)) / (hour)),
|
|
||||||
minute: Math.floor((distance % (hour)) / (minute)),
|
|
||||||
second: Math.floor((distance % (minute)) / (second)),
|
|
||||||
distance
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const countdown = ref(getCountdown())
|
|
||||||
let interval: any
|
|
||||||
if (countdown.value.distance > 0) {
|
|
||||||
onMounted(() => {
|
|
||||||
interval = setInterval(() => {
|
|
||||||
countdown.value = getCountdown()
|
|
||||||
if (countdown.value.distance <= 0) {
|
|
||||||
clearInterval(interval)
|
|
||||||
}
|
|
||||||
}, 1000)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const plural = (value: number) => (value === 1 ? '' : 's')
|
|
||||||
const double = (value: number) => (value < 10 ? `0${value}` : value)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -54,25 +23,6 @@ const double = (value: number) => (value < 10 ? `0${value}` : value)
|
|||||||
container: 'relative lg:!pb-0'
|
container: 'relative lg:!pb-0'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<template v-if="countdown.distance >= 0" #links>
|
|
||||||
<div>
|
|
||||||
<p class="font-semibold text-gray-900 dark:text-white text-sm mb-3">
|
|
||||||
Nuxt UI v3 launch offer ends in:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-center gap-2 text-center">
|
|
||||||
<template v-for="(value, key) in countdown" :key="key">
|
|
||||||
<div v-if="key !== 'distance'" class="flex flex-col items-center gap-2">
|
|
||||||
<UBadge color="primary" class="w-14 h-14 font-bold text-2xl flex items-center justify-center tabular-nums" variant="subtle">
|
|
||||||
{{ double(value) }}
|
|
||||||
</UBadge>
|
|
||||||
<span class="text-[10px] font-semibold text-gray-900 dark:text-white tracking-wide tabular-nums uppercase">{{ key }}{{ plural(value) }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #title>
|
<template #title>
|
||||||
<MDC :value="page.pricing.title" unwrap="p" cache-key="pro-pricing-title" />
|
<MDC :value="page.pricing.title" unwrap="p" cache-key="pro-pricing-title" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user