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-18 16:03:23 +02:00
import { getRegisterUrl , getDemoUrl } from '../../utils/navigation' ;
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 ,
2025-10-23 07:44:54 +02:00
Network ,
Leaf ,
Droplets ,
TreeDeciduous ,
Target ,
CheckCircle2 ,
Sparkles ,
2025-10-30 21:08:07 +01:00
Recycle ,
MapPin ,
Globe
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' } ,
2025-10-30 21:08:07 +01:00
{ id : 'local' , label : t ( 'landing:navigation.local' , 'Datos Locales' ) , href : '#local' } ,
2025-09-25 12:14:46 +02:00
{ 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" / >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:hero.badge_sustainability' , 'Reducción de Desperdicio Alimentario' ) }
2025-10-03 14:09:34 +02:00
< / span >
2025-10-30 21:08:07 +01:00
< span className = "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-500/10 text-blue-600 dark:text-blue-400" >
< MapPin className = "w-4 h-4 mr-2" / >
{ t ( 'landing:hero.badge_local' , 'Datos Hiperlocales Españoles' ) }
< / 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 23:09:40 +02:00
{ t ( 'landing:hero.subtitle' , 'Plataforma de IA diseñada para panaderías 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" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:hero.pilot_banner.title' , '¡Lanzamiento Piloto!' ) }
2025-10-17 18:14:28 +02:00
< / 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" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:hero.pilot_banner.offer' , '3 MESES GRATIS' ) }
2025-10-17 18:14:28 +02:00
< / span >
< span className = "block mt-2 text-sm" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:hero.pilot_banner.description' , 'para los primeros en unirse al piloto' ) }
2025-10-17 18:14:28 +02:00
< / 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" >
2025-10-18 16:03:23 +02:00
< Link to = { getRegisterUrl ( ) } className = "w-full sm:w-auto" >
2025-10-17 18:14:28 +02:00
< 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-18 16:03:23 +02:00
< Link to = { getDemoUrl ( ) } 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 >
2025-10-30 21:08:07 +01:00
2025-08-28 10:41:04 +02:00
{ /* 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" / >
2025-10-19 19:22:37 +02:00
< span > { t ( 'landing:pilot.badge' , 'Programa Piloto - Plazas Limitadas' ) } < / span >
2025-10-17 18:14:28 +02:00
< / div >
< h2 className = "text-2xl font-bold text-[var(--text-primary)] mb-3" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:pilot.title' , 'Buscamos 20 Panaderías Pioneras' ) }
2025-10-17 18:14:28 +02:00
< / h2 >
2025-10-19 19:22:37 +02:00
< p className = "text-[var(--text-secondary)] max-w-2xl mx-auto" dangerouslySetInnerHTML = { { __html : t ( 'landing:pilot.subtitle' , '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>.' ) } } / >
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 >
2025-10-19 19:22:37 +02:00
< div className = "text-lg font-bold text-[var(--text-primary)]" > { t ( 'landing:pilot.benefits.founders_beta.title' , 'Founders Beta' ) } < / div >
< div className = "text-sm text-[var(--text-secondary)] mt-2" > { t ( 'landing:pilot.benefits.founders_beta.description' , 'Acceso de por vida con 20% descuento' ) } < / div >
2025-10-17 18:14:28 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< div className = "text-lg font-bold text-[var(--text-primary)]" > { t ( 'landing:pilot.benefits.influence_product.title' , 'Influye el Producto' ) } < / div >
< div className = "text-sm text-[var(--text-secondary)] mt-2" > { t ( 'landing:pilot.benefits.influence_product.description' , 'Tus necesidades moldean la plataforma' ) } < / div >
2025-10-17 18:14:28 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< div className = "text-lg font-bold text-[var(--text-primary)]" > { t ( 'landing:pilot.benefits.premium_support.title' , 'Soporte Premium' ) } < / div >
< div className = "text-sm text-[var(--text-secondary)] mt-2" > { t ( 'landing:pilot.benefits.premium_support.description' , 'Atención directa del equipo fundador' ) } < / div >
2025-10-17 18:14:28 +02:00
< / 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" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:business_models.title' , 'Tu Modelo de Negocio, Nuestra Tecnología' ) }
2025-10-17 18:14:28 +02:00
< / h2 >
< p className = "text-xl text-[var(--text-secondary)] max-w-3xl mx-auto" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:business_models.subtitle' , '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' ) }
2025-10-17 18:14:28 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< h3 className = "text-2xl font-bold text-[var(--text-primary)]" > { t ( 'landing:business_models.local_production.title' , 'Producción Local' ) } < / h3 >
< p className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:business_models.local_production.subtitle' , 'Un punto de venta y producción' ) } < / p >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
< p className = "text-[var(--text-secondary)] mb-6 leading-relaxed" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:business_models.local_production.description' , 'Tu panadería produce y vende en el mismo lugar. Necesitas optimizar producción diaria, minimizar desperdicios y maximizar frescura en cada horneada.' ) }
2025-10-17 18:14:28 +02:00
< / 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" / >
2025-10-19 19:22:37 +02:00
< span className = "text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:business_models.local_production.features.prediction' , '<strong>Predicción de demanda</strong> por ubicación única' ) } } / >
2025-10-17 18:14:28 +02:00
< / 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" / >
2025-10-19 19:22:37 +02:00
< span className = "text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:business_models.local_production.features.inventory' , '<strong>Gestión de inventario</strong> simplificada y directa' ) } } / >
2025-10-17 18:14:28 +02:00
< / 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" / >
2025-10-19 19:22:37 +02:00
< span className = "text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:business_models.local_production.features.control' , '<strong>Un solo punto de control</strong> - simple y eficiente' ) } } / >
2025-10-17 18:14:28 +02:00
< / 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" >
2025-11-01 21:35:03 +01:00
< Store className = "w-8 h-8 text-white" / >
2025-10-17 18:14:28 +02:00
< / div >
< div >
2025-11-01 21:35:03 +01:00
< h3 className = "text-2xl font-bold text-[var(--text-primary)]" > { t ( 'landing:business_models.central_workshop.title' , 'Panadería Franquiciada' ) } < / h3 >
< p className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:business_models.central_workshop.subtitle' , 'Punto de venta con obrador central' ) } < / p >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
< p className = "text-[var(--text-secondary)] mb-6 leading-relaxed" >
2025-11-01 21:35:03 +01:00
{ t ( 'landing:business_models.central_workshop.description' , 'Operas un punto de venta que recibe productos de un obrador central. Necesitas gestionar pedidos, inventario y ventas para optimizar tu operación retail.' ) }
2025-10-17 18:14:28 +02:00
< / 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" / >
2025-11-01 21:35:03 +01:00
< span className = "text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:business_models.central_workshop.features.prediction' , '<strong>Gestión de pedidos</strong> al obrador central' ) } } / >
2025-10-17 18:14:28 +02:00
< / 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" / >
2025-11-01 21:35:03 +01:00
< span className = "text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:business_models.central_workshop.features.distribution' , '<strong>Control de inventario</strong> de productos recibidos' ) } } / >
2025-10-17 18:14:28 +02:00
< / 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" / >
2025-11-01 21:35:03 +01:00
< span className = "text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:business_models.central_workshop.features.visibility' , '<strong>Previsión de ventas</strong> para tu punto' ) } } / >
2025-10-17 18:14:28 +02:00
< / 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" / >
2025-10-19 19:22:37 +02:00
< span className = "font-medium" > { t ( 'landing:business_models.same_ai' , '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" / >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:features.badge' , 'Tecnología de IA de Última Generación' ) }
2025-10-03 14:09:34 +02:00
< / 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-19 19:22:37 +02:00
{ t ( 'landing:features.title_main' , 'Combate el Desperdicio Alimentario' ) }
< span className = "block text-[var(--color-primary)]" > { t ( 'landing:features.title_accent' , '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-19 19:22:37 +02:00
{ t ( 'landing:features.subtitle' , '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 >
2025-10-21 19:50:07 +02:00
< div className = "mt-20 grid grid-cols-1 lg:grid-cols-2 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-19 19:22:37 +02:00
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > { t ( 'landing:features.ai_prediction.title' , 'IA Avanzada de Predicción' ) } < / h3 >
2025-08-28 10:41:04 +02:00
< p className = "mt-4 text-[var(--text-secondary)]" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:features.ai_prediction.description' , 'Algoritmos de Inteligencia Artificial 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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.ai_prediction.features.accuracy' , '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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.ai_prediction.features.learning' , '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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.ai_prediction.features.realtime' , 'Análisis predictivo en tiempo real' ) } < / span >
2025-10-03 14:09:34 +02:00
< / 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" >
2025-10-19 19:22:37 +02:00
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > { t ( 'landing:features.waste_reduction.title' , 'Reducción de Desperdicio' ) } < / h3 >
2025-10-03 14:09:34 +02:00
< p className = "mt-4 text-[var(--text-secondary)]" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:features.waste_reduction.description' , 'Contribuye al medioambiente y reduce costos eliminando hasta un 35% del desperdicio alimentario mediante producción optimizada e inteligente.' ) }
2025-10-03 14:09:34 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.waste_reduction.features.reduction' , 'Hasta 35% menos desperdicio' ) } < / span >
2025-10-03 14:09:34 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.waste_reduction.features.savings' , 'Ahorro promedio de €800/mes' ) } < / span >
2025-10-03 14:09:34 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.waste_reduction.features.eligible' , 'Elegible para ayudas UE' ) } < / span >
2025-10-03 14:09:34 +02:00
< / 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" >
2025-10-19 19:22:37 +02:00
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > { t ( 'landing:features.data_ownership.title' , 'Tus Datos, Tu Propiedad' ) } < / h3 >
2025-10-03 14:09:34 +02:00
< p className = "mt-4 text-[var(--text-secondary)]" >
2025-10-19 19:22:37 +02:00
{ t ( 'landing:features.data_ownership.description' , 'Privacidad y seguridad total. Tus datos operativos, proveedores y analíticas permanecen 100% bajo tu control. Nunca compartidos, nunca vendidos.' ) }
2025-10-03 14:09:34 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.data_ownership.features.ownership' , '100% propiedad de datos' ) } < / span >
2025-10-03 14:09:34 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.data_ownership.features.privacy' , 'Control total de privacidad' ) } < / span >
2025-10-03 14:09:34 +02:00
< / 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 >
2025-10-19 19:22:37 +02:00
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:features.data_ownership.features.gdpr' , 'Cumplimiento GDPR garantizado' ) } < / span >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
{ /* Smart Inventory */ }
2025-10-21 19:50:07 +02:00
< 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" >
2025-08-28 10:41:04 +02:00
< div className = "absolute -top-4 left-8" >
2025-10-21 19:50:07 +02:00
< 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" >
2025-08-28 10:41:04 +02:00
< Package className = "w-6 h-6 text-white" / >
< / div >
< / div >
< div className = "mt-6" >
2025-10-19 19:22:37 +02:00
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > { t ( 'landing:features.smart_inventory.title' , 'Inventario Inteligente' ) } < / h3 >
2025-08-28 10:41:04 +02:00
< p className = "mt-4 text-[var(--text-secondary)]" >
2025-10-21 19:50:07 +02:00
{ 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.' ) }
2025-08-28 10:41:04 +02:00
< / p >
2025-10-21 19:50:07 +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-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 >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-21 19:50:07 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-21 19:50:07 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
{ /* Production Planning */ }
2025-10-21 19:50:07 +02:00
< 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" >
2025-08-28 10:41:04 +02:00
< div className = "absolute -top-4 left-8" >
2025-10-21 19:50:07 +02:00
< 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" >
2025-08-28 10:41:04 +02:00
< Calendar className = "w-6 h-6 text-white" / >
< / div >
< / div >
< div className = "mt-6" >
2025-10-19 19:22:37 +02:00
< h3 className = "text-xl font-bold text-[var(--text-primary)]" > { t ( 'landing:features.production_planning.title' , 'Planificación de Producción' ) } < / h3 >
2025-08-28 10:41:04 +02:00
< p className = "mt-4 text-[var(--text-secondary)]" >
2025-10-21 19:50:07 +02:00
{ 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.' ) }
2025-08-28 10:41:04 +02:00
< / p >
2025-10-21 19:50:07 +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-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 >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-21 19:50:07 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-21 19:50:07 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
2025-10-21 19:50:07 +02:00
{ /* 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 >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-21 19:50:07 +02:00
< / div >
2025-08-28 10:41:04 +02:00
2025-10-21 19:50:07 +02:00
{ /* 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" >
< Euro className = "w-6 h-6 text-[var(--color-primary)]" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-19 19:22:37 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-21 19:50:07 +02:00
< 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" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-19 19:22:37 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-21 19:50:07 +02:00
< 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" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-19 19:22:37 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-21 19:50:07 +02:00
< 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 >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / section >
2025-10-30 21:08:07 +01:00
{ /* Hyper-Local Spanish Intelligence Section */ }
< section id = "local" className = "py-24 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center mb-16" >
< div className = "inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-full text-sm font-semibold mb-6" >
< MapPin className = "w-4 h-4" / >
{ t ( 'landing:local.badge' , 'Datos Hiperlocales Españoles' ) }
< / div >
< h2 className = "text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6" >
{ t ( 'landing:local.title_main' , 'Inteligencia Hiperlocal' ) }
< span className = "block text-[var(--color-primary)]" > { t ( 'landing:local.title_accent' , 'para España' ) } < / span >
< / h2 >
< p className = "text-lg text-[var(--text-secondary)] max-w-3xl mx-auto" >
{ t ( 'landing:local.subtitle' , 'Nuestra IA está entrenada con datos hiperlocales españoles: información meteorológica AEMET, datos históricos de tráfico congestionado, y eventos culturales específicos de cada región. Comenzamos en Madrid, pero estamos preparados para tu ciudad con la misma precisión local.' ) }
< / p >
< / div >
< div className = "grid md:grid-cols-3 gap-8 mb-16" >
{ /* Weather Data */ }
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-blue-200 dark:border-blue-800 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300" >
< div className = "w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 mx-auto" >
< Droplets className = "w-8 h-8 text-white" / >
< / div >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-4 text-center" > { t ( 'landing:local.weather.title' , 'Datos Meteorológicos AEMET' ) } < / h3 >
< p className = "text-[var(--text-secondary)] text-center mb-6" >
{ t ( 'landing:local.weather.description' , 'Precisión meteorológica local con datos AEMET para predicciones hiperlocales que entienden las microclimas de tu ciudad.' ) }
< / p >
< div className = "space-y-3" >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.weather.features.aemet' , 'Integración directa con AEMET' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.weather.features.microclimate' , 'Datos de microclima por ciudad' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.weather.features.local' , 'Adaptado a cada región española' ) } < / span >
< / div >
< / div >
< / div >
{ /* Traffic Data */ }
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-purple-200 dark:border-purple-800 hover:border-purple-40 dark:hover:border-purple-600 transition-all duration-300" >
< div className = "w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mb-6 mx-auto" >
< Globe className = "w-8 h-8 text-white" / >
< / div >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-4 text-center" > { t ( 'landing:local.traffic.title' , 'Datos de Tráfico Históricos' ) } < / h3 >
< p className = "text-[var(--text-secondary)] text-center mb-6" >
{ t ( 'landing:local.traffic.description' , 'Análisis de patrones de tráfico congestionado en ciudades españolas para entender mejor los flujos de clientes y demanda.' ) }
< / p >
< div className = "space-y-3" >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.traffic.features.historical' , 'Datos históricos de tráfico' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.traffic.features.patterns' , 'Patrones de movilidad por ciudad' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.traffic.features.local' , 'Adaptado a cada ciudad española' ) } < / span >
< / div >
< / div >
< / div >
{ /* Events Data */ }
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-amber-200 dark:border-amber-800 hover:border-amber-400 dark:hover:border-amber-600 transition-all duration-300" >
< div className = "w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 mx-auto" >
< Calendar className = "w-8 h-8 text-white" / >
< / div >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-4 text-center" > { t ( 'landing:local.events.title' , 'Eventos y Festividades' ) } < / h3 >
< p className = "text-[var(--text-secondary)] text-center mb-6" >
{ t ( 'landing:local.events.description' , 'Integración de festividades locales, nacionales y eventos culturales específicos de cada región para predicciones más precisas.' ) }
< / p >
< div className = "space-y-3" >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.events.features.local_holidays' , 'Festivos locales y autonómicos' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.events.features.cultural' , 'Eventos culturales regionales' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:local.events.features.scalable' , 'Listo para cualquier ciudad española' ) } < / span >
< / div >
< / div >
< / div >
< / div >
{ /* Spanish Cities Ready */ }
< div className = "bg-gradient-to-r from-[var(--color-primary)]/10 to-orange-500/10 rounded-2xl p-10 border-2 border-[var(--color-primary)]/30" >
< div className = "text-center" >
< h3 className = "text-2xl font-bold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:local.scalability.title' , 'Construido para España, Listo para Tu Ciudad' ) }
< / h3 >
< p className = "text-[var(--text-secondary)] max-w-3xl mx-auto mb-6" >
{ t ( 'landing:local.scalability.description' , 'Aunque comenzamos en Madrid, nuestra arquitectura está diseñada para escalar a cualquier ciudad española manteniendo la misma precisión hiperlocal.' ) }
< / p >
< div className = "flex flex-wrap justify-center gap-6 text-sm" >
< div className = "flex items-center gap-2" >
< MapPin className = "w-5 h-5 text-[var(--color-primary)]" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:local.scalability.madrid' , 'Madrid (Lanzamiento)' ) } < / span >
< / div >
< div className = "flex items-center gap-2" >
< MapPin className = "w-5 h-5 text-[var(--color-success)]" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:local.scalability.scalable' , 'Listo para otras ciudades' ) } < / span >
< / div >
< div className = "flex items-center gap-2" >
< Globe className = "w-5 h-5 text-blue-600" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:local.scalability.national' , 'Arquitectura nacional' ) } < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
2025-10-23 07:44:54 +02:00
{ /* Sustainability & SDG Compliance Section */ }
< section className = "py-24 bg-gradient-to-b from-green-50 to-white dark:from-green-950/20 dark:to-[var(--bg-secondary)]" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center mb-16" >
< div className = "inline-flex items-center gap-2 px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-sm font-semibold mb-6" >
< Leaf className = "w-4 h-4" / >
{ t ( 'landing:sustainability.badge' , 'UN SDG 12.3 & EU Green Deal Aligned' ) }
< / div >
< h2 className = "text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]" >
{ t ( 'landing:sustainability.title_main' , 'Not Just Reduce Waste' ) }
< span className = "block text-transparent bg-clip-text bg-gradient-to-r from-green-600 to-emerald-600 mt-2" >
{ t ( 'landing:sustainability.title_accent' , 'Prove It to the World' ) }
< / span >
< / h2 >
< p className = "mt-6 text-lg text-[var(--text-secondary)] max-w-3xl mx-auto" >
{ t ( 'landing:sustainability.subtitle' , 'The only AI platform with built-in UN SDG 12.3 compliance tracking. Reduce waste, save money, and qualify for EU sustainability grants—all with verifiable environmental impact metrics.' ) }
< / p >
< / div >
{ /* Environmental Impact Cards */ }
< div className = "grid md:grid-cols-3 gap-8 mb-16" >
{ /* CO2 Savings */ }
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-green-200 dark:border-green-900/50 hover:border-green-400 dark:hover:border-green-600 transition-all duration-300" >
< div className = "w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 mx-auto" >
< TreeDeciduous className = "w-8 h-8 text-white" / >
< / div >
< div className = "text-center" >
2025-10-30 21:08:07 +01:00
< div className = "text-4xl font-bold text-green-600 dark:text-green-400 mb-2" > 85 kg < / div >
2025-10-23 07:44:54 +02:00
< div className = "text-sm font-semibold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.metrics.co2_avoided' , 'CO₂ Avoided Monthly' ) } < / div >
< div className = "text-xs text-[var(--text-secondary)]" > { t ( 'landing:sustainability.metrics.co2_equivalent' , 'Equivalent to 43 trees planted' ) } < / div >
< / div >
< / div >
{ /* Water Savings */ }
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-blue-200 dark:border-blue-900/50 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300" >
< div className = "w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 mx-auto" >
< Droplets className = "w-8 h-8 text-white" / >
< / div >
< div className = "text-center" >
< div className = "text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2" > 675 k L < / div >
< div className = "text-sm font-semibold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.metrics.water_saved' , 'Water Saved Monthly' ) } < / div >
< div className = "text-xs text-[var(--text-secondary)]" > { t ( 'landing:sustainability.metrics.water_equivalent' , 'Equivalent to 4,500 showers' ) } < / div >
< / div >
< / div >
{ /* Grant Eligibility */ }
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border-2 border-amber-200 dark:border-amber-900/50 hover:border-amber-400 dark:hover:border-amber-600 transition-all duration-300" >
< div className = "w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 mx-auto" >
< Award className = "w-8 h-8 text-white" / >
< / div >
< div className = "text-center" >
< div className = "text-4xl font-bold text-amber-600 dark:text-amber-400 mb-2" > 3 + < / div >
< div className = "text-sm font-semibold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.metrics.grants_eligible' , 'Grant Programs Eligible' ) } < / div >
< div className = "text-xs text-[var(--text-secondary)]" > { t ( 'landing:sustainability.metrics.grants_value' , 'Up to €50,000 in funding' ) } < / div >
< / div >
< / div >
< / div >
{ /* SDG Progress Visualization */ }
< div className = "bg-gradient-to-r from-green-500/10 to-emerald-500/10 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-10 border border-green-300 dark:border-green-800" >
< div className = "flex flex-col lg:flex-row items-center gap-8" >
< div className = "flex-1" >
< div className = "flex items-center gap-3 mb-4" >
< div className = "w-12 h-12 bg-green-600 rounded-xl flex items-center justify-center" >
< Target className = "w-6 h-6 text-white" / >
< / div >
< div >
< h3 className = "text-2xl font-bold text-[var(--text-primary)]" > { t ( 'landing:sustainability.sdg.title' , 'UN SDG 12.3 Compliance' ) } < / h3 >
< p className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:sustainability.sdg.subtitle' , 'Halve food waste by 2030' ) } < / p >
< / div >
< / div >
< p className = "text-[var(--text-secondary)] mb-6" >
{ t ( 'landing:sustainability.sdg.description' , 'Real-time tracking toward the UN Sustainable Development Goal 12.3 target. Our AI helps you achieve 50% waste reduction with verifiable, auditable data for grant applications and certifications.' ) }
< / p >
< div className = "space-y-4" >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:sustainability.sdg.features.tracking' , 'Automated waste baseline and progress tracking' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:sustainability.sdg.features.export' , 'One-click grant application report export' ) } < / span >
< / div >
< div className = "flex items-center gap-3" >
< CheckCircle2 className = "w-5 h-5 text-green-600 flex-shrink-0" / >
< span className = "text-sm text-[var(--text-secondary)]" > { t ( 'landing:sustainability.sdg.features.certification' , 'Certification-ready environmental impact data' ) } < / span >
< / div >
< / div >
< / div >
< div className = "flex-1 w-full" >
2025-10-30 21:08:07 +01:00
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 shadow-lg" >
< div className = "flex justify-between items-center mb-3" >
< span className = "text-sm font-semibold text-[var(--text-primary)]" > { t ( 'landing:sustainability.sdg.progress_label' , 'Progress to Target' ) } < / span >
2025-10-23 07:44:54 +02:00
< span className = "text-2xl font-bold text-green-600" > 65 % < / span >
2025-10-30 21:08:07 +01:00
< / div >
< div className = "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden" >
< div className = "bg-gradient-to-r from-green-500 to-emerald-500 h-6 rounded-full flex items-center justify-end pr-3" style = { { width : '65%' } } >
< TrendingUp className = "w-4 h-4 text-white" / >
2025-10-23 07:44:54 +02:00
< / div >
2025-10-30 21:08:07 +01:00
< / div >
< div className = "mt-4 grid grid-cols-3 gap-4 text-center" >
< div >
< div className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.sdg.baseline' , 'Baseline' ) } < / div >
< div className = "text-lg font-bold text-[var(--text-primary)]" > 25 % < / div >
2025-10-23 07:44:54 +02:00
< / div >
2025-10-30 21:08:07 +01:00
< div >
< div className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.sdg.current' , 'Current' ) } < / div >
2025-10-23 07:44:54 +02:00
< div className = "text-lg font-bold text-green-600" > 16.25 % < / div >
2025-10-30 21:08:07 +01:00
< / div >
< div >
< div className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.sdg.target' , 'Target 2030' ) } < / div >
< div className = "text-lg font-bold text-[var(--text-primary)]" > 12.5 % < / div >
2025-10-23 07:44:54 +02:00
< / div >
< / div >
< / div >
< / div >
< / div >
2025-10-30 21:08:07 +01:00
< / div >
2025-10-23 07:44:54 +02:00
{ /* Grant Programs Grid */ }
2025-10-24 13:05:04 +02:00
< div className = "mt-16 grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6" >
{ /* LIFE Programme */ }
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center" >
< div className = "w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mx-auto mb-4" >
< Recycle className = "w-6 h-6 text-purple-600" / >
< / div >
< h4 className = "font-bold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.grants.life_circular_economy' , 'LIFE Programme' ) } < / h4 >
< p className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.grants.life_circular_economy_req' , 'Requires 15% reduction' ) } < / p >
< p className = "text-xs font-semibold text-purple-600 dark:text-purple-400 mb-2" > { t ( 'landing:sustainability.grants.life_circular_economy_funding' , '€73M available' ) } < / p >
< div className = "inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold" >
< CheckCircle2 className = "w-3 h-3" / >
{ t ( 'landing:sustainability.grants.eligible' , 'Eligible' ) }
< / div >
< / div >
{ /* Horizon Europe */ }
2025-10-23 07:44:54 +02:00
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center" >
< div className = "w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mx-auto mb-4" >
< Award className = "w-6 h-6 text-blue-600" / >
< / div >
2025-10-24 13:05:04 +02:00
< h4 className = "font-bold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.grants.horizon_europe_cluster_6' , 'Horizon Europe' ) } < / h4 >
< p className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.grants.horizon_europe_cluster_6_req' , 'Requires 20% reduction' ) } < / p >
< p className = "text-xs font-semibold text-blue-600 dark:text-blue-400 mb-2" > { t ( 'landing:sustainability.grants.horizon_europe_cluster_6_funding' , '€880M+ annually' ) } < / p >
2025-10-23 07:44:54 +02:00
< div className = "inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold" >
< CheckCircle2 className = "w-3 h-3" / >
{ t ( 'landing:sustainability.grants.eligible' , 'Eligible' ) }
< / div >
< / div >
2025-10-24 13:05:04 +02:00
{ /* Fedima Grant */ }
2025-10-23 07:44:54 +02:00
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center" >
2025-10-24 13:05:04 +02:00
< div className = "w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center mx-auto mb-4" >
< Leaf className = "w-6 h-6 text-orange-600" / >
2025-10-23 07:44:54 +02:00
< / div >
2025-10-24 13:05:04 +02:00
< h4 className = "font-bold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.grants.fedima_sustainability_grant' , 'Fedima Grant' ) } < / h4 >
< p className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.grants.fedima_sustainability_grant_req' , 'Requires 15% reduction' ) } < / p >
< p className = "text-xs font-semibold text-orange-600 dark:text-orange-400 mb-2" > { t ( 'landing:sustainability.grants.fedima_sustainability_grant_funding' , '€20,000 per award' ) } < / p >
2025-10-23 07:44:54 +02:00
< div className = "inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold" >
< CheckCircle2 className = "w-3 h-3" / >
{ t ( 'landing:sustainability.grants.eligible' , 'Eligible' ) }
< / div >
< / div >
2025-10-24 13:05:04 +02:00
{ /* EIT Food */ }
2025-10-23 07:44:54 +02:00
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-green-500 transition-all duration-300 text-center" >
2025-10-24 13:05:04 +02:00
< div className = "w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mx-auto mb-4" >
< Leaf className = "w-6 h-6 text-green-600" / >
2025-10-23 07:44:54 +02:00
< / div >
2025-10-24 13:05:04 +02:00
< h4 className = "font-bold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.grants.eit_food_retail' , 'EIT Food' ) } < / h4 >
< p className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.grants.eit_food_retail_req' , 'Requires 20% reduction' ) } < / p >
< p className = "text-xs font-semibold text-green-600 dark:text-green-400 mb-2" > { t ( 'landing:sustainability.grants.eit_food_retail_funding' , '€15-45k per project' ) } < / p >
2025-10-23 07:44:54 +02:00
< div className = "inline-flex items-center gap-1 px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold" >
< CheckCircle2 className = "w-3 h-3" / >
{ t ( 'landing:sustainability.grants.eligible' , 'Eligible' ) }
< / div >
< / div >
2025-10-24 13:05:04 +02:00
{ /* UN SDG Certification */ }
2025-10-23 07:44:54 +02:00
< div className = "bg-white dark:bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)] hover:border-amber-500 transition-all duration-300 text-center" >
< div className = "w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center mx-auto mb-4" >
< Target className = "w-6 h-6 text-amber-600" / >
< / div >
2025-10-24 13:05:04 +02:00
< h4 className = "font-bold text-[var(--text-primary)] mb-2" > { t ( 'landing:sustainability.grants.un_sdg' , 'UN SDG 12.3' ) } < / h4 >
< p className = "text-xs text-[var(--text-secondary)] mb-1" > { t ( 'landing:sustainability.grants.un_sdg_req' , 'Requires 50% reduction' ) } < / p >
< p className = "text-xs font-semibold text-amber-600 dark:text-amber-400 mb-2" > Certification < / p >
2025-10-23 07:44:54 +02:00
< div className = "inline-flex items-center gap-1 px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-semibold" >
< TrendingUp className = "w-3 h-3" / >
{ t ( 'landing:sustainability.grants.on_track' , 'On Track' ) }
< / div >
< / div >
< / div >
{ /* Unique Differentiator Callout */ }
< div className = "mt-16 text-center" >
< div className = "inline-flex flex-col items-center gap-4 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-2xl px-12 py-8" >
< Sparkles className = "w-12 h-12" / >
< h3 className = "text-2xl font-bold" > { t ( 'landing:sustainability.differentiator.title' , 'The Only AI Platform' ) } < / h3 >
< p className = "text-lg max-w-2xl" > { t ( 'landing:sustainability.differentiator.description' , 'With built-in UN SDG 12.3 tracking, real-time environmental impact calculations, and one-click grant application exports. Not just reduce waste—prove it.' ) } < / p >
< / div >
< / div >
< / div >
< / section >
2025-10-30 21:08:07 +01:00
{ /* Benefits Section - Problem/Solution Focus */ }
< 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 = "text-center mb-16" >
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]" >
{ t ( 'landing:benefits.title' , 'El Problema Que Resolvemos' ) }
< span className = "block text-[var(--color-primary)]" > { t ( 'landing:benefits.title_accent' , 'Para Panaderías' ) } < / span >
< / h2 >
< p className = "mt-6 text-lg text-[var(--text-secondary)] max-w-3xl mx-auto" >
{ t ( 'landing:benefits.subtitle' , '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-30 21:08:07 +01: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 >
< / div >
< div >
< h4 className = "text-lg font-bold text-red-700 dark:text-red-400 mb-2" > { t ( 'landing:benefits.problems.waste.title' , 'Desperdicias entre 15-40% de producción' ) } < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
{ t ( 'landing:benefits.problems.waste.description' , 'Al final del día tiras producto que nadie compró. Son cientos de euros a la basura cada semana.' ) }
< / p >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-30 21:08:07 +01: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 >
< / div >
< div >
2025-10-19 19:22:37 +02:00
< h4 className = "text-lg font-bold text-red-700 dark:text-red-400 mb-2" > { t ( 'landing:benefits.problems.stockouts.title' , 'Pierdes ventas por falta de stock' ) } < / h4 >
2025-10-30 21:08:07 +01:00
< p className = "text-[var(--text-secondary)] text-sm" >
{ t ( 'landing:benefits.problems.stockouts.description' , 'Clientes que vienen por su pan favorito y se van sin comprar porque ya se te acabó a las 14:00.' ) }
< / p >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-30 21:08:07 +01: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 >
< / div >
< div >
< h4 className = "text-lg font-bold text-red-700 dark:text-red-400 mb-2" > { t ( 'landing:benefits.problems.manual.title' , 'Excel, papel y "experiencia"' ) } < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
{ t ( 'landing:benefits.problems.manual.description' , 'Planificas basándote en intuición. Funciona... hasta que no funciona.' ) }
< / p >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
2025-10-30 21:08:07 +01: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" / >
< / div >
< div >
< h4 className = "text-lg font-bold text-green-700 dark:text-green-400 mb-2" > { t ( 'landing:benefits.solutions.exact_production.title' , 'Produce exactamente lo que vas a vender' ) } < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
{ t ( 'landing:benefits.solutions.exact_production.description' , 'La IA analiza tus ventas históricas, clima, eventos locales y festivos para predecir demanda real.' ) }
< / p >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-10-30 21:08:07 +01:00
< 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" >
2025-10-17 18:14:28 +02:00
< div className = "w-10 h-10 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0" >
2025-10-30 21:08:07 +01:00
< Check className = "text-white w-6 h-6" / >
< / div >
< div >
2025-10-19 19:22:37 +02:00
< h4 className = "text-lg font-bold text-green-700 dark:text-green-400 mb-2" > { t ( 'landing:benefits.solutions.stock_availability.title' , 'Siempre tienes stock de lo que más se vende' ) } < / h4 >
2025-10-30 21:08:07 +01:00
< p className = "text-[var(--text-secondary)] text-sm" >
{ t ( 'landing:benefits.solutions.stock_availability.description' , 'El sistema te avisa qué productos van a tener más demanda cada día, para que nunca te quedes sin.' ) }
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
2025-10-30 21:08:07 +01:00
< 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" >
2025-10-17 18:14:28 +02:00
< div className = "w-10 h-10 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0" >
2025-10-30 21:08:07 +01:00
< 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" > { t ( 'landing:benefits.solutions.smart_automation.title' , 'Automatización inteligente + datos reales' ) } < / h4 >
< p className = "text-[var(--text-secondary)] text-sm" >
{ t ( 'landing:benefits.solutions.smart_automation.description' , 'Desde planificación de producción hasta gestión de inventario. Todo basado en matemáticas, no corazonadas.' ) }
< / p >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
2025-10-17 18:14:28 +02:00
2025-10-30 21:08:07 +01: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" >
{ t ( 'landing:benefits.value_proposition.title' , 'El Objetivo: Que Ahorres Dinero Desde el Primer Mes' ) }
< / h3 >
< p className = "text-[var(--text-secondary)] max-w-3xl mx-auto mb-6" dangerouslySetInnerHTML = { { __html : t ( 'landing:benefits.value_proposition.description' , '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>.' ) } } / >
< 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)]" > { t ( 'landing:benefits.value_proposition.points.waste' , '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)]" > { t ( 'landing:benefits.value_proposition.points.time' , '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)]" > { t ( 'landing:benefits.value_proposition.points.data' , 'Tus datos siempre son tuyos' ) } < / span >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
< / div >
< / div >
2025-10-30 21:08:07 +01:00
< / section >
{ /* Risk Reversal & Transparency 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 mb-16" >
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]" >
{ t ( 'landing:risk_reversal.title' , 'Sin Riesgo. Sin Ataduras.' ) }
< / h2 >
< p className = "mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]" >
{ t ( 'landing:risk_reversal.subtitle' , 'Somos transparentes: esto es un piloto. Estamos construyendo la mejor herramienta para panaderías, y necesitamos tu ayuda.' ) }
< / p >
2025-10-17 18:14:28 +02:00
< / div >
2025-10-30 21:08:07 +01: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" / >
< / div >
{ t ( 'landing:risk_reversal.what_you_get.title' , '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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_you_get.free_trial' , '<strong>3 meses completamente gratis</strong> para probar todas las funcionalidades' ) } } / >
< / 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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_you_get.lifetime_discount' , '<strong>20% de descuento de por vida</strong> si decides continuar después del piloto' ) } } / >
< / 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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_you_get.founder_support' , '<strong>Soporte directo del equipo fundador</strong> - respondemos en horas, no días' ) } } / >
< / 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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_you_get.priority_features' , '<strong>Tus ideas se implementan primero</strong> - construimos lo que realmente necesitas' ) } } / >
< / 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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_you_get.cancel_anytime' , '<strong>Cancelas cuando quieras</strong> sin explicaciones ni penalizaciones' ) } } / >
< / 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" >
2025-10-17 18:14:28 +02:00
< div className = "w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center" >
2025-10-30 21:08:07 +01:00
< Users className = "w-6 h-6 text-white" / >
< / div >
{ t ( 'landing:risk_reversal.what_we_ask.title' , '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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_we_ask.feedback' , '<strong>Feedback honesto semanal</strong> (15 min) sobre qué funciona y qué no' ) } } / >
< / 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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_we_ask.patience' , '<strong>Paciencia con bugs</strong> - estamos en fase beta, habrá imperfecciones' ) } } / >
< / 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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_we_ask.data' , '<strong>Datos de ventas históricos</strong> (opcional) para mejorar las predicciones' ) } } / >
< / 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)]" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.what_we_ask.communication' , '<strong>Comunicación abierta</strong> - queremos saber si algo no te gusta' ) } } / >
< / 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" dangerouslySetInnerHTML = { { __html : t ( 'landing:risk_reversal.promise' , '<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.' ) } } / >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
2025-10-30 21:08:07 +01: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" >
{ t ( 'landing:risk_reversal.credibility.title' , '¿Por Qué Confiar en Nosotros?' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:risk_reversal.credibility.subtitle' , 'Entendemos que probar nueva tecnología es un riesgo. Por eso somos completamente transparentes:' ) }
2025-10-17 18:14:28 +02:00
< / p >
< / div >
2025-10-30 21:08:07 +01: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" / >
< / div >
< h4 className = "font-semibold text-[var(--text-primary)] mb-2" > { t ( 'landing:risk_reversal.credibility.spanish.title' , '100% Española' ) } < / h4 >
< p className = "text-sm text-[var(--text-secondary)]" >
{ t ( 'landing:risk_reversal.credibility.spanish.description' , 'Empresa registrada en España. Tus datos están protegidos por RGPD y nunca salen de la UE.' ) }
< / p >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-30 21:08:07 +01:00
< 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" / >
< / div >
< h4 className = "font-semibold text-[var(--text-primary)] mb-2" > { t ( 'landing:risk_reversal.credibility.technology.title' , 'Tecnología Probada' ) } < / h4 >
< p className = "text-sm text-[var(--text-secondary)]" >
{ t ( 'landing:risk_reversal.credibility.technology.description' , 'Usamos algoritmos de IA validados académicamente, adaptados específicamente para panaderías.' ) }
< / p >
< / div >
< 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" > { t ( 'landing:risk_reversal.credibility.team.title' , 'Equipo Experto' ) } < / h4 >
< p className = "text-sm text-[var(--text-secondary)]" >
{ t ( 'landing:risk_reversal.credibility.team.description' , 'Fundadores con experiencia en proyectos de alto valor tecnológico + proyectos internacionales.' ) }
< / p >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-30 21:08:07 +01:00
< / section >
2025-08-28 10:41:04 +02:00
2025-10-30 21:08:07 +01:00
{ /* Pricing Section */ }
< section id = "pricing" >
< PricingSection / >
< / section >
2025-08-28 10:41:04 +02:00
2025-10-30 21:08:07 +01:00
{ /* FAQ Section */ }
< section id = "faq" 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)]" >
{ t ( 'landing:faq.title' , 'Preguntas Frecuentes' ) }
< / h2 >
< p className = "mt-4 text-lg text-[var(--text-secondary)]" >
{ t ( 'landing:faq.subtitle' , 'Todo lo que necesitas saber sobre Panadería IA' ) }
2025-08-28 10:41:04 +02:00
< / p >
< / div >
2025-10-30 21:08:07 +01:00
< 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)]" >
{ t ( 'landing:faq.questions.accuracy.q' , '¿Qué tan precisa es la predicción de demanda?' ) }
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
{ t ( 'landing:faq.questions.accuracy.a' , '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 >
2025-08-28 10:41:04 +02:00
2025-10-30 21:08:07 +01:00
< 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)]" >
{ t ( 'landing:faq.questions.implementation.q' , '¿Cuánto tiempo toma implementar el sistema?' ) }
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
{ t ( 'landing:faq.questions.implementation.a' , '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 >
2025-08-28 10:41:04 +02:00
2025-10-30 21:08:07 +01:00
< 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)]" >
{ t ( 'landing:faq.questions.integration.q' , '¿Se integra con mi sistema POS actual?' ) }
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
{ t ( 'landing:faq.questions.integration.a' , '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 >
2025-08-28 10:41:04 +02:00
2025-10-30 21:08:07 +01:00
< 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)]" >
{ t ( 'landing:faq.questions.support.q' , '¿Qué soporte técnico ofrecen?' ) }
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
{ t ( 'landing:faq.questions.support.a' , '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)]" >
{ t ( 'landing:faq.questions.security.q' , '¿Mis datos están seguros?' ) }
< / h3 >
< p className = "mt-4 text-[var(--text-secondary)]" >
{ t ( 'landing:faq.questions.security.a' , '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 >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
2025-10-30 21:08:07 +01:00
< / section >
2025-10-17 18:14:28 +02:00
2025-10-30 21:08:07 +01:00
{ /* Final CTA Section - With Urgency & Scarcity */ }
< 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 >
2025-10-17 18:14:28 +02:00
< / div >
2025-10-30 21:08:07 +01:00
< div className = "max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 relative" >
{ /* 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 > { t ( 'landing:final_cta.scarcity_badge' , 'Quedan 12 plazas de las 20 del programa piloto' ) } < / span >
< / div >
< h2 className = "text-3xl lg:text-5xl font-extrabold text-white" >
{ t ( 'landing:final_cta.title' , 'Sé de las Primeras 20 Panaderías' ) }
< span className = "block text-white/90 mt-2" > { t ( 'landing:final_cta.title_accent' , 'En Probar Esta Tecnología' ) } < / span >
< / h2 >
< p className = "mt-6 text-lg text-white/90 max-w-2xl mx-auto" dangerouslySetInnerHTML = { { __html : t ( 'landing:final_cta.subtitle' , 'No es para todo el mundo. Buscamos panaderías que quieran <strong>reducir desperdicios y aumentar ganancias</strong> con ayuda de IA, a cambio de feedback honesto.' ) } } / >
2025-10-17 18:14:28 +02:00
< div className = "mt-10 flex flex-col sm:flex-row gap-6 justify-center" >
2025-10-30 21:08:07 +01:00
< Link to = { getRegisterUrl ( ) } 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:final_cta.cta_primary' , 'Solicitar Plaza en el Piloto' ) }
< ArrowRight className = "w-6 h-6 group-hover:translate-x-1 transition-transform duration-200" / >
< / span >
< / Button >
< / Link >
< Link to = { getDemoUrl ( ) } className = "w-full sm:w-auto" >
< Button
variant = "outline"
size = "lg"
2025-10-17 23:09:40 +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-30 21:08:07 +01: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 >
< / Button >
< / Link >
< / div >
2025-10-17 18:14:28 +02:00
2025-10-30 21:08:07 +01: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 > { t ( 'landing:final_cta.why_now.title' , '¿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" > { t ( 'landing:final_cta.why_now.lifetime_discount.title' , '20% descuento de por vida' ) } < / div >
< div className = "text-white/70" > { t ( 'landing:final_cta.why_now.lifetime_discount.subtitle' , '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" > { t ( 'landing:final_cta.why_now.influence.title' , 'Influyes en el roadmap' ) } < / div >
< div className = "text-white/70" > { t ( 'landing:final_cta.why_now.influence.subtitle' , '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" > { t ( 'landing:final_cta.why_now.vip_support.title' , 'Soporte VIP' ) } < / div >
< div className = "text-white/70" > { t ( 'landing:final_cta.why_now.vip_support.subtitle' , 'Acceso directo al equipo' ) } < / div >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
2025-10-30 21:08:07 +01:00
{ /* Guarantee */ }
< div className = "mt-8 text-white/80 text-sm" >
< Shield className = "w-5 h-5 inline mr-2" / >
< span > { t ( 'landing:final_cta.guarantee' , 'Garantía: Cancelas en cualquier momento sin dar explicaciones' ) } < / span >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-10-30 21:08:07 +01:00
< / section >
2025-08-28 10:41:04 +02:00
2025-10-30 21:08:07 +01:00
< / PublicLayout >
) ;
} ;
2025-08-28 10:41:04 +02:00
2025-10-30 21:08:07 +01:00
export default LandingPage ;
