697 lines
38 KiB
TypeScript
697 lines
38 KiB
TypeScript
import React from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button, ScrollReveal, FloatingCTA, AnimatedCounter } from '../../components/ui';
|
|
import { PublicLayout } from '../../components/layout';
|
|
import { PricingSection } from '../../components/subscription';
|
|
import { getRegisterUrl, getDemoUrl } from '../../utils/navigation';
|
|
import {
|
|
TrendingUp,
|
|
Shield,
|
|
Zap,
|
|
Check,
|
|
ArrowRight,
|
|
Clock,
|
|
MapPin,
|
|
Leaf,
|
|
Target,
|
|
CheckCircle2,
|
|
AlertCircle,
|
|
School,
|
|
Building2,
|
|
Cloud,
|
|
Euro,
|
|
ChevronRight,
|
|
Play
|
|
} from 'lucide-react';
|
|
|
|
const LandingPage: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<PublicLayout
|
|
variant="full-width"
|
|
contentPadding="none"
|
|
headerProps={{
|
|
showThemeToggle: true,
|
|
showAuthButtons: true,
|
|
showLanguageSelector: true,
|
|
variant: "default"
|
|
}}
|
|
>
|
|
{/* 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
|
|
/>
|
|
{/* 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 overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
{/* 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>
|
|
|
|
{/* Scarcity Badge */}
|
|
<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">
|
|
<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>
|
|
</div>
|
|
|
|
<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>
|
|
</h1>
|
|
|
|
<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.')}
|
|
</p>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="mt-10 flex flex-col sm:flex-row gap-5 justify-center items-center">
|
|
<Link to={getRegisterUrl()} className="w-full sm:w-auto">
|
|
<Button
|
|
size="lg"
|
|
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"
|
|
>
|
|
<span className="flex items-center justify-center gap-2">
|
|
{t('landing:hero.cta_primary', 'Únete al Programa Piloto')}
|
|
<ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
|
|
</span>
|
|
</Button>
|
|
</Link>
|
|
<Link to={getDemoUrl()} className="w-full sm:w-auto">
|
|
<Button
|
|
size="lg"
|
|
variant="secondary"
|
|
className="w-full sm:w-auto group px-10 py-5 text-lg font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 rounded-xl"
|
|
>
|
|
<span className="flex items-center justify-center gap-2">
|
|
{t('landing:hero.cta_demo', 'Ver Demo')}
|
|
<Play className="w-5 h-5 group-hover:scale-110 transition-transform" />
|
|
</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 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)]">
|
|
{t('landing:hero.social_proof.bakeries', '20 panaderías ya ahorran €1,500/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)]">
|
|
{t('landing:hero.social_proof.accuracy', 'Predicciones 92% 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>
|
|
|
|
{/* Trust Badges */}
|
|
<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')}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Clock className="w-4 h-4 text-blue-600 dark:text-blue-400 mr-2" />
|
|
<span className="font-medium text-[var(--text-tertiary)]">
|
|
{t('landing:hero.trust.quick', 'Configuración en 15 min')}
|
|
</span>
|
|
</div>
|
|
<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')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Problem/Solution Section */}
|
|
<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="grid md:grid-cols-2 gap-12">
|
|
{/* Problems */}
|
|
<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>
|
|
<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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
{/* Solutions */}
|
|
<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>
|
|
<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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Core Value Propositions - 3 Pillars */}
|
|
<section 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-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')}
|
|
</h2>
|
|
<p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
|
|
{t('landing:pillars.subtitle', 'Tres pilares que transforman tu panadería')}
|
|
</p>
|
|
</div>
|
|
|
|
<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:pillars.pillar1.title', '🎯 Predice Demanda con Datos de Tu Zona')}
|
|
</h3>
|
|
<p className="text-lg text-[var(--text-secondary)] mb-6">
|
|
{t('landing:pillars.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:pillars.pillar1.schools', 'Colegios y Oficinas Cerca')}
|
|
</h4>
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar1.schools_desc', 'Sabe cuándo hay vacaciones, horarios de oficina, eventos escolares')}
|
|
</p>
|
|
</div>
|
|
<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:pillars.pillar1.competition', 'Tu Competencia')}
|
|
</h4>
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar1.competition_desc', 'Detecta nuevas panaderías en tu zona y ajusta predicciones')}
|
|
</p>
|
|
</div>
|
|
<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:pillars.pillar1.weather', 'Clima Local')}
|
|
</h4>
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar1.weather_desc', 'Lluvia → menos croissants. Calor → más productos frescos')}
|
|
</p>
|
|
</div>
|
|
<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:pillars.pillar1.events', 'Eventos y Festivales')}
|
|
</h4>
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar1.events_desc', 'Fiestas del barrio, mercadillos, partidos importantes')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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)]">
|
|
🎯 Precisión: <AnimatedCounter value={92} suffix="%" className="inline text-[var(--color-primary)]" /> (vs 60-70% de sistemas genéricos)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4">
|
|
{t('landing:pillars.pillar2.title', '🤖 Sistema Automático Cada Mañana')}
|
|
</h3>
|
|
<p className="text-lg text-[var(--text-secondary)] mb-6">
|
|
{t('landing:pillars.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:pillars.pillar2.step1', 'Predice ventas de hoy:')}</strong> {t('landing:pillars.pillar2.step1_desc', '"Harás 80 croissants, 120 barras"')}
|
|
</p>
|
|
</div>
|
|
<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:pillars.pillar2.step2', 'Planifica producción:')}</strong> {t('landing:pillars.pillar2.step2_desc', 'Lista exacta de lo que hornear')}
|
|
</p>
|
|
</div>
|
|
<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:pillars.pillar2.step3', 'Gestiona inventario:')}</strong> {t('landing:pillars.pillar2.step3_desc', 'Proyecta 7 días → "Te quedarás sin harina en 4 días, pide 50kg hoy"')}
|
|
</p>
|
|
</div>
|
|
<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:pillars.pillar2.step4', 'Previene desperdicios:')}</strong> {t('landing:pillars.pillar2.step4_desc', '"Leche caduca en 5 días, no pidas más de 15L"')}
|
|
</p>
|
|
</div>
|
|
<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:pillars.pillar2.step5', 'Crea pedidos:')}</strong> {t('landing:pillars.pillar2.step5_desc', 'Listos para aprobar con 1 clic')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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:pillars.pillar2.key', '🔑 Nunca llegas al punto de quedarte sin stock. El sistema lo previene 7 días antes.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pilar 3: Tus Datos, Tu Impacto Ambiental */}
|
|
<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" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4">
|
|
{t('landing:pillars.pillar3.title', 'Tus Datos, Tu Impacto Ambiental')}
|
|
</h3>
|
|
<p className="text-lg text-[var(--text-secondary)] mb-6">
|
|
{t('landing:pillars.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.')}
|
|
</p>
|
|
|
|
<div className="grid md:grid-cols-3 gap-4 mb-6">
|
|
<div className="bg-[var(--bg-secondary)] rounded-lg p-4 text-center">
|
|
<div className="text-3xl font-bold text-green-600 mb-2">
|
|
{t('landing:pillars.pillar3.data_ownership_value', '100%')}
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar3.data_ownership', 'Propiedad de datos')}
|
|
</p>
|
|
</div>
|
|
<div className="bg-[var(--bg-secondary)] rounded-lg p-4 text-center">
|
|
<div className="text-3xl font-bold text-blue-600 mb-2">
|
|
{t('landing:pillars.pillar3.co2_metric', 'CO₂')}
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar3.co2', 'Medición automática')}
|
|
</p>
|
|
</div>
|
|
<div className="bg-[var(--bg-secondary)] rounded-lg p-4 text-center">
|
|
<div className="text-3xl font-bold text-amber-600 mb-2">
|
|
{t('landing:pillars.pillar3.sdg_value', 'ODS 12.3')}
|
|
</div>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar3.sdg', 'Seguimiento de cumplimiento')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
{t('landing:pillars.pillar3.sustainability_title', 'Informes de Sostenibilidad Automatizados')}
|
|
</p>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('landing:pillars.pillar3.sustainability_desc', 'Genera informes que cumplen con los estándares internacionales de sostenibilidad y reducción de desperdicio alimentario')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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-white font-semibold text-lg group px-6 py-3 rounded-lg transition-all duration-200 hover:bg-[var(--color-primary)] no-underline">
|
|
{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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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')}
|
|
</h2>
|
|
<p className="text-xl text-[var(--text-secondary)]">
|
|
{t('landing:how_it_works.subtitle', 'En 3 pasos simples')}
|
|
</p>
|
|
</div>
|
|
|
|
<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
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<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
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<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
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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')}
|
|
</div>
|
|
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
|
|
{t('landing:pilot.title', 'Únete al Programa Piloto')}
|
|
</h2>
|
|
<p className="text-xl text-[var(--text-secondary)]">
|
|
{t('landing:pilot.subtitle', '3 meses gratis + beneficios exclusivos')}
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
<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.item3', 'Comprensión de que es un programa piloto y feedback semanal sobre fallos y mejoras')}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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>
|
|
</div>
|
|
<PricingSection />
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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>
|
|
</div>
|
|
|
|
<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.')}
|
|
</p>
|
|
</div>
|
|
|
|
<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.')}
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<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.')}
|
|
</p>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|