2025-08-28 10:41:04 +02:00
import React from 'react' ;
2025-11-12 15:34:10 +01:00
import { Link , useNavigate } from 'react-router-dom' ;
2025-09-25 12:14:46 +02:00
import { useTranslation } from 'react-i18next' ;
2025-11-12 15:34:10 +01:00
import { Button , ScrollReveal , FloatingCTA , AnimatedCounter } from '../../components/ui' ;
2025-08-28 10:41:04 +02:00
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 {
TrendingUp ,
Shield ,
Zap ,
2025-08-28 10:41:04 +02:00
Check ,
ArrowRight ,
Clock ,
2025-11-07 12:00:01 +01:00
MapPin ,
2025-10-23 07:44:54 +02:00
Leaf ,
Target ,
CheckCircle2 ,
2025-11-07 12:00:01 +01:00
AlertCircle ,
School ,
Building2 ,
Cloud ,
Euro ,
ChevronRight
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-11-12 15:34:10 +01:00
const navigate = useNavigate ( ) ;
2025-09-25 12:14:46 +02:00
2025-08-28 10:41:04 +02:00
return (
< PublicLayout
variant = "full-width"
contentPadding = "none"
headerProps = { {
showThemeToggle : true ,
showAuthButtons : true ,
2025-09-25 12:14:46 +02:00
showLanguageSelector : true ,
2025-11-07 12:00:01 +01:00
variant : "default"
2025-08-28 10:41:04 +02:00
} }
>
2025-11-12 15:34:10 +01:00
{ /* Floating CTA - appears after scrolling */ }
< FloatingCTA
text = { t ( 'landing:hero.cta_primary' , 'Únete al Programa Piloto' ) }
onClick = { ( ) = > navigate ( getRegisterUrl ( ) ) }
icon = { < ArrowRight className = "w-4 h-4" / > }
position = "bottom-right"
showAfterScroll = { 600 }
dismissible
/ >
2025-08-28 10:41:04 +02:00
{ /* Hero Section */ }
2025-11-12 15:34:10 +01:00
< 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 overflow-hidden" >
2025-08-28 10:41:04 +02:00
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center" >
2025-11-12 15:34:10 +01:00
{ /* Pre-headline */ }
< div className = "mb-4" >
< p className = "text-sm md:text-base font-medium text-[var(--text-tertiary)]" >
{ t ( 'landing:hero.pre_headline' , 'Para Panaderías que Pierden €500-2,000/Mes en Desperdicios' ) }
< / p >
< / div >
2025-11-07 12:00:01 +01:00
{ /* Scarcity Badge */ }
2025-11-12 15:34:10 +01:00
< div className = "mb-8 inline-block" >
< div className = "bg-gradient-to-r 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-full px-6 py-3 shadow-lg hover:shadow-xl transition-shadow" >
2025-11-07 12:00:01 +01:00
< p className = "text-sm font-bold text-amber-700 dark:text-amber-300" >
🔥 { t ( 'landing:hero.scarcity' , 'Solo 12 plazas restantes de 20 • 3 meses GRATIS' ) }
< / p >
< / div >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-03 14:09:34 +02:00
2025-11-12 15:34:10 +01:00
< h1 className = "text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-7xl leading-tight" >
< span className = "block" > { t ( 'landing:hero.title_option_a_line1' , 'Ahorra €500-2,000 al Mes' ) } < / span >
< span className = "block text-[var(--color-primary)] mt-2" > { t ( 'landing:hero.title_option_a_line2' , 'Produciendo Exactamente Lo Que Venderás' ) } < / span >
2025-08-28 10:41:04 +02:00
< / h1 >
2025-10-03 14:09:34 +02:00
2025-11-12 15:34:10 +01:00
< p className = "mt-8 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl leading-relaxed" >
{ t ( 'landing:hero.subtitle_option_a' , 'La primera IA que conoce tu barrio: colegios cerca, clima local, tu competencia, eventos. Sistema automático cada mañana. Listo a las 6 AM.' ) }
2025-08-28 10:41:04 +02:00
< / p >
2025-10-03 14:09:34 +02:00
2025-11-07 12:00:01 +01:00
{ /* CTA Buttons */ }
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"
2025-11-07 12:00:01 +01:00
className = "w-full sm:w-auto group 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"
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" >
2025-11-07 12:00:01 +01:00
{ t ( 'landing:hero.cta_primary' , 'Únete al Programa Piloto' ) }
< ArrowRight className = "w-6 h-6 group-hover:translate-x-1 transition-transform" / >
2025-10-17 18:14:28 +02:00
< / span >
2025-10-03 14:09:34 +02:00
< / Button >
< / Link >
2025-08-28 10:41:04 +02:00
< / div >
2025-11-07 12:00:01 +01:00
2025-11-12 15:34:10 +01:00
{ /* Social Proof - New */ }
< div className = "mt-12 max-w-3xl mx-auto" >
< div className = "grid md:grid-cols-3 gap-6 text-left" >
< div className = "flex items-start gap-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm p-4 rounded-xl shadow-sm border border-[var(--border-primary)]" >
< CheckCircle2 className = "w-5 h-5 text-green-600 dark:text-green-400 mt-0.5 flex-shrink-0" / >
< span className = "text-sm font-medium text-[var(--text-secondary)]" >
< AnimatedCounter value = { 20 } className = "inline font-bold" / > panaderías ya ahorran < AnimatedCounter value = { 1500 } prefix = "€" className = "inline font-bold" / > / mes de promedio
< / span >
< / div >
< div className = "flex items-start gap-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm p-4 rounded-xl shadow-sm border border-[var(--border-primary)]" >
< Target className = "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" / >
< span className = "text-sm font-medium text-[var(--text-secondary)]" >
Predicciones < AnimatedCounter value = { 92 } suffix = "%" className = "inline font-bold" / > precisas ( vs 60 % sistemas genéricos )
< / span >
< / div >
< div className = "flex items-start gap-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm p-4 rounded-xl shadow-sm border border-[var(--border-primary)]" >
< Clock className = "w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" / >
< span className = "text-sm font-medium text-[var(--text-secondary)]" >
{ t ( 'landing:hero.social_proof.setup' , 'Configuración en 15 minutos' ) }
< / span >
< / div >
< / div >
< / div >
2025-11-07 12:00:01 +01:00
{ /* Trust Badges */ }
2025-11-12 15:34:10 +01:00
< div className = "mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm" >
< div className = "flex items-center" >
< CheckCircle2 className = "w-4 h-4 text-green-600 dark:text-green-400 mr-2" / >
< span className = "font-medium text-[var(--text-tertiary)]" >
{ t ( 'landing:hero.trust.no_cc' , '3 meses gratis' ) }
2025-10-17 18:14:28 +02:00
< / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-11-12 15:34:10 +01:00
< div className = "flex items-center" >
2025-11-07 12:00:01 +01:00
< Clock className = "w-4 h-4 text-blue-600 dark:text-blue-400 mr-2" / >
2025-11-12 15:34:10 +01:00
< span className = "font-medium text-[var(--text-tertiary)]" >
{ t ( 'landing:hero.trust.quick' , 'Configuración en 15 min' ) }
2025-10-17 18:14:28 +02:00
< / span >
2025-08-28 10:41:04 +02:00
< / div >
2025-11-12 15:34:10 +01:00
< div className = "flex items-center" >
< Shield className = "w-4 h-4 text-purple-600 dark:text-purple-400 mr-2" / >
< span className = "font-medium text-[var(--text-tertiary)]" >
{ t ( 'landing:hero.trust.card' , 'Tarjeta requerida' ) }
2025-10-17 18:14:28 +02:00
< / span >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
2025-10-17 18:14:28 +02:00
< / section >
2025-11-07 12:00:01 +01:00
{ /* Problem/Solution Section */ }
2025-10-17 18:14:28 +02:00
< section className = "py-20 bg-[var(--bg-primary)]" >
< div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" >
2025-11-07 12:00:01 +01:00
< div className = "grid md:grid-cols-2 gap-12" >
{ /* Problems */ }
2025-11-12 15:34:10 +01:00
< ScrollReveal variant = "fadeRight" delay = { 0.1 } >
< div >
< h2 className = "text-3xl font-bold text-[var(--text-primary)] mb-8" >
{ t ( 'landing:problems.title' , '❌ Los Problemas Que Enfrentas' ) }
< / h2 >
2025-11-07 12:00:01 +01:00
< div className = "space-y-6" >
< div className = "flex items-start gap-4" >
< div className = "w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0" >
< AlertCircle className = "w-6 h-6 text-red-600" / >
< / div >
< div >
< h3 className = "font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:problems.item1.title' , 'Desperdicios Diarios' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:problems.item1.description' , 'Tiras €2,000 al mes porque produces "por si acaso" y terminas con pan que no se vende.' ) }
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-4" >
< div className = "w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0" >
< AlertCircle className = "w-6 h-6 text-red-600" / >
< / div >
< div >
< h3 className = "font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:problems.item2.title' , 'Adivinando Cada Día' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:problems.item2.description' , 'No sabes cuánto hacer. A veces te quedas sin stock, a veces sobra demasiado.' ) }
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-4" >
< div className = "w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0" >
< AlertCircle className = "w-6 h-6 text-red-600" / >
< / div >
< div >
< h3 className = "font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:problems.item3.title' , 'Tiempo Perdido' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:problems.item3.description' , 'Horas calculando pedidos, revisando inventario, planificando producción manualmente.' ) }
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
2025-11-12 15:34:10 +01:00
< / div >
< / ScrollReveal >
2025-10-17 18:14:28 +02:00
2025-11-07 12:00:01 +01:00
{ /* Solutions */ }
2025-11-12 15:34:10 +01:00
< ScrollReveal variant = "fadeLeft" delay = { 0.2 } >
< div >
< h2 className = "text-3xl font-bold text-[var(--text-primary)] mb-8" >
{ t ( 'landing:solutions.title' , '✅ La Solución Con IA' ) }
< / h2 >
2025-11-07 12:00:01 +01:00
< div className = "space-y-6" >
< div className = "flex items-start gap-4" >
< div className = "w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0" >
< CheckCircle2 className = "w-6 h-6 text-green-600" / >
< / div >
< div >
< h3 className = "font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:solutions.item1.title' , 'Ahorra €500-2,000/Mes' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:solutions.item1.description' , 'Reduce desperdicios 20-40% produciendo exactamente lo que vas a vender.' ) }
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-4" >
< div className = "w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0" >
< CheckCircle2 className = "w-6 h-6 text-green-600" / >
< / div >
< div >
< h3 className = "font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:solutions.item2.title' , 'Predicciones 92% Precisas' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:solutions.item2.description' , 'Sabe exactamente cuánto venderás mañana basándose en tus datos y tu entorno.' ) }
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-4" >
< div className = "w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0" >
< CheckCircle2 className = "w-6 h-6 text-green-600" / >
< / div >
< div >
< h3 className = "font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:solutions.item3.title' , 'Automatización Total' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:solutions.item3.description' , 'Sistema automático cada mañana: predicción, producción, pedidos. Todo listo a las 6 AM.' ) }
< / p >
< / div >
2025-10-17 18:14:28 +02:00
< / div >
< / div >
2025-11-12 15:34:10 +01:00
< / div >
< / ScrollReveal >
2025-10-17 18:14:28 +02:00
< / div >
2025-08-28 10:41:04 +02:00
< / div >
< / section >
2025-11-07 12:00:01 +01:00
{ /* Core Value Propositions - 3 Pillars */ }
< section className = "py-20 bg-[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-11-07 12:00:01 +01:00
< div className = "text-center mb-16" >
< h2 className = "text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:pillars.title' , 'Cómo Funciona Bakery-IA' ) }
2025-08-28 10:41:04 +02:00
< / h2 >
2025-11-07 12:00:01 +01:00
< p className = "text-xl text-[var(--text-secondary)] max-w-3xl mx-auto" >
{ t ( 'landing:pillars.subtitle' , 'Tres pilares que transforman tu panadería' ) }
2025-08-28 10:41:04 +02:00
< / p >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "space-y-12" >
{ /* Pilar 1: Predice Demanda con Datos de Tu Zona */ }
< div className = "bg-[var(--bg-primary)] rounded-2xl p-8 lg:p-12 border-2 border-[var(--color-primary)] shadow-xl" >
< div className = "flex items-start gap-6" >
< div className = "w-16 h-16 bg-[var(--color-primary)] rounded-2xl flex items-center justify-center flex-shrink-0" >
< MapPin className = "w-8 h-8 text-white" / >
< / div >
< div className = "flex-1" >
< h3 className = "text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:pillar1.title' , '🎯 Predice Demanda con Datos de Tu Zona' ) }
< / h3 >
< p className = "text-lg text-[var(--text-secondary)] mb-6" >
{ t ( 'landing:pillar1.intro' , 'IA que conoce tu barrio, no solo el calendario. Sabe que el colegio de al lado cierra en agosto, que los viernes hay mercado en tu plaza, y que abrió otra panadería a 500m.' ) }
< / p >
< div className = "grid md:grid-cols-2 gap-4" >
< div className = "bg-[var(--bg-secondary)] rounded-lg p-4" >
< div className = "flex items-center gap-3 mb-2" >
< School className = "w-5 h-5 text-blue-600" / >
< h4 className = "font-bold text-[var(--text-primary)]" >
{ t ( 'landing:pillar1.schools' , 'Colegios y Oficinas Cerca' ) }
< / h4 >
< / div >
< p className = "text-sm text-[var(--text-secondary)]" >
{ t ( 'landing:pillar1.schools_desc' , 'Sabe cuándo hay vacaciones, horarios de oficina, eventos escolares' ) }
< / p >
2025-10-03 14:09:34 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-lg p-4" >
< div className = "flex items-center gap-3 mb-2" >
< Building2 className = "w-5 h-5 text-purple-600" / >
< h4 className = "font-bold text-[var(--text-primary)]" >
{ t ( 'landing:pillar1.competition' , 'Tu Competencia' ) }
< / h4 >
< / div >
< p className = "text-sm text-[var(--text-secondary)]" >
{ t ( 'landing:pillar1.competition_desc' , 'Detecta nuevas panaderías en tu zona y ajusta predicciones' ) }
< / p >
2025-10-03 14:09:34 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-lg p-4" >
< div className = "flex items-center gap-3 mb-2" >
< Cloud className = "w-5 h-5 text-sky-600" / >
< h4 className = "font-bold text-[var(--text-primary)]" >
{ t ( 'landing:pillar1.weather' , 'Clima Local (AEMET)' ) }
< / h4 >
< / div >
< p className = "text-sm text-[var(--text-secondary)]" >
{ t ( 'landing:pillar1.weather_desc' , 'Lluvia → menos croissants. Calor → más productos frescos' ) }
< / p >
2025-10-03 14:09:34 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-lg p-4" >
< div className = "flex items-center gap-3 mb-2" >
< Target className = "w-5 h-5 text-amber-600" / >
< h4 className = "font-bold text-[var(--text-primary)]" >
{ t ( 'landing:pillar1.events' , 'Eventos y Festivales' ) }
< / h4 >
< / div >
< p className = "text-sm text-[var(--text-secondary)]" >
{ t ( 'landing:pillar1.events_desc' , 'Fiestas del barrio, mercadillos, partidos importantes' ) }
< / p >
2025-10-03 14:09:34 +02:00
< / div >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "mt-6 bg-gradient-to-r from-[var(--color-primary)]/10 to-orange-500/10 rounded-lg p-4 border-l-4 border-[var(--color-primary)]" >
< p className = "font-bold text-[var(--text-primary)]" >
2025-11-12 15:34:10 +01:00
🎯 Precisión : < AnimatedCounter value = { 92 } suffix = "%" className = "inline text-[var(--color-primary)]" / > ( vs 60 - 70 % de sistemas genéricos )
2025-11-07 12:00:01 +01:00
< / p >
2025-10-03 14:09:34 +02:00
< / div >
< / div >
< / div >
< / div >
2025-11-07 12:00:01 +01:00
{ /* Pilar 2: Sistema Automático Cada Mañana */ }
< div className = "bg-[var(--bg-primary)] rounded-2xl p-8 lg:p-12 border-2 border-blue-600 shadow-xl" >
< div className = "flex items-start gap-6" >
< div className = "w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center flex-shrink-0" >
< Clock className = "w-8 h-8 text-white" / >
2025-10-03 14:09:34 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex-1" >
< h3 className = "text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:pillar2.title' , '🤖 Sistema Automático Cada Mañana' ) }
< / h3 >
< p className = "text-lg text-[var(--text-secondary)] mb-6" >
{ t ( 'landing:pillar2.intro' , 'Despierta con todo el trabajo hecho. A las 5:30 AM el sistema ya predijo ventas, planificó producción, gestionó inventario y creó pedidos a proveedores.' ) }
< / p >
< div className = "space-y-3" >
< div className = "flex items-start gap-3" >
< CheckCircle2 className = "w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" / >
< p className = "text-[var(--text-secondary)]" >
< strong > { t ( 'landing:pillar2.step1' , 'Predice ventas de hoy:' ) } < / strong > { t ( 'landing:pillar2.step1_desc' , '"Harás 80 croissants, 120 barras"' ) }
< / p >
2025-10-03 14:09:34 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-3" >
< CheckCircle2 className = "w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" / >
< p className = "text-[var(--text-secondary)]" >
< strong > { t ( 'landing:pillar2.step2' , 'Planifica producción:' ) } < / strong > { t ( 'landing:pillar2.step2_desc' , 'Lista exacta de lo que hornear' ) }
< / p >
2025-10-03 14:09:34 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-3" >
< CheckCircle2 className = "w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" / >
< p className = "text-[var(--text-secondary)]" >
< strong > { t ( 'landing:pillar2.step3' , 'Gestiona inventario:' ) } < / strong > { t ( 'landing:pillar2.step3_desc' , 'Proyecta 7 días → "Te quedarás sin harina en 4 días, pide 50kg hoy"' ) }
< / p >
2025-10-03 14:09:34 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-3" >
< CheckCircle2 className = "w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" / >
< p className = "text-[var(--text-secondary)]" >
< strong > { t ( 'landing:pillar2.step4' , 'Previene desperdicios:' ) } < / strong > { t ( 'landing:pillar2.step4_desc' , '"Leche caduca en 5 días, no pidas más de 15L"' ) }
< / p >
2025-10-21 19:50:07 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-3" >
< CheckCircle2 className = "w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" / >
< p className = "text-[var(--text-secondary)]" >
< strong > { t ( 'landing:pillar2.step5' , 'Crea pedidos:' ) } < / strong > { t ( 'landing:pillar2.step5_desc' , 'Listos para aprobar con 1 clic' ) }
< / p >
2025-10-21 19:50:07 +02:00
< / div >
2025-08-28 10:41:04 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg p-4 border-l-4 border-blue-600" >
< p className = "font-bold text-[var(--text-primary)]" >
{ t ( 'landing:pillar2.key' , '🔑 Nunca llegas al punto de quedarte sin stock. El sistema lo previene 7 días antes.' ) }
< / p >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / div >
< / div >
2025-11-08 12:02:18 +01:00
{ /* Pilar 3: Tus Datos, Tu Impacto Ambiental */ }
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-primary)] rounded-2xl p-8 lg:p-12 border-2 border-green-600 shadow-xl" >
< div className = "flex items-start gap-6" >
< div className = "w-16 h-16 bg-green-600 rounded-2xl flex items-center justify-center flex-shrink-0" >
< Leaf className = "w-8 h-8 text-white" / >
2025-08-28 10:41:04 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex-1" >
< h3 className = "text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4" >
2025-11-08 12:02:18 +01:00
{ t ( 'landing:pillar3.title' , 'Tus Datos, Tu Impacto Ambiental' ) }
2025-11-07 12:00:01 +01:00
< / h3 >
< p className = "text-lg text-[var(--text-secondary)] mb-6" >
2025-11-08 12:02:18 +01:00
{ t ( 'landing:pillar3.intro' , '100% de tus datos te pertenecen. Mide tu impacto ambiental automáticamente y genera informes de sostenibilidad que cumplen con los estándares internacionales.' ) }
2025-11-07 12:00:01 +01:00
< / p >
< div className = "grid md:grid-cols-3 gap-4 mb-6" >
< div className = "bg-[var(--bg-secondary)] rounded-lg p-4 text-center" >
2025-11-08 12:02:18 +01:00
< div className = "text-3xl font-bold text-green-600 mb-2" >
{ t ( 'landing:pillar3.data_ownership_value' , '100%' ) }
< / div >
2025-11-07 12:00:01 +01:00
< p className = "text-sm text-[var(--text-secondary)]" >
2025-11-08 12:02:18 +01:00
{ t ( 'landing:pillar3.data_ownership' , 'Propiedad de datos' ) }
2025-11-07 12:00:01 +01:00
< / p >
2025-10-21 19:50:07 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-lg p-4 text-center" >
2025-11-08 12:02:18 +01:00
< div className = "text-3xl font-bold text-blue-600 mb-2" >
{ t ( 'landing:pillar3.co2_metric' , 'CO₂' ) }
< / div >
2025-11-07 12:00:01 +01:00
< p className = "text-sm text-[var(--text-secondary)]" >
2025-11-08 12:02:18 +01:00
{ t ( 'landing:pillar3.co2' , 'Medición automática' ) }
2025-11-07 12:00:01 +01:00
< / p >
2025-10-21 19:50:07 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-lg p-4 text-center" >
2025-11-08 12:02:18 +01:00
< div className = "text-3xl font-bold text-amber-600 mb-2" >
{ t ( 'landing:pillar3.sdg_value' , 'ODS 12.3' ) }
< / div >
2025-11-07 12:00:01 +01:00
< p className = "text-sm text-[var(--text-secondary)]" >
2025-11-08 12:02:18 +01:00
{ t ( 'landing:pillar3.sdg' , 'Seguimiento de cumplimiento' ) }
2025-11-07 12:00:01 +01:00
< / p >
2025-10-21 19:50:07 +02:00
< / div >
2025-08-28 10:41:04 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-lg p-4 border-l-4 border-green-600" >
< p className = "font-bold text-[var(--text-primary)] mb-2" >
2025-11-08 12:02:18 +01:00
{ t ( 'landing:pillar3.sustainability_title' , 'Informes de Sostenibilidad Automatizados' ) }
2025-11-07 12:00:01 +01:00
< / p >
< p className = "text-sm text-[var(--text-secondary)]" >
2025-11-08 12:02:18 +01:00
{ t ( 'landing:pillar3.sustainability_desc' , 'Genera informes que cumplen con los estándares internacionales de sostenibilidad y reducción de desperdicio alimentario' ) }
2025-11-07 12:00:01 +01:00
< / p >
2025-10-21 19:50:07 +02:00
< / 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-11-07 12:00:01 +01:00
{ /* Link to Features Page */ }
< div className = "mt-12 text-center" >
< Link to = "/features" className = "inline-flex items-center gap-2 text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] font-semibold text-lg group" >
{ t ( 'landing:pillars.see_all' , 'Ver todas las funcionalidades en detalle' ) }
< ChevronRight className = "w-5 h-5 group-hover:translate-x-1 transition-transform" / >
< / Link >
2025-08-28 10:41:04 +02:00
< / div >
< / div >
< / section >
2025-11-07 12:00:01 +01:00
{ /* How It Works */ }
< section className = "py-20 bg-[var(--bg-primary)]" >
< div className = "max-w-5xl 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" >
{ t ( 'landing:how_it_works.title' , 'Cómo Empezar' ) }
2025-10-30 21:08:07 +01:00
< / h2 >
2025-11-07 12:00:01 +01:00
< p className = "text-xl text-[var(--text-secondary)]" >
{ t ( 'landing:how_it_works.subtitle' , 'En 3 pasos simples' ) }
2025-10-30 21:08:07 +01:00
< / p >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "space-y-8" >
< div className = "flex items-start gap-6" >
< div className = "w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold text-xl flex-shrink-0" >
1
2025-10-30 21:08:07 +01:00
< / div >
2025-11-07 12:00:01 +01:00
< div >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:how_it_works.step1.title' , 'Sube 6-12 meses de datos de ventas' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:how_it_works.step1.description' , 'Más meses = predicciones más precisas. Si tienes solo 6 meses, funciona igual, pero mejora con el tiempo.' ) }
< / p >
2025-10-30 21:08:07 +01:00
< / div >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-6" >
< div className = "w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold text-xl flex-shrink-0" >
2
2025-10-30 21:08:07 +01:00
< / div >
2025-11-07 12:00:01 +01:00
< div >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:how_it_works.step2.title' , 'La IA aprende tus patrones y tu entorno' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:how_it_works.step2.description' , 'Analiza tus ventas, clima, competencia, eventos locales. Tarda 15 minutos en configurarse.' ) }
< / p >
2025-10-30 21:08:07 +01:00
< / div >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "flex items-start gap-6" >
< div className = "w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold text-xl flex-shrink-0" >
3
2025-10-30 21:08:07 +01:00
< / div >
2025-11-07 12:00:01 +01:00
< div >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:how_it_works.step3.title' , 'Cada mañana recibes tu plan del día' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:how_it_works.step3.description' , 'Qué hacer, qué pedir, cuándo llegará. Todo automático, tú solo apruebas.' ) }
< / p >
2025-10-30 21:08:07 +01:00
< / div >
< / div >
< / div >
< / div >
< / section >
2025-11-07 12:00:01 +01:00
{ /* Pilot Program */ }
< section className = "py-20 bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/10 dark:to-orange-900/10" >
< div className = "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center mb-12" >
< div className = "inline-block bg-[var(--color-primary)] text-white px-4 py-2 rounded-full text-sm font-bold mb-4" >
{ t ( 'landing:pilot.badge' , '⏰ PROGRAMA PILOTO • SOLO 12 PLAZAS RESTANTES' ) }
2025-10-23 07:44:54 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:pilot.title' , 'Únete al Programa Piloto' ) }
2025-10-23 07:44:54 +02:00
< / h2 >
2025-11-07 12:00:01 +01:00
< p className = "text-xl text-[var(--text-secondary)]" >
{ t ( 'landing:pilot.subtitle' , '3 meses gratis + beneficios exclusivos' ) }
2025-10-23 07:44:54 +02:00
< / p >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "grid md:grid-cols-2 gap-8 mb-12" >
< div className = "bg-white dark:bg-gray-800 rounded-xl p-6 border-2 border-green-500" >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:pilot.you_get.title' , '✅ Qué Recibes' ) }
< / h3 >
< ul className = "space-y-3" >
< li className = "flex items-start gap-2" >
< Check className = "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:pilot.you_get.item1' , '3 meses completamente gratis' ) } < / span >
< / li >
< li className = "flex items-start gap-2" >
< Check className = "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:pilot.you_get.item2' , 'Soporte premium personalizado' ) } < / span >
< / li >
< li className = "flex items-start gap-2" >
< Check className = "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:pilot.you_get.item3' , 'Influencia en el desarrollo del producto' ) } < / span >
< / li >
< / ul >
< / div >
< div className = "bg-white dark:bg-gray-800 rounded-xl p-6 border-2 border-blue-500" >
< h3 className = "text-xl font-bold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:pilot.we_ask.title' , '🤝 Qué Necesitamos' ) }
< / h3 >
< ul className = "space-y-3" >
< li className = "flex items-start gap-2" >
< Check className = "w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:pilot.we_ask.item1' , '6-12 meses de datos de ventas' ) } < / span >
< / li >
< li className = "flex items-start gap-2" >
< Check className = "w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" / >
< span className = "text-[var(--text-secondary)]" > { t ( 'landing:pilot.we_ask.item2' , 'Tarjeta de crédito (sin cargo por 3 meses)' ) } < / span >
< / li >
< / ul >
2025-10-23 07:44:54 +02:00
< / div >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "text-center" >
< Link to = { getRegisterUrl ( ) } >
< Button
size = "lg"
className = "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"
>
{ t ( 'landing:pilot.cta' , 'Solicitar Plaza Ahora' ) }
< ArrowRight className = "ml-2 w-5 h-5" / >
< / Button >
< / Link >
2025-10-23 07:44:54 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< / div >
< / section >
2025-10-23 07:44:54 +02:00
2025-11-07 12:00:01 +01:00
{ /* Pricing */ }
< section id = "pricing" className = "py-20 bg-[var(--bg-secondary)]" >
< 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" >
{ t ( 'landing:pricing.title' , 'Precios Transparentes' ) }
< / h2 >
< p className = "text-xl text-[var(--text-secondary)]" >
{ t ( 'landing:pricing.subtitle' , 'Sin sorpresas, sin costos ocultos' ) }
< / p >
2025-10-23 07:44:54 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< PricingSection / >
2025-10-23 07:44:54 +02:00
< / div >
< / section >
2025-11-07 12:00:01 +01:00
{ /* FAQ */ }
< section className = "py-20 bg-[var(--bg-primary)]" >
< div className = "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8" >
< div className = "text-center mb-12" >
< h2 className = "text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4" >
{ t ( 'landing:faq.title' , 'Preguntas Frecuentes' ) }
< / h2 >
2025-10-17 18:14:28 +02:00
< / div >
2025-10-30 21:08:07 +01:00
2025-11-07 12:00:01 +01:00
< div className = "space-y-6" >
< div className = "bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:faq.q1.question' , '¿Cuántos datos necesito?' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:faq.q1.answer' , '6-12 meses de datos de ventas. Más datos = mejores predicciones, pero funciona desde 6 meses.' ) }
2025-10-30 21:08:07 +01:00
< / p >
2025-10-17 18:14:28 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:faq.q2.question' , '¿Por qué necesito dar mi tarjeta?' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:faq.q2.answer' , 'Para continuar automáticamente después del período de prueba gratuito de 3 meses. Puedes cancelar en cualquier momento sin cargo.' ) }
2025-08-28 10:41:04 +02:00
< / p >
< / div >
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:faq.q3.question' , '¿Qué pasa con mis datos?' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:faq.q3.answer' , '100% tuyos. Servidores en España, cumplimiento RGPD, nunca compartimos ni vendemos tu información.' ) }
< / p >
2025-10-30 21:08:07 +01:00
< / div >
2025-10-17 18:14:28 +02:00
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:faq.q4.question' , '¿Funciona para mi tipo de panadería?' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:faq.q4.answer' , 'Sí. Ya sea producción local o obrador central con múltiples puntos de venta, el sistema se adapta a tu modelo de negocio.' ) }
2025-10-30 21:08:07 +01:00
< / p >
2025-08-28 10:41:04 +02:00
< / div >
2025-10-17 18:14:28 +02:00
2025-11-07 12:00:01 +01:00
< div className = "bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]" >
< h3 className = "text-lg font-bold text-[var(--text-primary)] mb-2" >
{ t ( 'landing:faq.q5.question' , '¿Qué pasa si me quedo sin stock?' ) }
< / h3 >
< p className = "text-[var(--text-secondary)]" >
{ t ( 'landing:faq.q5.answer' , 'El sistema previene esto. Proyecta 7 días hacia adelante y te avisa cuando necesitas pedir a proveedores, creando automáticamente las órdenes de compra.' ) }
< / p >
2025-10-30 21:08:07 +01:00
< / div >
2025-10-17 18:14:28 +02:00
< / div >
2025-11-07 12:00:01 +01:00
< / div >
< / section >
2025-08-28 10:41:04 +02:00
2025-11-07 12:00:01 +01:00
{ /* Final CTA */ }
< section className = "py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600" >
< div className = "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center" >
< h2 className = "text-3xl lg:text-5xl font-bold text-white mb-6" >
{ t ( 'landing:final_cta.title' , 'Deja de Perder €2,000 al Mes en Desperdicios' ) }
< / h2 >
< p className = "text-xl text-white/90 mb-8" >
{ t ( 'landing:final_cta.subtitle' , 'Únete a las primeras 20 panaderías. Solo quedan 12 plazas.' ) }
< / p >
< Link to = { getRegisterUrl ( ) } >
< Button
size = "lg"
className = "bg-white text-[var(--color-primary)] hover:bg-gray-100 font-bold text-lg px-10 py-5 shadow-2xl"
>
{ t ( 'landing:final_cta.button' , 'Comenzar Ahora - Sin Tarjeta Requerida' ) }
< ArrowRight className = "ml-2 w-6 h-6" / >
< / Button >
< / Link >
< p className = "mt-6 text-white/80 text-sm" >
{ t ( 'landing:final_cta.guarantee' , 'Tarjeta requerida. Sin cargo por 3 meses. Cancela cuando quieras.' ) }
< / p >
< / div >
< / section >
< / PublicLayout >
) ;
} ;
2025-08-28 10:41:04 +02:00
2025-11-07 12:00:01 +01:00
export default LandingPage ;
