docs(app): add v3-alpha banner

docs/app.vue

@@ -3,7 +3,7 @@
   <div>
     <NuxtLoadingIndicator />
 
-    <!-- <Banner v-if="!$route.path.startsWith('/examples')" /> -->
+    <Banner v-if="!$route.path.startsWith('/examples')" />
 
     <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 

docs/components/Banner.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-const id = 'nuxt-ui-banner-1'
-const to = '/pro/pricing'
+const id = 'nuxt-ui-banner-2'
+const to = 'https://ui3.nuxt.dev'
 
 const hideBanner = () => {
   localStorage.setItem(id, 'true')
@@ -25,7 +25,14 @@ if (import.meta.server) {
 <template>
   <div class="relative bg-primary hover:bg-primary/90 transition-[background] backdrop-blur z-50 app-banner">
     <UContainer class="py-2">
-      <NuxtLink v-if="to" :to="to" class="focus:outline-none" aria-label="Nuxt UI Pro pricing" tabindex="-1">
+      <NuxtLink
+        v-if="to"
+        :to="to"
+        target="_blank"
+        class="focus:outline-none"
+        aria-label="Nuxt UI Pro pricing"
+        tabindex="-1"
+      >
         <span class="absolute inset-0 " aria-hidden="true" />
       </NuxtLink>
 
@@ -34,9 +41,19 @@ if (import.meta.server) {
 
         <p class="text-sm font-medium text-white dark:text-gray-900 truncate">
           <UIcon name="i-heroicons-rocket-launch" class="w-5 h-5 align-top flex-shrink-0 pointer-events-none mr-2" />
-          <span class="font-semibold">Nuxt UI Pro v1.0</span> is out with dashboard components!
+          <span class="font-semibold">Nuxt UI v3-alpha</span> has been released!
         </p>
 
+        <UButton
+          to="https://ui3.nuxt.dev"
+          target="_blank"
+          label="Try it out"
+          color="black"
+          variant="solid"
+          size="2xs"
+          trailing-icon="i-heroicons-arrow-right-20-solid"
+        />
+
         <div class="flex items-center justify-end lg:flex-1">
           <button
             class="p-1.5 rounded-md inline-flex hover:bg-primary/90"