bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve frontend 3

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-11-19 22:12:51 +01:00
parent 938df0866e
commit 29e6ddcea9
17 changed files with 2215 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/subscription/SubscriptionPricingCards.tsx
View File

@@ -175,7 +175,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
</div>
{/* Simplified Plans Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-start lg:items-stretch">
{Object.entries(plans).map(([tier, plan]) => {
const price = getPrice(plan);
const savings = getSavings(plan);
@@ -196,7 +196,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
relative rounded-2xl p-8 transition-all duration-300 block no-underline
${mode === 'settings' ? 'cursor-pointer' : mode === 'landing' ? 'cursor-pointer' : ''}
${isPopular
? 'bg-gradient-to-br from-blue-600 to-blue-800 shadow-xl ring-2 ring-blue-400'
? 'bg-gradient-to-br from-blue-600 to-blue-800 shadow-xl ring-2 ring-blue-400 lg:scale-105 lg:z-10'
: 'bg-[var(--bg-secondary)] border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-lg'
}
`}
@@ -256,6 +256,34 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
</div>
)}
{/* Feature Inheritance Indicator */}
{tier === SUBSCRIPTION_TIERS.PROFESSIONAL && (
<div className={`mb-5 px-4 py-3 rounded-xl transition-all ${
isPopular
? 'bg-gradient-to-r from-white/20 to-white/10 border-2 border-white/40 shadow-lg'
: 'bg-gradient-to-r from-blue-500/10 to-blue-600/5 border-2 border-blue-400/30 dark:from-blue-400/10 dark:to-blue-500/5 dark:border-blue-400/30'
}`}>
<p className={`text-xs font-bold uppercase tracking-wide text-center ${
isPopular ? 'text-white drop-shadow-sm' : 'text-blue-600 dark:text-blue-300'
}`}>
✓ {t('ui.feature_inheritance_professional')}
</p>
</div>
)}
{tier === SUBSCRIPTION_TIERS.ENTERPRISE && (
<div className={`mb-5 px-4 py-3 rounded-xl transition-all ${
isPopular
? 'bg-gradient-to-r from-white/20 to-white/10 border-2 border-white/40 shadow-lg'
: 'bg-gradient-to-r from-gray-700/20 to-gray-800/10 border-2 border-gray-600/40 dark:from-gray-600/20 dark:to-gray-700/10 dark:border-gray-500/40'
}`}>
<p className={`text-xs font-bold uppercase tracking-wide text-center ${
isPopular ? 'text-white drop-shadow-sm' : 'text-gray-700 dark:text-gray-300'
}`}>
✓ {t('ui.feature_inheritance_enterprise')}
</p>
</div>
)}
{/* Top 3 Benefits + Key Limits */}
<div className="space-y-3 mb-6">
{/* Business Benefits */}