bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ee36c45d25d9c2deb62bcfd3ef32948c1cb0b14d
bakery-ia/frontend/src/pages/public/LandingPage.tsx

906 lines
48 KiB
TypeScript
Raw Normal View History

ADD new frontend
2025-08-28 10:41:04 +02:00
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../components/ui';
import { PublicLayout } from '../../components/layout';
import {
BarChart3,
TrendingUp,
Shield,
Zap,
Users,
Award,
ChevronRight,
Check,
Star,
ArrowRight,
Play,
Calendar,
Clock,
DollarSign,
Package,
PieChart,
Settings
} from 'lucide-react';
const LandingPage: React.FC = () => {
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,
variant: "default",
navigationItems: [
{ id: 'features', label: 'Características', href: '#features' },
{ id: 'benefits', label: 'Beneficios', href: '#benefits' },
{ id: 'pricing', label: 'Precios', href: '#pricing' },
{ id: 'testimonials', label: 'Testimonios', href: '#testimonials' }
]
}}
>
{/* 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">
<div className="mb-6">
<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" />
IA Avanzada para Panaderías
</span>
</div>
<h1 className="text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-7xl">
<span className="block">Revoluciona tu</span>
<span className="block text-[var(--color-primary)]">Panadería con IA</span>
</h1>
<p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl">
Optimiza automáticamente tu producción, reduce desperdicios hasta un 35%,
predice demanda con precisión del 92% y aumenta tus ventas con inteligencia artificial.
</p>
<div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
<Link to="/register">
<Button size="lg" className="px-8 py-4 text-lg font-semibold bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
Comenzar Gratis 14 Días
<ArrowRight className="ml-2 w-5 h-5" />
</Button>
</Link>
<Button
variant="outline"
size="lg"
className="px-8 py-4 text-lg font-semibold border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white transition-all duration-200"
onClick={() => scrollToSection('demo')}
>
<Play className="mr-2 w-5 h-5" />
Ver Demo en Vivo
</Button>
</div>
<div className="mt-12 flex items-center justify-center space-x-6 text-sm text-[var(--text-tertiary)]">
<div className="flex items-center">
<Check className="w-4 h-4 text-green-500 mr-2" />
Sin tarjeta de crédito
</div>
<div className="flex items-center">
<Check className="w-4 h-4 text-green-500 mr-2" />
Configuración en 5 minutos
</div>
<div className="flex items-center">
<Check className="w-4 h-4 text-green-500 mr-2" />
Soporte 24/7 en español
</div>
</div>
</div>
</div>
{/* Background decoration */}
<div className="absolute top-0 left-0 right-0 h-full overflow-hidden -z-10">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-[var(--color-primary)]/5 rounded-full blur-3xl"></div>
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[var(--color-secondary)]/5 rounded-full blur-3xl"></div>
</div>
</section>
{/* Stats Section */}
<section className="py-16 bg-[var(--bg-primary)]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-2 gap-8 md:grid-cols-4">
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-primary)]">500+</div>
<div className="mt-2 text-sm text-[var(--text-secondary)]">Panaderías Activas</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-primary)]">35%</div>
<div className="mt-2 text-sm text-[var(--text-secondary)]">Reducción de Desperdicios</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-primary)]">92%</div>
<div className="mt-2 text-sm text-[var(--text-secondary)]">Precisión de Predicciones</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-primary)]">4.8★</div>
<div className="mt-2 text-sm text-[var(--text-secondary)]">Satisfacción de Clientes</div>
</div>
</div>
</div>
</section>
{/* Main Features Section */}
<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">
<h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]">
Gestión Completa con
<span className="block text-[var(--color-primary)]">Inteligencia Artificial</span>
</h2>
<p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)]">
Automatiza procesos, optimiza recursos y toma decisiones inteligentes basadas en datos reales de tu panadería.
</p>
</div>
<div className="mt-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* AI Forecasting */}
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30">
<div className="absolute -top-4 left-8">
<div className="w-12 h-12 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-xl flex items-center justify-center shadow-lg">
<TrendingUp className="w-6 h-6 text-white" />
</div>
</div>
<div className="mt-6">
<h3 className="text-xl font-bold text-[var(--text-primary)]">Predicción Inteligente</h3>
<p className="mt-4 text-[var(--text-secondary)]">
Algoritmos de IA analizan patrones históricos, clima, eventos locales y tendencias para predecir la demanda exacta de cada producto.
</p>
<div className="mt-6">
<div className="flex items-center text-sm text-[var(--color-primary)]">
<Check className="w-4 h-4 mr-2" />
Precisión del 92% en predicciones
</div>
<div className="flex items-center text-sm text-[var(--color-primary)] mt-2">
<Check className="w-4 h-4 mr-2" />
Reduce desperdicios hasta 35%
</div>
<div className="flex items-center text-sm text-[var(--color-primary)] mt-2">
<Check className="w-4 h-4 mr-2" />
Aumenta ventas promedio 22%
</div>
</div>
</div>
</div>
{/* Smart Inventory */}
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30">
<div className="absolute -top-4 left-8">
<div className="w-12 h-12 bg-gradient-to-r from-[var(--color-secondary)] to-[var(--color-secondary-dark)] rounded-xl flex items-center justify-center shadow-lg">
<Package className="w-6 h-6 text-white" />
</div>
</div>
<div className="mt-6">
<h3 className="text-xl font-bold text-[var(--text-primary)]">Inventario Inteligente</h3>
<p className="mt-4 text-[var(--text-secondary)]">
Control automático de stock con alertas predictivas, órdenes de compra automatizadas y optimización de costos.
</p>
<div className="mt-6">
<div className="flex items-center text-sm text-[var(--color-secondary)]">
<Check className="w-4 h-4 mr-2" />
Alertas automáticas de stock bajo
</div>
<div className="flex items-center text-sm text-[var(--color-secondary)] mt-2">
<Check className="w-4 h-4 mr-2" />
Órdenes de compra automatizadas
</div>
<div className="flex items-center text-sm text-[var(--color-secondary)] mt-2">
<Check className="w-4 h-4 mr-2" />
Optimización de costos de materias primas
</div>
</div>
</div>
</div>
{/* Production Planning */}
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30">
<div className="absolute -top-4 left-8">
<div className="w-12 h-12 bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-dark)] rounded-xl flex items-center justify-center shadow-lg">
<Calendar className="w-6 h-6 text-white" />
</div>
</div>
<div className="mt-6">
<h3 className="text-xl font-bold text-[var(--text-primary)]">Planificación de Producción</h3>
<p className="mt-4 text-[var(--text-secondary)]">
Programa automáticamente la producción diaria basada en predicciones, optimiza horarios y recursos disponibles.
</p>
<div className="mt-6">
<div className="flex items-center text-sm text-[var(--color-accent)]">
<Check className="w-4 h-4 mr-2" />
Programación automática de horneado
</div>
<div className="flex items-center text-sm text-[var(--color-accent)] mt-2">
<Check className="w-4 h-4 mr-2" />
Optimización de uso de hornos
</div>
<div className="flex items-center text-sm text-[var(--color-accent)] mt-2">
<Check className="w-4 h-4 mr-2" />
Gestión de personal y turnos
</div>
</div>
</div>
</div>
</div>
{/* Additional Features Grid */}
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
<div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
<BarChart3 className="w-6 h-6 text-[var(--color-primary)]" />
</div>
<h4 className="font-semibold text-[var(--text-primary)]">Analytics Avanzado</h4>
<p className="text-sm text-[var(--text-secondary)] mt-2">Dashboards en tiempo real con métricas clave</p>
</div>
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
<div className="w-12 h-12 bg-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
<DollarSign className="w-6 h-6 text-[var(--color-secondary)]" />
</div>
<h4 className="font-semibold text-[var(--text-primary)]">POS Integrado</h4>
<p className="text-sm text-[var(--text-secondary)] mt-2">Sistema de ventas completo y fácil de usar</p>
</div>
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
<div className="w-12 h-12 bg-[var(--color-accent)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
<Shield className="w-6 h-6 text-[var(--color-accent)]" />
</div>
<h4 className="font-semibold text-[var(--text-primary)]">Control de Calidad</h4>
<p className="text-sm text-[var(--text-secondary)] mt-2">Trazabilidad completa y gestión HACCP</p>
</div>
<div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
<div className="w-12 h-12 bg-[var(--color-info)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
<Settings className="w-6 h-6 text-[var(--color-info)]" />
</div>
<h4 className="font-semibold text-[var(--text-primary)]">Automatización</h4>
<p className="text-sm text-[var(--text-secondary)] mt-2">Procesos automáticos que ahorran tiempo</p>
</div>
</div>
</div>
</section>
{/* Benefits Section */}
<section id="benefits" className="py-24 bg-[var(--bg-primary)]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
<div>
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
Resultados Comprobados
<span className="block text-[var(--color-primary)]">en Cientos de Panaderías</span>
</h2>
<p className="mt-6 text-lg text-[var(--text-secondary)]">
Nuestros clientes han logrado transformaciones significativas en sus operaciones,
mejorando rentabilidad y reduciendo desperdicios desde el primer mes.
</p>
<div className="mt-10 space-y-8">
<div className="flex items-start">
<div className="flex-shrink-0">
<div className="w-8 h-8 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
<TrendingUp className="w-5 h-5 text-[var(--color-success)]" />
</div>
</div>
<div className="ml-4">
<h4 className="text-lg font-semibold text-[var(--text-primary)]">Aumenta Ventas 22% Promedio</h4>
<p className="text-[var(--text-secondary)]">Optimización de producción y mejor disponibilidad de productos populares</p>
</div>
</div>
<div className="flex items-start">
<div className="flex-shrink-0">
<div className="w-8 h-8 bg-[var(--color-info)]/10 rounded-full flex items-center justify-center">
<Shield className="w-5 h-5 text-[var(--color-info)]" />
</div>
</div>
<div className="ml-4">
<h4 className="text-lg font-semibold text-[var(--text-primary)]">Reduce Desperdicios 35%</h4>
<p className="text-[var(--text-secondary)]">Predicciones precisas evitan sobreproducción y productos vencidos</p>
</div>
</div>
<div className="flex items-start">
<div className="flex-shrink-0">
<div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<Clock className="w-5 h-5 text-purple-600" />
</div>
</div>
<div className="ml-4">
<h4 className="text-lg font-semibold text-[var(--text-primary)]">Ahorra 8 Horas Semanales</h4>
<p className="text-[var(--text-secondary)]">Automatización de tareas administrativas y de planificación</p>
</div>
</div>
</div>
</div>
<div className="mt-12 lg:mt-0">
<div className="bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-2xl p-8">
<div className="grid grid-cols-2 gap-8">
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-primary)]">€127k</div>
<div className="text-sm text-[var(--text-secondary)]">Ahorro promedio anual por panadería</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-secondary)]">98%</div>
<div className="text-sm text-[var(--text-secondary)]">Satisfacción de clientes</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-accent)]">2.3x</div>
<div className="text-sm text-[var(--text-secondary)]">ROI promedio en 12 meses</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-[var(--color-info)]">24/7</div>
<div className="text-sm text-[var(--text-secondary)]">Soporte técnico especializado</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Testimonials Section */}
<section id="testimonials" className="py-24 bg-[var(--bg-secondary)]">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
Lo que Dicen Nuestros Clientes
</h2>
<p className="mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]">
Panaderías de toda España han transformado sus negocios con nuestra plataforma
</p>
</div>
<div className="mt-16 grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Testimonial 1 */}
<div className="bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]">
<div className="flex items-center mb-4">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
))}
</div>
<blockquote className="text-[var(--text-secondary)] italic">
"Desde que implementamos Panadería IA, nuestros desperdicios se redujeron un 40% y las ventas aumentaron un 28%.
La predicción de demanda es increíblemente precisa."
</blockquote>
<div className="mt-6 flex items-center">
<div className="w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold">
M
</div>
<div className="ml-4">
<div className="font-semibold text-[var(--text-primary)]">María González</div>
<div className="text-sm text-[var(--text-secondary)]">Panadería Santa María, Madrid</div>
</div>
</div>
</div>
{/* Testimonial 2 */}
<div className="bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]">
<div className="flex items-center mb-4">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
))}
</div>
<blockquote className="text-[var(--text-secondary)] italic">
"El sistema nos ahorra 10 horas semanales en planificación. Ahora puedo enfocarme en mejorar nuestros productos
mientras la IA maneja la logística."
</blockquote>
<div className="mt-6 flex items-center">
<div className="w-12 h-12 bg-[var(--color-secondary)] rounded-full flex items-center justify-center text-white font-bold">
C
</div>
<div className="ml-4">
<div className="font-semibold text-[var(--text-primary)]">Carlos Ruiz</div>
<div className="text-sm text-[var(--text-secondary)]">Horno de Oro, Valencia</div>
</div>
</div>
</div>
{/* Testimonial 3 */}
<div className="bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]">
<div className="flex items-center mb-4">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
))}
</div>
<blockquote className="text-[var(--text-secondary)] italic">
"Increíble cómo predice exactamente cuántos panes necesitamos cada día. Nuestros clientes siempre encuentran
sus productos favoritos disponibles."
</blockquote>
<div className="mt-6 flex items-center">
<div className="w-12 h-12 bg-[var(--color-accent)] rounded-full flex items-center justify-center text-white font-bold">
A
</div>
<div className="ml-4">
<div className="font-semibold text-[var(--text-primary)]">Ana Martínez</div>
<div className="text-sm text-[var(--text-secondary)]">Pan & Tradición, Sevilla</div>
</div>
</div>
</div>
</div>
{/* Trust indicators */}
<div className="mt-16 text-center">
<p className="text-sm text-[var(--text-tertiary)] mb-8">Confiado por más de 500 panaderías en España</p>
<div className="flex items-center justify-center space-x-8 opacity-60">
<div className="font-semibold text-[var(--text-secondary)]">Panadería Real</div>
<div className="font-semibold text-[var(--text-secondary)]">Horno Artesanal</div>
<div className="font-semibold text-[var(--text-secondary)]">Pan de Casa</div>
<div className="font-semibold text-[var(--text-secondary)]">Dulce Tradición</div>
</div>
</div>
</div>
</section>
{/* Pricing Section */}
<section id="pricing" 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">
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
Planes que se Adaptan a tu Negocio
</h2>
<p className="mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]">
Sin costos ocultos, sin compromisos largos. Comienza gratis y escala según crezcas.
</p>
</div>
<div className="mt-16 grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Starter Plan */}
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="group relative bg-[var(--bg-secondary)] rounded-3xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
<div className="absolute top-6 right-6">
<div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
<Package className="w-6 h-6 text-[var(--color-primary)]" />
</div>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="mb-6">
<h3 className="text-2xl font-bold text-[var(--text-primary)]">Starter</h3>
<p className="mt-3 text-[var(--text-secondary)] leading-relaxed">Ideal para panaderías pequeñas o nuevas</p>
</div>
<div className="mb-8">
<div className="flex items-baseline">
<span className="text-5xl font-bold text-[var(--text-primary)]">€49</span>
<span className="ml-2 text-lg text-[var(--text-secondary)]">/mes</span>
</div>
<div className="mt-2 px-3 py-1 bg-[var(--color-success)]/10 text-[var(--color-success)] text-sm font-medium rounded-full inline-block">
14 días gratis
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
</div>
<div className="space-y-4 mb-8">
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Hasta 50 productos</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Control de inventario básico</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Predicción básica de demanda</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Reportes básicos de producción</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Analytics básicos</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">1 ubicación</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Soporte por email</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<Button className="w-full py-4 text-base font-semibold border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white transition-all duration-200 group-hover:shadow-lg" variant="outline">
ADD new frontend
2025-08-28 10:41:04 +02:00
Comenzar Gratis
Improve subcription support
2025-09-01 19:21:12 +02:00
<ArrowRight className="ml-2 w-4 h-4" />
ADD new frontend
2025-08-28 10:41:04 +02:00
</Button>
</div>
{/* Professional Plan - Highlighted */}
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="group relative bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-3xl p-8 shadow-2xl transform scale-105 z-10">
ADD new frontend
2025-08-28 10:41:04 +02:00
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="bg-gradient-to-r from-[var(--color-secondary)] to-[var(--color-secondary-dark)] text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg">
⭐ Más Popular
</div>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="absolute top-6 right-6">
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center">
<TrendingUp className="w-6 h-6 text-white" />
</div>
</div>
<div className="mb-6 pt-4">
<h3 className="text-2xl font-bold text-white">Professional</h3>
<p className="mt-3 text-white/90 leading-relaxed">Ideal para panaderías y cadenas en crecimiento</p>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="mb-8">
<div className="flex items-baseline">
<span className="text-5xl font-bold text-white">€129</span>
<span className="ml-2 text-lg text-white/80">/mes</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="mt-2 px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full inline-block">
14 días gratis
</div>
</div>
<div className="space-y-4 mb-8">
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">Productos ilimitados</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">Control de inventario avanzado</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">IA Avanzada con 92% de precisión</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">Gestión completa de producción</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">POS integrado</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">Gestión de Logística Básica</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">Analytics avanzados</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">1-2 ubicaciones</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-[var(--color-primary)]" />
</div>
</div>
<span className="ml-3 text-sm text-white font-medium">Soporte prioritario 24/7</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<Button className="w-full py-4 text-base font-semibold bg-white text-[var(--color-primary)] hover:bg-gray-100 transition-all duration-200 shadow-lg hover:shadow-xl">
ADD new frontend
2025-08-28 10:41:04 +02:00
Comenzar Prueba Gratuita
Improve subcription support
2025-09-01 19:21:12 +02:00
<ArrowRight className="ml-2 w-4 h-4" />
ADD new frontend
2025-08-28 10:41:04 +02:00
</Button>
</div>
{/* Enterprise Plan */}
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="group relative bg-[var(--bg-secondary)] rounded-3xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-accent)]/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
<div className="absolute top-6 right-6">
<div className="w-12 h-12 bg-[var(--color-accent)]/10 rounded-full flex items-center justify-center">
<Settings className="w-6 h-6 text-[var(--color-accent)]" />
</div>
</div>
<div className="mb-6">
<h3 className="text-2xl font-bold text-[var(--text-primary)]">Enterprise</h3>
<p className="mt-3 text-[var(--text-secondary)] leading-relaxed">Ideal para cadenas con obradores centrales</p>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="mb-8">
<div className="flex items-baseline">
<span className="text-5xl font-bold text-[var(--text-primary)]">€399</span>
<span className="ml-2 text-lg text-[var(--text-secondary)]">/mes</span>
</div>
<div className="mt-2 px-3 py-1 bg-[var(--color-accent)]/10 text-[var(--color-accent)] text-sm font-medium rounded-full inline-block">
Demo personalizada
</div>
</div>
<div className="space-y-4 mb-8 max-h-80 overflow-y-auto pr-2 scrollbar-thin">
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Productos ilimitados</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Control de inventario multi-locación</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">IA personalizada por ubicación</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Optimización de capacidad</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Integración con ERPs</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Gestión de Logística Avanzada</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Analytics predictivos</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Ubicaciones y obradores ilimitados</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">API Personalizada</span>
</div>
<div className="flex items-start">
<div className="flex-shrink-0 mt-1">
<div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
<Check className="w-3 h-3 text-white" />
</div>
</div>
<span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Manager de Cuenta Dedicado</span>
ADD new frontend
2025-08-28 10:41:04 +02:00
</div>
</div>
Improve subcription support
2025-09-01 19:21:12 +02:00
<Button className="w-full py-4 text-base font-semibold border-2 border-[var(--color-accent)] text-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-white transition-all duration-200 group-hover:shadow-lg" variant="outline">
ADD new frontend
2025-08-28 10:41:04 +02:00
Contactar Ventas
Improve subcription support
2025-09-01 19:21:12 +02:00
<ArrowRight className="ml-2 w-4 h-4" />
ADD new frontend
2025-08-28 10:41:04 +02:00
</Button>
</div>
</div>
<div className="mt-16 text-center">
<p className="text-sm text-[var(--text-tertiary)]">
🔒 Todos los planes incluyen cifrado de datos, backups automáticos y cumplimiento RGPD
</p>
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-24 bg-[var(--bg-secondary)]">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
Preguntas Frecuentes
</h2>
<p className="mt-4 text-lg text-[var(--text-secondary)]">
Todo lo que necesitas saber sobre Panadería IA
</p>
</div>
<div className="mt-16 space-y-8">
<div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
¿Qué tan precisa es la predicción de demanda?
</h3>
<p className="mt-4 text-[var(--text-secondary)]">
Nuestra IA alcanza una precisión del 92% en predicciones de demanda, analizando más de 50 variables incluyendo
histórico de ventas, clima, eventos locales, estacionalidad y tendencias de mercado. La precisión mejora continuamente
con más datos de tu panadería.
</p>
</div>
<div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
¿Cuánto tiempo toma implementar el sistema?
</h3>
<p className="mt-4 text-[var(--text-secondary)]">
La configuración inicial toma solo 5 minutos. Nuestro equipo te ayuda a migrar tus datos históricos en 24-48 horas.
La IA comienza a generar predicciones útiles después de una semana de datos, alcanzando máxima precisión en 30 días.
</p>
</div>
<div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
¿Se integra con mi sistema POS actual?
</h3>
<p className="mt-4 text-[var(--text-secondary)]">
Sí, nos integramos con más de 50 sistemas POS populares en España. También incluimos nuestro propio POS optimizado
para panaderías. Si usas un sistema específico, nuestro equipo técnico puede crear una integración personalizada.
</p>
</div>
<div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
¿Qué soporte técnico ofrecen?
</h3>
<p className="mt-4 text-[var(--text-secondary)]">
Ofrecemos soporte 24/7 en español por chat, email y teléfono. Todos nuestros técnicos son expertos en operaciones
de panadería. Además, incluimos onboarding personalizado y training para tu equipo sin costo adicional.
</p>
</div>
<div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
<h3 className="text-lg font-semibold text-[var(--text-primary)]">
¿Mis datos están seguros?
</h3>
<p className="mt-4 text-[var(--text-secondary)]">
Absolutamente. Utilizamos cifrado AES-256, servidores en la UE, cumplimos 100% con RGPD y realizamos auditorías
de seguridad trimestrales. Tus datos nunca se comparten con terceros y tienes control total sobre tu información.
</p>
</div>
</div>
</div>
</section>
{/* Final CTA Section */}
<section className="py-24 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] relative overflow-hidden">
<div className="absolute inset-0">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
</div>
<div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 relative">
<h2 className="text-3xl lg:text-5xl font-extrabold text-white">
Transforma tu Panadería
<span className="block text-white/90">Comenzando Hoy</span>
</h2>
<p className="mt-6 text-lg text-white/80 max-w-2xl mx-auto">
Únete a más de 500 panaderías que ya están reduciendo desperdicios, aumentando ventas y
optimizando operaciones con inteligencia artificial.
</p>
<div className="mt-12 flex flex-col sm:flex-row gap-6 justify-center">
<Link to="/register">
<Button
size="lg"
className="px-10 py-4 text-lg font-semibold bg-white text-[var(--color-primary)] hover:bg-[var(--bg-tertiary)] shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200"
>
Comenzar Prueba Gratuita 14 Días
<ArrowRight className="ml-2 w-5 h-5" />
</Button>
</Link>
<Button
size="lg"
variant="outline"
className="px-10 py-4 text-lg font-semibold border-2 border-white text-white hover:bg-white hover:text-[var(--color-primary)] transition-all duration-200"
onClick={() => scrollToSection('demo')}
>
<Play className="mr-2 w-5 h-5" />
Ver Demo
</Button>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
<div>
<div className="text-2xl font-bold text-white">14 días</div>
<div className="text-white/70 text-sm">Prueba gratuita</div>
</div>
<div>
<div className="text-2xl font-bold text-white">5 min</div>
<div className="text-white/70 text-sm">Configuración</div>
</div>
<div>
<div className="text-2xl font-bold text-white">24/7</div>
<div className="text-white/70 text-sm">Soporte incluido</div>
</div>
</div>
</div>
</section>
</PublicLayout>
);
};
export default LandingPage;
Reference in New Issue Copy Permalink