Improve the frontend
This commit is contained in:
Urtzi Alfaro
@@ -325,7 +325,7 @@ const LandingPage: React.FC = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="mt-20 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* AI Technology */}
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-blue-500/50">
|
||||
<div className="absolute -top-4 left-8">
|
||||
@@ -432,97 +432,144 @@ const LandingPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Smart Inventory */}
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30">
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-indigo-500/50">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-[var(--color-secondary)] to-[var(--color-secondary-dark)] rounded-xl flex items-center justify-center shadow-lg">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<Package className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)]">{t('landing:features.smart_inventory.title', 'Inventario Inteligente')}</h3>
|
||||
<p className="mt-4 text-[var(--text-secondary)]">
|
||||
{t('landing:features.smart_inventory.description', 'Control automático de stock con alertas predictivas, órdenes de compra automatizadas y optimización de costos.')}
|
||||
{t('landing:features.smart_inventory.description', 'Control automático de stock con alertas predictivas, órdenes de compra automatizadas y optimización de costos de materias primas en tiempo real.')}
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center text-sm text-[var(--color-secondary)]">
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{t('landing:features.smart_inventory.features.alerts', 'Alertas automáticas de stock bajo')}
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-indigo-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Package className="w-3 h-3 text-indigo-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.smart_inventory.features.alerts', 'Alertas automáticas de stock bajo')}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-[var(--color-secondary)] mt-2">
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{t('landing:features.smart_inventory.features.orders', 'Órdenes de compra automatizadas')}
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-indigo-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<TrendingUp className="w-3 h-3 text-indigo-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.smart_inventory.features.orders', 'Órdenes de compra automatizadas')}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-[var(--color-secondary)] mt-2">
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{t('landing:features.smart_inventory.features.optimization', 'Optimización de costos de materias primas')}
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-indigo-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Euro className="w-3 h-3 text-indigo-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.smart_inventory.features.optimization', 'Optimización de costos de materias primas')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Production Planning */}
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30">
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-rose-500/50">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-dark)] rounded-xl flex items-center justify-center shadow-lg">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-rose-600 to-pink-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<Calendar className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)]">{t('landing:features.production_planning.title', 'Planificación de Producción')}</h3>
|
||||
<p className="mt-4 text-[var(--text-secondary)]">
|
||||
{t('landing:features.production_planning.description', 'Programa automáticamente la producción diaria basada en predicciones, optimiza horarios y recursos disponibles.')}
|
||||
{t('landing:features.production_planning.description', 'Programa automáticamente la producción diaria basada en predicciones de IA, optimiza horarios, recursos y maximiza la eficiencia de tus hornos.')}
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center text-sm text-[var(--color-accent)]">
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{t('landing:features.production_planning.features.scheduling', 'Programación automática de horneado')}
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-rose-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Calendar className="w-3 h-3 text-rose-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.production_planning.features.scheduling', 'Programación automática de horneado')}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-[var(--color-accent)] mt-2">
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{t('landing:features.production_planning.features.oven', 'Optimización de uso de hornos')}
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-rose-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Zap className="w-3 h-3 text-rose-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.production_planning.features.oven', 'Optimización de uso de hornos')}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-[var(--color-accent)] mt-2">
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
{t('landing:features.production_planning.features.staff', 'Gestión de personal y turnos')}
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-rose-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Users className="w-3 h-3 text-rose-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.production_planning.features.staff', 'Gestión de personal y turnos')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Analytics */}
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-cyan-500/50">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-cyan-600 to-teal-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<PieChart className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)]">{t('landing:features.advanced_analytics.title', 'Analytics Avanzado')}</h3>
|
||||
<p className="mt-4 text-[var(--text-secondary)]">
|
||||
{t('landing:features.advanced_analytics.description', 'Dashboards en tiempo real con métricas clave de negocio, análisis de rentabilidad por producto y reportes personalizables para tomar decisiones basadas en datos.')}
|
||||
</p>
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-cyan-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<BarChart3 className="w-3 h-3 text-cyan-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.advanced_analytics.features.realtime', 'Dashboards en tiempo real')}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-cyan-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<TrendingUp className="w-3 h-3 text-cyan-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.advanced_analytics.features.profitability', 'Análisis de rentabilidad por producto')}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-cyan-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<PieChart className="w-3 h-3 text-cyan-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">{t('landing:features.advanced_analytics.features.reports', 'Reportes personalizables')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Features Grid */}
|
||||
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
|
||||
{/* Secondary Features - Compact Grid */}
|
||||
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<BarChart3 className="w-6 h-6 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-[var(--text-primary)]">{t('landing:features.advanced_analytics.title', 'Analytics Avanzado')}</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mt-2">{t('landing:features.advanced_analytics.description', 'Dashboards en tiempo real con métricas clave')}</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
|
||||
<div className="w-12 h-12 bg-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Euro className="w-6 h-6 text-[var(--color-secondary)]" />
|
||||
<Euro className="w-6 h-6 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-[var(--text-primary)]">{t('landing:features.pos_integration.title', 'POS Integrado')}</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mt-2">{t('landing:features.pos_integration.description', 'Sistema de ventas completo y fácil de usar')}</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
|
||||
<div className="w-12 h-12 bg-[var(--color-accent)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Shield className="w-6 h-6 text-[var(--color-accent)]" />
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Shield className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-[var(--text-primary)]">{t('landing:features.quality_control.title', 'Control de Calidad')}</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mt-2">{t('landing:features.quality_control.description', 'Trazabilidad completa y gestión HACCP')}</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
|
||||
<div className="w-12 h-12 bg-[var(--color-info)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Settings className="w-6 h-6 text-[var(--color-info)]" />
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Settings className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-[var(--text-primary)]">{t('landing:features.automation.title', 'Automatización')}</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mt-2">{t('landing:features.automation.description', 'Procesos automáticos que ahorran tiempo')}</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 transition-all duration-300">
|
||||
<div className="w-12 h-12 bg-blue-500/10 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||||
<Zap className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h4 className="font-semibold text-[var(--text-primary)]">{t('landing:features.cloud_based.title', 'En la Nube')}</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mt-2">{t('landing:features.cloud_based.description', 'Accede desde cualquier lugar, siempre actualizado')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user