docs(pro): launch offer

docs/app/components/Banner.vue

@@ -1,7 +1,17 @@
 <template>
-  <UBanner id="banner-2" icon="i-lucide-rocket">
+  <UBanner
+    id="ui3-launch"
+    icon="i-lucide-rocket"
+    :actions="[
+      {
+        label: 'Get 20% OFF on UI Pro',
+        to: '/pro/pricing',
+        trailingIcon: 'i-lucide-arrow-right'
+      }
+    ]"
+  >
     <template #title>
-      <span class="font-semibold">Nuxt UI v3</span> is officially released!
+      <span class="font-semibold">Nuxt UI v3</span> is officially released.
     </template>
   </UBanner>
 </template>

docs/app/pages/figma/.figma.yml

@@ -178,6 +178,7 @@ pricing:
     - title: Solo License
       description: Design faster with all Nuxt UI Pro components.
       price: $149
+      discount: $119
       billing_period: one-time payment
       billing_cycle: plus local taxes
       class: bg-(--ui-bg-elevated)/50
@@ -199,6 +200,7 @@ pricing:
     - title: Team License
       description: Everything you need to deliver faster as a team.
       price: $349
+      discount: $279
       billing_period: one-time payment
       billing_cycle: plus local taxes
       class: bg-(--ui-bg-elevated)/50

docs/app/pages/figma/index.vue

@@ -233,6 +233,7 @@ onMounted(async () => {
           :title="plan.title"
           :description="plan.description"
           :price="plan.price"
+          :discount="plan.discount"
           :billing-period="plan.billing_period"
           :billing-cycle="plan.billing_cycle"
           :highlight="plan.highlight"

docs/app/pages/index.vue

@@ -76,7 +76,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
             :key="feature.title"
             as-child
             :initial="{ opacity: 0, transform: 'translateX(-10px)' }"
-            :in-view="{ opacity: 1, transform: 'translateX(0)' }"
+            :while-in-view="{ opacity: 1, transform: 'translateX(0)' }"
             :transition="{ delay: 0.2 + 0.4 * index }"
             :in-view-options="{ once: true }"
           >
@@ -147,7 +147,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
           :key="feature.title"
           as="li"
           :initial="{ opacity: 0, transform: 'translateY(10px)' }"
-          :in-view="{ opacity: 1, transform: 'translateY(0)' }"
+          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
           :transition="{ delay: 0.1 * index }"
           :in-view-options="{ once: true }"
           class="flex items-start gap-x-3 relative group"

docs/app/pages/pro/.content/pricing.yml

@@ -17,7 +17,10 @@ pricing:
     title: Figma Kit Pro
     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
-    price: $149 - $349
+    price: $149
+    discount: $119
+    billing_period: one-time payment
+    billing_cycle: plus local taxes
     terms: Solo & Team licenses available.
     features:
       - 1700+ components & variants from Nuxt UI & UI Pro
@@ -36,6 +39,7 @@ pricing:
     - title: Solo
       description: Tailored for indie hackers, freelancers and solo founders.
       price: $249
+      discount: $199
       billing_period: one-time payment
       billing_cycle: plus local taxes
       features:
@@ -50,6 +54,7 @@ pricing:
     - title: Startup
       description: Best suited for small teams, startups and agencies.
       price: $499
+      discount: $399
       billing_period: one-time payment
       billing_cycle: plus local taxes
       features:
@@ -65,6 +70,7 @@ pricing:
     - title: Organization
       description: Ideal for larger teams and organizations.
       price: $999
+      discount: $799
       billing_period: one-time payment
       billing_cycle: plus local taxes
       features:

docs/app/pages/pro/index.vue

@@ -82,11 +82,11 @@ 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 }">
+        <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.2 }">
           <MDC :value="page.testimonial.quote" tag="span" unwrap="p" class="before:content-[open-quote] after:content-[close-quote]" cache-key="pro-testimonial-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 }">
+      <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.3 }">
         <UUser
           v-bind="page.testimonial.user"
           class="justify-center"
@@ -103,7 +103,7 @@ useSeoMeta({
       }"
       class="border-t border-(--ui-border)"
     >
-      <Motion as-child :initial="{ height: 0 }" :in-view="{ height: 'auto' }" :transition="{ delay: 0.4, duration: 1 }">
+      <Motion as-child :initial="{ height: 0 }" :while-in-view="{ height: 'auto' }" :transition="{ delay: 0.4, 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>
     </UPageSection>

docs/app/pages/pro/pricing.vue

@@ -12,6 +12,37 @@ useSeoMeta({
   ogDescription: page.description,
   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>
 
 <template>
@@ -23,6 +54,25 @@ useSeoMeta({
         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>
         <MDC :value="page.pricing.title" unwrap="p" cache-key="pro-pricing-title" />
       </template>
@@ -42,6 +92,7 @@ useSeoMeta({
             :title="plan.title"
             :description="plan.description"
             :price="plan.price"
+            :discount="plan.discount"
             :billing-period="plan.billing_period"
             :billing-cycle="plan.billing_cycle"
             :variant="plan.highlight ? 'soft' : 'outline'"
@@ -53,6 +104,8 @@ useSeoMeta({
         <UPricingPlan
           v-bind="page.pricing.figma"
           variant="naked"
+          :billing-period="page.pricing.figma.billing_period"
+          :billing-cycle="page.pricing.figma.billing_cycle"
           class="lg:rounded-none border lg:border-y-0 border-(--ui-border)"
         >
           <template #features>

docs/app/pages/pro/templates.vue

@@ -50,7 +50,7 @@ useSeoMeta({
       </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 }">
+        <Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-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"