Add DEMO feature to the project
This commit is contained in:
Urtzi Alfaro
256
frontend/src/pages/public/DemoPage.tsx
Normal file
256
frontend/src/pages/public/DemoPage.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { PublicLayout } from '../../components/layout';
|
||||
import { Button } from '../../components/ui';
|
||||
import { getDemoAccounts, createDemoSession, DemoAccount } from '../../api/services/demo';
|
||||
import { apiClient } from '../../api/client';
|
||||
import { Check, Clock, Shield, Play, Zap, ArrowRight, Store, Factory } from 'lucide-react';
|
||||
|
||||
export const DemoPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [demoAccounts, setDemoAccounts] = useState<DemoAccount[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [creatingSession, setCreatingSession] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDemoAccounts = async () => {
|
||||
try {
|
||||
const accounts = await getDemoAccounts();
|
||||
setDemoAccounts(accounts);
|
||||
} catch (err) {
|
||||
setError('Error al cargar las cuentas demo');
|
||||
console.error('Error fetching demo accounts:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchDemoAccounts();
|
||||
}, []);
|
||||
|
||||
const handleStartDemo = async (accountType: string) => {
|
||||
setCreatingSession(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const session = await createDemoSession({
|
||||
demo_account_type: accountType as 'individual_bakery' | 'central_baker',
|
||||
});
|
||||
|
||||
// Store session ID in API client
|
||||
apiClient.setDemoSessionId(session.session_id);
|
||||
|
||||
// Store session info in localStorage for UI
|
||||
localStorage.setItem('demo_mode', 'true');
|
||||
localStorage.setItem('demo_session_id', session.session_id);
|
||||
localStorage.setItem('demo_account_type', accountType);
|
||||
localStorage.setItem('demo_expires_at', session.expires_at);
|
||||
localStorage.setItem('demo_tenant_id', session.virtual_tenant_id);
|
||||
|
||||
// Navigate to dashboard
|
||||
navigate('/app/dashboard');
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Error al crear sesión demo');
|
||||
console.error('Error creating demo session:', err);
|
||||
} finally {
|
||||
setCreatingSession(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getAccountIcon = (accountType: string) => {
|
||||
return accountType === 'individual_bakery' ? Store : Factory;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<PublicLayout
|
||||
variant="full-width"
|
||||
contentPadding="none"
|
||||
headerProps={{
|
||||
showThemeToggle: true,
|
||||
showAuthButtons: true,
|
||||
showLanguageSelector: true,
|
||||
}}
|
||||
>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)] mx-auto"></div>
|
||||
<p className="mt-4 text-[var(--text-secondary)]">Cargando cuentas demo...</p>
|
||||
</div>
|
||||
</div>
|
||||
</PublicLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PublicLayout
|
||||
variant="full-width"
|
||||
contentPadding="none"
|
||||
headerProps={{
|
||||
showThemeToggle: true,
|
||||
showAuthButtons: true,
|
||||
showLanguageSelector: true,
|
||||
}}
|
||||
>
|
||||
{/* 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 mb-16">
|
||||
<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)]">
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Demo Interactiva
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-6xl">
|
||||
<span className="block">Prueba BakeryIA</span>
|
||||
<span className="block text-[var(--color-primary)]">sin compromiso</span>
|
||||
</h1>
|
||||
|
||||
<p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl">
|
||||
Explora nuestro sistema con datos reales de panaderías españolas.
|
||||
Elige el tipo de negocio que mejor se adapte a tu caso.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 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">
|
||||
<Clock className="w-4 h-4 text-green-500 mr-2" />
|
||||
30 minutos de acceso
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Shield className="w-4 h-4 text-green-500 mr-2" />
|
||||
Datos aislados y seguros
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-8 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg max-w-2xl mx-auto">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Demo Account Cards */}
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
||||
{demoAccounts.map((account) => {
|
||||
const Icon = getAccountIcon(account.account_type);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={account.account_type}
|
||||
className="relative bg-[var(--bg-primary)] rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-[var(--border-default)] group"
|
||||
>
|
||||
{/* Gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
|
||||
<div className="relative p-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="flex items-center">
|
||||
<div className="p-3 rounded-xl bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--text-primary)]">
|
||||
{account.name}
|
||||
</h2>
|
||||
<p className="text-sm text-[var(--text-tertiary)] mt-1">
|
||||
{account.business_model}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] rounded-full text-xs font-semibold">
|
||||
DEMO
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-[var(--text-secondary)] mb-6">
|
||||
{account.description}
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
{account.features && account.features.length > 0 && (
|
||||
<div className="mb-6 space-y-2">
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)] mb-3">
|
||||
Funcionalidades incluidas:
|
||||
</p>
|
||||
{account.features.map((feature, idx) => (
|
||||
<div key={idx} className="flex items-center text-sm text-[var(--text-secondary)]">
|
||||
<Zap className="w-4 h-4 mr-2 text-[var(--color-primary)]" />
|
||||
{feature}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Demo Benefits */}
|
||||
<div className="space-y-2 mb-8 pt-6 border-t border-[var(--border-default)]">
|
||||
<div className="flex items-center text-sm text-[var(--text-secondary)]">
|
||||
<Check className="w-4 h-4 mr-2 text-green-500" />
|
||||
Datos reales en español
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-[var(--text-secondary)]">
|
||||
<Check className="w-4 h-4 mr-2 text-green-500" />
|
||||
Sesión aislada de 30 minutos
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-[var(--text-secondary)]">
|
||||
<Check className="w-4 h-4 mr-2 text-green-500" />
|
||||
Sin necesidad de registro
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<Button
|
||||
onClick={() => handleStartDemo(account.account_type)}
|
||||
disabled={creatingSession}
|
||||
size="lg"
|
||||
className="w-full 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"
|
||||
>
|
||||
{creatingSession ? (
|
||||
<span className="flex items-center justify-center">
|
||||
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Creando sesión...
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<Play className="mr-2 w-5 h-5" />
|
||||
Probar Demo Ahora
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Footer CTA */}
|
||||
<div className="mt-16 text-center">
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
¿Ya tienes una cuenta?
|
||||
</p>
|
||||
<Link
|
||||
to="/login"
|
||||
className="inline-flex items-center text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] font-semibold transition-colors"
|
||||
>
|
||||
Inicia sesión aquí
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PublicLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default DemoPage;
|
||||
@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '../../components/ui';
|
||||
import { PublicLayout } from '../../components/layout';
|
||||
import {
|
||||
BarChart3,
|
||||
TrendingUp,
|
||||
Shield,
|
||||
Zap,
|
||||
Users,
|
||||
import {
|
||||
BarChart3,
|
||||
TrendingUp,
|
||||
Shield,
|
||||
Zap,
|
||||
Users,
|
||||
Award,
|
||||
ChevronRight,
|
||||
Check,
|
||||
@@ -20,7 +20,8 @@ import {
|
||||
Euro,
|
||||
Package,
|
||||
PieChart,
|
||||
Settings
|
||||
Settings,
|
||||
Brain
|
||||
} from 'lucide-react';
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
@@ -55,38 +56,57 @@ const LandingPage: React.FC = () => {
|
||||
<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">
|
||||
<div className="mb-6 flex flex-wrap items-center justify-center gap-3">
|
||||
<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" />
|
||||
{t('landing:hero.badge', 'IA Avanzada para Panaderías')}
|
||||
</span>
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-500/10 text-green-600 dark:text-green-400">
|
||||
<Shield className="w-4 h-4 mr-2" />
|
||||
Reducción de Desperdicio Alimentario
|
||||
</span>
|
||||
</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', 'Revoluciona tu')}</span>
|
||||
<span className="block text-[var(--color-primary)]">{t('landing:hero.title_line2', 'Panadería con IA')}</span>
|
||||
<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>
|
||||
</h1>
|
||||
|
||||
|
||||
<p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl">
|
||||
{t('landing:hero.subtitle', '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.')}
|
||||
{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.')}
|
||||
</p>
|
||||
|
||||
<div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
|
||||
|
||||
{/* 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>
|
||||
<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 14 Días')}
|
||||
{t('landing:hero.cta_primary', 'Comenzar GRATIS 3 Meses')}
|
||||
<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" />
|
||||
{t('landing:hero.cta_secondary', 'Ver Demo en Vivo')}
|
||||
</Button>
|
||||
<Link to="/demo">
|
||||
<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"
|
||||
>
|
||||
<Play className="mr-2 w-5 h-5" />
|
||||
{t('landing:hero.cta_secondary', 'Ver Demo en Vivo')}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex items-center justify-center space-x-6 text-sm text-[var(--text-tertiary)]">
|
||||
@@ -137,44 +157,126 @@ const LandingPage: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Features Section */}
|
||||
{/* Main Features Section - Focus on AI & Food Waste */}
|
||||
<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">
|
||||
<div className="mb-4">
|
||||
<span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-blue-500/10 to-purple-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20">
|
||||
<Brain className="w-4 h-4 mr-2" />
|
||||
Tecnología de IA de Última Generación
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
Combate el Desperdicio Alimentario
|
||||
<span className="block text-[var(--color-primary)]">con 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.
|
||||
Sistema de alta tecnología que utiliza algoritmos de IA avanzados para optimizar tu producción, reducir residuos alimentarios y mantener tus datos 100% seguros y bajo tu control.
|
||||
</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">
|
||||
{/* AI Technology */}
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-blue-500/50">
|
||||
<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 className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<Brain className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)]">Predicción Inteligente</h3>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)]">IA Avanzada de Predicción</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.
|
||||
Algoritmos de machine learning de última generación analizan patrones históricos, clima, eventos y tendencias para predecir demanda con precisión quirúrgica.
|
||||
</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 className="mt-6 space-y-3">
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Zap className="w-3 h-3 text-blue-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Precisión del 92% en predicciones</span>
|
||||
</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 className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<TrendingUp className="w-3 h-3 text-blue-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Aprendizaje continuo y adaptativo</span>
|
||||
</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 className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<BarChart3 className="w-3 h-3 text-blue-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Análisis predictivo en tiempo real</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Food Waste Reduction */}
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-green-500/50">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-green-600 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<Shield className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)]">Reducción de Desperdicio</h3>
|
||||
<p className="mt-4 text-[var(--text-secondary)]">
|
||||
Contribuye al medioambiente y reduce costos eliminando hasta un 35% del desperdicio alimentario mediante producción optimizada e inteligente.
|
||||
</p>
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Check className="w-3 h-3 text-green-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Hasta 35% menos desperdicio</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Euro className="w-3 h-3 text-green-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Ahorro promedio de €800/mes</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Award className="w-3 h-3 text-green-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Elegible para ayudas UE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Ownership & Privacy */}
|
||||
<div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-amber-500/50">
|
||||
<div className="absolute -top-4 left-8">
|
||||
<div className="w-12 h-12 bg-gradient-to-r from-amber-600 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<Shield className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)]">Tus Datos, Tu Propiedad</h3>
|
||||
<p className="mt-4 text-[var(--text-secondary)]">
|
||||
Privacidad y seguridad total. Tus datos operativos, proveedores y analíticas permanecen 100% bajo tu control. Nunca compartidos, nunca vendidos.
|
||||
</p>
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Shield className="w-3 h-3 text-amber-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">100% propiedad de datos</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Settings className="w-3 h-3 text-amber-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Control total de privacidad</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3">
|
||||
<Award className="w-3 h-3 text-amber-600" />
|
||||
</div>
|
||||
<span className="text-[var(--text-secondary)]">Cumplimiento GDPR garantizado</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -874,15 +976,16 @@ const LandingPage: React.FC = () => {
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<Play className="mr-2 w-5 h-5" />
|
||||
Ver Demo
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export { default as LandingPage } from './LandingPage';
|
||||
export { default as LoginPage } from './LoginPage';
|
||||
export { default as RegisterPage } from './RegisterPage';
|
||||
export { default as RegisterPage } from './RegisterPage';
|
||||
export { default as DemoPage } from './DemoPage';
|
||||
Reference in New Issue
Block a user