feat: 所有模板 Home 页套餐卡片添加官方价格等价对比

提取 calcOfficialEquiv 为公共工具函数，7 个 Home 模板和 Packages 页面共用，自动选择折扣比例最大的模型展示等价额度。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-25 03:46:01 +09:00
1 parent b33ef787a5
commit 3b8206284f
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuth } from '../context/AuthContext';
 import { getSitePackages, getSiteModels, subscribePackage, getActiveSubscriptions, Q } from '../api';
 import SpotlightCard from '../components/bits/SpotlightCard';
+import { calcOfficialEquiv } from '../utils/officialEquiv';
 import toast from 'react-hot-toast';

 const resetLabelKeys = {
@@ -13,70 +14,11 @@ const resetLabelKeys = {
  monthly: 'packages.resetMonthly',
 };

-// Official prices (input $/1K tokens) for reference models
-const OFFICIAL_PRICES = [
-  { pattern: 'claude-4-sonnet', label: 'Claude Sonnet 4', inputPerMtok: 3 },
-  { pattern: 'claude-sonnet-4', label: 'Claude Sonnet 4', inputPerMtok: 3 },
-  { pattern: 'claude-4.5-sonnet', label: 'Claude 4.5 Sonnet', inputPerMtok: 3 },
-  { pattern: 'claude-4.6-sonnet', label: 'Claude 4.6 Sonnet', inputPerMtok: 3 },
-  { pattern: 'claude-4-opus', label: 'Claude Opus 4', inputPerMtok: 15 },
-  { pattern: 'claude-opus-4', label: 'Claude Opus 4', inputPerMtok: 15 },
-  { pattern: 'claude-4.1-opus', label: 'Claude Opus 4.1', inputPerMtok: 15 },
-  { pattern: 'claude-4.5-opus', label: 'Claude Opus 4.5', inputPerMtok: 5 },
-  { pattern: 'claude-4.6-opus', label: 'Claude Opus 4.6', inputPerMtok: 5 },
-  { pattern: 'claude-3.5-haiku', label: 'Claude 3.5 Haiku', inputPerMtok: 0.8 },
-  { pattern: 'claude-3-5-haiku', label: 'Claude 3.5 Haiku', inputPerMtok: 0.8 },
-  { pattern: 'gpt-5.1', label: 'GPT-5.1', inputPerMtok: 1.25 },
-  { pattern: 'gpt-5.2', label: 'GPT-5.2', inputPerMtok: 1.75 },
-  { pattern: 'gpt-5.3', label: 'GPT-5.3', inputPerMtok: 1.75 },
-  { pattern: 'gpt-5.4', label: 'GPT-5.4', inputPerMtok: 2.5 },
-  { pattern: 'gpt-4o', label: 'GPT-4o', inputPerMtok: 2.5 },
-  { pattern: 'gpt-4.1', label: 'GPT-4.1', inputPerMtok: 2 },
-];
-
 function formatDate(unix) {
  if (!unix) return '';
  return new Date(unix * 1000).toLocaleDateString();
 }

-// Find the best official equivalent for the package
-function calcOfficialEquiv(models, quotaDollars) {
-  if (!models || models.length === 0 || quotaDollars <= 0) return null;
-
-  // For each model on this site, find its official counterpart
-  let bestResult = null;
-
-  for (const m of models) {
-    const siteInputPrice = Number(m.input_price); // $/1K tokens
-    if (!siteInputPrice || siteInputPrice <= 0) continue;
-
-    const modelName = (m.model_name || '').toLowerCase();
-
-    for (const official of OFFICIAL_PRICES) {
-      if (modelName.includes(official.pattern.toLowerCase())) {
-        // Site price is per 1K tokens, official is per 1M tokens
-        // Convert site price to per 1M: siteInputPrice * 1000
-        const sitePricePerMtok = siteInputPrice * 1000;
-        const ratio = official.inputPerMtok / sitePricePerMtok;
-        const equivDollars = quotaDollars * ratio;
-
-        if (!bestResult || equivDollars > bestResult.equivDollars) {
-          bestResult = {
-            label: official.label,
-            equivDollars,
-            ratio,
-            officialPrice: official.inputPerMtok,
-            sitePrice: sitePricePerMtok,
-          };
-        }
-        break;
-      }
-    }
-  }
-
-  return bestResult;
-}
-
 export default function Packages() {
  const { t } = useTranslation();
  const { user, refreshUser } = useAuth();
@@ -180,12 +122,12 @@ export default function Packages() {
              const remain = Math.max(0, total - used);
              const pct = total > 0 ? Math.min(100, (used / total) * 100) : 0;
              return (
-                <div key={sub.id} className="glass rounded-xl p-4 border border-neutral-800/50">
+                <div key={sub.id} className="glass rounded-xl p-4 border border-page-divider">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium text-page">
                      {t('packages.subscriptionId', { id: sub.id })}
                    </span>
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-green-500/10 text-green-400 border border-green-500/20">
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-green-500/10 text-page-success border border-green-500/20">
                      {t('packages.active')}
                    </span>
                  </div>
@@ -196,7 +138,7 @@ export default function Packages() {
                    )}
                  </div>
                  <div className="flex items-center gap-3 mb-1">
-                    <div className="flex-1 h-2 bg-neutral-800 rounded-full overflow-hidden">
+                    <div className="flex-1 h-2 bg-page-surface rounded-full overflow-hidden">
                      <div className="h-full rounded-full bg-gradient-to-r from-brand-500 to-purple-500 transition-all"
                        style={{ width: `${pct}%` }} />
                    </div>
@@ -227,10 +169,9 @@ export default function Packages() {
            const equiv = calcOfficialEquiv(enabledModels, quotaDollars);

            return (
-            <SpotlightCard
+            <div
              key={pkg.id}
-              className="!bg-neutral-900/60 !border-neutral-800/60 !p-0 !rounded-2xl flex flex-col"
-              spotlightColor={spotlightColors[i % spotlightColors.length]}
+              className="glass rounded-2xl flex flex-col"
            >
              <div className="p-6 flex-1 flex flex-col">
                {/* Header */}
@@ -238,7 +179,7 @@ export default function Packages() {
                  <div className="flex items-center gap-2">
                    <h3 className="text-xl font-semibold text-page">{pkg.name}</h3>
                    {isSubscription && (
-                      <span className="text-[10px] px-2 py-0.5 rounded-full bg-purple-500/10 text-purple-400 border border-purple-500/20">
+                      <span className="text-[10px] px-2 py-0.5 rounded-full bg-purple-500/10 text-page-info border border-purple-500/20">
                        {getResetLabel(resetPeriod)}
                      </span>
                    )}
@@ -264,7 +205,7 @@ export default function Packages() {
                {/* Official Equiv Banner */}
                {equiv && equiv.equivDollars > quotaDollars && (
                  <div className="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-500/20 rounded-xl p-3 mb-4">
-                    <p className="text-xs text-amber-300 font-medium">
+                    <p className="text-xs text-page-warning font-medium">
                      🔥 {t('packages.officialEquiv', {
                        model: equiv.label,
                        amount: Math.round(equiv.equivDollars),
@@ -277,7 +218,7 @@ export default function Packages() {
                <ul className="space-y-2 mb-6 flex-1">
                  {pkg.quota_amount > 0 && (
                    <li className="flex items-center gap-2 text-sm text-page-label">
-                      <svg className="w-4 h-4 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <svg className="w-4 h-4 text-page-success flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                      {isSubscription
@@ -288,20 +229,20 @@ export default function Packages() {
                  )}
                  {isSubscription && (
                    <li className="flex items-center gap-2 text-sm text-page-label">
-                      <svg className="w-4 h-4 text-amber-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <svg className="w-4 h-4 text-page-warning flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      {t('packages.unusedQuotaExpires')}
                    </li>
                  )}
                  <li className="flex items-center gap-2 text-sm text-page-label">
-                    <svg className="w-4 h-4 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <svg className="w-4 h-4 text-page-success flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    {t('packages.allModels')}
                  </li>
                  <li className="flex items-center gap-2 text-sm text-page-label">
-                    <svg className="w-4 h-4 text-green-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <svg className="w-4 h-4 text-page-success flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    {t('packages.openaiApi')}
@@ -317,7 +258,7 @@ export default function Packages() {
                  {subscribing === pkg.id ? t('packages.processing') : user ? t('packages.subscribeNow') : t('packages.signUpToSubscribe')}
                </button>
              </div>
-            </SpotlightCard>
+            </div>
          )})}
        </div>
      )}
@@ -338,7 +279,7 @@ export default function Packages() {
            </p>
            {isSubscription && (
              <div className="bg-purple-500/10 border border-purple-500/20 rounded-xl p-3 mb-3">
-                <p className="text-xs text-purple-300">
+                <p className="text-xs text-page-info">
                  {t('packages.subscriptionInfo', {
                    period: getResetLabel(resetPeriod),
                    days: confirmPkg.duration || 30,
@@ -348,11 +289,11 @@ export default function Packages() {
              </div>
            )}
            <p className="text-sm text-page-secondary mb-4">
-              {t('packages.yourBalance')} <span className={`font-medium ${insufficient ? 'text-red-400' : 'text-green-400'}`}>${userBalance.toFixed(2)}</span>
+              {t('packages.yourBalance')} <span className={`font-medium ${insufficient ? 'text-page-danger' : 'text-page-success'}`}>${userBalance.toFixed(2)}</span>
            </p>
            {insufficient && (
              <div className="bg-red-500/10 border border-red-500/20 rounded-xl p-3 mb-4">
-                <p className="text-sm text-red-300">{t('packages.insufficientBalance')}</p>
+                <p className="text-sm text-page-danger">{t('packages.insufficientBalance')}</p>
              </div>
            )}
            <div className="flex justify-end gap-3">
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../context/AuthContext';
 import { useSite } from '../../context/SiteContext';
-import { getSiteModels, getSitePackages } from '../../api';
+import { getSiteModels, getSitePackages, Q } from '../../api';
+import { calcOfficialEquiv } from '../../utils/officialEquiv';
 import CountUp from '../../components/bits/CountUp';
 import FadeContent from '../../components/bits/FadeContent';

@@ -139,7 +140,10 @@ export default function ClaudeHome() {
            <p className="text-[#8B7D6E] mb-10">{t('home.choosePlan')}</p>

            <div className="grid md:grid-cols-3 gap-4 max-w-4xl">
-              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
+              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => {
+                const quotaDollars = pkg.quota_amount > 0 ? pkg.quota_amount / Q : 0;
+                const equiv = calcOfficialEquiv(enabledModels, quotaDollars);
+                return (
                <div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-all ${
                  i === 1 ? 'border-[#D97757]/30 bg-[#D97757]/[0.04]' : 'border-[#E8DDD0] hover:border-[#D9C5B2]'
                }`}>
@@ -153,6 +157,9 @@ export default function ClaudeHome() {
                    )}
                    {pkg.duration > 0 && <p className="text-xs text-[#8B7D6E] mt-1">{t('home.days', { count: pkg.duration })}</p>}
                  </div>
+                  {equiv && equiv.equivDollars > quotaDollars && (
+                    <p className="text-xs text-[#D97757] mt-2">🔥 {t('packages.officialEquiv', { model: equiv.label, amount: Math.round(equiv.equivDollars) })}</p>
+                  )}
                  <Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-full font-medium text-sm text-center transition-colors ${
                    i === 1
                      ? 'bg-[#D97757] text-white hover:bg-[#C4613F]'
@@ -161,7 +168,7 @@ export default function ClaudeHome() {
                    {user ? t('home.subscribe') : t('home.getStarted')}
                  </Link>
                </div>
-              ))}
+              )})}
            </div>
          </FadeContent>
        </section>
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../context/AuthContext';
 import { useSite } from '../../context/SiteContext';
-import { getSiteModels, getSitePackages } from '../../api';
+import { getSiteModels, getSitePackages, Q } from '../../api';
+import { calcOfficialEquiv } from '../../utils/officialEquiv';
 import CountUp from '../../components/bits/CountUp';
 import FadeContent from '../../components/bits/FadeContent';

@@ -152,7 +153,10 @@ export default function CleanHome() {
            <p className="text-gray-500 mb-10">{t('home.choosePlan')}</p>

            <div className="grid md:grid-cols-3 gap-4 max-w-4xl">
-              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
+              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => {
+                const quotaDollars = pkg.quota_amount > 0 ? pkg.quota_amount / Q : 0;
+                const equiv = calcOfficialEquiv(enabledModels, quotaDollars);
+                return (
                <div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-all ${
                  i === 1 ? 'border-blue-200 bg-blue-50/50 shadow-sm' : 'border-gray-100 hover:border-gray-200'
                }`}>
@@ -166,6 +170,9 @@ export default function CleanHome() {
                    )}
                    {pkg.duration > 0 && <p className="text-xs text-gray-500 mt-1">{t('home.days', { count: pkg.duration })}</p>}
                  </div>
+                  {equiv && equiv.equivDollars > quotaDollars && (
+                    <p className="text-xs text-amber-600 mt-2">🔥 {t('packages.officialEquiv', { model: equiv.label, amount: Math.round(equiv.equivDollars) })}</p>
+                  )}
                  <Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
                    i === 1
                      ? 'bg-blue-600 text-white hover:bg-blue-700'
@@ -174,7 +181,7 @@ export default function CleanHome() {
                    {user ? t('home.subscribe') : t('home.getStarted')}
                  </Link>
                </div>
-              ))}
+              )})}
            </div>
          </FadeContent>
        </section>
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../context/AuthContext';
 import { useSite } from '../../context/SiteContext';
-import { getSiteModels, getSitePackages } from '../../api';
+import { getSiteModels, getSitePackages, Q } from '../../api';
+import { calcOfficialEquiv } from '../../utils/officialEquiv';
 import CountUp from '../../components/bits/CountUp';
 import FadeContent from '../../components/bits/FadeContent';

@@ -151,7 +152,10 @@ export default function CorporateHome() {
            <p className="text-slate-500 mb-10">{t('home.choosePlan')}</p>

            <div className="grid md:grid-cols-3 gap-5 max-w-4xl">
-              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
+              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => {
+                const quotaDollars = pkg.quota_amount > 0 ? pkg.quota_amount / Q : 0;
+                const equiv = calcOfficialEquiv(enabledModels, quotaDollars);
+                return (
                <div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-all ${
                  i === 1 ? 'border-slate-900 shadow-sm' : 'border-slate-200 hover:border-slate-300'
                }`}>
@@ -165,6 +169,9 @@ export default function CorporateHome() {
                    )}
                    {pkg.duration > 0 && <p className="text-xs text-slate-500 mt-1">{t('home.days', { count: pkg.duration })}</p>}
                  </div>
+                  {equiv && equiv.equivDollars > quotaDollars && (
+                    <p className="text-xs text-amber-600 mt-2">🔥 {t('packages.officialEquiv', { model: equiv.label, amount: Math.round(equiv.equivDollars) })}</p>
+                  )}
                  <Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
                    i === 1
                      ? 'bg-slate-900 text-white hover:bg-slate-800'
@@ -173,7 +180,7 @@ export default function CorporateHome() {
                    {user ? t('home.subscribe') : t('home.getStarted')}
                  </Link>
                </div>
-              ))}
+              )})}
            </div>
          </FadeContent>
        </section>
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../context/AuthContext';
 import { useSite } from '../../context/SiteContext';
-import { getSiteModels, getSitePackages } from '../../api';
+import { getSiteModels, getSitePackages, Q } from '../../api';
+import { calcOfficialEquiv } from '../../utils/officialEquiv';
 import CountUp from '../../components/bits/CountUp';
 import FadeContent from '../../components/bits/FadeContent';

@@ -142,7 +143,10 @@ export default function DarkHome() {
            <p className="text-neutral-500 mb-10">{t('home.choosePlan')}</p>

            <div className="grid md:grid-cols-3 gap-4 max-w-4xl">
-              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
+              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => {
+                const quotaDollars = pkg.quota_amount > 0 ? pkg.quota_amount / Q : 0;
+                const equiv = calcOfficialEquiv(enabledModels, quotaDollars);
+                return (
                <div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-colors ${
                  i === 1 ? 'border-emerald-500/25 bg-emerald-500/[0.04]' : 'border-neutral-800/60 hover:border-neutral-700'
                }`}>
@@ -156,6 +160,9 @@ export default function DarkHome() {
                    )}
                    {pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
                  </div>
+                  {equiv && equiv.equivDollars > quotaDollars && (
+                    <p className="text-xs text-amber-300/80 mt-2">🔥 {t('packages.officialEquiv', { model: equiv.label, amount: Math.round(equiv.equivDollars) })}</p>
+                  )}
                  <Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
                    i === 1
                      ? 'bg-emerald-500 text-black hover:bg-emerald-400'
@@ -164,7 +171,7 @@ export default function DarkHome() {
                    {user ? t('home.subscribe') : t('home.getStarted')}
                  </Link>
                </div>
-              ))}
+              )})}
            </div>
          </FadeContent>
        </section>
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../context/AuthContext';
 import { useSite } from '../../context/SiteContext';
-import { getSiteModels, getSitePackages } from '../../api';
+import { getSiteModels, getSitePackages, Q } from '../../api';
+import { calcOfficialEquiv } from '../../utils/officialEquiv';
 import CountUp from '../../components/bits/CountUp';
 import FadeContent from '../../components/bits/FadeContent';

@@ -151,7 +152,10 @@ export default function DefaultHome() {
            <p className="text-neutral-500 mb-10">{t('home.choosePlan')}</p>

            <div className="grid md:grid-cols-3 gap-4 max-w-4xl">
-              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
+              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => {
+                const quotaDollars = pkg.quota_amount > 0 ? pkg.quota_amount / Q : 0;
+                const equiv = calcOfficialEquiv(enabledModels, quotaDollars);
+                return (
                <div key={pkg.id} className={`rounded-2xl p-6 flex flex-col border transition-colors ${
                  i === 1 ? 'bg-white/[0.04] border-white/[0.12]' : 'bg-white/[0.02] border-white/[0.06] hover:border-white/[0.1]'
                }`}>
@@ -165,6 +169,9 @@ export default function DefaultHome() {
                    )}
                    {pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
                  </div>
+                  {equiv && equiv.equivDollars > quotaDollars && (
+                    <p className="text-xs text-amber-300/80 mt-2">🔥 {t('packages.officialEquiv', { model: equiv.label, amount: Math.round(equiv.equivDollars) })}</p>
+                  )}
                  <Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-xl font-medium text-sm text-center transition-colors ${
                    i === 1
                      ? 'bg-white text-black hover:bg-neutral-100'
@@ -173,7 +180,7 @@ export default function DefaultHome() {
                    {user ? t('home.subscribe') : t('home.getStarted')}
                  </Link>
                </div>
-              ))}
+              )})}
            </div>
          </FadeContent>
        </section>
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../context/AuthContext';
 import { useSite } from '../../context/SiteContext';
-import { getSiteModels, getSitePackages } from '../../api';
+import { getSiteModels, getSitePackages, Q } from '../../api';
+import { calcOfficialEquiv } from '../../utils/officialEquiv';
 import CountUp from '../../components/bits/CountUp';
 import FadeContent from '../../components/bits/FadeContent';

@@ -137,7 +138,10 @@ export default function MinimalHome() {
            <p className="text-neutral-500 mb-10">{t('home.choosePlan')}</p>

            <div className="grid md:grid-cols-3 gap-4 max-w-4xl">
-              {packages.filter(p => p.enabled).slice(0, 3).map((pkg) => (
+              {packages.filter(p => p.enabled).slice(0, 3).map((pkg) => {
+                const quotaDollars = pkg.quota_amount > 0 ? pkg.quota_amount / Q : 0;
+                const equiv = calcOfficialEquiv(enabledModels, quotaDollars);
+                return (
                <div key={pkg.id} className="rounded-xl p-6 flex flex-col border border-neutral-800/60 hover:border-neutral-700 transition-colors">
                  <h3 className="text-base font-semibold text-white">{pkg.name}</h3>
                  {pkg.description && <p className="text-sm text-neutral-500 mt-1">{pkg.description}</p>}
@@ -148,11 +152,14 @@ export default function MinimalHome() {
                    )}
                    {pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
                  </div>
+                  {equiv && equiv.equivDollars > quotaDollars && (
+                    <p className="text-xs text-amber-300/80 mt-2">🔥 {t('packages.officialEquiv', { model: equiv.label, amount: Math.round(equiv.equivDollars) })}</p>
+                  )}
                  <Link to={user ? '/packages' : '/register'} className="mt-4 py-2.5 rounded-lg bg-neutral-800 text-white font-medium text-sm text-center hover:bg-neutral-700 transition-colors">
                    {user ? t('home.subscribe') : t('home.getStarted')}
                  </Link>
                </div>
-              ))}
+              )})}
            </div>
          </FadeContent>
        </section>
@@ -3,7 +3,8 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../context/AuthContext';
 import { useSite } from '../../context/SiteContext';
-import { getSiteModels, getSitePackages } from '../../api';
+import { getSiteModels, getSitePackages, Q } from '../../api';
+import { calcOfficialEquiv } from '../../utils/officialEquiv';
 import CountUp from '../../components/bits/CountUp';
 import FadeContent from '../../components/bits/FadeContent';

@@ -157,7 +158,10 @@ export default function StarterHome() {
            <p className="text-neutral-500 mb-10">{t('home.choosePlan')}</p>

            <div className="grid md:grid-cols-3 gap-4 max-w-4xl">
-              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => (
+              {packages.filter(p => p.enabled).slice(0, 3).map((pkg, i) => {
+                const quotaDollars = pkg.quota_amount > 0 ? pkg.quota_amount / Q : 0;
+                const equiv = calcOfficialEquiv(enabledModels, quotaDollars);
+                return (
                <div key={pkg.id} className={`rounded-xl p-6 flex flex-col border transition-colors ${
                  i === 1 ? 'border-brand-500/30 bg-brand-500/[0.04]' : 'border-neutral-800/60 hover:border-neutral-700'
                }`}>
@@ -171,6 +175,9 @@ export default function StarterHome() {
                    )}
                    {pkg.duration > 0 && <p className="text-xs text-neutral-600 mt-1">{t('home.days', { count: pkg.duration })}</p>}
                  </div>
+                  {equiv && equiv.equivDollars > quotaDollars && (
+                    <p className="text-xs text-amber-300/80 mt-2">🔥 {t('packages.officialEquiv', { model: equiv.label, amount: Math.round(equiv.equivDollars) })}</p>
+                  )}
                  <Link to={user ? '/packages' : '/register'} className={`mt-4 py-2.5 rounded-lg font-medium text-sm text-center transition-colors ${
                    i === 1
                      ? 'bg-brand-600 text-white hover:bg-brand-500'
@@ -179,7 +186,7 @@ export default function StarterHome() {
                    {user ? t('home.subscribe') : t('home.getStarted')}
                  </Link>
                </div>
-              ))}
+              )})}
            </div>
          </FadeContent>
        </section>
@@ -0,0 +1,66 @@
+import { Q } from '../api';
+
+// Official prices (input $/1M tokens) for reference models
+const OFFICIAL_PRICES = [
+  { pattern: 'claude-4-sonnet', label: 'Claude Sonnet 4', inputPerMtok: 3 },
+  { pattern: 'claude-sonnet-4', label: 'Claude Sonnet 4', inputPerMtok: 3 },
+  { pattern: 'claude-4.5-sonnet', label: 'Claude 4.5 Sonnet', inputPerMtok: 3 },
+  { pattern: 'claude-4.6-sonnet', label: 'Claude 4.6 Sonnet', inputPerMtok: 3 },
+  { pattern: 'claude-4-opus', label: 'Claude Opus 4', inputPerMtok: 15 },
+  { pattern: 'claude-opus-4', label: 'Claude Opus 4', inputPerMtok: 15 },
+  { pattern: 'claude-4.1-opus', label: 'Claude Opus 4.1', inputPerMtok: 15 },
+  { pattern: 'claude-4.5-opus', label: 'Claude Opus 4.5', inputPerMtok: 5 },
+  { pattern: 'claude-4.6-opus', label: 'Claude Opus 4.6', inputPerMtok: 5 },
+  { pattern: 'claude-3.5-haiku', label: 'Claude 3.5 Haiku', inputPerMtok: 0.8 },
+  { pattern: 'claude-3-5-haiku', label: 'Claude 3.5 Haiku', inputPerMtok: 0.8 },
+  { pattern: 'gpt-5.1', label: 'GPT-5.1', inputPerMtok: 1.25 },
+  { pattern: 'gpt-5.2', label: 'GPT-5.2', inputPerMtok: 1.75 },
+  { pattern: 'gpt-5.3', label: 'GPT-5.3', inputPerMtok: 1.75 },
+  { pattern: 'gpt-5.4', label: 'GPT-5.4', inputPerMtok: 2.5 },
+  { pattern: 'gpt-4o', label: 'GPT-4o', inputPerMtok: 2.5 },
+  { pattern: 'gpt-4.1', label: 'GPT-4.1', inputPerMtok: 2 },
+];
+
+/**
+ * Find the best official equivalent for a given quota.
+ * Picks the model with the highest ratio (biggest discount advantage).
+ *
+ * @param {Array} models - site models with input_price ($/1K tokens)
+ * @param {number} quotaDollars - package quota in USD
+ * @returns {{ label: string, equivDollars: number } | null}
+ */
+export function calcOfficialEquiv(models, quotaDollars) {
+  if (!models || models.length === 0 || quotaDollars <= 0) return null;
+
+  let bestResult = null;
+
+  for (const m of models) {
+    const siteInputPrice = Number(m.input_price);
+    if (!siteInputPrice || siteInputPrice <= 0) continue;
+
+    const modelName = (m.model_name || '').toLowerCase();
+
+    for (const official of OFFICIAL_PRICES) {
+      if (modelName.includes(official.pattern.toLowerCase())) {
+        const sitePricePerMtok = siteInputPrice * 1000;
+        const ratio = official.inputPerMtok / sitePricePerMtok;
+        const equivDollars = quotaDollars * ratio;
+
+        if (!bestResult || equivDollars > bestResult.equivDollars) {
+          bestResult = { label: official.label, equivDollars, ratio };
+        }
+        break;
+      }
+    }
+  }
+
+  return bestResult;
+}
+
+/**
+ * Convenience: compute equiv from raw quota units + models.
+ */
+export function calcPkgEquiv(models, quotaAmount) {
+  const quotaDollars = quotaAmount > 0 ? quotaAmount / Q : 0;
+  return calcOfficialEquiv(models, quotaDollars);
+}