docs(app): improve stars lazy loading

docs/app/pages/pro/activate.vue

@@ -71,7 +71,8 @@ onMounted(() => {
 <template>
   <UMain>
     <UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative overflow-hidden', wrapper: 'lg:px-12', description: 'text-pretty' }">
-      <StarsBg />
+      <LazyStarsBg hydrate-never />
+
       <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="px-4 py-10 lg:border border-(--ui-border) bg-(--ui-bg)">

docs/app/pages/pro/index.vue

@@ -32,7 +32,7 @@ useSeoMeta({
         <MDC :value="page.hero.description" tag="span" unwrap="p" cache-key="pro-hero-description" />
       </template>
 
-      <StarsBg />
+      <LazyStarsBg hydrate-never />
 
       <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" />
@@ -196,7 +196,7 @@ useSeoMeta({
       class="overflow-hidden"
       orientation="horizontal"
     >
-      <StarsBg />
+      <LazyStarsBg hydrate-never />
 
       <video
         class="rounded-[var(--ui-radius)] z-10"

docs/app/pages/pro/pricing.vue

@@ -27,8 +27,10 @@ useSeoMeta({
         <MDC :value="page.pricing.title" unwrap="p" cache-key="pro-pricing-title" />
       </template>
 
-      <StarsBg />
+      <LazyStarsBg hydrate-never />
+
       <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
           v-bind="page.pricing.freePlan"

docs/app/pages/pro/templates.vue

@@ -18,7 +18,8 @@ useSeoMeta({
 <template>
   <div class="relative">
     <UPageHero :links="page.links" :ui="{ container: 'relative' }">
-      <StarsBg />
+      <LazyStarsBg hydrate-never />
+
       <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>