docs: add pro section on landing

docs/content/index.yml

@@ -62,7 +62,7 @@ sections:
           height: 160
         orientation: 'horizontal'
     links:
-      - label: Explore the docs
+      - label: Explore docs
         to: /getting-started/theming
         color: white
         size: lg
@@ -72,7 +72,7 @@ sections:
     class: 'dark:bg-gradient-to-b from-gray-950/50 to-gray-900'
     slot: categories
     links:
-      - label: View all components
+      - label: Explore components
         to: /elements/accordion
         color: white
         size: lg
@@ -110,3 +110,16 @@ sections:
         badge: 3
 cta:
   title: Trusted and supported by our<br class="hidden lg:block"> amazing community
+pro:
+  title: 'Upgrade to <span class="text-primary">UI Pro</span> for more components'
+  description: 'Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.'
+  image:
+    path: /illustrations/pro
+    width: 1216
+    height: 424
+  links:
+    - label: Explore Pro
+      to: /pro
+      color: white
+      size: lg
+      trailingIcon: i-heroicons-arrow-right-20-solid

docs/pages/index.vue

@@ -188,6 +188,26 @@
         </div>
       </ULandingCTA>
     </ULandingSection>
+
+    <ULandingSection :links="page.pro.links">
+      <template #title>
+        <span v-html="page.pro.title" />
+      </template>
+
+      <template #description>
+        <span v-html="page.pro.description" />
+      </template>
+
+      <UColorModeImage
+        :light="`${page.pro.image.path}-light.svg`"
+        :dark="`${page.pro.image.path}-dark.svg`"
+        :width="page.pro.image.width"
+        :height="page.pro.image.height"
+        :alt="page.pro.title"
+        loading="lazy"
+        class="w-full lg:-mb-16"
+      />
+    </ULandingSection>
   </div>
 </template>