2025-08-28 10:41:04 +02:00
import React from 'react' ;
import { Link } from 'react-router-dom' ;
2025-09-25 12:14:46 +02:00
import { useTranslation } from 'react-i18next' ;
2025-08-28 10:41:04 +02:00
import { Button } from '../../components/ui' ;
import { PublicLayout } from '../../components/layout' ;
2025-10-15 16:12:49 +02:00
import { PricingSection } from '../../components/subscription' ;
2025-10-03 14:09:34 +02:00
import {
BarChart3 ,
TrendingUp ,
Shield ,
Zap ,
Users ,
2025-08-28 10:41:04 +02:00
Award ,
ChevronRight ,
Check ,
Star ,
ArrowRight ,
Play ,
Calendar ,
Clock ,
2025-09-22 16:10:08 +02:00
Euro ,
2025-08-28 10:41:04 +02:00
Package ,
PieChart ,
2025-10-03 14:09:34 +02:00
Settings ,
Brain
2025-08-28 10:41:04 +02:00
} from 'lucide-react' ;
const LandingPage : React.FC = ( ) = > {
2025-09-25 12:14:46 +02:00
const { t } = useTranslation ( ) ;
2025-08-28 10:41:04 +02:00
const scrollToSection = ( sectionId : string ) = > {
const element = document . getElementById ( sectionId ) ;
if ( element ) {
element . scrollIntoView ( { behavior : 'smooth' } ) ;
}
} ;
return (
< PublicLayout
variant = "full-width"
contentPadding = "none"
headerProps = { {
showThemeToggle : true ,
showAuthButtons : true ,
2025-09-25 12:14:46 +02:00
showLanguageSelector : true ,
2025-08-28 10:41:04 +02:00
variant : "default" ,
navigationItems : [
2025-09-25 12:14:46 +02:00
{ id : 'features' , label : t ( 'landing:navigation.features' , 'Características' ) , href : '#features' } ,
{ id : 'benefits' , label : t ( 'landing:navigation.benefits' , 'Beneficios' ) , href : '#benefits' } ,
{ id : 'pricing' , label : t ( 'landing:navigation.pricing' , 'Precios' ) , href : '#pricing' } ,
{ id : 'testimonials' , label : t ( 'landing:navigation.testimonials' , 'Testimonios' ) , href : '#testimonials' }
2025-08-28 10:41:04 +02:00
]
} }
>
{ /* Hero Section */ }
< section className = "relative py-20 lg:py-32 bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center" >
2025-10-03 14:09:34 +02:00
< div className = "mb-6 flex flex-wrap items-center justify-center gap-3" >
2025-08-28 10:41:04 +02:00
< span className = "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]" >
< Zap className = "w-4 h-4 mr-2" / >
2025-09-25 12:14:46 +02:00
{ t ( 'landing:hero.badge' , 'IA Avanzada para Panaderías' ) }
2025-08-28 10:41:04 +02:00
< / span >
2025-10-03 14:09:34 +02:00
< span className = "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-500/10 text-green-600 dark:text-green-400" >
< Shield className = "w-4 h-4 mr-2" / >
Reducción de Desperdicio Alimentario
< / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-03 14:09:34 +02:00
2025-08-28 10:41:04 +02:00
< h1 className = "text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-7xl" >
2025-10-03 14:09:34 +02:00
< span className = "block" > { t ( 'landing:hero.title_line1' , 'IA que Reduce' ) } < / span >
< span className = "block text-[var(--color-primary)]" > { t ( 'landing:hero.title_line2' , 'Desperdicio Alimentario' ) } < / span >
2025-08-28 10:41:04 +02:00
< / h1 >
2025-10-03 14:09:34 +02:00
2025-08-28 10:41:04 +02:00
< p className = "mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl" >
2025-10-03 14:09:34 +02:00
{ t ( 'landing:hero.subtitle' , 'Tecnología de inteligencia artificial que reduce hasta un 35% el desperdicio alimentario, optimiza tu producción y protege tu información. Tus datos son 100% tuyos.' ) }
2025-08-28 10:41:04 +02:00
< / p >
2025-10-03 14:09:34 +02:00
{ /* Pilot Launch Banner */ }
< div className = "mt-8 inline-block" >
< div className = "bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-2 border-amber-500/30 rounded-xl px-6 py-4" >
< div className = "flex items-center justify-center gap-2 text-amber-600 dark:text-amber-400 font-bold text-lg" >
< Star className = "w-5 h-5 fill-current" / >
< span > ¡ Lanzamiento Piloto ! < / span >
< Star className = "w-5 h-5 fill-current" / >
< / div >
< p className = "mt-2 text-sm text-[var(--text-secondary)] text-center" >
< strong className = "text-[var(--color-primary)]" > 3 meses GRATIS < / strong > para early adopters que se registren ahora
< / p >
< / div >
< / div >
< div className = "mt-8 flex flex-col sm:flex-row gap-4 justify-center" >
2025-08-28 10:41:04 +02:00
< Link to = "/register" >
< Button size = "lg" className = "px-8 py-4 text-lg font-semibold bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200" >
2025-10-03 14:09:34 +02:00
{ t ( 'landing:hero.cta_primary' , 'Comenzar GRATIS 3 Meses' ) }
2025-08-28 10:41:04 +02:00
< ArrowRight className = "ml-2 w-5 h-5" / >
< / Button >
< / Link >
2025-10-03 14:09:34 +02:00
< Link to = "/demo" >
< Button
variant = "outline"
size = "lg"
className = "px-8 py-4 text-lg font-semibold border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white transition-all duration-200"
>
< Play className = "mr-2 w-5 h-5" / >
{ t ( 'landing:hero.cta_secondary' , 'Ver Demo en Vivo' ) }
< / Button >
< / Link >
2025-08-28 10:41:04 +02:00
< / div >
< div className = "mt-12 flex items-center justify-center space-x-6 text-sm text-[var(--text-tertiary)]" >
< div className = "flex items-center" >
< Check className = "w-4 h-4 text-green-500 mr-2" / >
2025-09-25 12:14:46 +02:00
{ t ( 'landing:hero.features.no_credit_card' , 'Sin tarjeta de crédito' ) }
2025-08-28 10:41:04 +02:00
< / div >
< div className = "flex items-center" >
< Check className = "w-4 h-4 text-green-500 mr-2" / >
2025-09-25 12:14:46 +02:00
{ t ( 'landing:hero.features.quick_setup' , 'Configuración en 5 minutos' ) }
2025-08-28 10:41:04 +02:00
< / div >
< div className = "flex items-center" >
< Check className = "w-4 h-4 text-green-500 mr-2" / >
2025-09-25 12:14:46 +02:00
{ t ( 'landing:hero.features.support_24_7' , 'Soporte 24/7 en español' ) }
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
{ /* Background decoration */ }
< div className = "absolute top-0 left-0 right-0 h-full overflow-hidden -z-10" >
< div className = "absolute -top-40 -right-40 w-80 h-80 bg-[var(--color-primary)]/5 rounded-full blur-3xl" > < / div >
< div className = "absolute -bottom-40 -left-40 w-80 h-80 bg-[var(--color-secondary)]/5 rounded-full blur-3xl" > < / div >
< / div >
< / section >
{ /* Stats Section */ }
< section className = "py-16 bg-[var(--bg-primary)]" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "grid grid-cols-2 gap-8 md:grid-cols-4" >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-primary)]" > 500 + < / div >
< div className = "mt-2 text-sm text-[var(--text-secondary)]" > Panaderías Activas < / div >
< / div >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-primary)]" > 35 % < / div >
< div className = "mt-2 text-sm text-[var(--text-secondary)]" > Reducción de Desperdicios < / div >
< / div >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-primary)]" > 92 % < / div >
< div className = "mt-2 text-sm text-[var(--text-secondary)]" > Precisión de Predicciones < / div >
< / div >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-primary)]" > 4.8 ★ < / div >
< div className = "mt-2 text-sm text-[var(--text-secondary)]" > Satisfacción de Clientes < / div >
< / div >
< / div >
< / div >
< / section >
2025-10-03 14:09:34 +02:00
{ /* Main Features Section - Focus on AI & Food Waste */ }
2025-08-28 10:41:04 +02:00
< section id = "features" className = "py-24 bg-[var(--bg-secondary)]" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center" >
2025-10-03 14:09:34 +02:00
< div className = "mb-4" >
< span className = "inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-blue-500/10 to-purple-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20" >
< Brain className = "w-4 h-4 mr-2" / >
Tecnología de IA de Ú ltima Generación
< / span >
< / div >
2025-08-28 10:41:04 +02:00
< h2 className = "text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]" >
2025-10-03 14:09:34 +02:00
Combate el Desperdicio Alimentario
< span className = "block text-[var(--color-primary)]" > con Inteligencia Artificial < / span >
2025-08-28 10:41:04 +02:00
< / h2 >
< p className = "mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)]" >
2025-10-03 14:09:34 +02:00
Sistema de alta tecnología que utiliza algoritmos de IA avanzados para optimizar tu producción , reducir residuos alimentarios y mantener tus datos 100 % seguros y bajo tu control .
2025-08-28 10:41:04 +02:00
< / p >
< / div >
< div className = "mt-20 grid grid-cols-1 lg:grid-cols-3 gap-8" >
2025-10-03 14:09:34 +02:00
{ /* 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" >
2025-08-28 10:41:04 +02:00
< div className = "absolute -top-4 left-8" >
2025-10-03 14:09:34 +02:00
< div className = "w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg" >
< Brain className = "w-6 h-6 text-white" / >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< div className = "mt-6" >
2025-10-03 14:09:34 +02:00
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > IA Avanzada de Predicción < / h3 >
2025-08-28 10:41:04 +02:00
< p className = "mt-4 text-[var(--text-secondary)]" >
2025-10-03 14:09:34 +02:00
Algoritmos de machine learning de ú ltima generación analizan patrones históricos , clima , eventos y tendencias para predecir demanda con precisión quirúrgica .
2025-08-28 10:41:04 +02:00
< / p >
2025-10-03 14:09:34 +02:00
< div className = "mt-6 space-y-3" >
< div className = "flex items-center text-sm" >
< div className = "flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3" >
< Zap className = "w-3 h-3 text-blue-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Precisión del 92 % en predicciones < / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-03 14:09:34 +02:00
< div className = "flex items-center text-sm" >
< div className = "flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3" >
< TrendingUp className = "w-3 h-3 text-blue-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Aprendizaje continuo y adaptativo < / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-03 14:09:34 +02:00
< div className = "flex items-center text-sm" >
< div className = "flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3" >
< BarChart3 className = "w-3 h-3 text-blue-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Análisis predictivo en tiempo real < / span >
< / div >
< / div >
< / div >
< / div >
{ /* Food Waste Reduction */ }
< 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-green-500/50" >
< div className = "absolute -top-4 left-8" >
< div className = "w-12 h-12 bg-gradient-to-r from-green-600 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg" >
< Shield className = "w-6 h-6 text-white" / >
< / div >
< / div >
< div className = "mt-6" >
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > Reducción de Desperdicio < / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Contribuye al medioambiente y reduce costos eliminando hasta un 35 % del desperdicio alimentario mediante producción optimizada e inteligente .
< / 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-green-500/10 rounded-full flex items-center justify-center mr-3" >
< Check className = "w-3 h-3 text-green-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Hasta 35 % menos desperdicio < / span >
< / div >
< div className = "flex items-center text-sm" >
< div className = "flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3" >
< Euro className = "w-3 h-3 text-green-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Ahorro promedio de € 800 / mes < / span >
< / div >
< div className = "flex items-center text-sm" >
< div className = "flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3" >
< Award className = "w-3 h-3 text-green-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Elegible para ayudas UE < / span >
< / div >
< / div >
< / div >
< / div >
{ /* Data Ownership & Privacy */ }
< 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-amber-500/50" >
< div className = "absolute -top-4 left-8" >
< div className = "w-12 h-12 bg-gradient-to-r from-amber-600 to-orange-600 rounded-xl flex items-center justify-center shadow-lg" >
< Shield className = "w-6 h-6 text-white" / >
< / div >
< / div >
< div className = "mt-6" >
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > Tus Datos , Tu Propiedad < / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Privacidad y seguridad total . Tus datos operativos , proveedores y analíticas permanecen 100 % bajo tu control . Nunca compartidos , nunca vendidos .
< / 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-amber-500/10 rounded-full flex items-center justify-center mr-3" >
< Shield className = "w-3 h-3 text-amber-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > 100 % propiedad de datos < / span >
< / div >
< div className = "flex items-center text-sm" >
< div className = "flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3" >
< Settings className = "w-3 h-3 text-amber-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Control total de privacidad < / span >
< / div >
< div className = "flex items-center text-sm" >
< div className = "flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3" >
< Award className = "w-3 h-3 text-amber-600" / >
< / div >
< span className = "text-[var(--text-secondary)]" > Cumplimiento GDPR garantizado < / span >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / 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 = "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" >
< Package className = "w-6 h-6 text-white" / >
< / div >
< / div >
< div className = "mt-6" >
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > Inventario Inteligente < / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Control automático de stock con alertas predictivas , ó rdenes de compra automatizadas y optimización de costos .
< / p >
< div className = "mt-6" >
< div className = "flex items-center text-sm text-[var(--color-secondary)]" >
< Check className = "w-4 h-4 mr-2" / >
Alertas automáticas de stock bajo
< / div >
< div className = "flex items-center text-sm text-[var(--color-secondary)] mt-2" >
< Check className = "w-4 h-4 mr-2" / >
Ó rdenes de compra automatizadas
< / div >
< div className = "flex items-center text-sm text-[var(--color-secondary)] mt-2" >
< Check className = "w-4 h-4 mr-2" / >
Optimización de costos de materias primas
< / 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 = "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" >
< Calendar className = "w-6 h-6 text-white" / >
< / div >
< / div >
< div className = "mt-6" >
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > Planificación de Producción < / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Programa automáticamente la producción diaria basada en predicciones , optimiza horarios y recursos disponibles .
< / p >
< div className = "mt-6" >
< div className = "flex items-center text-sm text-[var(--color-accent)]" >
< Check className = "w-4 h-4 mr-2" / >
Programación automática de horneado
< / div >
< div className = "flex items-center text-sm text-[var(--color-accent)] mt-2" >
< Check className = "w-4 h-4 mr-2" / >
Optimización de uso de hornos
< / div >
< div className = "flex items-center text-sm text-[var(--color-accent)] mt-2" >
< Check className = "w-4 h-4 mr-2" / >
Gestión de personal y turnos
< / 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)]" >
< 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)]" > Analytics Avanzado < / h4 >
< p className = "text-sm text-[var(--text-secondary)] mt-2" > 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" >
2025-09-22 16:10:08 +02:00
< Euro className = "w-6 h-6 text-[var(--color-secondary)]" / >
2025-08-28 10:41:04 +02:00
< / div >
< h4 className = "font-semibold text-[var(--text-primary)]" > POS Integrado < / h4 >
< p className = "text-sm text-[var(--text-secondary)] mt-2" > 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 >
< h4 className = "font-semibold text-[var(--text-primary)]" > Control de Calidad < / h4 >
< p className = "text-sm text-[var(--text-secondary)] mt-2" > 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 >
< h4 className = "font-semibold text-[var(--text-primary)]" > Automatización < / h4 >
< p className = "text-sm text-[var(--text-secondary)] mt-2" > Procesos automáticos que ahorran tiempo < / p >
< / div >
< / div >
< / div >
< / section >
{ /* Benefits Section */ }
< section id = "benefits" className = "py-24 bg-[var(--bg-primary)]" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "lg:grid lg:grid-cols-2 lg:gap-16 items-center" >
< div >
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]" >
Resultados Comprobados
< span className = "block text-[var(--color-primary)]" > en Cientos de Panaderías < / span >
< / h2 >
< p className = "mt-6 text-lg text-[var(--text-secondary)]" >
Nuestros clientes han logrado transformaciones significativas en sus operaciones ,
mejorando rentabilidad y reduciendo desperdicios desde el primer mes .
< / p >
< div className = "mt-10 space-y-8" >
< div className = "flex items-start" >
< div className = "flex-shrink-0" >
< div className = "w-8 h-8 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center" >
< TrendingUp className = "w-5 h-5 text-[var(--color-success)]" / >
< / div >
< / div >
< div className = "ml-4" >
< h4 className = "text-lg font-semibold text-[var(--text-primary)]" > Aumenta Ventas 22 % Promedio < / h4 >
< p className = "text-[var(--text-secondary)]" > Optimización de producción y mejor disponibilidad de productos populares < / p >
< / div >
< / div >
< div className = "flex items-start" >
< div className = "flex-shrink-0" >
< div className = "w-8 h-8 bg-[var(--color-info)]/10 rounded-full flex items-center justify-center" >
< Shield className = "w-5 h-5 text-[var(--color-info)]" / >
< / div >
< / div >
< div className = "ml-4" >
< h4 className = "text-lg font-semibold text-[var(--text-primary)]" > Reduce Desperdicios 35 % < / h4 >
< p className = "text-[var(--text-secondary)]" > Predicciones precisas evitan sobreproducción y productos vencidos < / p >
< / div >
< / div >
< div className = "flex items-start" >
< div className = "flex-shrink-0" >
< div className = "w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center" >
< Clock className = "w-5 h-5 text-purple-600" / >
< / div >
< / div >
< div className = "ml-4" >
< h4 className = "text-lg font-semibold text-[var(--text-primary)]" > Ahorra 8 Horas Semanales < / h4 >
< p className = "text-[var(--text-secondary)]" > Automatización de tareas administrativas y de planificación < / p >
< / div >
< / div >
< / div >
< / div >
< div className = "mt-12 lg:mt-0" >
< div className = "bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-2xl p-8" >
< div className = "grid grid-cols-2 gap-8" >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-primary)]" > € 127 k < / div >
< div className = "text-sm text-[var(--text-secondary)]" > Ahorro promedio anual por panadería < / div >
< / div >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-secondary)]" > 98 % < / div >
< div className = "text-sm text-[var(--text-secondary)]" > Satisfacción de clientes < / div >
< / div >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-accent)]" > 2.3 x < / div >
< div className = "text-sm text-[var(--text-secondary)]" > ROI promedio en 12 meses < / div >
< / div >
< div className = "text-center" >
< div className = "text-3xl font-bold text-[var(--color-info)]" > 24 / 7 < / div >
< div className = "text-sm text-[var(--text-secondary)]" > Soporte técnico especializado < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Testimonials Section */ }
< section id = "testimonials" className = "py-24 bg-[var(--bg-secondary)]" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center" >
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]" >
Lo que Dicen Nuestros Clientes
< / h2 >
< p className = "mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]" >
Panaderías de toda España han transformado sus negocios con nuestra plataforma
< / p >
< / div >
< div className = "mt-16 grid grid-cols-1 lg:grid-cols-3 gap-8" >
{ /* Testimonial 1 */ }
< div className = "bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]" >
< div className = "flex items-center mb-4" >
{ [ . . . Array ( 5 ) ] . map ( ( _ , i ) = > (
< Star key = { i } className = "w-5 h-5 text-yellow-400 fill-current" / >
) ) }
< / div >
< blockquote className = "text-[var(--text-secondary)] italic" >
" Desde que implementamos Panadería IA , nuestros desperdicios se redujeron un 40 % y las ventas aumentaron un 28 % .
La predicción de demanda es increíblemente precisa . "
< / blockquote >
< div className = "mt-6 flex items-center" >
< div className = "w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold" >
M
< / div >
< div className = "ml-4" >
< div className = "font-semibold text-[var(--text-primary)]" > María González < / div >
< div className = "text-sm text-[var(--text-secondary)]" > Panadería Santa María , Madrid < / div >
< / div >
< / div >
< / div >
{ /* Testimonial 2 */ }
< div className = "bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]" >
< div className = "flex items-center mb-4" >
{ [ . . . Array ( 5 ) ] . map ( ( _ , i ) = > (
< Star key = { i } className = "w-5 h-5 text-yellow-400 fill-current" / >
) ) }
< / div >
< blockquote className = "text-[var(--text-secondary)] italic" >
" El sistema nos ahorra 10 horas semanales en planificación . Ahora puedo enfocarme en mejorar nuestros productos
mientras la IA maneja la logística . "
< / blockquote >
< div className = "mt-6 flex items-center" >
< div className = "w-12 h-12 bg-[var(--color-secondary)] rounded-full flex items-center justify-center text-white font-bold" >
C
< / div >
< div className = "ml-4" >
< div className = "font-semibold text-[var(--text-primary)]" > Carlos Ruiz < / div >
< div className = "text-sm text-[var(--text-secondary)]" > Horno de Oro , Valencia < / div >
< / div >
< / div >
< / div >
{ /* Testimonial 3 */ }
< div className = "bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]" >
< div className = "flex items-center mb-4" >
{ [ . . . Array ( 5 ) ] . map ( ( _ , i ) = > (
< Star key = { i } className = "w-5 h-5 text-yellow-400 fill-current" / >
) ) }
< / div >
< blockquote className = "text-[var(--text-secondary)] italic" >
" Increíble cómo predice exactamente cuántos panes necesitamos cada día . Nuestros clientes siempre encuentran
sus productos favoritos disponibles . "
< / blockquote >
< div className = "mt-6 flex items-center" >
< div className = "w-12 h-12 bg-[var(--color-accent)] rounded-full flex items-center justify-center text-white font-bold" >
A
< / div >
< div className = "ml-4" >
< div className = "font-semibold text-[var(--text-primary)]" > Ana Martínez < / div >
< div className = "text-sm text-[var(--text-secondary)]" > Pan & Tradición , Sevilla < / div >
< / div >
< / div >
< / div >
< / div >
{ /* Trust indicators */ }
< div className = "mt-16 text-center" >
< p className = "text-sm text-[var(--text-tertiary)] mb-8" > Confiado por más de 500 panaderías en España < / p >
< div className = "flex items-center justify-center space-x-8 opacity-60" >
< div className = "font-semibold text-[var(--text-secondary)]" > Panadería Real < / div >
< div className = "font-semibold text-[var(--text-secondary)]" > Horno Artesanal < / div >
< div className = "font-semibold text-[var(--text-secondary)]" > Pan de Casa < / div >
< div className = "font-semibold text-[var(--text-secondary)]" > Dulce Tradición < / div >
< / div >
< / div >
< / div >
< / section >
{ /* Pricing Section */ }
2025-10-15 16:12:49 +02:00
< PricingSection / >
2025-08-28 10:41:04 +02:00
{ /* FAQ Section */ }
< section className = "py-24 bg-[var(--bg-secondary)]" >
< div className = "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center" >
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]" >
Preguntas Frecuentes
< / h2 >
< p className = "mt-4 text-lg text-[var(--text-secondary)]" >
Todo lo que necesitas saber sobre Panadería IA
< / p >
< / div >
< div className = "mt-16 space-y-8" >
< div className = "bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-semibold text-[var(--text-primary)]" >
¿ Qué tan precisa es la predicción de demanda ?
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Nuestra IA alcanza una precisión del 92 % en predicciones de demanda , analizando más de 50 variables incluyendo
histórico de ventas , clima , eventos locales , estacionalidad y tendencias de mercado . La precisión mejora continuamente
con más datos de tu panadería .
< / p >
< / div >
< div className = "bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-semibold text-[var(--text-primary)]" >
¿ Cuánto tiempo toma implementar el sistema ?
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
La configuración inicial toma solo 5 minutos . Nuestro equipo te ayuda a migrar tus datos históricos en 24 - 48 horas .
La IA comienza a generar predicciones ú tiles después de una semana de datos , alcanzando máxima precisión en 30 días .
< / p >
< / div >
< div className = "bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-semibold text-[var(--text-primary)]" >
¿ Se integra con mi sistema POS actual ?
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Sí , nos integramos con más de 50 sistemas POS populares en España . También incluimos nuestro propio POS optimizado
para panaderías . Si usas un sistema específico , nuestro equipo técnico puede crear una integración personalizada .
< / p >
< / div >
< div className = "bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-semibold text-[var(--text-primary)]" >
¿ Qué soporte técnico ofrecen ?
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Ofrecemos soporte 24 / 7 en español por chat , email y teléfono . Todos nuestros técnicos son expertos en operaciones
de panadería . Además , incluimos onboarding personalizado y training para tu equipo sin costo adicional .
< / p >
< / div >
< div className = "bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-semibold text-[var(--text-primary)]" >
¿ Mis datos están seguros ?
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
Absolutamente . Utilizamos cifrado AES - 256 , servidores en la UE , cumplimos 100 % con RGPD y realizamos auditorías
de seguridad trimestrales . Tus datos nunca se comparten con terceros y tienes control total sobre tu información .
< / p >
< / div >
< / div >
< / div >
< / section >
{ /* Final CTA Section */ }
< section className = "py-24 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] relative overflow-hidden" >
< div className = "absolute inset-0" >
< div className = "absolute -top-40 -right-40 w-80 h-80 bg-white/5 rounded-full blur-3xl" > < / div >
< div className = "absolute -bottom-40 -left-40 w-80 h-80 bg-white/5 rounded-full blur-3xl" > < / div >
< / div >
< div className = "max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 relative" >
< h2 className = "text-3xl lg:text-5xl font-extrabold text-white" >
Transforma tu Panadería
< span className = "block text-white/90" > Comenzando Hoy < / span >
< / h2 >
< p className = "mt-6 text-lg text-white/80 max-w-2xl mx-auto" >
Ú nete a más de 500 panaderías que ya están reduciendo desperdicios , aumentando ventas y
optimizando operaciones con inteligencia artificial .
< / p >
< div className = "mt-12 flex flex-col sm:flex-row gap-6 justify-center" >
< Link to = "/register" >
< Button
size = "lg"
className = "px-10 py-4 text-lg font-semibold bg-white text-[var(--color-primary)] hover:bg-[var(--bg-tertiary)] shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200"
>
Comenzar Prueba Gratuita 14 Días
< ArrowRight className = "ml-2 w-5 h-5" / >
< / Button >
< / Link >
2025-10-03 14:09:34 +02:00
< Link to = "/demo" >
< Button
size = "lg"
variant = "outline"
className = "px-10 py-4 text-lg font-semibold border-2 border-white text-white hover:bg-white hover:text-[var(--color-primary)] transition-all duration-200"
>
< Play className = "mr-2 w-5 h-5" / >
Ver Demo
< / Button >
< / Link >
2025-08-28 10:41:04 +02:00
< / div >
< div className = "mt-12 grid grid-cols-1 sm:grid-cols-3 gap-8 text-center" >
< div >
< div className = "text-2xl font-bold text-white" > 14 días < / div >
< div className = "text-white/70 text-sm" > Prueba gratuita < / div >
< / div >
< div >
< div className = "text-2xl font-bold text-white" > 5 min < / div >
< div className = "text-white/70 text-sm" > Configuración < / div >
< / div >
< div >
< div className = "text-2xl font-bold text-white" > 24 / 7 < / div >
< div className = "text-white/70 text-sm" > Soporte incluido < / div >
< / div >
< / div >
< / div >
< / section >
< / PublicLayout >
) ;
} ;
export default LandingPage ;
