docs: improve marketing

Co-Authored-By: Sébastien Chopin <atinux@gmail.com>

docs/app/pages/.index.yml

@@ -5,7 +5,17 @@ hero:
   description: Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI.
   links:
     - label: Get started
-      to: /getting-started/installation
+      to: /getting-started/installation/nuxt
+      class: 'ui-only nuxt-only'
+    - label: Get started
+      to: /getting-started/installation/vue
+      class: 'ui-only vue-only'
+    - label: Get started
+      to: /getting-started/installation/pro/nuxt
+      class: 'ui-pro-only nuxt-only'
+    - label: Get started
+      to: /getting-started/installation/pro/vue
+      class: 'ui-pro-only vue-only'
     - label: Explore components
       to: /components
       variant: outline
@@ -50,7 +60,7 @@ design_system:
   title: Flexible design system
   description: Build your next project faster with Nuxt UI's comprehensive design system. Featuring semantic color aliases, comprehensive design tokens, and automatic light/dark mode support for accessible components out of the box.
   links:
-    - label: Learn more
+    - label: Customize design system
       to: /getting-started/theme#design-system
       variant: outline
       color: neutral
@@ -107,7 +117,7 @@ component_customization:
   title: Powerful component customization
   description: Nuxt UI leverages [Tailwind Variants](https://www.tailwind-variants.org/) to provide a powerful, maintainable system for managing component styles and intelligently merging Tailwind CSS classes without conflicts.
   links:
-    - label: Learn more
+    - label: Customize components
       to: /getting-started/theme#customize-theme
       variant: outline
       color: neutral

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

@@ -8,7 +8,6 @@ hero:
   links:
     - label: Purchase Pro Kit
       to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
-      trailing-icon: i-lucide-arrow-right
       target: _blank
     - label: Free Figma Kit
       to: 'https://go.nuxt.com/figma'
@@ -121,7 +120,6 @@ section4:
   links:
     - label: Get access now
       to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
-      trailing-icon: i-lucide-arrow-right
     - label: Preview UI Pro Design Kit
       to: 'https://go.nuxt.com/figma-pro'
       icon: i-logos-figma

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

@@ -29,7 +29,7 @@ pricing:
       - Free [preview available](https://www.figma.com/design/mxXR9binOSLU3rYKZZRPXs/PREVIEW---NuxtUIPro-V3-BETA?m=auto&t=c4598Wr0rZwKPs5M-1)
       - Includes Nuxt UI [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
     button:
-      label: Explore Figma Kit Pricing
+      label: Buy Figma Kit
       to: 'https://nuxt.lemonsqueezy.com/buy/17213c49-621b-4c2c-9478-3a50a099003d'
       color: 'neutral'
   plans:

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

@@ -7,13 +7,13 @@ hero:
     - label: Buy a license
       size: xl
       to: /pro/pricing
-      trailing-icon: i-lucide-arrow-right
+    - label: Try for free
-    - label: Get started
       trailing: true
       color: neutral
-      variant: ghost
+      variant: outline
       to: /getting-started/installation/pro/nuxt
       size: xl
+      trailingIcon: i-lucide-arrow-right
 features:
   title: Create stunning Vue applications faster.
   description: Nuxt UI Pro comes packed with powerful features to help you build modern, performant, accessible and responsive Nuxt applications at record speed. From pre-built UI sections to Figma design kits, every detail is crafted to speed up your development and deliver a polished user experience.
@@ -157,8 +157,8 @@ cta:
   links:
     - label: Buy a license
       to: '/pro/pricing'
-      trailing-icon: i-lucide-arrow-right
+    - label: Try for free
-    - label: Get started
+      to: /getting-started/installation/pro/nuxt
-      to: '/getting-started/license'
+      variant: outline
-      variant: ghost
       color: neutral
+      trailingIcon: i-lucide-arrow-right

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

@@ -5,16 +5,16 @@ hero:
   description: 'Ready to use templates powered by our premium Vue components and Nuxt Content.<br class="hidden lg:block"> The templates are responsive, accessible and easy to customize so you can get started in no time.'
 navigation: false
 links:
-  - label: Get started
+  - label: Buy a license
-    to: /getting-started/installation/pro/nuxt#use-an-official-template
+    color: primary
-    color: neutral
     size: xl
-    trailingIcon: i-lucide-arrow-right
+    to: /pro/pricing
-  - label: Purchase a license
+  - label: Try for free
+    to: /getting-started/installation/pro/nuxt#use-an-official-template
     size: xl
     color: neutral
     variant: outline
-    to: /pro/pricing
+    trailingIcon: i-lucide-arrow-right
 templates:
   - title: 'Dashboard'
     description: "A template to illustrate how to build your own dashboard with the 15+ latest Nuxt UI Pro components, designed specifically to create a consistent look and feel."

docs/app/pages/pro/index.vue

@@ -116,7 +116,7 @@ useSeoMeta({
         wrapper: 'grid grid-cols-1 lg:grid-cols-2',
         description: 'lg:mt-0' }"
       orientation="horizontal"
-      class="rounded-none border-t border-(--ui-border) bg-gradient-to-b from-(--ui-bg-muted) to-(--ui-bg)"
+      class="rounded-none border-t border-(--ui-border) bg-gradient-to-b from-(--ui-bg-elevated)/50 to-(--ui-bg)"
     >
       <template #title>
         <MDC :value="page.mainSection.title" tag="span" unwrap="p" cache-key="pro-main-section-title" />