From d03ca9dd98fc446e71baaade948ea9446cb820bc Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 8 Aug 2026 17:08:47 +0000
Subject: [PATCH] fix(frontend): move plan page CTAs below pricing cards

Credits and expert-service banners sat above the plan grid and forced users to scroll before seeing prices. Place them under the pricing cards instead.

Co-authored-by: Martin DONADIEU <martindonadieu@gmail.com>
---
 src/pages/settings/organization/Plans.vue | 52 +++++++++++------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/pages/settings/organization/Plans.vue b/src/pages/settings/organization/Plans.vue
index c2b1c37c9b..5c96589478 100644
--- a/src/pages/settings/organization/Plans.vue
+++ b/src/pages/settings/organization/Plans.vue
@@ -534,32 +534,6 @@ function buttonStyle(p: Database['public']['Tables']['plans']['Row']) {
         {{ t('plan-failed') }}
       </div>
 
-      <!-- Credits CTA: shows info banner for credits-only orgs, upsell CTA for others -->
-      <CreditsCta v-if="!isMobile" class="mb-6 shrink-0" :credits-only="isCreditsOnly" />
-
-      <!-- Expert as a Service CTA -->
-      <div v-if="!isMobile" class="mb-6 shrink-0">
-        <div class="flex flex-col gap-4 rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:justify-between">
-          <div class="min-w-0 flex-1">
-            <p class="text-sm font-semibold text-slate-900 dark:text-white">
-              {{ t('expert-service-title') }}
-            </p>
-            <p class="mt-1 max-w-3xl text-xs leading-5 text-slate-600 dark:text-slate-300">
-              {{ t('expert-service-desc') }}
-            </p>
-          </div>
-          <a
-            class="d-btn d-btn-sm h-auto min-h-10 w-full shrink-0 justify-center gap-2 whitespace-nowrap rounded-lg border-none bg-blue-600 px-4 text-xs font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 sm:w-auto"
-            href="https://capgo.app/premium-support/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            {{ t('expert-service-cta') }}
-            <IconArrowRight class="h-3.5 w-3.5" aria-hidden="true" />
-          </a>
-        </div>
-      </div>
-
       <!-- Plans Grid -->
       <div class="grid content-start min-h-0 grid-cols-1 gap-4 p-1 overflow-y-auto md:grid-cols-2 xl:grid-cols-4 grow">
         <div
@@ -647,6 +621,32 @@ function buttonStyle(p: Database['public']['Tables']['plans']['Row']) {
         </div>
       </div>
 
+      <!-- Credits CTA: under prices so plan cards stay visible without scrolling -->
+      <CreditsCta v-if="!isMobile" class="mt-6 shrink-0" :credits-only="isCreditsOnly" />
+
+      <!-- Expert as a Service CTA -->
+      <div v-if="!isMobile" class="mt-4 shrink-0">
+        <div class="flex flex-col gap-4 rounded-lg border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/70 sm:flex-row sm:items-center sm:justify-between">
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-semibold text-slate-900 dark:text-white">
+              {{ t('expert-service-title') }}
+            </p>
+            <p class="mt-1 max-w-3xl text-xs leading-5 text-slate-600 dark:text-slate-300">
+              {{ t('expert-service-desc') }}
+            </p>
+          </div>
+          <a
+            class="d-btn d-btn-sm h-auto min-h-10 w-full shrink-0 justify-center gap-2 whitespace-nowrap rounded-lg border-none bg-blue-600 px-4 text-xs font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 sm:w-auto"
+            href="https://capgo.app/premium-support/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {{ t('expert-service-cta') }}
+            <IconArrowRight class="h-3.5 w-3.5" aria-hidden="true" />
+          </a>
+        </div>
+      </div>
+
       <!-- Footer / Contact -->
       <div v-if="!isMobile" class="mt-4 text-xs text-center text-gray-500 dark:text-gray-400 shrink-0">
         {{ t('plan-page-warn').replace('%ORG_NAME%', currentOrganization?.name ?? '') }}