docs: improve ctas

Author: atinux

docs/content/0.index.yml

@@ -16,7 +16,7 @@ hero:
     icon: i-ph-arrow-right
   links:
     - label: Get started
-      trailing-icon: i-heroicons-arrow-right-20-solid
+      trailing-icon: i-ph-arrow-right
       to: '/docs/getting-started'
       size: lg
     - label: Star on GitHub
@@ -69,16 +69,15 @@ deploy:
         width: 460
         height: 259
   buttons:
-    - label: NuxtHub Admin
-      icon: i-simple-icons-nuxtdotjs
+    - label: Deploy now
+      trailing-icon: i-ph-arrow-right
       color: black
       size: lg
       to: https://admin.hub.nuxt.com/?utm_source=nuxthub-docs&utm_medium=home
       target: _blank
-    - label: Get started
+    - label: Start locally
       color: gray
       variant: ghost
-      trailing-icon: i-heroicons-arrow-right-20-solid
       to: '/docs/getting-started'
       size: lg
 database:
@@ -232,7 +231,7 @@ tool:
     - label: Get started
       color: gray
       variant: ghost
-      trailing-icon: i-heroicons-arrow-right-20-solid
+      trailing-icon: i-ph-arrow-right
       to: '/docs/getting-started'
       size: lg
   title: Tailored features for <span class="text-primary">Nuxt developers</span>

docs/pages/pricing.vue

@@ -3,6 +3,7 @@ definePageMeta({
   primary: 'green'
 })
 const { data: page } = await useAsyncData('pricing', () => queryContent('/pricing').findOne())
+const { data: home } = await useAsyncData('index', () => queryContent('/').findOne())
 
 const isYearly = ref(true)
 const isWorkersPaid = ref(false)
@@ -87,6 +88,33 @@ defineOgImageComponent('Docs')
         </template>
       </ULandingFAQ>
     </ULandingSection>
+
+    <ULandingSection class="sm:pt-12">
+      <template #title>
+        <span v-html="home?.testimonials.title" />
+      </template>
+      <template #description>
+        <span v-html="home?.testimonials.description" />
+      </template>
+
+      <UPageColumns :ui="{ wrapper: 'column-1 md:columns-2 lg:columns-4 gap-8 space-y-8' }">
+        <UPageCard
+          :title="home?.testimonials.cloudflare.title" :description="home?.testimonials.cloudflare.description"
+          :ui="{ title: 'whitespace-normal text-white dark:text-gray-950', description: 'text-gray-400 dark:text-gray-500', background: 'bg-gray-900 dark:bg-white' }"
+        >
+          <template #icon>
+            <UColorModeImage
+              :light="home?.testimonials.cloudflare.img.dark"
+              :dark="home?.testimonials.cloudflare.img.light" alt="Cloudflare logo"
+            />
+          </template>
+        </UPageCard>
+
+        <div v-for="(testimonial, index) in home?.testimonials.items" :key="index" class="break-inside-avoid">
+          <ULandingTestimonial v-bind="testimonial" />
+        </div>
+      </UPageColumns>
+    </ULandingSection>
   </UContainer>
 </template>