Improve the UI and training

frontend/src/components/subscription/PricingComparisonTable.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+
+interface FeatureComparison {
+  key: string;
+  name: string;
+  name_es?: string;
+  category: string;
+  starter: boolean;
+  professional: boolean;
+  enterprise: boolean;
+  tooltip?: string;
+  tooltip_es?: string;
+}
+
+interface CategoryInfo {
+  icon: string;
+  name: string;
+  name_es?: string;
+}
+
+interface PricingComparisonTableProps {
+  features: FeatureComparison[];
+  categories: Record<string, CategoryInfo>;
+  className?: string;
+}
+
+/**
+ * PricingComparisonTable - Full feature comparison across all tiers
+ * Expandable table showing all features side-by-side
+ */
+export const PricingComparisonTable: React.FC<PricingComparisonTableProps> = ({
+  features,
+  categories,
+  className = '',
+}) => {
+  const currentLang = localStorage.getItem('language') || 'es';
+
+  // Group features by category
+  const featuresByCategory = features.reduce((acc, feature) => {
+    if (!acc[feature.category]) {
+      acc[feature.category] = [];
+    }
+    acc[feature.category].push(feature);
+    return acc;
+  }, {} as Record<string, FeatureComparison[]>);
+
+  const renderCheckmark = (hasFeature: boolean) => {
+    if (hasFeature) {
+      return (
+        <svg
+          className="w-5 h-5 text-green-500 mx-auto"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+            clipRule="evenodd"
+          />
+        </svg>
+      );
+    }
+    return (
+      <svg
+        className="w-5 h-5 text-gray-300 mx-auto"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path
+          fillRule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  };
+
+  return (
+    <div className={`overflow-x-auto ${className}`}>
+      <table className="w-full border-collapse bg-white rounded-lg shadow-sm">
+        <thead>
+          <tr className="bg-gray-50 border-b border-gray-200">
+            <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900 sticky left-0 bg-gray-50">
+              {currentLang === 'es' ? 'Funcionalidad' : 'Feature'}
+            </th>
+            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900">
+              Starter
+            </th>
+            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900 bg-orange-50">
+              Professional
+              <span className="ml-2 text-xs bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full">
+                {currentLang === 'es' ? 'Más Popular' : 'Most Popular'}
+              </span>
+            </th>
+            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900">
+              Enterprise
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.entries(featuresByCategory).map(([categoryKey, categoryFeatures]) => {
+            const category = categories[categoryKey];
+            if (!category) return null;
+
+            const categoryName = currentLang === 'es' && category.name_es
+              ? category.name_es
+              : category.name;
+
+            return (
+              <React.Fragment key={categoryKey}>
+                {/* Category Header */}
+                <tr className="bg-gray-100 border-t border-gray-200">
+                  <td
+                    colSpan={4}
+                    className="px-6 py-3 text-sm font-semibold text-gray-700 sticky left-0 bg-gray-100"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="text-lg" role="img" aria-label={categoryName}>
+                        {category.icon}
+                      </span>
+                      <span>{categoryName}</span>
+                    </div>
+                  </td>
+                </tr>
+
+                {/* Category Features */}
+                {categoryFeatures.map((feature, index) => {
+                  const featureName = currentLang === 'es' && feature.name_es
+                    ? feature.name_es
+                    : feature.name;
+                  const tooltip = currentLang === 'es' && feature.tooltip_es
+                    ? feature.tooltip_es
+                    : feature.tooltip;
+
+                  return (
+                    <tr
+                      key={feature.key}
+                      className={`border-b border-gray-100 hover:bg-gray-50 ${
+                        index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+                      }`}
+                      title={tooltip}
+                    >
+                      <td className="px-6 py-3 text-sm text-gray-700 sticky left-0 bg-inherit">
+                        {featureName}
+                        {tooltip && (
+                          <span className="ml-1 text-gray-400 text-xs">ℹ️</span>
+                        )}
+                      </td>
+                      <td className="px-6 py-3 text-center">
+                        {renderCheckmark(feature.starter)}
+                      </td>
+                      <td className="px-6 py-3 text-center bg-orange-50/30">
+                        {renderCheckmark(feature.professional)}
+                      </td>
+                      <td className="px-6 py-3 text-center">
+                        {renderCheckmark(feature.enterprise)}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default PricingComparisonTable;

frontend/src/components/subscription/PricingFeatureCategory.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Feature {
+  key: string;
+  translation_key: string;
+  tooltip_key?: string;
+  category: string;
+}
+
+interface Category {
+  icon: string;
+  translation_key: string;
+}
+
+interface PricingFeatureCategoryProps {
+  categoryKey: string;
+  category: Category;
+  features: Feature[];
+  className?: string;
+}
+
+/**
+ * PricingFeatureCategory - Displays a collapsible category of features
+ * Groups related features with icons for better organization
+ */
+export const PricingFeatureCategory: React.FC<PricingFeatureCategoryProps> = ({
+  categoryKey,
+  category,
+  features,
+  className = '',
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { t } = useTranslation('subscription');
+
+  if (features.length === 0) {
+    return null;
+  }
+
+  const categoryName = t(category.translation_key);
+
+  return (
+    <div className={`border-b border-gray-200 last:border-b-0 ${className}`}>
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between py-3 px-4 hover:bg-gray-50 transition-colors"
+        aria-expanded={isExpanded}
+        aria-controls={`category-${categoryKey}`}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-xl" role="img" aria-label={categoryName}>
+            {category.icon}
+          </span>
+          <span className="font-semibold text-gray-800 text-sm">
+            {categoryName}
+          </span>
+          <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+            {features.length}
+          </span>
+        </div>
+        <svg
+          className={`w-5 h-5 text-gray-400 transition-transform ${
+            isExpanded ? 'rotate-180' : ''
+          }`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {isExpanded && (
+        <div
+          id={`category-${categoryKey}`}
+          className="px-4 pb-3 space-y-2"
+        >
+          {features.map((feature) => {
+            const featureName = t(feature.translation_key);
+            const tooltip = feature.tooltip_key ? t(feature.tooltip_key) : undefined;
+
+            return (
+              <div
+                key={feature.key}
+                className="flex items-start gap-2 text-sm group"
+                title={tooltip}
+              >
+                <svg
+                  className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                <span className="text-gray-700 flex-1">
+                  {featureName}
+                  {tooltip && (
+                    <span className="ml-1 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                      ℹ️
+                    </span>
+                  )}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PricingFeatureCategory;

frontend/src/components/subscription/PricingSection.tsx

@@ -21,7 +21,11 @@ export const PricingSection: React.FC = () => {
         </div>
 
         {/* Pricing Cards */}
-        <SubscriptionPricingCards mode="landing" />
+        <SubscriptionPricingCards
+          mode="landing"
+          showPilotBanner={true}
+          pilotTrialMonths={3}
+        />
 
         {/* Feature Comparison Link */}
         <div className="text-center mt-12">

frontend/src/components/subscription/SubscriptionPricingCards.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { Check, Star, ArrowRight, Package, TrendingUp, Settings, Loader, Users, MapPin, CheckCircle, Zap } from 'lucide-react';
+import { Check, Star, ArrowRight, Package, TrendingUp, Settings, Loader, Users, MapPin, CheckCircle, Zap, ChevronDown, ChevronUp } from 'lucide-react';
 import { Button, Card, Badge } from '../ui';
 import {
   subscriptionService,
@@ -10,6 +10,8 @@ import {
   SUBSCRIPTION_TIERS
 } from '../../api';
 import { getRegisterUrl } from '../../utils/navigation';
+import { ValuePropositionBadge } from './ValuePropositionBadge';
+import { PricingFeatureCategory } from './PricingFeatureCategory';
 
 type BillingCycle = 'monthly' | 'yearly';
 type DisplayMode = 'landing' | 'selection';
@@ -33,11 +35,12 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
   pilotTrialMonths = 3,
   className = ''
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('subscription');
   const [plans, setPlans] = useState<Record<SubscriptionTier, PlanMetadata> | null>(null);
   const [billingCycle, setBillingCycle] = useState<BillingCycle>('monthly');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [expandedPlan, setExpandedPlan] = useState<string | null>(null);
 
   useEffect(() => {
     loadPlans();
@@ -243,7 +246,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 ${isSelected
                   ? 'border-2 border-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/10 via-[var(--color-primary)]/5 to-transparent shadow-2xl ring-4 ring-[var(--color-primary)]/30 scale-[1.02]'
                   : isPopular
-                    ? 'bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary)] to-[var(--color-primary-dark)] shadow-2xl transform scale-105 z-10'
+                    ? 'bg-gradient-to-br from-blue-700 via-blue-800 to-blue-900 shadow-2xl transform scale-105 z-10 ring-4 ring-[var(--color-primary)]/20'
                     : 'bg-[var(--bg-secondary)] border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 hover:shadow-xl hover:-translate-y-1'
                 }
               `}
@@ -276,18 +279,18 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 <h3 className={`text-2xl font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
                   {plan.name}
                 </h3>
-                <p className={`mt-3 leading-relaxed ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
-                  {plan.tagline}
+                <p className={`mt-3 text-sm leading-relaxed ${isPopular ? 'text-white' : 'text-[var(--text-secondary)]'}`}>
+                  {plan.tagline_key ? t(plan.tagline_key) : plan.tagline || ''}
                 </p>
               </div>
 
               {/* Pricing */}
-              <div className="mb-8">
+              <div className="mb-6">
                 <div className="flex items-baseline">
                   <span className={`text-5xl font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
                     {subscriptionService.formatPrice(price)}
                   </span>
-                  <span className={`ml-2 text-lg ${isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
+                  <span className={`ml-2 text-lg ${isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}`}>
                     /{billingCycle === 'monthly' ? 'mes' : 'año'}
                   </span>
                 </div>
@@ -302,50 +305,99 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 )}
 
                 {/* Trial Badge */}
-                {!savings && (
+                {!savings && showPilotBanner && (
                   <div className={`mt-2 px-3 py-1 text-sm font-medium rounded-full inline-block ${
                     isPopular ? 'bg-white/20 text-white' : 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
                   }`}>
-                    3 meses gratis
+                    {pilotTrialMonths} meses gratis
+                  </div>
+                )}
+                {!savings && !showPilotBanner && (
+                  <div className={`mt-2 px-3 py-1 text-sm font-medium rounded-full inline-block ${
+                    isPopular ? 'bg-white/20 text-white' : 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
+                  }`}>
+                    {plan.trial_days} días gratis
                   </div>
                 )}
               </div>
 
+              {/* ROI Badge */}
+              {plan.roi_badge && !isPopular && (
+                <div className="mb-4">
+                  <ValuePropositionBadge roiBadge={plan.roi_badge} />
+                </div>
+              )}
+              {plan.roi_badge && isPopular && (
+                <div className="mb-4 bg-white/20 border border-white/30 rounded-lg px-4 py-3">
+                  <p className="text-sm font-semibold text-white leading-tight flex items-center gap-2">
+                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    {plan.roi_badge.translation_key ? t(plan.roi_badge.translation_key) : (plan.roi_badge.text_es || plan.roi_badge.text || '')}
+                  </p>
+                </div>
+              )}
+
+              {/* Good For / Recommended For */}
+              {plan.recommended_for_key && (
+                <div className={`mb-6 text-center px-4 py-2 rounded-lg ${
+                  isPopular
+                    ? 'bg-white/10 border border-white/20'
+                    : 'bg-[var(--bg-secondary)] border border-[var(--border-primary)]'
+                }`}>
+                  <p className={`text-xs font-medium ${isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}`}>
+                    {t(plan.recommended_for_key)}
+                  </p>
+                </div>
+              )}
+
               {/* Key Limits */}
-              <div className={`mb-6 p-4 rounded-lg ${
-                isPopular ? 'bg-white/10' : isSelected ? 'bg-[var(--color-primary)]/5' : 'bg-[var(--bg-primary)]'
+              <div className={`mb-6 p-3 rounded-lg ${
+                isPopular ? 'bg-white/15 border border-white/20' : isSelected ? 'bg-[var(--color-primary)]/5' : 'bg-[var(--bg-primary)]'
               }`}>
-                <div className="grid grid-cols-2 gap-3 text-sm">
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Usuarios:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.users || 'Ilimitado'}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <Users className="w-3 h-3 inline mr-1" />
+                      Usuarios
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.users || '∞'}
                     </span>
                   </div>
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Ubicaciones:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.locations || 'Ilimitado'}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <MapPin className="w-3 h-3 inline mr-1" />
+                      Ubicaciones
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.locations || '∞'}
                     </span>
                   </div>
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Productos:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.products || 'Ilimitado'}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <Package className="w-3 h-3 inline mr-1" />
+                      Productos
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.products || '∞'}
                     </span>
                   </div>
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Pronósticos/día:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.forecasts_per_day || 'Ilimitado'}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <TrendingUp className="w-3 h-3 inline mr-1" />
+                      Pronóstico
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.forecast_horizon_days ? `${plan.limits.forecast_horizon_days}d` : '∞'}
                     </span>
                   </div>
                 </div>
               </div>
 
-              {/* Features List */}
-              <div className={`space-y-3 mb-8 max-h-80 overflow-y-auto pr-2 scrollbar-thin`}>
-                {plan.features.slice(0, 8).map((feature) => (
+              {/* Hero Features List */}
+              <div className={`space-y-3 mb-6`}>
+                {(plan.hero_features || plan.features.slice(0, 4)).map((feature) => (
                   <div key={feature} className="flex items-start">
                     <div className="flex-shrink-0 mt-1">
                       <div className={`w-5 h-5 rounded-full flex items-center justify-center ${
@@ -361,18 +413,63 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                     </span>
                   </div>
                 ))}
-                {plan.features.length > 8 && (
-                  <p className={`text-sm italic ${isPopular ? 'text-white/70' : 'text-[var(--text-secondary)]'}`}>
-                    Y {plan.features.length - 8} características más...
-                  </p>
-                )}
               </div>
 
+              {/* Expandable Features - Show All Button */}
+              {plan.features.length > 4 && (
+                <div className="mb-8">
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setExpandedPlan(expandedPlan === tier ? null : tier);
+                    }}
+                    className={`w-full py-2 px-4 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+                      isPopular
+                        ? 'bg-white/10 hover:bg-white/20 text-white border border-white/20'
+                        : 'bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] text-[var(--text-secondary)] border border-[var(--border-primary)]'
+                    }`}
+                  >
+                    {expandedPlan === tier ? (
+                      <>
+                        <ChevronUp className="w-4 h-4" />
+                        Mostrar menos características
+                      </>
+                    ) : (
+                      <>
+                        <ChevronDown className="w-4 h-4" />
+                        Ver todas las {plan.features.length} características
+                      </>
+                    )}
+                  </button>
+
+                  {/* Expanded Features List */}
+                  {expandedPlan === tier && (
+                    <div className={`mt-4 p-4 rounded-lg max-h-96 overflow-y-auto ${
+                      isPopular
+                        ? 'bg-white/10 border border-white/20'
+                        : 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
+                    }`}>
+                      <div className="space-y-2">
+                        {plan.features.map((feature) => (
+                          <div key={feature} className="flex items-start py-1">
+                            <Check className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isPopular ? 'text-white' : 'text-[var(--color-success)]'}`} />
+                            <span className={`ml-2 text-xs ${isPopular ? 'text-white/95' : 'text-[var(--text-primary)]'}`}>
+                              {formatFeatureName(feature)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
               {/* Support */}
               <div className={`mb-6 text-sm text-center border-t pt-4 ${
-                isPopular ? 'text-white/80 border-white/20' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'
+                isPopular ? 'text-white/95 border-white/30' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'
               }`}>
-                {plan.support}
+                {plan.support_key ? t(plan.support_key) : plan.support || ''}
               </div>
 
               {/* CTA Button */}
@@ -418,7 +515,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 </Button>
               )}
 
-              <p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/70' : 'text-[var(--text-secondary)]'}`}>
+              <p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
                 3 meses gratis • Tarjeta requerida para validación
               </p>
             </CardWrapper>

frontend/src/components/subscription/ValuePropositionBadge.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ROIBadge {
+  savings_min?: number;
+  savings_max?: number;
+  currency?: string;
+  period?: string;
+  translation_key: string;
+  custom?: boolean;
+}
+
+interface ValuePropositionBadgeProps {
+  roiBadge: ROIBadge;
+  className?: string;
+}
+
+/**
+ * ValuePropositionBadge - Displays ROI and business value metrics for pricing tiers
+ * Shows savings potential to help bakery owners understand the value
+ */
+export const ValuePropositionBadge: React.FC<ValuePropositionBadgeProps> = ({
+  roiBadge,
+  className = '',
+}) => {
+  const { t } = useTranslation('subscription');
+  const displayText = t(roiBadge.translation_key);
+
+  return (
+    <div
+      className={`
+        bg-gradient-to-r from-green-50 to-emerald-50
+        border border-green-200
+        rounded-lg
+        px-4 py-3
+        flex items-center gap-2
+        ${className}
+      `}
+      role="status"
+      aria-label="ROI information"
+    >
+      <div className="flex-shrink-0">
+        <svg
+          className="w-5 h-5 text-green-600"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div className="flex-1">
+        <p className="text-sm font-semibold text-green-800 leading-tight">
+          {displayText}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ValuePropositionBadge;