Improve subcription support
This commit is contained in:
Urtzi Alfaro
@@ -459,116 +459,312 @@ const LandingPage: React.FC = () => {
|
||||
|
||||
<div className="mt-16 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Starter Plan */}
|
||||
<div className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)]">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Starter</h3>
|
||||
<p className="mt-2 text-sm text-[var(--text-secondary)]">Perfecto para panaderías pequeñas</p>
|
||||
<div className="mt-6">
|
||||
<span className="text-3xl font-bold text-[var(--text-primary)]">€49</span>
|
||||
<span className="text-[var(--text-secondary)]">/mes</span>
|
||||
</div>
|
||||
<div className="mt-8 space-y-4">
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Hasta 50 productos</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Predicción básica de demanda</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Control de inventario</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Reportes básicos</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Soporte por email</span>
|
||||
<div className="group relative bg-[var(--bg-secondary)] rounded-3xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
|
||||
<div className="absolute top-6 right-6">
|
||||
<div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
|
||||
<Package className="w-6 h-6 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-8" variant="outline">
|
||||
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)]">Starter</h3>
|
||||
<p className="mt-3 text-[var(--text-secondary)] leading-relaxed">Ideal para panaderías pequeñas o nuevas</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className="flex items-baseline">
|
||||
<span className="text-5xl font-bold text-[var(--text-primary)]">€49</span>
|
||||
<span className="ml-2 text-lg text-[var(--text-secondary)]">/mes</span>
|
||||
</div>
|
||||
<div className="mt-2 px-3 py-1 bg-[var(--color-success)]/10 text-[var(--color-success)] text-sm font-medium rounded-full inline-block">
|
||||
14 días gratis
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Hasta 50 productos</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Control de inventario básico</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Predicción básica de demanda</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Reportes básicos de producción</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Analytics básicos</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">1 ubicación</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Soporte por email</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full py-4 text-base font-semibold border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white transition-all duration-200 group-hover:shadow-lg" variant="outline">
|
||||
Comenzar Gratis
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Professional Plan - Highlighted */}
|
||||
<div className="bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-2xl p-8 relative shadow-2xl">
|
||||
<div className="group relative bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-3xl p-8 shadow-2xl transform scale-105 z-10">
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||||
<span className="bg-[var(--color-secondary)] text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Más Popular
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white">Professional</h3>
|
||||
<p className="mt-2 text-sm text-white/80">Para panaderías en crecimiento</p>
|
||||
<div className="mt-6">
|
||||
<span className="text-3xl font-bold text-white">€149</span>
|
||||
<span className="text-white/80">/mes</span>
|
||||
</div>
|
||||
<div className="mt-8 space-y-4">
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-white mr-3" />
|
||||
<span className="text-sm text-white">Productos ilimitados</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-white mr-3" />
|
||||
<span className="text-sm text-white">IA avanzada con 92% precisión</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-white mr-3" />
|
||||
<span className="text-sm text-white">Gestión completa de producción</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-white mr-3" />
|
||||
<span className="text-sm text-white">POS integrado</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-white mr-3" />
|
||||
<span className="text-sm text-white">Analytics avanzado</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-white mr-3" />
|
||||
<span className="text-sm text-white">Soporte prioritario 24/7</span>
|
||||
<div className="bg-gradient-to-r from-[var(--color-secondary)] to-[var(--color-secondary-dark)] text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg">
|
||||
⭐ Más Popular
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-8 bg-white text-[var(--color-primary)] hover:bg-[var(--bg-tertiary)]">
|
||||
|
||||
<div className="absolute top-6 right-6">
|
||||
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center">
|
||||
<TrendingUp className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 pt-4">
|
||||
<h3 className="text-2xl font-bold text-white">Professional</h3>
|
||||
<p className="mt-3 text-white/90 leading-relaxed">Ideal para panaderías y cadenas en crecimiento</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className="flex items-baseline">
|
||||
<span className="text-5xl font-bold text-white">€129</span>
|
||||
<span className="ml-2 text-lg text-white/80">/mes</span>
|
||||
</div>
|
||||
<div className="mt-2 px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full inline-block">
|
||||
14 días gratis
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">Productos ilimitados</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">Control de inventario avanzado</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">IA Avanzada con 92% de precisión</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">Gestión completa de producción</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">POS integrado</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">Gestión de Logística Básica</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">Analytics avanzados</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">1-2 ubicaciones</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-white font-medium">Soporte prioritario 24/7</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full py-4 text-base font-semibold bg-white text-[var(--color-primary)] hover:bg-gray-100 transition-all duration-200 shadow-lg hover:shadow-xl">
|
||||
Comenzar Prueba Gratuita
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<div className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)]">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Enterprise</h3>
|
||||
<p className="mt-2 text-sm text-[var(--text-secondary)]">Para cadenas y grandes operaciones</p>
|
||||
<div className="mt-6">
|
||||
<span className="text-3xl font-bold text-[var(--text-primary)]">€399</span>
|
||||
<span className="text-[var(--text-secondary)]">/mes</span>
|
||||
</div>
|
||||
<div className="mt-8 space-y-4">
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Multi-locación ilimitada</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">IA personalizada por ubicación</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">API personalizada</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Integración ERPs</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3" />
|
||||
<span className="text-sm text-[var(--text-secondary)]">Manager dedicado</span>
|
||||
<div className="group relative bg-[var(--bg-secondary)] rounded-3xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-accent)]/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
|
||||
<div className="absolute top-6 right-6">
|
||||
<div className="w-12 h-12 bg-[var(--color-accent)]/10 rounded-full flex items-center justify-center">
|
||||
<Settings className="w-6 h-6 text-[var(--color-accent)]" />
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-8" variant="outline">
|
||||
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)]">Enterprise</h3>
|
||||
<p className="mt-3 text-[var(--text-secondary)] leading-relaxed">Ideal para cadenas con obradores centrales</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className="flex items-baseline">
|
||||
<span className="text-5xl font-bold text-[var(--text-primary)]">€399</span>
|
||||
<span className="ml-2 text-lg text-[var(--text-secondary)]">/mes</span>
|
||||
</div>
|
||||
<div className="mt-2 px-3 py-1 bg-[var(--color-accent)]/10 text-[var(--color-accent)] text-sm font-medium rounded-full inline-block">
|
||||
Demo personalizada
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-8 max-h-80 overflow-y-auto pr-2 scrollbar-thin">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Productos ilimitados</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Control de inventario multi-locación</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">IA personalizada por ubicación</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Optimización de capacidad</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Integración con ERPs</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Gestión de Logística Avanzada</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Analytics predictivos</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Ubicaciones y obradores ilimitados</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">API Personalizada</span>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Manager de Cuenta Dedicado</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full py-4 text-base font-semibold border-2 border-[var(--color-accent)] text-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-white transition-all duration-200 group-hover:shadow-lg" variant="outline">
|
||||
Contactar Ventas
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user