Skip to content

fix(frontend): move plan page CTAs below pricing cards #2942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
riderx merged 1 commit into from
Aug 8, 2026
+26 −26
Merged

fix(frontend): move plan page CTAs below pricing cards #2942

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 26 additions & 26 deletions src/pages/settings/organization/Plans.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 ?? '') }}
Expand Down
Loading