Improve frontend traslations

2025-11-18 22:17:56 +01:00
parent 8c6393ea14
commit bbf6658759
27 changed files with 424 additions and 462 deletions
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -15,7 +15,8 @@ import { CompactLanguageSelector } from '../../ui/LanguageSelector';
 import {
  Menu,
  Bell,
-  X
+  X,
+  TrendingUp
 } from 'lucide-react';

 export interface HeaderProps {
@@ -177,19 +178,19 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
        </div>

        {/* Logo */}
-        <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-shrink-0">
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-shrink-0 h-full">
          {logo || (
            <>
-              <div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
-                PI
+              <div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm">
+                <TrendingUp className="w-5 h-5 text-white" strokeWidth={2.5} />
              </div>
              <h1 className={clsx(
                'font-semibold text-[var(--text-primary)] transition-opacity duration-300',
-                'hidden md:block text-lg leading-tight whitespace-nowrap',
-                'self-center',
+                'hidden md:block text-lg whitespace-nowrap',
+                'leading-[32px]', // Match icon height for perfect alignment
                sidebarCollapsed ? 'lg:block' : 'lg:hidden xl:block'
              )}>
-                {t('common:app.name', 'Panadería IA')}
+                {t('common:app.name', 'BakeWise')}
              </h1>
            </>
          )}
--- a/frontend/src/components/layout/PublicHeader/PublicHeader.tsx
+++ b/frontend/src/components/layout/PublicHeader/PublicHeader.tsx
@@ -194,15 +194,11 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({

    const linkContent = (
      <span className={clsx(
-        "relative text-sm font-medium transition-all duration-200",
-        isMobile ? "text-base py-1" : "",
+        "relative text-sm font-medium transition-all duration-200 px-3 py-1.5 rounded-md",
+        isMobile ? "text-base py-2" : "",
        isActive
-          ? "text-[var(--color-primary)]"
-          : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
-        // Animated underline on hover
-        !isMobile && "after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[2px] after:bg-[var(--color-primary)] after:transition-all after:duration-300 hover:after:w-full",
-        // Active state indicator
-        isActive && !isMobile && "after:w-full"
+          ? "text-[var(--color-primary)] bg-[var(--color-primary)]/10"
+          : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]"
      )}>
        {item.label}
      </span>
@@ -302,11 +298,14 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({
            <Link to="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
              {logo || (
                <>
-                  <div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold text-sm">
-                    PI
+                  <div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center shadow-sm">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+                      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                      <polyline points="17 6 23 6 23 12"></polyline>
+                    </svg>
                  </div>
                  <h1 className="text-xl lg:text-2xl font-bold text-[var(--text-primary)]">
-                    Panadería IA
+                    {t('common:app.name', 'BakeWise')}
                  </h1>
                </>
              )}
@@ -430,11 +429,14 @@ export const PublicHeader = forwardRef<PublicHeaderRef, PublicHeaderProps>(({
            {/* Drawer header */}
            <div className="flex items-center justify-between p-4 border-b border-[var(--border-primary)]">
              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold text-sm">
-                  PI
+                <div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center shadow-sm">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+                    <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+                    <polyline points="17 6 23 6 23 12"></polyline>
+                  </svg>
                </div>
                <h2 className="text-lg font-bold text-[var(--text-primary)]">
-                  Panadería IA
+                  {t('common:app.name', 'BakeWise')}
                </h2>
              </div>
              <Button
--- a/frontend/src/components/subscription/PricingComparisonTable.tsx
+++ b/frontend/src/components/subscription/PricingComparisonTable.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 interface FeatureComparison {
  key: string;
@@ -33,7 +34,8 @@ export const PricingComparisonTable: React.FC<PricingComparisonTableProps> = ({
  categories,
  className = '',
 }) => {
-  const currentLang = localStorage.getItem('language') || 'es';
+  const { i18n } = useTranslation();
+  const currentLang = i18n.language;

  // Group features by category
  const featuresByCategory = features.reduce((acc, feature) => {
--- a/frontend/src/components/subscription/PricingSection.tsx
+++ b/frontend/src/components/subscription/PricingSection.tsx
@@ -20,7 +20,7 @@ export const PricingSection: React.FC = () => {
      <div className="text-center mt-12">
        <Link
          to="/plans/compare"
-          className="text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] font-semibold inline-flex items-center gap-2"
+          className="text-[var(--color-primary)] hover:text-white font-semibold inline-flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 hover:bg-[var(--color-primary)] no-underline"
        >
          {t('landing:pricing.compare_link', 'Ver comparación completa de características')}
          <ArrowRight className="w-4 h-4" />
--- a/frontend/src/components/subscription/SubscriptionPricingCards.tsx
+++ b/frontend/src/components/subscription/SubscriptionPricingCards.tsx
@@ -201,22 +201,22 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
            className={`px-6 py-2 rounded-md text-sm font-semibold transition-all ${
              billingCycle === 'monthly'
                ? 'bg-[var(--color-primary)] text-white shadow-md'
-                : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+                : 'text-[var(--text-secondary)] hover:bg-[var(--bg-primary)] hover:text-[var(--text-primary)]'
            }`}
          >
-            Mensual
+            {t('billing.monthly', 'Mensual')}
          </button>
          <button
            onClick={() => setBillingCycle('yearly')}
            className={`px-6 py-2 rounded-md text-sm font-semibold transition-all flex items-center gap-2 ${
              billingCycle === 'yearly'
                ? 'bg-[var(--color-primary)] text-white shadow-md'
-                : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+                : 'text-[var(--text-secondary)] hover:bg-[var(--bg-primary)] hover:text-[var(--text-primary)]'
            }`}
          >
-            Anual
+            {t('billing.yearly', 'Anual')}
            <span className="text-xs font-bold text-green-600 dark:text-green-400">
-              Ahorra 17%
+              {t('billing.save_percent', 'Ahorra 17%')}
            </span>
          </button>
        </div>
@@ -309,14 +309,14 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                  <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)]'
                  }`}>
-                    {pilotTrialMonths} meses gratis
+                    {t('billing.free_months', { count: pilotTrialMonths })}
                  </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
+                    {t('billing.free_trial_days', { count: plan.trial_days })}
                  </div>
                )}
              </div>
@@ -359,37 +359,37 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                  <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
+                      {t('limits.users', 'Usuarios')}
                    </span>
                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.users || '∞'}
+                      {plan.limits.users || t('limits.unlimited', 'Ilimitado')}
                    </span>
                  </div>
                  <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
+                      {t('limits.locations', 'Ubicaciones')}
                    </span>
                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.locations || '∞'}
+                      {plan.limits.locations || t('limits.unlimited', 'Ilimitado')}
                    </span>
                  </div>
                  <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
+                      {t('limits.products', 'Productos')}
                    </span>
                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.products || '∞'}
+                      {plan.limits.products || t('limits.unlimited', 'Ilimitado')}
                    </span>
                  </div>
                  <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
+                      {t('limits.forecast', '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` : '∞'}
+                      {plan.limits.forecast_horizon_days ? `${plan.limits.forecast_horizon_days}d` : t('limits.unlimited', 'Ilimitado')}
                    </span>
                  </div>
                </div>
@@ -515,7 +515,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
              )}

              <p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
-                3 meses gratis • Tarjeta requerida para validación
+                {t('billing.free_months', { count: 3 })} • {t('billing.card_required')}
              </p>
            </CardWrapper>
          );