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 ,
2025-10-17 18:14:28 +02:00
Brain ,
Store ,
Network
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' } ,
2025-10-17 18:14:28 +02:00
{ id : 'faq' , label : t ( 'landing:navigation.faq' , 'Preguntas Frecuentes' ) , href : '#faq' }
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-17 18:14:28 +02:00
< span className = "block" > { t ( 'landing:hero.title_line1' , 'Aumenta Ganancias,' ) } < / span >
< span className = "block text-[var(--color-primary)]" > { t ( 'landing:hero.title_line2' , 'Reduce Desperdicios' ) } < / 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-17 18:14:28 +02:00
{ t ( 'landing:hero.subtitle' , 'Plataforma de IA diseñada para panaderías artesanales que quieren producir exactamente lo que van a vender. Reduce desperdicio alimentario, mejora márgenes y ahorra tiempo en planificación. 100% española, tus datos son 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" >
2025-10-17 18:14:28 +02:00
< div className = "relative bg-gradient-to-br from-amber-50 via-orange-50 to-amber-50 dark:from-amber-900/20 dark:via-orange-900/20 dark:to-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-2xl px-8 py-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105" >
{ /* Decorative elements */ }
< div className = "absolute -top-2 -right-2 w-16 h-16 bg-amber-400/20 rounded-full blur-xl" > < / div >
< div className = "absolute -bottom-2 -left-2 w-16 h-16 bg-orange-400/20 rounded-full blur-xl" > < / div >
< div className = "relative" >
< div className = "flex items-center justify-center gap-3 mb-3" >
< div className = "flex items-center gap-1" >
< Star className = "w-6 h-6 text-amber-500 fill-amber-500 animate-pulse" / >
< Star className = "w-5 h-5 text-amber-400 fill-amber-400" / >
< / div >
< span className = "text-xl font-extrabold bg-gradient-to-r from-amber-600 to-orange-600 dark:from-amber-400 dark:to-orange-400 bg-clip-text text-transparent" >
¡ Lanzamiento Piloto !
< / span >
< div className = "flex items-center gap-1" >
< Star className = "w-5 h-5 text-amber-400 fill-amber-400" / >
< Star className = "w-6 h-6 text-amber-500 fill-amber-500 animate-pulse" / >
< / div >
< / div >
< div className = "text-center" >
< p className = "text-base text-[var(--text-secondary)] font-medium" >
< span className = "inline-block px-3 py-1 bg-gradient-to-r from-[var(--color-primary)] to-orange-600 text-white font-bold text-lg rounded-lg shadow-md mr-1" >
3 MESES GRATIS
< / span >
< span className = "block mt-2 text-sm" >
para los primeros en unirse al piloto
< / span >
< / p >
< / div >
< / div >
2025-10-03 14:09:34 +02:00
< / div >
< / div >
2025-10-17 18:14:28 +02:00
< div className = "mt-10 flex flex-col sm:flex-row gap-5 justify-center items-center" >
< Link to = "/register?pilot=true" className = "w-full sm:w-auto" >
< Button
size = "lg"
className = "w-full sm:w-auto group relative px-10 py-5 text-lg font-bold bg-gradient-to-r from-[var(--color-primary)] to-orange-600 hover:from-[var(--color-primary-dark)] hover:to-orange-700 text-white shadow-2xl hover:shadow-3xl transform hover:scale-105 transition-all duration-300 rounded-xl overflow-hidden"
>
< span className = "absolute inset-0 w-full h-full bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" > < / span >
< span className = "relative flex items-center justify-center gap-2" >
{ t ( 'landing:hero.cta_primary' , 'Comenzar Gratis Ahora' ) }
< ArrowRight className = "w-6 h-6 group-hover:translate-x-1 transition-transform duration-200" / >
< / span >
2025-08-28 10:41:04 +02:00
< / Button >
< / Link >
2025-10-17 18:14:28 +02:00
< Link to = "/demo" className = "w-full sm:w-auto" >
2025-10-03 14:09:34 +02:00
< Button
variant = "outline"
size = "lg"
2025-10-17 18:14:28 +02:00
className = "w-full sm:w-auto group px-10 py-5 text-lg font-semibold border-3 border-[var(--color-primary)] text-[var(--text-primary)] hover:bg-[var(--color-primary)] hover:text-white hover:border-[var(--color-primary-dark)] shadow-lg hover:shadow-xl transition-all duration-300 rounded-xl backdrop-blur-sm bg-white/50 dark:bg-gray-800/50"
2025-10-03 14:09:34 +02:00
>
2025-10-17 18:14:28 +02:00
< span className = "flex items-center justify-center gap-2" >
< Play className = "w-5 h-5 group-hover:scale-110 transition-transform duration-200" / >
{ t ( 'landing:hero.cta_secondary' , 'Ver Demo' ) }
< / span >
2025-10-03 14:09:34 +02:00
< / Button >
< / Link >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div className = "mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm" >
< div className = "flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm px-4 py-2 rounded-full shadow-sm border border-[var(--border-primary)]" >
< div className = "w-5 h-5 bg-green-500/20 rounded-full flex items-center justify-center mr-2" >
< Check className = "w-3 h-3 text-green-600 dark:text-green-400" / >
< / div >
< span className = "font-medium text-[var(--text-secondary)]" >
{ t ( 'landing:hero.features.card_required' , 'Tarjeta requerida • 3 meses gratis' ) }
< / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div className = "flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm px-4 py-2 rounded-full shadow-sm border border-[var(--border-primary)]" >
< div className = "w-5 h-5 bg-blue-500/20 rounded-full flex items-center justify-center mr-2" >
< Clock className = "w-3 h-3 text-blue-600 dark:text-blue-400" / >
< / div >
< span className = "font-medium text-[var(--text-secondary)]" >
{ t ( 'landing:hero.features.quick_setup' , 'Lista en minutos, no horas' ) }
< / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div className = "flex items-center bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm px-4 py-2 rounded-full shadow-sm border border-[var(--border-primary)]" >
< div className = "w-5 h-5 bg-amber-500/20 rounded-full flex items-center justify-center mr-2" >
< Users className = "w-3 h-3 text-amber-600 dark:text-amber-400" / >
< / div >
< span className = "font-medium text-[var(--text-secondary)]" >
{ t ( 'landing:hero.features.support_24_7' , 'Asistencia personalizada en español' ) }
< / span >
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 >
2025-10-17 18:14:28 +02:00
{ /* Pilot Program Trust Section - Using Scarcity & Urgency */ }
< section className = "py-16 bg-gradient-to-b from-[var(--bg-primary)] to-[var(--bg-secondary)]" >
2025-08-28 10:41:04 +02:00
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
2025-10-17 18:14:28 +02:00
< div className = "bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800" >
< div className = "text-center mb-8" >
< div className = "inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-bold mb-4" >
< Clock className = "w-4 h-4" / >
< span > Programa Piloto - Plazas Limitadas < / span >
< / div >
< h2 className = "text-2xl font-bold text-[var(--text-primary)] mb-3" >
Buscamos 20 Panaderías Pioneras
< / h2 >
< p className = "text-[var(--text-secondary)] max-w-2xl mx-auto" >
Estamos seleccionando las primeras 20 panaderías para formar parte de nuestro programa piloto exclusivo .
A cambio de tu feedback , obtienes < strong > 3 meses gratis + precio preferencial de por vida < / strong > .
< / p >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div className = "grid grid-cols-1 md:grid-cols-3 gap-6 mt-8" >
< div className = "text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm" >
< div className = "w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-3" >
< Award className = "w-6 h-6 text-green-600 dark:text-green-400" / >
< / div >
< div className = "text-lg font-bold text-[var(--text-primary)]" > Founders Beta < / div >
< div className = "text-sm text-[var(--text-secondary)] mt-2" > Acceso de por vida con 40 % descuento < / div >
< / div >
< div className = "text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm" >
< div className = "w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mx-auto mb-3" >
< Users className = "w-6 h-6 text-purple-600 dark:text-purple-400" / >
< / div >
< div className = "text-lg font-bold text-[var(--text-primary)]" > Influye el Producto < / div >
< div className = "text-sm text-[var(--text-secondary)] mt-2" > Tus necesidades moldean la plataforma < / div >
< / div >
< div className = "text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm" >
< div className = "w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-full flex items-center justify-center mx-auto mb-3" >
< Zap className = "w-6 h-6 text-amber-600 dark:text-amber-400" / >
< / div >
< div className = "text-lg font-bold text-[var(--text-primary)]" > Soporte Premium < / div >
< div className = "text-sm text-[var(--text-secondary)] mt-2" > Atención directa del equipo fundador < / div >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
< / section >
{ /* Who Is This For? Section - Business Models */ }
< section className = "py-20 bg-[var(--bg-primary)]" >
< 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" >
Tu Modelo de Negocio , Nuestra Tecnología
< / h2 >
< p className = "text-xl text-[var(--text-secondary)] max-w-3xl mx-auto" >
Ya sea que produzcas y vendas en un solo lugar , o gestiones un obrador central con múltiples puntos de venta ,
nuestra IA se adapta a tu forma de trabajar
< / p >
< / div >
< div className = "grid md:grid-cols-2 gap-8" >
{ /* Local Production Model */ }
< div className = "bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800" >
< div className = "flex items-center gap-4 mb-6" >
< div className = "w-16 h-16 bg-blue-600 rounded-xl flex items-center justify-center" >
< Store className = "w-8 h-8 text-white" / >
< / div >
< div >
< h3 className = "text-2xl font-bold text-[var(--text-primary)]" > Producción Local < / h3 >
< p className = "text-sm text-[var(--text-secondary)]" > Un punto de venta y producción < / p >
< / div >
< / div >
< p className = "text-[var(--text-secondary)] mb-6 leading-relaxed" >
Tu panadería produce y vende en el mismo lugar . Necesitas optimizar producción diaria ,
minimizar desperdicios y maximizar frescura en cada horneada .
< / p >
< div className = "space-y-3" >
< div className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" / >
< span className = "text-sm text-[var(--text-secondary)]" >
< strong > Predicción de demanda < / strong > por ubicación ú nica
< / span >
< / div >
< div className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" / >
< span className = "text-sm text-[var(--text-secondary)]" >
< strong > Gestión de inventario < / strong > simplificada y directa
< / span >
< / div >
< div className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" / >
< span className = "text-sm text-[var(--text-secondary)]" >
< strong > Un solo punto de control < / strong > - simple y eficiente
< / span >
< / div >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
{ /* Central Workshop + POS Model */ }
< div className = "bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-2xl p-8 border-2 border-amber-200 dark:border-amber-800" >
< div className = "flex items-center gap-4 mb-6" >
< div className = "w-16 h-16 bg-amber-600 rounded-xl flex items-center justify-center" >
< Network className = "w-8 h-8 text-white" / >
< / div >
< div >
< h3 className = "text-2xl font-bold text-[var(--text-primary)]" > Obrador Central + Puntos de Venta < / h3 >
< p className = "text-sm text-[var(--text-secondary)]" > Producción centralizada , distribución múltiple < / p >
< / div >
< / div >
< p className = "text-[var(--text-secondary)] mb-6 leading-relaxed" >
Produces centralmente y distribuyes a múltiples puntos de venta . Necesitas coordinar producción ,
logística y demanda entre ubicaciones para optimizar cada punto .
< / p >
< div className = "space-y-3" >
< div className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" / >
< span className = "text-sm text-[var(--text-secondary)]" >
< strong > Predicción agregada y por punto de venta < / strong > individual
< / span >
< / div >
< div className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" / >
< span className = "text-sm text-[var(--text-secondary)]" >
< strong > Gestión de distribución < / strong > multi - ubicación coordinada
< / span >
< / div >
< div className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" / >
< span className = "text-sm text-[var(--text-secondary)]" >
< strong > Visibilidad centralizada < / strong > con control granular
< / span >
< / div >
< / div >
< / div >
< / div >
< div className = "mt-12 text-center" >
< div className = "inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-6 py-3 rounded-full" >
< Brain className = "w-5 h-5" / >
< span className = "font-medium" > La misma IA potente , adaptada a tu forma de trabajar < / span >
2025-08-28 10:41:04 +02:00
< / 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 >
2025-10-17 18:14:28 +02:00
{ /* Benefits Section - Problem/Solution Focus */ }
2025-08-28 10:41:04 +02:00
< 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" >
2025-10-17 18:14:28 +02:00
< div className = "text-center mb-16" >
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]" >
El Problema Que Resolvemos
< span className = "block text-[var(--color-primary)]" > Para Panaderías Artesanales < / span >
< / h2 >
< p className = "mt-6 text-lg text-[var(--text-secondary)] max-w-3xl mx-auto" >
Sabemos lo frustrante que es tirar pan al final del día , o quedarte sin producto cuando llegan clientes .
La producción artesanal es difícil de optimizar . . . hasta ahora .
< / p >
< / div >
2025-08-28 10:41:04 +02:00
2025-10-17 18:14:28 +02:00
< div className = "grid lg:grid-cols-2 gap-12 items-center" >
{ /* Left: Problems */ }
< div className = "space-y-6" >
< div className = "bg-red-50 dark:bg-red-900/10 border-l-4 border-red-500 p-6 rounded-lg" >
< div className = "flex items-start gap-4" >
< div className = "w-10 h-10 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0" >
< span className = "text-white font-bold text-xl" > ✗ < / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div >
< h4 className = "text-lg font-bold text-red-700 dark:text-red-400 mb-2" > Desperdicias entre 15 - 40 % de producción < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
Al final del día tiras producto que nadie compró . Son cientos de euros a la basura cada semana .
< / p >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-08-28 10:41:04 +02:00
2025-10-17 18:14:28 +02:00
< div className = "bg-red-50 dark:bg-red-900/10 border-l-4 border-red-500 p-6 rounded-lg" >
< div className = "flex items-start gap-4" >
< div className = "w-10 h-10 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0" >
< span className = "text-white font-bold text-xl" > ✗ < / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div >
< h4 className = "text-lg font-bold text-red-700 dark:text-red-400 mb-2" > Pierdes ventas por falta de stock < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
Clientes que vienen por su pan favorito y se van sin comprar porque ya se te acabó a las 14 :00.
< / p >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-08-28 10:41:04 +02:00
2025-10-17 18:14:28 +02:00
< div className = "bg-red-50 dark:bg-red-900/10 border-l-4 border-red-500 p-6 rounded-lg" >
< div className = "flex items-start gap-4" >
< div className = "w-10 h-10 bg-red-500 rounded-full flex items-center justify-center flex-shrink-0" >
< span className = "text-white font-bold text-xl" > ✗ < / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div >
< h4 className = "text-lg font-bold text-red-700 dark:text-red-400 mb-2" > Excel , papel y "experiencia" < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
Planificas basándote en intuición . Funciona . . . hasta que no funciona .
< / p >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
2025-10-17 18:14:28 +02:00
{ /* Right: Solutions */ }
< div className = "space-y-6" >
< div className = "bg-green-50 dark:bg-green-900/10 border-l-4 border-green-500 p-6 rounded-lg" >
< div className = "flex items-start gap-4" >
< div className = "w-10 h-10 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0" >
< Check className = "text-white w-6 h-6" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div >
< h4 className = "text-lg font-bold text-green-700 dark:text-green-400 mb-2" > Produce exactamente lo que vas a vender < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
La IA analiza tus ventas históricas , clima , eventos locales y festivos para predecir demanda real .
< / p >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
< div className = "bg-green-50 dark:bg-green-900/10 border-l-4 border-green-500 p-6 rounded-lg" >
< div className = "flex items-start gap-4" >
< div className = "w-10 h-10 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0" >
< Check className = "text-white w-6 h-6" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div >
< h4 className = "text-lg font-bold text-green-700 dark:text-green-400 mb-2" > Siempre tienes stock de lo que más se vende < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
El sistema te avisa qué productos van a tener más demanda cada día , para que nunca te quedes sin .
< / p >
< / div >
< / div >
< / div >
< div className = "bg-green-50 dark:bg-green-900/10 border-l-4 border-green-500 p-6 rounded-lg" >
< div className = "flex items-start gap-4" >
< div className = "w-10 h-10 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0" >
< Check className = "text-white w-6 h-6" / >
< / div >
< div >
< h4 className = "text-lg font-bold text-green-700 dark:text-green-400 mb-2" > Automatización inteligente + datos reales < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
Desde planificación de producción hasta gestión de inventario . Todo basado en matemáticas , no corazonadas .
< / p >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
< / div >
2025-10-17 18:14:28 +02:00
{ /* Value Proposition Summary */ }
< div className = "mt-16 bg-gradient-to-r from-[var(--color-primary)]/10 to-orange-500/10 rounded-2xl p-8 border-2 border-[var(--color-primary)]/30" >
< div className = "text-center" >
< h3 className = "text-2xl font-bold text-[var(--text-primary)] mb-4" >
El Objetivo : Que Ahorres Dinero Desde el Primer Mes
< / h3 >
< p className = "text-[var(--text-secondary)] max-w-3xl mx-auto mb-6" >
No prometemos números mágicos porque cada panadería es diferente . Lo que SÍ prometemos es que si después de 3 meses
no has reducido desperdicios o mejorado tus márgenes , < strong > te ayudamos gratis a optimizar tu negocio de otra forma < / strong > .
< / p >
< div className = "flex flex-wrap justify-center gap-6 text-sm" >
< div className = "flex items-center gap-2" >
< TrendingUp className = "w-5 h-5 text-[var(--color-success)]" / >
< span className = "text-[var(--text-secondary)]" > Menos desperdicio = más beneficio < / span >
< / div >
< div className = "flex items-center gap-2" >
< Clock className = "w-5 h-5 text-blue-600" / >
< span className = "text-[var(--text-secondary)]" > Menos tiempo en Excel , más en tu negocio < / span >
< / div >
< div className = "flex items-center gap-2" >
< Shield className = "w-5 h-5 text-purple-600" / >
< span className = "text-[var(--text-secondary)]" > Tus datos siempre son tuyos < / span >
< / div >
< / div >
< / div >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / section >
2025-10-17 18:14:28 +02:00
{ /* Risk Reversal & Transparency Section */ }
2025-08-28 10:41:04 +02:00
< 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" >
2025-10-17 18:14:28 +02:00
< div className = "text-center mb-16" >
2025-08-28 10:41:04 +02:00
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]" >
2025-10-17 18:14:28 +02:00
Sin Riesgo . Sin Ataduras .
2025-08-28 10:41:04 +02:00
< / h2 >
< p className = "mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]" >
2025-10-17 18:14:28 +02:00
Somos transparentes : esto es un piloto . Estamos construyendo la mejor herramienta para panaderías artesanales , y necesitamos tu ayuda .
2025-08-28 10:41:04 +02:00
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< div className = "grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16" >
{ /* Left: What You Get */ }
< div className = "bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-8 border-2 border-green-300 dark:border-green-700" >
< h3 className = "text-2xl font-bold text-[var(--text-primary)] mb-6 flex items-center gap-3" >
< div className = "w-10 h-10 bg-green-600 rounded-full flex items-center justify-center" >
< Check className = "w-6 h-6 text-white" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
Lo Que Obtienes
< / h3 >
< ul className = "space-y-4" >
< li className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-green-600 dark:text-green-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > 3 meses completamente gratis < / strong > para probar todas las funcionalidades < / span >
< / li >
< li className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-green-600 dark:text-green-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > 40 % de descuento de por vida < / strong > si decides continuar después del piloto < / span >
< / li >
< li className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-green-600 dark:text-green-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > Soporte directo del equipo fundador < / strong > - respondemos en horas , no días < / span >
< / li >
< li className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-green-600 dark:text-green-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > Tus ideas se implementan primero < / strong > - construimos lo que realmente necesitas < / span >
< / li >
< li className = "flex items-start gap-3" >
< Check className = "w-5 h-5 text-green-600 dark:text-green-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > Cancelas cuando quieras < / strong > sin explicaciones ni penalizaciones < / span >
< / li >
< / ul >
< / div >
{ /* Right: What We Ask */ }
< div className = "bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-300 dark:border-blue-700" >
< h3 className = "text-2xl font-bold text-[var(--text-primary)] mb-6 flex items-center gap-3" >
< div className = "w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center" >
< Users className = "w-6 h-6 text-white" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
Lo Que Pedimos
< / h3 >
< ul className = "space-y-4" >
< li className = "flex items-start gap-3" >
< ArrowRight className = "w-5 h-5 text-blue-600 dark:text-blue-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > Feedback honesto semanal < / strong > ( 15 min ) sobre qué funciona y qué no < / span >
< / li >
< li className = "flex items-start gap-3" >
< ArrowRight className = "w-5 h-5 text-blue-600 dark:text-blue-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > Paciencia con bugs < / strong > - estamos en fase beta , habrá imperfecciones < / span >
< / li >
< li className = "flex items-start gap-3" >
< ArrowRight className = "w-5 h-5 text-blue-600 dark:text-blue-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > Datos de ventas históricos < / strong > ( opcional ) para mejorar las predicciones < / span >
< / li >
< li className = "flex items-start gap-3" >
< ArrowRight className = "w-5 h-5 text-blue-600 dark:text-blue-400 mt-1 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > < strong > Comunicación abierta < / strong > - queremos saber si algo no te gusta < / span >
< / li >
< / ul >
< div className = "mt-6 p-4 bg-white dark:bg-gray-800 rounded-lg border border-blue-200 dark:border-blue-800" >
< p className = "text-sm text-[var(--text-secondary)] italic" >
< strong > Promesa : < / strong > Si después de 3 meses sientes que no te ayudamos a ahorrar dinero o reducir desperdicios , te damos una sesión gratuita de consultoría para optimizar tu panadería de otra forma .
< / p >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-08-28 10:41:04 +02:00
2025-10-17 18:14:28 +02:00
{ /* Credibility Signals */ }
< div className = "bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]" >
< div className = "text-center mb-8" >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-3" >
¿ Por Qué Confiar en Nosotros ?
< / h3 >
< p className = "text-[var(--text-secondary)]" >
Entendemos que probar nueva tecnología es un riesgo . Por eso somos completamente transparentes :
< / p >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div className = "grid grid-cols-1 md:grid-cols-3 gap-6" >
< div className = "text-center" >
< div className = "w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mx-auto mb-4" >
< Shield className = "w-8 h-8 text-purple-600 dark:text-purple-400" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< h4 className = "font-semibold text-[var(--text-primary)] mb-2" > 100 % Española < / h4 >
< p className = "text-sm text-[var(--text-secondary)]" >
Empresa registrada en España . Tus datos están protegidos por RGPD y nunca salen de la UE .
< / p >
< / div >
< div className = "text-center" >
< div className = "w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center mx-auto mb-4" >
< Brain className = "w-8 h-8 text-orange-600 dark:text-orange-400" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< h4 className = "font-semibold text-[var(--text-primary)] mb-2" > Tecnología Probada < / h4 >
< p className = "text-sm text-[var(--text-secondary)]" >
Usamos algoritmos de IA validados académicamente , adaptados específicamente para panaderías .
< / p >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< div className = "text-center" >
< div className = "w-16 h-16 bg-teal-100 dark:bg-teal-900/30 rounded-full flex items-center justify-center mx-auto mb-4" >
< Award className = "w-8 h-8 text-teal-600 dark:text-teal-400" / >
< / div >
< h4 className = "font-semibold text-[var(--text-primary)] mb-2" > Equipo Experto < / h4 >
< p className = "text-sm text-[var(--text-secondary)]" >
Fundadores con experiencia en IA + hostelería . Conocemos el sector de dentro .
< / p >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / section >
{ /* Pricing Section */ }
2025-10-17 18:14:28 +02:00
< section id = "pricing" >
< PricingSection / >
< / section >
2025-08-28 10:41:04 +02:00
{ /* FAQ Section */ }
2025-10-17 18:14:28 +02:00
< section id = "faq" className = "py-24 bg-[var(--bg-secondary)]" >
2025-08-28 10:41:04 +02:00
< 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 >
2025-10-17 18:14:28 +02:00
{ /* Final CTA Section - With Urgency & Scarcity */ }
2025-08-28 10:41:04 +02:00
< 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 >
2025-10-17 18:14:28 +02:00
2025-08-28 10:41:04 +02:00
< div className = "max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 relative" >
2025-10-17 18:14:28 +02:00
{ /* Scarcity Badge */ }
< div className = "inline-flex items-center gap-2 bg-red-600 text-white px-6 py-3 rounded-full text-sm font-bold mb-6 shadow-lg animate-pulse" >
< Clock className = "w-5 h-5" / >
< span > Quedan 12 plazas de las 20 del programa piloto < / span >
< / div >
2025-08-28 10:41:04 +02:00
< h2 className = "text-3xl lg:text-5xl font-extrabold text-white" >
2025-10-17 18:14:28 +02:00
Sé de las Primeras 20 Panaderías
< span className = "block text-white/90 mt-2" > En Probar Esta Tecnología < / span >
2025-08-28 10:41:04 +02:00
< / h2 >
2025-10-17 18:14:28 +02:00
< p className = "mt-6 text-lg text-white/90 max-w-2xl mx-auto" >
No es para todo el mundo . Buscamos panaderías artesanales que quieran < strong > reducir desperdicios y aumentar ganancias < / strong >
con ayuda de IA , a cambio de feedback honesto .
2025-08-28 10:41:04 +02:00
< / p >
2025-10-17 18:14:28 +02:00
< div className = "mt-10 flex flex-col sm:flex-row gap-6 justify-center" >
< Link to = "/register?pilot=true" >
< Button
size = "lg"
className = "px-10 py-5 text-lg font-bold bg-white text-[var(--color-primary)] hover:bg-[var(--bg-tertiary)] shadow-2xl hover:shadow-3xl transform hover:scale-105 transition-all duration-200 rounded-xl"
2025-08-28 10:41:04 +02:00
>
2025-10-17 18:14:28 +02:00
Solicitar Plaza en el Piloto
< ArrowRight className = "ml-2 w-6 h-6" / >
2025-08-28 10:41:04 +02:00
< / Button >
< / Link >
2025-10-03 14:09:34 +02:00
< Link to = "/demo" >
< Button
size = "lg"
variant = "outline"
2025-10-17 18:14:28 +02:00
className = "px-10 py-5 text-lg font-semibold border-2 border-white text-white hover:bg-white hover:text-[var(--color-primary)] transition-all duration-200 rounded-xl"
2025-10-03 14:09:34 +02:00
>
< Play className = "mr-2 w-5 h-5" / >
2025-10-17 18:14:28 +02:00
Ver Cómo Funciona
2025-10-03 14:09:34 +02:00
< / Button >
< / Link >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
{ /* Social Proof Alternative - Loss Aversion */ }
< div className = "mt-12 bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20" >
< p className = "text-white/90 text-base mb-4" >
< strong > ¿ Por qué actuar ahora ? < / strong >
< / p >
< div className = "grid grid-cols-1 sm:grid-cols-3 gap-6 text-sm" >
< div className = "flex flex-col items-center" >
< Award className = "w-8 h-8 text-white mb-2" / >
< div className = "text-white font-semibold" > 40 % descuento de por vida < / div >
< div className = "text-white/70" > Solo primeros 20 < / div >
< / div >
< div className = "flex flex-col items-center" >
< Users className = "w-8 h-8 text-white mb-2" / >
< div className = "text-white font-semibold" > Influyes en el roadmap < / div >
< div className = "text-white/70" > Tus necesidades primero < / div >
< / div >
< div className = "flex flex-col items-center" >
< Zap className = "w-8 h-8 text-white mb-2" / >
< div className = "text-white font-semibold" > Soporte VIP < / div >
< div className = "text-white/70" > Acceso directo al equipo < / div >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-17 18:14:28 +02:00
{ /* Guarantee */ }
< div className = "mt-8 text-white/80 text-sm" >
< Shield className = "w-5 h-5 inline mr-2" / >
< span > Garantía : Cancelas en cualquier momento sin dar explicaciones < / span >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / section >
< / PublicLayout >
) ;
} ;
export default LandingPage ;
