From 11c298397514ddffa7633fca5b65879a1b012958 Mon Sep 17 00:00:00 2001 From: Michael B Date: Sat, 20 Jun 2026 11:21:49 -0400 Subject: [PATCH 01/60] refactor(website): reorder pricing card to features-first and drop intro titles Move credits + estimate below the feature list on every plan card, unify the mobile layout into a single card matching desktop, and remove the "Everything in X, plus:" intro across Standard/Creator/Pro/Enterprise. Co-Authored-By: Claude Opus 4.7 --- .../src/components/pricing/PriceSection.vue | 116 ++++++++---------- .../pricing/PricingPlanFeatureList.vue | 14 +-- apps/website/src/i18n/translations.ts | 16 --- 3 files changed, 52 insertions(+), 94 deletions(-) diff --git a/apps/website/src/components/pricing/PriceSection.vue b/apps/website/src/components/pricing/PriceSection.vue index 57d0f87f6e..e7db8cbf95 100644 --- a/apps/website/src/components/pricing/PriceSection.vue +++ b/apps/website/src/components/pricing/PriceSection.vue @@ -29,7 +29,6 @@ interface PricingPlan { estimateKey?: TranslationKey ctaKey: TranslationKey ctaHref: string - featureIntroKey?: TranslationKey features: PlanFeature[] andMoreKey?: TranslationKey image?: string @@ -63,9 +62,6 @@ const plans: PricingPlan[] = [ estimateKey: 'pricing.plan.standard.estimate', ctaKey: 'pricing.plan.standard.cta', ctaHref: subscribeUrl('standard'), - featureIntroKey: SHOW_FREE_TIER - ? 'pricing.plan.standard.featureIntro' - : undefined, features: [ { text: 'pricing.plan.standard.feature1' }, { text: 'pricing.plan.standard.feature2' }, @@ -81,7 +77,6 @@ const plans: PricingPlan[] = [ estimateKey: 'pricing.plan.creator.estimate', ctaKey: 'pricing.plan.creator.cta', ctaHref: subscribeUrl('creator'), - featureIntroKey: 'pricing.plan.creator.featureIntro', features: [ { text: 'pricing.plan.creator.feature1' }, { text: 'pricing.plan.creator.feature2' } @@ -97,7 +92,6 @@ const plans: PricingPlan[] = [ estimateKey: 'pricing.plan.pro.estimate', ctaKey: 'pricing.plan.pro.cta', ctaHref: subscribeUrl('pro'), - featureIntroKey: 'pricing.plan.pro.featureIntro', features: [ { text: 'pricing.plan.pro.feature1' }, { text: 'pricing.plan.pro.feature2' } @@ -190,6 +184,23 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
+ +
+
    +
  • + + + {{ t(feature.text, locale) }} + +
  • +
+
+
+

p.isEnterprise)!

- -
-

- {{ t(plan.featureIntroKey, locale) }} -

-
    -
  • - - - {{ t(feature.text, locale) }} - -
  • -
-
p.isEnterprise)!
- +
@@ -292,32 +282,41 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!

- + +
+ +
+ + +

+ {{ t(plan.creditsKey, locale) }} +

+ + +

+ {{ t(plan.estimateKey, locale) }} +

@@ -332,19 +331,6 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
- -
- -
-
import type { Locale, TranslationKey } from '../../i18n/translations' -import { cn } from '@comfyorg/tailwind-utils' - import { t } from '../../i18n/translations' interface PlanFeature { @@ -11,34 +9,24 @@ interface PlanFeature { const { features, - featureIntroKey, nextUpKey, andMoreKey, nextUpClass = 'text-primary-comfy-canvas/80 mt-4 text-sm', andMoreClass = 'text-primary-comfy-canvas mt-4 text-sm', listGap = 'space-y-2', - introMargin = 'mb-3', locale = 'en' } = defineProps<{ features: PlanFeature[] - featureIntroKey?: TranslationKey nextUpKey?: TranslationKey andMoreKey?: TranslationKey nextUpClass?: string andMoreClass?: string listGap?: string - introMargin?: string locale?: Locale }>()