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