Improve the landing page
This commit is contained in:
Urtzi Alfaro
916
frontend/src/pages/public/FeaturesPage.tsx
Normal file
916
frontend/src/pages/public/FeaturesPage.tsx
Normal file
@@ -0,0 +1,916 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { PublicLayout } from '../../components/layout';
|
||||
import { Button } from '../../components/ui';
|
||||
import { getDemoUrl } from '../../utils/navigation';
|
||||
import {
|
||||
Clock,
|
||||
MapPin,
|
||||
TrendingUp,
|
||||
Recycle,
|
||||
Leaf,
|
||||
Store,
|
||||
CheckCircle2,
|
||||
Calendar,
|
||||
Package,
|
||||
AlertTriangle,
|
||||
Euro,
|
||||
Globe,
|
||||
School,
|
||||
Building2,
|
||||
Dumbbell,
|
||||
ShoppingBag,
|
||||
Cloud,
|
||||
PartyPopper,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
Target,
|
||||
TreeDeciduous,
|
||||
Droplets,
|
||||
Award
|
||||
} from 'lucide-react';
|
||||
|
||||
const FeaturesPage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<PublicLayout
|
||||
variant="default"
|
||||
contentPadding="md"
|
||||
headerProps={{
|
||||
showThemeToggle: true,
|
||||
showAuthButtons: true,
|
||||
showLanguageSelector: true,
|
||||
variant: "default"
|
||||
}}
|
||||
>
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
<h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
|
||||
{t('features:hero.title', 'Cómo Bakery-IA Trabaja Para Ti Cada Día')}
|
||||
</h1>
|
||||
<p className="text-xl text-[var(--text-secondary)] leading-relaxed">
|
||||
{t('features:hero.subtitle', 'Todas las funcionalidades explicadas en lenguaje sencillo para dueños de panaderías')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature 1: Automatic Daily System - THE KILLER FEATURE */}
|
||||
<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-16">
|
||||
<div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>{t('features:automatic.badge', 'La Funcionalidad Estrella')}</span>
|
||||
</div>
|
||||
<h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6">
|
||||
{t('features:automatic.title', 'Tu Asistente Personal Que Nunca Duerme')}
|
||||
</h2>
|
||||
<p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
|
||||
{t('features:automatic.intro', 'Imagina contratar un ayudante súper organizado que llega a las 5:30 AM (antes que tú) y hace todo esto AUTOMÁTICAMENTE:')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-5xl mx-auto space-y-8">
|
||||
{/* Step 1 */}
|
||||
<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="flex gap-6 items-start">
|
||||
<div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:automatic.step1.title', 'Revisa Todo Tu Inventario')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step1.item1', 'Cuenta cada kilo de harina, cada litro de leche')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step1.item2', 'Comprueba fechas de caducidad')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step1.item3', 'Ve qué llega hoy de proveedores')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-8 border-2 border-purple-200 dark:border-purple-800">
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:automatic.step2.title', 'Predice Ventas de Hoy')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step2.item1', 'Analiza el día (lunes lluvioso, fiesta local, colegio cerrado)')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step2.item2', 'Compara con días similares del pasado')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step2.item3', 'Te dice: "Hoy venderás 80 croissants, 120 barras, 50 magdalenas"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl p-8 border-2 border-green-200 dark:border-green-800">
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:automatic.step3.title', 'Planifica Qué Hacer')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step3.item1', 'Calcula exactamente cuánto hornear')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step3.item2', 'Te da una lista lista para ejecutar')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step3.item3', '"Haz 80 croissants (no 100), usa 5kg mantequilla, 3kg harina..."')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 4 - Inventory Management */}
|
||||
<div className="bg-gradient-to-r 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 gap-6 items-start">
|
||||
<div className="w-16 h-16 bg-amber-600 rounded-full flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:automatic.step4.title', 'Gestiona Inventario Inteligentemente')}
|
||||
</h3>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 mb-4 border border-amber-300 dark:border-amber-700">
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)] mb-2">{t('features:automatic.step4.projection_title', 'Proyecta 7 días hacia adelante:')}</p>
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.step4.day1', 'Hoy: 50kg harina')}</span>
|
||||
<span className="text-green-600">✅</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.step4.day2', 'Mañana: 42kg')}</span>
|
||||
<span className="text-green-600">✅</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.step4.day3', 'Pasado: 30kg')}</span>
|
||||
<span className="text-amber-600">⚠️</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.step4.day4', 'Día 4: 15kg')}</span>
|
||||
<span className="text-red-600">🚨</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.step4.day5', 'Día 5: Te quedarías sin harina')}</span>
|
||||
<span className="text-red-600">❌</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-green-100 dark:bg-green-900/30 rounded-lg p-4 border-l-4 border-green-600">
|
||||
<p className="font-bold text-green-900 dark:text-green-100 mb-2">
|
||||
{t('features:automatic.step4.solution_title', 'SOLUCIÓN AUTOMÁTICA:')}
|
||||
</p>
|
||||
<p className="text-green-800 dark:text-green-200">
|
||||
{t('features:automatic.step4.solution', '"Pide 50kg hoy, llega en 3 días, problema resuelto"')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 5 - Purchase Orders */}
|
||||
<div className="bg-gradient-to-r from-red-50 to-rose-50 dark:from-red-900/20 dark:to-rose-900/20 rounded-2xl p-8 border-2 border-red-200 dark:border-red-800">
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:automatic.step5.title', 'Crea Pedidos a Proveedores')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step5.item1', 'Sabe que Proveedor A tarda 3 días, Proveedor B tarda 5')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step5.item2', 'Calcula cuándo pedir para que llegue justo a tiempo')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step5.item3', 'Prepara pedidos listos para aprobar con 1 clic')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step 6 - Waste Prevention */}
|
||||
<div className="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20 rounded-2xl p-8 border-2 border-teal-200 dark:border-teal-800">
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="w-16 h-16 bg-teal-600 rounded-full flex items-center justify-center text-white text-2xl font-bold flex-shrink-0">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:automatic.step6.title', 'Previene Desperdicios')}
|
||||
</h3>
|
||||
<div className="space-y-3 text-[var(--text-secondary)]">
|
||||
<p className="font-medium">{t('features:automatic.step6.perishables', 'Ingredientes perecederos (leche, nata, huevos):')}</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step6.item1', '"Tienes leche que caduca en 5 días"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step6.item2', '"Solo usarás 15L en 5 días"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-teal-600 mt-0.5 flex-shrink-0" />
|
||||
<span>{t('features:automatic.step6.item3', '"No pidas más de 15L, se desperdiciará"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Morning Result */}
|
||||
<div className="bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white">
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<Clock className="w-16 h-16 mx-auto mb-4" />
|
||||
<h3 className="text-2xl lg:text-3xl font-bold mb-4">
|
||||
{t('features:automatic.result.title', 'A las 6:00 AM recibes un email:')}
|
||||
</h3>
|
||||
<div className="space-y-2 text-lg">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
<span>{t('features:automatic.result.item1', 'Predicción del día hecha')}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
<span>{t('features:automatic.result.item2', 'Plan de producción listo')}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
<span>{t('features:automatic.result.item3', '3 pedidos creados (aprobar con 1 clic)')}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<CheckCircle2 className="w-6 h-6" />
|
||||
<span>{t('features:automatic.result.item4', 'Alerta: "Leche caduca en 2 días, úsala primero"')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* What it eliminates */}
|
||||
<div className="bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)]">
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-6 text-center">
|
||||
{t('features:automatic.eliminates.title', 'Lo que ELIMINA de tu rutina:')}
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">❌</span>
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.eliminates.item1', 'Adivinar cuánto hacer')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">❌</span>
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.eliminates.item2', 'Contar inventario manualmente')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">❌</span>
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.eliminates.item3', 'Calcular cuándo pedir a proveedores')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">❌</span>
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.eliminates.item4', 'Recordar fechas de caducidad')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">❌</span>
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.eliminates.item5', 'Preocuparte por quedarte sin stock')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">❌</span>
|
||||
<span className="text-[var(--text-secondary)]">{t('features:automatic.eliminates.item6', 'Desperdiciar ingredientes caducados')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature 2: Local Intelligence */}
|
||||
<section className="py-20 bg-[var(--bg-secondary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>{t('features:local.badge', 'Tu Ventaja Competitiva')}</span>
|
||||
</div>
|
||||
<h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-6">
|
||||
{t('features:local.title', 'Tu Panadería Es Única. La IA También.')}
|
||||
</h2>
|
||||
<p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
|
||||
{t('features:local.intro', 'Las IA genéricas saben que es lunes. La TUYA sabe que:')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
||||
{/* Schools */}
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
|
||||
<div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<School className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:local.schools.title', 'Colegios Cerca')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.schools.item1', '"El CEIP San José está a 200m"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.schools.item2', '"En agosto venden 40% menos (vacaciones escolares)"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.schools.item3', '"Los lunes a las 8:30 hay pico (padres tras dejar niños)"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Offices */}
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
|
||||
<div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<Building2 className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:local.offices.title', 'Oficinas y Empresas')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-purple-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.offices.item1', '"Edificio de oficinas a 150m (250 trabajadores)"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-purple-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.offices.item2', '"Viernes venden menos al mediodía (teletrabajo)"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-purple-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.offices.item3', '"Hora punta: 13:00-14:00 (bocadillos)"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Gyms */}
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
|
||||
<div className="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<Dumbbell className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:local.gyms.title', 'Centros Deportivos')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.gyms.item1', '"Gimnasio a 300m"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.gyms.item2', '"Mayor venta de productos saludables (pan integral, barritas)"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.gyms.item3', '"Pico a las 7:00 AM y 19:00 PM"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Competition */}
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
|
||||
<div className="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<ShoppingBag className="w-6 h-6 text-amber-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:local.competition.title', 'Tu Competencia')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-amber-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.competition.item1', '"Otra panadería abrió hace 2 meses a 500m"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-amber-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.competition.item2', '"Impacto: -15% en ventas de pan básico"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-amber-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.competition.item3', '"Oportunidad: Diferénciate con especialidades"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Weather */}
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
|
||||
<div className="w-12 h-12 bg-sky-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<Cloud className="w-6 h-6 text-sky-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:local.weather.title', 'Clima de Tu Zona')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.weather.item1', '"Datos AEMET de tu código postal"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.weather.item2', '"Lluvia → -20% croissants, +10% pan de molde"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-sky-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.weather.item3', '"Calor → +30% productos frescos"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Events */}
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all">
|
||||
<div className="w-12 h-12 bg-pink-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<PartyPopper className="w-6 h-6 text-pink-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:local.events.title', 'Eventos Locales')}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-[var(--text-secondary)]">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-pink-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.events.item1', '"Mercadillo los viernes en Plaza Mayor (500m)"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-pink-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.events.item2', '"Fiestas del barrio próxima semana"')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-pink-600 mt-0.5">•</span>
|
||||
<span>{t('features:local.events.item3', '"Partido importante → pico de ventas pre-evento"')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Why it matters */}
|
||||
<div className="mt-12 max-w-4xl mx-auto bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white">
|
||||
<h3 className="text-2xl font-bold mb-4 text-center">
|
||||
{t('features:local.why_matters.title', 'Por qué importa:')}
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white/10 rounded-lg p-4">
|
||||
<p className="font-medium mb-2">{t('features:local.why_matters.generic', 'IA genérica:')}</p>
|
||||
<p className="text-white/90">{t('features:local.why_matters.generic_example', '"Es lunes → vende X"')}</p>
|
||||
</div>
|
||||
<div className="bg-white/20 rounded-lg p-4 border-2 border-white">
|
||||
<p className="font-medium mb-2">{t('features:local.why_matters.yours', 'TU IA:')}</p>
|
||||
<p className="text-white/90">{t('features:local.why_matters.yours_example', '"Es lunes, llueve, colegio cerrado (festivo local), mercadillo cancelado → vende Y"')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center mt-6 text-xl font-bold">
|
||||
{t('features:local.accuracy', 'Precisión: 92% (vs 60-70% de sistemas genéricos)')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature 3: Demand Forecasting */}
|
||||
<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">
|
||||
{t('features:forecasting.title', 'Sabe Cuánto Venderás Mañana (92% de Precisión)')}
|
||||
</h2>
|
||||
<p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
|
||||
{t('features:forecasting.subtitle', 'No es magia. Es matemáticas con tus datos.')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<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-200 dark:border-blue-800 mb-8">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('features:forecasting.learns_from.title', 'La IA aprende de:')}
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:forecasting.learns_from.item1', 'Tus ventas pasadas (6-12 meses)')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:forecasting.learns_from.item2', 'Día de la semana (lunes ≠ sábado)')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:forecasting.learns_from.item3', 'Estacionalidad (agosto ≠ diciembre)')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:forecasting.learns_from.item4', 'Clima local (lluvia, calor, frío)')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:forecasting.learns_from.item5', 'Eventos y festivos')}</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:forecasting.learns_from.item6', 'Tu entorno único')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-[var(--color-primary)] shadow-lg">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('features:forecasting.result.title', 'Resultado:')}
|
||||
</h3>
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
{t('features:forecasting.result.intro', 'Mañana (martes 15 de marzo) venderás:')}
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center bg-[var(--bg-secondary)] rounded-lg p-4">
|
||||
<span className="font-medium">{t('features:forecasting.result.croissants', '78-82 croissants')}</span>
|
||||
<span className="text-[var(--color-primary)] font-bold">{t('features:forecasting.result.croissants_avg', '(80 ±2)')}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center bg-[var(--bg-secondary)] rounded-lg p-4">
|
||||
<span className="font-medium">{t('features:forecasting.result.loaves', '115-125 barras')}</span>
|
||||
<span className="text-[var(--color-primary)] font-bold">{t('features:forecasting.result.loaves_avg', '(120 ±5)')}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center bg-[var(--bg-secondary)] rounded-lg p-4">
|
||||
<span className="font-medium">{t('features:forecasting.result.muffins', '45-50 magdalenas')}</span>
|
||||
<span className="text-[var(--color-primary)] font-bold">{t('features:forecasting.result.muffins_avg', '(48 ±2)')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-[var(--text-secondary)]">
|
||||
{t('features:forecasting.confidence', 'Confianza: 92% de las veces acierta dentro del rango')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature 4: Reduce Waste = Save Money */}
|
||||
<section className="py-20 bg-[var(--bg-secondary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
|
||||
{t('features:waste.title', 'Menos Pan en la Basura, Más Dinero en Tu Bolsillo')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
|
||||
{/* Before */}
|
||||
<div className="bg-red-50 dark:bg-red-900/20 rounded-2xl p-8 border-2 border-red-200 dark:border-red-800">
|
||||
<div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center mb-4">
|
||||
<AlertTriangle className="w-6 h-6 text-red-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('features:waste.before.title', 'Ejemplo típico de panadería:')}
|
||||
</h3>
|
||||
<ul className="space-y-3 text-[var(--text-secondary)]">
|
||||
<li>{t('features:waste.before.item1', 'Haces 50 barras de más cada día "por si acaso"')}</li>
|
||||
<li>{t('features:waste.before.item2', 'Precio: €2/barra')}</li>
|
||||
<li className="font-bold text-red-700 dark:text-red-400">{t('features:waste.before.daily', 'Desperdicio: 50 × €2 = €100/día')}</li>
|
||||
<li className="font-bold text-red-700 dark:text-red-400">{t('features:waste.before.monthly', 'Al mes: €100 × 30 = €3,000 perdidos')}</li>
|
||||
<li className="font-bold text-red-900 dark:text-red-300 text-lg">{t('features:waste.before.yearly', 'Al año: €36,000 tirados a la basura')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* After */}
|
||||
<div className="bg-green-50 dark:bg-green-900/20 rounded-2xl p-8 border-2 border-green-200 dark:border-green-800">
|
||||
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
|
||||
<TrendingUp className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('features:waste.after.title', 'Con Bakery-IA:')}
|
||||
</h3>
|
||||
<ul className="space-y-3 text-[var(--text-secondary)]">
|
||||
<li>{t('features:waste.after.item1', 'Predicción precisa → Haces 5-10 barras de más (seguridad)')}</li>
|
||||
<li>{t('features:waste.after.item2', 'Desperdicio: 5 × €2 = €10/día')}</li>
|
||||
<li className="font-bold text-green-700 dark:text-green-400">{t('features:waste.after.monthly', 'Al mes: €300')}</li>
|
||||
<li className="font-bold text-green-900 dark:text-green-300 text-xl bg-green-100 dark:bg-green-900/40 p-3 rounded-lg">
|
||||
{t('features:waste.after.savings', 'AHORRO: €2,700/mes (€32,400/año)')}
|
||||
</li>
|
||||
</ul>
|
||||
<p className="mt-4 text-sm font-medium text-green-700 dark:text-green-400">
|
||||
{t('features:waste.after.roi', 'Recuperas la inversión en semana 1.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature 5: Sustainability + Grants */}
|
||||
<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">
|
||||
<div className="inline-flex items-center gap-2 bg-green-500/10 text-green-600 dark:text-green-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<Leaf className="w-4 h-4" />
|
||||
<span>{t('features:sustainability.badge', 'Funcionalidad del Sistema')}</span>
|
||||
</div>
|
||||
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
|
||||
{t('features:sustainability.title', 'Ayuda al Planeta, Accede a Ayudas Económicas')}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* UN SDG Compliance */}
|
||||
<div className="max-w-5xl mx-auto mb-12">
|
||||
<div className="bg-gradient-to-br from-blue-50 to-green-50 dark:from-blue-900/20 dark:to-green-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white flex-shrink-0">
|
||||
<Globe className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
|
||||
{t('features:sustainability.un_sdg.title', 'Cumplimiento Automático ODS 12.3 (ONU)')}
|
||||
</h3>
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
{t('features:sustainability.un_sdg.description', 'Sin hacer nada extra, cumples con el Objetivo de Desarrollo Sostenible 12.3 de Naciones Unidas (reducción desperdicio alimentario).')}
|
||||
</p>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-blue-600">
|
||||
<p className="font-medium text-[var(--text-primary)]">
|
||||
{t('features:sustainability.un_sdg.benefit', 'Recibes certificación automática → Credibilidad con clientes')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grant Programs */}
|
||||
<div className="max-w-6xl mx-auto mb-12">
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)] mb-6 text-center">
|
||||
{t('features:sustainability.grants.title', 'Elegible para 5 Programas de Ayudas:')}
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Euro className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">
|
||||
{t('features:sustainability.grants.pima.title', 'PIMA Adapta (MITECO)')}
|
||||
</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-2">
|
||||
{t('features:sustainability.grants.pima.amount', 'Hasta €50,000')}
|
||||
</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
{t('features:sustainability.grants.pima.description', 'Proyectos de economía circular. Tu sistema = reducción desperdicio certificada')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Euro className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">
|
||||
{t('features:sustainability.grants.tourism.title', 'Planes de Sostenibilidad Turística')}
|
||||
</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-2">
|
||||
{t('features:sustainability.grants.tourism.amount', 'Hasta €30,000')}
|
||||
</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
{t('features:sustainability.grants.tourism.description', 'Para panaderías en zonas turísticas')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Euro className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">
|
||||
{t('features:sustainability.grants.moves.title', 'MOVES Circular (Empresas)')}
|
||||
</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-2">
|
||||
{t('features:sustainability.grants.moves.amount', 'Hasta €20,000')}
|
||||
</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
{t('features:sustainability.grants.moves.description', 'Transformación digital sostenible')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Euro className="w-5 h-5 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">
|
||||
{t('features:sustainability.grants.regional.title', 'Ayudas Economía Circular Autonómicas')}
|
||||
</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-2">
|
||||
{t('features:sustainability.grants.regional.amount', 'Variable')}
|
||||
</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
{t('features:sustainability.grants.regional.description', 'Depende de tu comunidad autónoma')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 bg-gradient-to-r from-[var(--color-primary)]/10 to-green-500/10 rounded-xl p-6 border-2 border-[var(--color-primary)]">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[var(--color-primary)] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Award className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-[var(--text-primary)] mb-2">
|
||||
{t('features:sustainability.grants.tax.title', 'Bonificaciones Fiscales')}
|
||||
</h4>
|
||||
<p className="text-sm text-[var(--text-secondary)] mb-2">
|
||||
{t('features:sustainability.grants.tax.amount', 'Hasta 25% reducción')}
|
||||
</p>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
{t('features:sustainability.grants.tax.description', 'Deducción por inversión en sostenibilidad')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* How it works */}
|
||||
<div className="max-w-4xl mx-auto bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)]">
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('features:sustainability.how_it_works.title', 'Cómo funciona:')}
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:sustainability.how_it_works.item1', 'Bakery-IA genera reportes automáticos')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:sustainability.how_it_works.item2', 'Métricas de reducción de desperdicio (kg CO₂, litros agua)')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:sustainability.how_it_works.item3', 'Documentación lista para solicitudes')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:sustainability.how_it_works.item4', 'Te ayudamos con el proceso')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Impact metrics */}
|
||||
<div className="max-w-5xl mx-auto mt-12 grid md:grid-cols-3 gap-6">
|
||||
<div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl p-6 border border-green-200 dark:border-green-800 text-center">
|
||||
<TreeDeciduous className="w-12 h-12 text-green-600 mx-auto mb-3" />
|
||||
<div className="text-3xl font-bold text-green-700 dark:text-green-400 mb-2">85kg CO₂</div>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{t('features:sustainability.impact.co2', 'reducidos al mes (equivale a 3 árboles plantados)')}</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800 text-center">
|
||||
<Droplets className="w-12 h-12 text-blue-600 mx-auto mb-3" />
|
||||
<div className="text-3xl font-bold text-blue-700 dark:text-blue-400 mb-2">675,000L</div>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{t('features:sustainability.impact.water', 'agua ahorrada al año')}</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-xl p-6 border border-amber-200 dark:border-amber-800 text-center">
|
||||
<Award className="w-12 h-12 text-amber-600 mx-auto mb-3" />
|
||||
<div className="text-3xl font-bold text-amber-700 dark:text-amber-400 mb-2">{t('features:sustainability.impact.certification', 'Certificado')}</div>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{t('features:sustainability.impact.certification_desc', 'ODS 12.3 ONU')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature 6: Business Models */}
|
||||
<section className="py-20 bg-[var(--bg-secondary)]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
|
||||
{t('features:business_models.title', 'Para Cualquier Modelo de Negocio')}
|
||||
</h2>
|
||||
<p className="text-xl text-[var(--text-secondary)]">
|
||||
{t('features:business_models.subtitle', 'No importa cómo trabajes, funciona para ti')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-[var(--color-primary)]">
|
||||
<div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<Store className="w-6 h-6 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('features:business_models.local.title', 'Panadería Producción Local')}
|
||||
</h3>
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
{t('features:business_models.local.description', 'Horneas y vendes en el mismo local')}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:business_models.local.benefit1', 'IA optimiza producción diaria')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:business_models.local.benefit2', 'Gestiona inventario de un punto')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-blue-600">
|
||||
<div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
|
||||
<Globe className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
|
||||
{t('features:business_models.central.title', 'Obrador Central + Puntos de Venta')}
|
||||
</h3>
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
{t('features:business_models.central.description', 'Produces en obrador, distribuyes a tiendas')}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:business_models.central.benefit1', 'IA predice demanda por punto de venta')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:business_models.central.benefit2', 'Optimiza distribución y transporte')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[var(--text-secondary)]">{t('features:business_models.central.benefit3', 'Gestiona inventario central + puntos')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
|
||||
{t('features:cta.title', 'Ver Bakery-IA en Acción')}
|
||||
</h2>
|
||||
<p className="text-xl text-white/90 mb-8">
|
||||
{t('features:cta.subtitle', 'Solicita una demo personalizada para tu panadería')}
|
||||
</p>
|
||||
<Link to={getDemoUrl()}>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-[var(--color-primary)] hover:bg-gray-100 font-bold text-lg px-8 py-4"
|
||||
>
|
||||
{t('features:cta.button', 'Solicitar Demo')}
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</PublicLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeaturesPage;
|
||||
File diff suppressed because it is too large
Load Diff
1320
frontend/src/pages/public/LandingPage.tsx.backup
Normal file
1320
frontend/src/pages/public/LandingPage.tsx.backup
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user