Improve UI and traslations
This commit is contained in:
Urtzi Alfaro
@@ -122,11 +122,11 @@ const DemoPage = () => {
|
||||
icon: Network,
|
||||
title: 'Cadena Enterprise',
|
||||
subtitle: 'Tier Enterprise',
|
||||
description: 'Producción centralizada con red de distribución en Madrid, Barcelona y Valencia',
|
||||
description: 'Producción centralizada con red de distribución en Madrid, Barcelona, Valencia, Sevilla y Bilbao',
|
||||
features: [
|
||||
'Todas las funciones Professional +',
|
||||
'Gestión multi-ubicación ilimitada',
|
||||
'Obrador central (Madrid) + 3 outlets',
|
||||
'Obrador central (Madrid) + 5 sucursales',
|
||||
'Distribución y logística VRP-optimizada',
|
||||
'Forecasting agregado de red',
|
||||
'Dashboard enterprise consolidado',
|
||||
@@ -136,10 +136,10 @@ const DemoPage = () => {
|
||||
'Reportes consolidados nivel corporativo'
|
||||
],
|
||||
characteristics: {
|
||||
locations: '1 obrador + 3 tiendas',
|
||||
locations: '1 obrador + 5 tiendas',
|
||||
employees: '45',
|
||||
productionModel: 'Centralizado (Madrid)',
|
||||
salesChannels: 'Madrid / Barcelona / Valencia'
|
||||
salesChannels: 'Madrid / Barcelona / Valencia / Sevilla / Bilbao'
|
||||
},
|
||||
accountType: 'enterprise',
|
||||
baseTenantId: 'c3d4e5f6-a7b8-49c0-d1e2-f3a4b5c6d7e8',
|
||||
@@ -662,135 +662,135 @@ const DemoPage = () => {
|
||||
>
|
||||
{/* Card Header with Gradient */}
|
||||
<div className={`bg-gradient-to-r ${option.gradient} p-6`}>
|
||||
<div className="flex items-start justify-between w-full text-white mb-4">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl">
|
||||
<option.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-white mb-2">
|
||||
{option.title}
|
||||
</h3>
|
||||
<Badge
|
||||
variant={option.tier === 'enterprise' ? 'secondary' : 'default'}
|
||||
className="bg-white/20 backdrop-blur-sm text-white border-white/30 capitalize font-semibold"
|
||||
>
|
||||
{option.subtitle}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-start justify-between w-full text-white mb-4">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
<div className="p-3 bg-white/20 backdrop-blur-sm rounded-xl">
|
||||
<option.icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-white mb-2">
|
||||
{option.title}
|
||||
</h3>
|
||||
<Badge
|
||||
variant={option.tier === 'enterprise' ? 'secondary' : 'default'}
|
||||
className="bg-white/20 backdrop-blur-sm text-white border-white/30 capitalize font-semibold"
|
||||
>
|
||||
{option.subtitle}
|
||||
</Badge>
|
||||
</div>
|
||||
{selectedTier === option.id && (
|
||||
<div className="animate-scale-in">
|
||||
<CheckCircle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-white/90 text-base leading-relaxed">
|
||||
{option.description}
|
||||
</p>
|
||||
{selectedTier === option.id && (
|
||||
<div className="animate-scale-in">
|
||||
<CheckCircle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-white/90 text-base leading-relaxed">
|
||||
{option.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Card Body */}
|
||||
<div className="p-6">
|
||||
{/* Features List with Icons */}
|
||||
<div className="space-y-3 mb-6">
|
||||
<h4 className="font-semibold text-[var(--text-primary)] text-sm uppercase tracking-wide mb-4">
|
||||
Características Incluidas
|
||||
</h4>
|
||||
{option.features.slice(0, 6).map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-3 group">
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
<div className="p-1 rounded-full bg-[var(--color-success)]/10 group-hover:bg-[var(--color-success)]/20 transition-colors">
|
||||
<CheckCircle className="w-4 h-4 text-[var(--color-success)]" />
|
||||
</div>
|
||||
{/* Card Body */}
|
||||
<div className="p-6">
|
||||
{/* Features List with Icons */}
|
||||
<div className="space-y-3 mb-6">
|
||||
<h4 className="font-semibold text-[var(--text-primary)] text-sm uppercase tracking-wide mb-4">
|
||||
Características Incluidas
|
||||
</h4>
|
||||
{option.features.slice(0, 6).map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-3 group">
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
<div className="p-1 rounded-full bg-[var(--color-success)]/10 group-hover:bg-[var(--color-success)]/20 transition-colors">
|
||||
<CheckCircle className="w-4 h-4 text-[var(--color-success)]" />
|
||||
</div>
|
||||
<span className="text-sm text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors">
|
||||
{feature}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{option.features.length > 6 && (
|
||||
<div className="flex items-start gap-3 pt-2">
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
<div className="p-1 rounded-full bg-[var(--color-info)]/10">
|
||||
<PlusCircle className="w-4 h-4 text-[var(--color-info)]" />
|
||||
</div>
|
||||
<span className="text-sm text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] transition-colors">
|
||||
{feature}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{option.features.length > 6 && (
|
||||
<div className="flex items-start gap-3 pt-2">
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
<div className="p-1 rounded-full bg-[var(--color-info)]/10">
|
||||
<PlusCircle className="w-4 h-4 text-[var(--color-info)]" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-[var(--color-info)]">
|
||||
+ {option.features.length - 6} funciones más
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Characteristics Grid with Enhanced Design */}
|
||||
<div className="grid grid-cols-2 gap-4 p-4 rounded-xl bg-gradient-to-br from-[var(--bg-secondary)] to-[var(--bg-tertiary)] border border-[var(--border-primary)]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Ubicaciones</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.locations}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-[var(--color-info)]">
|
||||
+ {option.features.length - 6} funciones más
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<Users className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Empleados</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.employees}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<Factory className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Producción</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.productionModel}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<ShoppingBag className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Canales</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.salesChannels}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Card Footer */}
|
||||
<div className="p-6 bg-[var(--bg-secondary)] border-t border-[var(--border-primary)]">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleStartDemo(option.accountType, option.tier);
|
||||
}}
|
||||
disabled={creatingTier !== null}
|
||||
size="lg"
|
||||
isFullWidth={true}
|
||||
variant={option.tier === 'enterprise' ? 'gradient' : 'primary'}
|
||||
className="font-semibold group"
|
||||
>
|
||||
{creatingTier === option.tier ? (
|
||||
<span className="flex items-center gap-3">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white/30 border-t-white" />
|
||||
<span>{getLoadingMessage(option.tier, cloneProgress.overall)}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Zap className="w-5 h-5" />
|
||||
<span>Iniciar Demo {option.tier === 'enterprise' ? 'Enterprise' : 'Professional'}</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
{/* Characteristics Grid with Enhanced Design */}
|
||||
<div className="grid grid-cols-2 gap-4 p-4 rounded-xl bg-gradient-to-br from-[var(--bg-secondary)] to-[var(--bg-tertiary)] border border-[var(--border-primary)]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Ubicaciones</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.locations}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<Users className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Empleados</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.employees}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<Factory className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Producción</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.productionModel}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-[var(--text-tertiary)]">
|
||||
<ShoppingBag className="w-4 h-4" />
|
||||
<span className="text-xs font-medium uppercase tracking-wide">Canales</span>
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)]">
|
||||
{option.characteristics.salesChannels}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Footer */}
|
||||
<div className="p-6 bg-[var(--bg-secondary)] border-t border-[var(--border-primary)]">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleStartDemo(option.accountType, option.tier);
|
||||
}}
|
||||
disabled={creatingTier !== null}
|
||||
size="lg"
|
||||
isFullWidth={true}
|
||||
variant={option.tier === 'enterprise' ? 'gradient' : 'primary'}
|
||||
className="font-semibold group"
|
||||
>
|
||||
{creatingTier === option.tier ? (
|
||||
<span className="flex items-center gap-3">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white/30 border-t-white" />
|
||||
<span>{getLoadingMessage(option.tier, cloneProgress.overall)}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<Zap className="w-5 h-5" />
|
||||
<span>Iniciar Demo {option.tier === 'enterprise' ? 'Enterprise' : 'Professional'}</span>
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user