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

Improve UI and traslations

Browse Source
This commit is contained in:
Urtzi Alfaro
2026-01-01 13:36:45 +01:00
parent 007cbda598
commit cba55c2805
47 changed files with 1405 additions and 999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
frontend/src/pages/public/ContactPage.tsx
View File

@@ -24,7 +24,7 @@ interface ContactMethod {
}
const ContactPage: React.FC = () => {
const { t } = useTranslation();
const { t } = useTranslation(['contact', 'common']);
const [formState, setFormState] = useState({
name: '',
email: '',
@@ -37,35 +37,27 @@ const ContactPage: React.FC = () => {
const [submitStatus, setSubmitStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const contactMethods: ContactMethod[] = [
{
id: 'chat',
title: 'Chat en Vivo',
description: 'Respuesta inmediata',
detail: 'Lunes a Viernes: 9:00 - 21:00 CET',
icon: MessageSquare,
link: '#chat',
},
{
id: 'email',
title: 'Email',
description: 'soporte@panaderia-ia.com',
detail: 'Respuesta en menos de 4 horas',
title: t('methods.email.title'),
description: t('methods.email.description'),
detail: t('methods.email.detail'),
icon: Mail,
link: 'mailto:soporte@panaderia-ia.com',
link: `mailto:${t('methods.email.description')}`,
},
{
id: 'phone',
title: 'Teléfono',
description: '+34 XXX XXX XXX',
detail: 'Lunes a Viernes: 10:00 - 19:00 CET',
title: t('methods.phone.title'),
description: t('methods.phone.description'),
detail: t('methods.phone.detail'),
icon: Phone,
link: 'tel:+34XXXXXXXXX',
link: `tel:${t('methods.phone.description').replace(/\s/g, '')}`,
},
{
id: 'office',
title: 'Oficina',
description: 'Barcelona, España',
detail: 'Con cita previa',
title: t('methods.office.title'),
description: t('methods.office.description'),
detail: t('methods.office.detail'),
icon: MapPin,
},
];
@@ -118,15 +110,15 @@ const ContactPage: React.FC = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-4xl mx-auto">
<div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
<MessageSquare className="w-4 h-4" />
<span>Contacto y Soporte</span>
<Mail className="w-4 h-4" />
<span>{t('hero.badge')}</span>
</div>
<h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
Estamos Aquí Para
<span className="block text-[var(--color-primary)]">Ayudarte</span>
{t('hero.title')}
<span className="block text-[var(--color-primary)]">{t('hero.title_accent')}</span>
</h1>
<p className="text-xl text-[var(--text-secondary)] leading-relaxed mb-8">
¿Tienes preguntas? ¿Necesitas ayuda? Nuestro equipo está listo para asistirte
{t('hero.subtitle')}
</p>
</div>
</div>
@@ -137,14 +129,14 @@ const ContactPage: React.FC = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
Múltiples Formas de Contactar
{t('methods.title')}
</h2>
<p className="text-xl text-[var(--text-secondary)]">
Elige el método que más te convenga
{t('methods.subtitle')}
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
{contactMethods.map((method) => {
const ContactIcon = method.icon;
const content = (
@@ -194,10 +186,10 @@ const ContactPage: React.FC = () => {
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
Envíanos un Mensaje
{t('form.title')}
</h2>
<p className="text-xl text-[var(--text-secondary)]">
Completa el formulario y te responderemos lo antes posible
{t('form.subtitle')}
</p>
</div>
@@ -207,7 +199,7 @@ const ContactPage: React.FC = () => {
<div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl flex items-center gap-3">
<CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0" />
<p className="text-sm text-green-800 dark:text-green-200">
<strong>¡Mensaje enviado!</strong> Te responderemos pronto.
<strong>{t('form.success.title')}</strong> {t('form.success.message')}
</p>
</div>
)}
@@ -216,7 +208,7 @@ const ContactPage: React.FC = () => {
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl flex items-center gap-3">
<AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
<p className="text-sm text-red-800 dark:text-red-200">
<strong>Error al enviar.</strong> Por favor, inténtalo de nuevo.
<strong>{t('form.error.title')}</strong> {t('form.error.message')}
</p>
</div>
)}
@@ -225,7 +217,7 @@ const ContactPage: React.FC = () => {
{/* Name */}
<div>
<label htmlFor="name" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
Nombre Completo <span className="text-red-500">*</span>
{t('form.fields.name')} <span className="text-red-500">{t('form.required_indicator')}</span>
</label>
<input
type="text"
@@ -235,14 +227,14 @@ const ContactPage: React.FC = () => {
onChange={handleChange}
required
className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
placeholder="Tu nombre"
placeholder={t('form.fields.name_placeholder')}
/>
</div>
{/* Email */}
<div>
<label htmlFor="email" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
Email <span className="text-red-500">*</span>
{t('form.fields.email')} <span className="text-red-500">{t('form.required_indicator')}</span>
</label>
<input
type="email"
@@ -252,14 +244,14 @@ const ContactPage: React.FC = () => {
onChange={handleChange}
required
className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
placeholder="tu@email.com"
placeholder={t('form.fields.email_placeholder')}
/>
</div>
{/* Phone */}
<div>
<label htmlFor="phone" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
Teléfono (opcional)
{t('form.fields.phone')}
</label>
<input
type="tel"
@@ -268,14 +260,14 @@ const ContactPage: React.FC = () => {
value={formState.phone}
onChange={handleChange}
className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
placeholder="+34 XXX XXX XXX"
placeholder={t('form.fields.phone_placeholder')}
/>
</div>
{/* Bakery Name */}
<div>
<label htmlFor="bakeryName" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
Nombre de tu Panadería (opcional)
{t('form.fields.bakery_name')}
</label>
<input
type="text"
@@ -284,14 +276,14 @@ const ContactPage: React.FC = () => {
value={formState.bakeryName}
onChange={handleChange}
className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
placeholder="Panadería Ejemplo"
placeholder={t('form.fields.bakery_name_placeholder')}
/>
</div>
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
Tipo de Consulta <span className="text-red-500">*</span>
{t('form.fields.type')} <span className="text-red-500">{t('form.required_indicator')}</span>
</label>
<select
id="type"
@@ -301,17 +293,17 @@ const ContactPage: React.FC = () => {
required
className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
>
<option value="general">Consulta General</option>
<option value="technical">Soporte Técnico</option>
<option value="sales">Información Comercial</option>
<option value="feedback">Feedback/Sugerencias</option>
<option value="general">{t('form.fields.type_options.general')}</option>
<option value="technical">{t('form.fields.type_options.technical')}</option>
<option value="sales">{t('form.fields.type_options.sales')}</option>
<option value="feedback">{t('form.fields.type_options.feedback')}</option>
</select>
</div>
{/* Subject */}
<div>
<label htmlFor="subject" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
Asunto <span className="text-red-500">*</span>
{t('form.fields.subject')} <span className="text-red-500">{t('form.required_indicator')}</span>
</label>
<input
type="text"
@@ -321,7 +313,7 @@ const ContactPage: React.FC = () => {
onChange={handleChange}
required
className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors"
placeholder="¿En qué podemos ayudarte?"
placeholder={t('form.fields.subject_placeholder')}
/>
</div>
</div>
@@ -329,7 +321,7 @@ const ContactPage: React.FC = () => {
{/* Message */}
<div className="mt-6">
<label htmlFor="message" className="block text-sm font-medium text-[var(--text-primary)] mb-2">
Mensaje <span className="text-red-500">*</span>
{t('form.fields.message')} <span className="text-red-500">{t('form.required_indicator')}</span>
</label>
<textarea
id="message"
@@ -339,7 +331,7 @@ const ContactPage: React.FC = () => {
required
rows={6}
className="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-xl text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-primary)] transition-colors resize-none"
placeholder="Cuéntanos más sobre tu consulta o problema..."
placeholder={t('form.fields.message_placeholder')}
/>
</div>
@@ -353,22 +345,25 @@ const ContactPage: React.FC = () => {
{submitStatus === 'loading' ? (
<>
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
<span>Enviando...</span>
<span>{t('form.sending')}</span>
</>
) : (
<>
<Send className="w-5 h-5" />
<span>Enviar Mensaje</span>
<span>{t('form.submit')}</span>
</>
)}
</button>
</div>
<p className="text-xs text-[var(--text-tertiary)] text-center mt-4">
Al enviar este formulario, aceptas nuestra{' '}
<a href="/privacy" className="text-[var(--color-primary)] hover:underline">
Política de Privacidad
</a>
{t('form.privacy', {
privacyLink: (chunks: React.ReactNode) => (
<a href="/privacy" className="text-[var(--color-primary)] hover:underline">
{chunks}
</a>
)
})}
</p>
</form>
</div>
@@ -384,21 +379,16 @@ const ContactPage: React.FC = () => {
<Clock className="w-6 h-6 text-[var(--color-primary)] flex-shrink-0 mt-1" />
<div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
Horarios de Atención
{t('footer.hours.title')}
</h3>
<div className="space-y-3 text-sm text-[var(--text-secondary)]">
<div>
<strong className="text-[var(--text-primary)]">Chat en Vivo:</strong>
<p>Lunes a Viernes: 9:00 - 21:00 CET</p>
<p>Sábados: 10:00 - 18:00 CET</p>
<strong className="text-[var(--text-primary)]">{t('footer.hours.email.label')}</strong>
<p>{t('footer.hours.email.detail')}</p>
</div>
<div>
<strong className="text-[var(--text-primary)]">Email:</strong>
<p>24/7 (respuesta en menos de 4 horas en horario laboral)</p>
</div>
<div>
<strong className="text-[var(--text-primary)]">Teléfono:</strong>
<p>Lunes a Viernes: 10:00 - 19:00 CET (solo clientes activos)</p>
<strong className="text-[var(--text-primary)]">{t('footer.hours.phone.label')}</strong>
<p>{t('footer.hours.phone.detail')}</p>
</div>
</div>
</div>
@@ -411,24 +401,24 @@ const ContactPage: React.FC = () => {
<HelpCircle className="w-6 h-6 text-[var(--color-primary)] flex-shrink-0 mt-1" />
<div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
¿Buscas Respuestas Rápidas?
{t('footer.faq.title')}
</h3>
<p className="text-sm text-[var(--text-secondary)] mb-4">
Muchas preguntas ya tienen respuesta en nuestro Centro de Ayuda y Documentación
{t('footer.faq.description')}
</p>
<div className="space-y-2">
<a
href="/help"
className="inline-flex items-center gap-2 text-[var(--color-primary)] hover:underline font-medium text-sm"
>
Ver Centro de Ayuda →
{t('footer.faq.help_center')}
</a>
<br />
<a
href="/help/docs"
className="inline-flex items-center gap-2 text-[var(--color-primary)] hover:underline font-medium text-sm"
>
Leer Documentación →
{t('footer.faq.docs')}
</a>
</div>
</div>

242
frontend/src/pages/public/DemoPage.tsx
View File

@@ -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>

569
frontend/src/pages/public/FeaturesPage.tsx
View File

@@ -223,71 +223,71 @@ const FeaturesPage: React.FC = () => {
animated
/>
{/* Morning Result */}
<div className="relative overflow-hidden bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white shadow-xl mt-8">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
<div className="relative text-center max-w-3xl mx-auto">
<div className="relative inline-block mb-6">
<Clock className="w-16 h-16 mx-auto" />
<div className="absolute inset-0 rounded-full bg-white/20 blur-xl animate-pulse"></div>
</div>
<h3 className="text-2xl lg:text-3xl font-bold mb-6">
{t('automatic.result.title', 'A las 6:00 AM recibes un email:')}
</h3>
<div className="grid md:grid-cols-2 gap-4 text-left">
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item1', 'Predicción del día hecha')}</span>
{/* Morning Result */}
<div className="relative overflow-hidden bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white shadow-xl mt-8">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
<div className="relative text-center max-w-3xl mx-auto">
<div className="relative inline-block mb-6">
<Clock className="w-16 h-16 mx-auto" />
<div className="absolute inset-0 rounded-full bg-white/20 blur-xl animate-pulse"></div>
</div>
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item2', 'Plan de producción listo')}</span>
</div>
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item3', '3 pedidos creados (aprobar con 1 clic)')}</span>
</div>
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item4', 'Alerta: "Leche caduca en 2 días, úsala primero"')}</span>
<h3 className="text-2xl lg:text-3xl font-bold mb-6">
{t('automatic.result.title', 'A las 6:00 AM recibes un email:')}
</h3>
<div className="grid md:grid-cols-2 gap-4 text-left">
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item1', 'Predicción del día hecha')}</span>
</div>
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item2', 'Plan de producción listo')}</span>
</div>
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item3', '3 pedidos creados (aprobar con 1 clic)')}</span>
</div>
<div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
<CheckCircle2 className="w-6 h-6 flex-shrink-0" />
<span className="text-lg">{t('automatic.result.item4', 'Alerta: "Leche caduca en 2 días, úsala primero"')}</span>
</div>
</div>
</div>
</div>
</div>
{/* What it eliminates */}
<div className="bg-gradient-to-br from-[var(--bg-secondary)] to-[var(--bg-tertiary)] rounded-2xl p-8 border border-[var(--border-primary)] shadow-lg mt-8">
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-6 text-center">
{t('automatic.eliminates.title', 'Lo que ELIMINA de tu rutina:')}
</h3>
<div className="grid md:grid-cols-2 gap-4">
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item1', 'Adivinar cuánto hacer')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item2', 'Contar inventario manualmente')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item3', 'Calcular cuándo pedir a proveedores')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item4', 'Recordar fechas de caducidad')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item5', 'Preocuparte por quedarte sin stock')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item6', 'Desperdiciar ingredientes caducados')}</span>
{/* What it eliminates */}
<div className="bg-gradient-to-br from-[var(--bg-secondary)] to-[var(--bg-tertiary)] rounded-2xl p-8 border border-[var(--border-primary)] shadow-lg mt-8">
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-6 text-center">
{t('automatic.eliminates.title', 'Lo que ELIMINA de tu rutina:')}
</h3>
<div className="grid md:grid-cols-2 gap-4">
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item1', 'Adivinar cuánto hacer')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item2', 'Contar inventario manualmente')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item3', 'Calcular cuándo pedir a proveedores')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item4', 'Recordar fechas de caducidad')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item5', 'Preocuparte por quedarte sin stock')}</span>
</div>
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
<span className="text-red-500 text-xl flex-shrink-0">❌</span>
<span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item6', 'Desperdiciar ingredientes caducados')}</span>
</div>
</div>
</div>
</div>
</div>
</ScrollReveal>
</div>
</section>
@@ -317,156 +317,156 @@ const FeaturesPage: React.FC = () => {
{/* Schools */}
<ScrollReveal variant="fadeUp" delay={0.1}>
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
<div className="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-xl flex items-center justify-center mb-4">
<School className="w-6 h-6 text-blue-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.schools.title', 'Colegios Cerca')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-blue-600 mt-0.5">•</span>
<span>{t('local.schools.item1', '"El CEIP San José está a 200m"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-blue-600 mt-0.5">•</span>
<span>{t('local.schools.item2', '"En agosto venden 40% menos (vacaciones escolares)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-blue-600 mt-0.5">•</span>
<span>{t('local.schools.item3', '"Los lunes a las 8:30 hay pico (padres tras dejar niños)"')}</span>
</li>
</ul>
<div className="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-xl flex items-center justify-center mb-4">
<School className="w-6 h-6 text-blue-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.schools.title', 'Colegios Cerca')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-blue-600 mt-0.5">•</span>
<span>{t('local.schools.item1', '"El CEIP San José está a 200m"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-blue-600 mt-0.5">•</span>
<span>{t('local.schools.item2', '"En agosto venden 40% menos (vacaciones escolares)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-blue-600 mt-0.5">•</span>
<span>{t('local.schools.item3', '"Los lunes a las 8:30 hay pico (padres tras dejar niños)"')}</span>
</li>
</ul>
</div>
</ScrollReveal>
{/* Offices */}
<ScrollReveal variant="fadeUp" delay={0.15}>
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-xl flex items-center justify-center mb-4">
<Building2 className="w-6 h-6 text-purple-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.offices.title', 'Oficinas y Empresas')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-purple-600 mt-0.5">•</span>
<span>{t('local.offices.item1', '"Edificio de oficinas a 150m (250 trabajadores)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-purple-600 mt-0.5">•</span>
<span>{t('local.offices.item2', '"Viernes venden menos al mediodía (teletrabajo)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-purple-600 mt-0.5">•</span>
<span>{t('local.offices.item3', '"Hora punta: 13:00-14:00 (bocadillos)"')}</span>
</li>
</ul>
<div className="w-12 h-12 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-xl flex items-center justify-center mb-4">
<Building2 className="w-6 h-6 text-purple-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.offices.title', 'Oficinas y Empresas')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-purple-600 mt-0.5">•</span>
<span>{t('local.offices.item1', '"Edificio de oficinas a 150m (250 trabajadores)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-purple-600 mt-0.5">•</span>
<span>{t('local.offices.item2', '"Viernes venden menos al mediodía (teletrabajo)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-purple-600 mt-0.5">•</span>
<span>{t('local.offices.item3', '"Hora punta: 13:00-14:00 (bocadillos)"')}</span>
</li>
</ul>
</div>
</ScrollReveal>
{/* Gyms */}
<ScrollReveal variant="fadeUp" delay={0.2}>
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
<div className="w-12 h-12 bg-gradient-to-br from-green-500/10 to-green-600/10 rounded-xl flex items-center justify-center mb-4">
<Dumbbell className="w-6 h-6 text-green-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.gyms.title', 'Centros Deportivos')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-green-600 mt-0.5">•</span>
<span>{t('local.gyms.item1', '"Gimnasio a 300m"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-green-600 mt-0.5">•</span>
<span>{t('local.gyms.item2', '"Mayor venta de productos saludables (pan integral, barritas)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-green-600 mt-0.5">•</span>
<span>{t('local.gyms.item3', '"Pico a las 7:00 AM y 19:00 PM"')}</span>
</li>
</ul>
<div className="w-12 h-12 bg-gradient-to-br from-green-500/10 to-green-600/10 rounded-xl flex items-center justify-center mb-4">
<Dumbbell className="w-6 h-6 text-green-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.gyms.title', 'Centros Deportivos')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-green-600 mt-0.5">•</span>
<span>{t('local.gyms.item1', '"Gimnasio a 300m"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-green-600 mt-0.5">•</span>
<span>{t('local.gyms.item2', '"Mayor venta de productos saludables (pan integral, barritas)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-green-600 mt-0.5">•</span>
<span>{t('local.gyms.item3', '"Pico a las 7:00 AM y 19:00 PM"')}</span>
</li>
</ul>
</div>
</ScrollReveal>
{/* Competition */}
<ScrollReveal variant="fadeUp" delay={0.25}>
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
<div className="w-12 h-12 bg-gradient-to-br from-amber-500/10 to-amber-600/10 rounded-xl flex items-center justify-center mb-4">
<ShoppingBag className="w-6 h-6 text-amber-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.competition.title', 'Tu Competencia')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-amber-600 mt-0.5">•</span>
<span>{t('local.competition.item1', '"Otra panadería abrió hace 2 meses a 500m"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-amber-600 mt-0.5">•</span>
<span>{t('local.competition.item2', '"Impacto: -15% en ventas de pan básico"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-amber-600 mt-0.5">•</span>
<span>{t('local.competition.item3', '"Oportunidad: Diferénciate con especialidades"')}</span>
</li>
</ul>
<div className="w-12 h-12 bg-gradient-to-br from-amber-500/10 to-amber-600/10 rounded-xl flex items-center justify-center mb-4">
<ShoppingBag className="w-6 h-6 text-amber-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.competition.title', 'Tu Competencia')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-amber-600 mt-0.5">•</span>
<span>{t('local.competition.item1', '"Otra panadería abrió hace 2 meses a 500m"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-amber-600 mt-0.5">•</span>
<span>{t('local.competition.item2', '"Impacto: -15% en ventas de pan básico"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-amber-600 mt-0.5">•</span>
<span>{t('local.competition.item3', '"Oportunidad: Diferénciate con especialidades"')}</span>
</li>
</ul>
</div>
</ScrollReveal>
{/* Weather */}
<ScrollReveal variant="fadeUp" delay={0.3}>
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
<div className="w-12 h-12 bg-gradient-to-br from-sky-500/10 to-sky-600/10 rounded-xl flex items-center justify-center mb-4">
<Cloud className="w-6 h-6 text-sky-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.weather.title', 'Clima de Tu Zona')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-sky-600 mt-0.5">•</span>
<span>{t('local.weather.item1', '"Datos AEMET de tu código postal"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-sky-600 mt-0.5">•</span>
<span>{t('local.weather.item2', '"Lluvia → -20% croissants, +10% pan de molde"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-sky-600 mt-0.5">•</span>
<span>{t('local.weather.item3', '"Calor → +30% productos frescos"')}</span>
</li>
</ul>
<div className="w-12 h-12 bg-gradient-to-br from-sky-500/10 to-sky-600/10 rounded-xl flex items-center justify-center mb-4">
<Cloud className="w-6 h-6 text-sky-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.weather.title', 'Clima de Tu Zona')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-sky-600 mt-0.5">•</span>
<span>{t('local.weather.item1', '"Datos AEMET de tu código postal"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-sky-600 mt-0.5">•</span>
<span>{t('local.weather.item2', '"Lluvia → -20% croissants, +10% pan de molde"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-sky-600 mt-0.5">•</span>
<span>{t('local.weather.item3', '"Calor → +30% productos frescos"')}</span>
</li>
</ul>
</div>
</ScrollReveal>
{/* Events */}
<ScrollReveal variant="fadeUp" delay={0.35}>
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
<div className="w-12 h-12 bg-gradient-to-br from-pink-500/10 to-pink-600/10 rounded-xl flex items-center justify-center mb-4">
<PartyPopper className="w-6 h-6 text-pink-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.events.title', 'Eventos Locales')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-pink-600 mt-0.5">•</span>
<span>{t('local.events.item1', '"Mercadillo los viernes en Plaza Mayor (500m)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-pink-600 mt-0.5">•</span>
<span>{t('local.events.item2', '"Fiestas del barrio próxima semana"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-pink-600 mt-0.5">•</span>
<span>{t('local.events.item3', '"Partido importante → pico de ventas pre-evento"')}</span>
</li>
</ul>
<div className="w-12 h-12 bg-gradient-to-br from-pink-500/10 to-pink-600/10 rounded-xl flex items-center justify-center mb-4">
<PartyPopper className="w-6 h-6 text-pink-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
{t('local.events.title', 'Eventos Locales')}
</h3>
<ul className="space-y-2 text-[var(--text-secondary)]">
<li className="flex items-start gap-2">
<span className="text-pink-600 mt-0.5">•</span>
<span>{t('local.events.item1', '"Mercadillo los viernes en Plaza Mayor (500m)"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-pink-600 mt-0.5">•</span>
<span>{t('local.events.item2', '"Fiestas del barrio próxima semana"')}</span>
</li>
<li className="flex items-start gap-2">
<span className="text-pink-600 mt-0.5">•</span>
<span>{t('local.events.item3', '"Partido importante → pico de ventas pre-evento"')}</span>
</li>
</ul>
</div>
</ScrollReveal>
</div>
@@ -474,27 +474,27 @@ const FeaturesPage: React.FC = () => {
{/* Why it matters */}
<ScrollReveal variant="fadeUp" delay={0.4}>
<div className="mt-12 max-w-4xl mx-auto relative overflow-hidden bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white shadow-xl">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
<div className="relative">
<h3 className="text-2xl font-bold mb-6 text-center">
{t('local.why_matters.title', 'Por qué importa:')}
</h3>
<div className="grid md:grid-cols-2 gap-6">
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-5 border border-white/20">
<p className="font-semibold mb-3 text-lg">{t('local.why_matters.generic', 'IA genérica:')}</p>
<p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.generic_example', '"Es lunes → vende X"')}</p>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
<div className="relative">
<h3 className="text-2xl font-bold mb-6 text-center">
{t('local.why_matters.title', 'Por qué importa:')}
</h3>
<div className="grid md:grid-cols-2 gap-6">
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-5 border border-white/20">
<p className="font-semibold mb-3 text-lg">{t('local.why_matters.generic', 'IA genérica:')}</p>
<p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.generic_example', '"Es lunes → vende X"')}</p>
</div>
<div className="bg-white/20 backdrop-blur-sm rounded-lg p-5 border-2 border-white shadow-lg">
<p className="font-semibold mb-3 text-lg">{t('local.why_matters.yours', 'TU IA:')}</p>
<p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.yours_example', '"Es lunes, llueve, colegio cerrado (festivo local), mercadillo cancelado → vende Y"')}</p>
</div>
</div>
<div className="bg-white/20 backdrop-blur-sm rounded-lg p-5 border-2 border-white shadow-lg">
<p className="font-semibold mb-3 text-lg">{t('local.why_matters.yours', 'TU IA:')}</p>
<p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.yours_example', '"Es lunes, llueve, colegio cerrado (festivo local), mercadillo cancelado → vende Y"')}</p>
<div className="text-center mt-8 p-4 bg-white/10 backdrop-blur-sm rounded-lg">
<p className="text-xl font-bold">
Precisión: <span className="text-3xl"><AnimatedCounter value={92} suffix="%" className="inline" /></span> <span className="text-white/80 text-lg">(vs 60-70% de sistemas genéricos)</span>
</p>
</div>
</div>
<div className="text-center mt-8 p-4 bg-white/10 backdrop-blur-sm rounded-lg">
<p className="text-xl font-bold">
Precisión: <span className="text-3xl"><AnimatedCounter value={92} suffix="%" className="inline" /></span> <span className="text-white/80 text-lg">(vs 60-70% de sistemas genéricos)</span>
</p>
</div>
</div>
</div>
</ScrollReveal>
</div>
@@ -605,42 +605,42 @@ const FeaturesPage: React.FC = () => {
{/* Before */}
<ScrollReveal variant="fadeLeft" delay={0.2}>
<div className="bg-red-50 dark:bg-red-900/20 rounded-2xl p-8 border-2 border-red-200 dark:border-red-800">
<div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center mb-4">
<AlertTriangle className="w-6 h-6 text-red-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('waste.before.title', 'Ejemplo típico de panadería:')}
</h3>
<ul className="space-y-3 text-[var(--text-secondary)]">
<li>{t('waste.before.item1', 'Haces 50 barras de más cada día "por si acaso"')}</li>
<li>{t('waste.before.item2', 'Precio: €2/barra')}</li>
<li className="font-bold text-red-700 dark:text-red-400">{t('waste.before.daily', 'Desperdicio: 50 × €2 = €100/día')}</li>
<li className="font-bold text-red-700 dark:text-red-400">{t('waste.before.monthly', 'Al mes: €100 × 30 = €3,000 perdidos')}</li>
<li className="font-bold text-red-900 dark:text-red-300 text-lg">{t('waste.before.yearly', 'Al año: €36,000 tirados a la basura')}</li>
</ul>
<div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center mb-4">
<AlertTriangle className="w-6 h-6 text-red-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('waste.before.title', 'Ejemplo típico de panadería:')}
</h3>
<ul className="space-y-3 text-[var(--text-secondary)]">
<li>{t('waste.before.item1', 'Haces 50 barras de más cada día "por si acaso"')}</li>
<li>{t('waste.before.item2', 'Precio: €2/barra')}</li>
<li className="font-bold text-red-700 dark:text-red-400">{t('waste.before.daily', 'Desperdicio: 50 × €2 = €100/día')}</li>
<li className="font-bold text-red-700 dark:text-red-400">{t('waste.before.monthly', 'Al mes: €100 × 30 = €3,000 perdidos')}</li>
<li className="font-bold text-red-900 dark:text-red-300 text-lg">{t('waste.before.yearly', 'Al año: €36,000 tirados a la basura')}</li>
</ul>
</div>
</ScrollReveal>
{/* After */}
<ScrollReveal variant="fadeRight" delay={0.2}>
<div className="bg-green-50 dark:bg-green-900/20 rounded-2xl p-8 border-2 border-green-200 dark:border-green-800">
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
<TrendingUp className="w-6 h-6 text-green-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('waste.after.title', 'Con Bakery-IA:')}
</h3>
<ul className="space-y-3 text-[var(--text-secondary)]">
<li>{t('waste.after.item1', 'Predicción precisa → Haces 5-10 barras de más (seguridad)')}</li>
<li>{t('waste.after.item2', 'Desperdicio: 5 × €2 = €10/día')}</li>
<li className="font-bold text-green-700 dark:text-green-400">{t('waste.after.monthly', 'Al mes: €300')}</li>
<li className="font-bold text-green-900 dark:text-green-300 text-xl bg-green-100 dark:bg-green-900/40 p-3 rounded-lg">
AHORRO: <AnimatedCounter value={2700} prefix="€" className="inline" decimals={0} />/mes (<AnimatedCounter value={32400} prefix="€" className="inline" decimals={0} />/año)
</li>
</ul>
<p className="mt-4 text-sm font-medium text-green-700 dark:text-green-400">
{t('waste.after.roi', 'Recuperas la inversión en semana 1.')}
</p>
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
<TrendingUp className="w-6 h-6 text-green-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('waste.after.title', 'Con Bakery-IA:')}
</h3>
<ul className="space-y-3 text-[var(--text-secondary)]">
<li>{t('waste.after.item1', 'Predicción precisa → Haces 5-10 barras de más (seguridad)')}</li>
<li>{t('waste.after.item2', 'Desperdicio: 5 × €2 = €10/día')}</li>
<li className="font-bold text-green-700 dark:text-green-400">{t('waste.after.monthly', 'Al mes: €300')}</li>
<li className="font-bold text-green-900 dark:text-green-300 text-xl bg-green-100 dark:bg-green-900/40 p-3 rounded-lg">
AHORRO: <AnimatedCounter value={2700} prefix="€" className="inline" decimals={0} />/mes (<AnimatedCounter value={32400} prefix="€" className="inline" decimals={0} />/año)
</li>
</ul>
<p className="mt-4 text-sm font-medium text-green-700 dark:text-green-400">
{t('waste.after.roi', 'Recuperas la inversión en semana 1.')}
</p>
</div>
</ScrollReveal>
</div>
@@ -863,50 +863,50 @@ const FeaturesPage: React.FC = () => {
<div className="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-primary)]/20 rounded-xl flex items-center justify-center mb-4">
<Store className="w-6 h-6 text-[var(--color-primary)]" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('business_models.local.title', 'Panadería Producción Local')}
</h3>
<p className="text-[var(--text-secondary)] mb-4">
{t('business_models.local.description', 'Horneas y vendes en el mismo local')}
</p>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.local.benefit1', 'IA optimiza producción diaria')}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.local.benefit2', 'Gestiona inventario de un punto')}</span>
</li>
</ul>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('business_models.local.title', 'Panadería Producción Local')}
</h3>
<p className="text-[var(--text-secondary)] mb-4">
{t('business_models.local.description', 'Horneas y vendes en el mismo local')}
</p>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.local.benefit1', 'IA optimiza producción diaria')}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.local.benefit2', 'Gestiona inventario de un punto')}</span>
</li>
</ul>
</div>
</ScrollReveal>
<ScrollReveal variant="fadeUp" delay={0.2}>
<div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-blue-600 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
<div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
<Globe className="w-6 h-6 text-blue-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('business_models.central.title', 'Obrador Central + Puntos de Venta')}
</h3>
<p className="text-[var(--text-secondary)] mb-4">
{t('business_models.central.description', 'Produces en obrador, distribuyes a tiendas')}
</p>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.central.benefit1', 'IA predice demanda por punto de venta')}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.central.benefit2', 'Optimiza distribución y transporte')}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.central.benefit3', 'Gestiona inventario central + puntos')}</span>
</li>
</ul>
<div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
<Globe className="w-6 h-6 text-blue-600" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
{t('business_models.central.title', 'Obrador Central + Puntos de Venta')}
</h3>
<p className="text-[var(--text-secondary)] mb-4">
{t('business_models.central.description', 'Produces en obrador, distribuyes a tiendas')}
</p>
<ul className="space-y-2">
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.central.benefit1', 'IA predice demanda por punto de venta')}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.central.benefit2', 'Optimiza distribución y transporte')}</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span className="text-[var(--text-secondary)]">{t('business_models.central.benefit3', 'Gestiona inventario central + puntos')}</span>
</li>
</ul>
</div>
</ScrollReveal>
</div>
@@ -914,54 +914,51 @@ const FeaturesPage: React.FC = () => {
</section>
{/* Final CTA */}
<section className="relative overflow-hidden py-24 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
{/* Animated shimmer effect */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
{/* Animated background blobs */}
<div className="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute bottom-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>
<section className="relative overflow-hidden py-24 bg-[var(--bg-secondary)] border-y border-[var(--border-primary)]">
{/* Background Pattern */}
<div className="absolute inset-0 bg-pattern opacity-30"></div>
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<ScrollReveal variant="fadeUp" delay={0.1}>
<ScrollReveal variant="fadeUp">
<div className="text-center space-y-6">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 mb-4">
<Sparkles className="w-5 h-5 text-white" />
<span className="text-sm font-medium text-white">{t('cta.badge', 'Prueba Gratuita Disponible')}</span>
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 mb-4">
<Sparkles className="w-5 h-5 text-[var(--color-primary)]" />
<span className="text-sm font-medium text-[var(--color-primary)]">{t('cta.badge', 'Prueba Gratuita Disponible')}</span>
</div>
<h2 className="text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">
<h2 className="text-4xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6 leading-tight">
{t('cta.title', 'Ver Bakery-IA en Acción')}
</h2>
<p className="text-xl lg:text-2xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed">
<p className="text-xl lg:text-2xl text-[var(--text-secondary)] mb-8 max-w-2xl mx-auto leading-relaxed">
{t('cta.subtitle', 'Solicita una demo personalizada para tu panadería')}
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
<Link to={getDemoUrl()}>
<Link to={getDemoUrl()} className="w-full sm:w-auto">
<Button
size="lg"
className="bg-white text-[var(--color-primary)] hover:bg-gray-50 hover:shadow-2xl font-bold text-lg px-10 py-5 transition-all duration-300 hover:scale-105 group shadow-xl"
size="xl"
variant="primary"
className="w-full sm:w-auto px-12 py-6 text-xl font-bold shadow-2xl hover:shadow-orange-500/20 transform hover:scale-105 transition-all group"
>
<Sparkles className="mr-2 w-5 h-5" />
<Sparkles className="mr-2 w-6 h-6" />
{t('cta.button', 'Solicitar Demo')}
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
<ArrowRight className="ml-3 w-6 h-6 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
</div>
<div className="flex items-center justify-center gap-8 pt-6 text-sm text-white/80">
<div className="flex items-center justify-center gap-8 pt-8 text-sm text-[var(--text-tertiary)]">
<div className="flex items-center gap-2">
<CheckCircle2 className="w-5 h-5" />
<CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
<span>{t('cta.feature1', 'Sin compromiso')}</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle2 className="w-5 h-5" />
<CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
<span>{t('cta.feature2', 'Configuración en minutos')}</span>
</div>
<div className="flex items-center gap-2">
<CheckCircle2 className="w-5 h-5" />
<CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
<span>{t('cta.feature3', 'Soporte dedicado')}</span>
</div>
</div>

29
frontend/src/pages/public/HelpCenterPage.tsx
View File

@@ -90,10 +90,10 @@ const HelpCenterPage: React.FC = () => {
const filteredFAQs = searchQuery
? faqs.filter(
(faq) =>
faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
faq.answer.toLowerCase().includes(searchQuery.toLowerCase())
)
(faq) =>
faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
faq.answer.toLowerCase().includes(searchQuery.toLowerCase())
)
: faqs;
const toggleFAQ = (index: number) => {
@@ -246,25 +246,7 @@ const HelpCenterPage: React.FC = () => {
</p>
</div>
<div className="grid md:grid-cols-3 gap-6">
<Link
to="/help/support"
className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-xl transition-all text-center group"
>
<div className="w-16 h-16 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-[var(--color-primary)] transition-colors">
<MessageSquare className="w-8 h-8 text-[var(--color-primary)] group-hover:text-white transition-colors" />
</div>
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
{t('contact.liveChat.title')}
</h3>
<p className="text-sm text-[var(--text-secondary)] mb-4">
{t('contact.liveChat.description')}
</p>
<span className="text-[var(--color-primary)] font-medium group-hover:underline">
{t('contact.liveChat.action')} →
</span>
</Link>
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<a
href={`mailto:${t('contact.email.address')}`}
className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)] hover:border-[var(--color-primary)] hover:shadow-xl transition-all text-center group"
@@ -315,7 +297,6 @@ const HelpCenterPage: React.FC = () => {
{t('helpCenter.contactHours')}
</h3>
<div className="space-y-1 text-sm text-[var(--text-secondary)]">
<p><strong>{t('contact.liveChat.title')}:</strong> {t('contact.hours.liveChat')}</p>
<p><strong>{t('contact.email.title')}:</strong> {t('contact.hours.email')}</p>
<p><strong>Teléfono:</strong> {t('contact.hours.phone')}</p>
</div>

198
frontend/src/pages/public/LandingPage.tsx
View File

@@ -164,47 +164,47 @@ const LandingPage: React.FC = () => {
<h2 className="text-3xl font-bold text-[var(--text-primary)] mb-8">
{t('landing:problems.title', '❌ Los Problemas Que Enfrentas')}
</h2>
<div className="space-y-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<AlertCircle className="w-6 h-6 text-red-600" />
<div className="space-y-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<AlertCircle className="w-6 h-6 text-red-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:problems.item1.title', 'Desperdicios Diarios')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:problems.item1.description', 'Tiras €2,000 al mes porque produces "por si acaso" y terminas con pan que no se vende.')}
</p>
</div>
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:problems.item1.title', 'Desperdicios Diarios')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:problems.item1.description', 'Tiras €2,000 al mes porque produces "por si acaso" y terminas con pan que no se vende.')}
</p>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<AlertCircle className="w-6 h-6 text-red-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:problems.item2.title', 'Adivinando Cada Día')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:problems.item2.description', 'No sabes cuánto hacer. A veces te quedas sin stock, a veces sobra demasiado.')}
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<AlertCircle className="w-6 h-6 text-red-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:problems.item3.title', 'Tiempo Perdido')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:problems.item3.description', 'Horas calculando pedidos, revisando inventario, planificando producción manualmente.')}
</p>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<AlertCircle className="w-6 h-6 text-red-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:problems.item2.title', 'Adivinando Cada Día')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:problems.item2.description', 'No sabes cuánto hacer. A veces te quedas sin stock, a veces sobra demasiado.')}
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<AlertCircle className="w-6 h-6 text-red-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:problems.item3.title', 'Tiempo Perdido')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:problems.item3.description', 'Horas calculando pedidos, revisando inventario, planificando producción manualmente.')}
</p>
</div>
</div>
</div>
</div>
</ScrollReveal>
@@ -214,47 +214,47 @@ const LandingPage: React.FC = () => {
<h2 className="text-3xl font-bold text-[var(--text-primary)] mb-8">
{t('landing:solutions.title', '✅ La Solución Con IA')}
</h2>
<div className="space-y-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="w-6 h-6 text-green-600" />
<div className="space-y-6">
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:solutions.item1.title', 'Ahorra €500-2,000/Mes')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:solutions.item1.description', 'Reduce desperdicios 20-40% produciendo exactamente lo que vas a vender.')}
</p>
</div>
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:solutions.item1.title', 'Ahorra €500-2,000/Mes')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:solutions.item1.description', 'Reduce desperdicios 20-40% produciendo exactamente lo que vas a vender.')}
</p>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:solutions.item2.title', 'Predicciones 92% Precisas')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:solutions.item2.description', 'Sabe exactamente cuánto venderás mañana basándose en tus datos y tu entorno.')}
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:solutions.item3.title', 'Automatización Total')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:solutions.item3.description', 'Sistema automático cada mañana: predicción, producción, pedidos. Todo listo a las 6 AM.')}
</p>
</div>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:solutions.item2.title', 'Predicciones 92% Precisas')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:solutions.item2.description', 'Sabe exactamente cuánto venderás mañana basándose en tus datos y tu entorno.')}
</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
<CheckCircle2 className="w-6 h-6 text-green-600" />
</div>
<div>
<h3 className="font-bold text-[var(--text-primary)] mb-2">
{t('landing:solutions.item3.title', 'Automatización Total')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('landing:solutions.item3.description', 'Sistema automático cada mañana: predicción, producción, pedidos. Todo listo a las 6 AM.')}
</p>
</div>
</div>
</div>
</div>
</ScrollReveal>
</div>
@@ -340,7 +340,7 @@ const LandingPage: React.FC = () => {
{t('landing:pillars.pillar1.key', '🎯 Precisión:')}<AnimatedCounter value={92} suffix="%" className="inline text-[var(--color-primary)]" />{t('landing:pillars.pillar1.key2', 'vs 60-70% de sistemas genéricos')}
</p>
</div>
</div>
</div>
</div>
@@ -672,26 +672,32 @@ const LandingPage: React.FC = () => {
</section>
{/* Final CTA */}
<section className="py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
<section className="py-24 bg-[var(--bg-secondary)] border-y border-[var(--border-primary)]">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl lg:text-5xl font-bold text-white mb-6">
{t('landing:final_cta.title', 'Deja de Perder €2,000 al Mes en Desperdicios')}
</h2>
<p className="text-xl text-white/90 mb-8">
{t('landing:final_cta.subtitle', 'Únete a las primeras 20 panaderías. Solo quedan 12 plazas.')}
</p>
<Link to={getRegisterUrl()}>
<Button
size="lg"
className="bg-white text-[var(--color-primary)] hover:bg-gray-100 font-bold text-lg px-10 py-5 shadow-2xl"
>
{t('landing:final_cta.button', 'Comenzar Ahora - Sin Tarjeta Requerida')}
<ArrowRight className="ml-2 w-6 h-6" />
</Button>
</Link>
<p className="mt-6 text-white/80 text-sm">
{t('landing:final_cta.guarantee', 'Tarjeta requerida. Sin cargo por 3 meses. Cancela cuando quieras.')}
</p>
<ScrollReveal variant="fadeUp">
<h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6">
{t('landing:final_cta.title', 'Deja de Perder €2,000 al Mes en Desperdicios')}
</h2>
<p className="text-xl text-[var(--text-secondary)] mb-10 max-w-2xl mx-auto">
{t('landing:final_cta.subtitle', 'Únete a las primeras 20 panaderías. Solo quedan 12 plazas.')}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<Link to={getRegisterUrl()} className="w-full sm:w-auto">
<Button
size="xl"
variant="primary"
className="w-full sm:w-auto px-12 py-6 text-xl font-bold shadow-2xl hover:shadow-orange-500/20 transform hover:scale-105 transition-all"
>
{t('landing:final_cta.button', 'Comenzar Ahora')}
<ArrowRight className="ml-3 w-6 h-6" />
</Button>
</Link>
</div>
<p className="mt-8 text-[var(--text-tertiary)] text-sm font-medium">
<CheckCircle2 className="inline-block w-4 h-4 mr-2 text-green-500" />
{t('landing:final_cta.guarantee', 'Tarjeta requerida. Sin cargo por 3 meses. Cancela cuando quieras.')}
</p>
</ScrollReveal>
</div>
</section>
</PublicLayout>