Improve the frontend 4
This commit is contained in:
Urtzi Alfaro
@@ -205,13 +205,12 @@ export const DemoPage: React.FC = () => {
|
||||
</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">Prueba El Panadero Digital</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.
|
||||
Elige el tipo de panadería que se ajuste a tu negocio
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex items-center justify-center space-x-6 text-sm text-[var(--text-tertiary)]">
|
||||
@@ -225,7 +224,7 @@ export const DemoPage: React.FC = () => {
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Shield className="w-4 h-4 text-green-500 mr-2" />
|
||||
Datos aislados y seguros
|
||||
Datos reales en español
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -258,10 +257,14 @@ export const DemoPage: React.FC = () => {
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--text-primary)]">
|
||||
{account.name}
|
||||
{account.account_type === 'individual_bakery'
|
||||
? 'Panadería Individual con Producción local'
|
||||
: 'Panadería Franquiciada con Obrador Central'}
|
||||
</h2>
|
||||
<p className="text-sm text-[var(--text-tertiary)] mt-1">
|
||||
{account.business_model}
|
||||
{account.account_type === 'individual_bakery'
|
||||
? account.business_model
|
||||
: 'Punto de Venta + Obrador Central'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -275,9 +278,57 @@ export const DemoPage: React.FC = () => {
|
||||
{account.description}
|
||||
</p>
|
||||
|
||||
{/* Key Characteristics */}
|
||||
<div className="mb-6 p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-default)]">
|
||||
<p className="text-xs font-semibold text-[var(--text-tertiary)] uppercase mb-3">
|
||||
Características del negocio
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
{account.account_type === 'individual_bakery' ? (
|
||||
<>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Empleados:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">~8</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Turnos:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">1/día</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Ventas:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">Directas</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Productos:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">Local</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Empleados:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">~5-6</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Turnos:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">2/día</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Modelo:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">Franquicia</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-tertiary)]">Productos:</span>
|
||||
<span className="ml-2 font-semibold text-[var(--text-primary)]">De obrador</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
{account.features && account.features.length > 0 && (
|
||||
<div className="mb-6 space-y-2">
|
||||
<div className="mb-8 space-y-2">
|
||||
<p className="text-sm font-semibold text-[var(--text-primary)] mb-3">
|
||||
Funcionalidades incluidas:
|
||||
</p>
|
||||
@@ -290,31 +341,16 @@ export const DemoPage: React.FC = () => {
|
||||
</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"
|
||||
className="w-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] hover:from-[var(--color-primary-dark)] hover:to-[var(--color-primary)] text-white shadow-lg hover:shadow-2xl transform hover:scale-[1.02] transition-all duration-200 font-semibold text-base py-4"
|
||||
>
|
||||
<Play className="mr-2 w-5 h-5" />
|
||||
Probar Demo Ahora
|
||||
Iniciar Demo
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -284,28 +284,28 @@ const LandingPage: React.FC = () => {
|
||||
<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" />
|
||||
<Store className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)]">{t('landing:business_models.central_workshop.title', 'Obrador Central + Puntos de Venta')}</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{t('landing:business_models.central_workshop.subtitle', 'Producción centralizada, distribución múltiple')}</p>
|
||||
<h3 className="text-2xl font-bold text-[var(--text-primary)]">{t('landing:business_models.central_workshop.title', 'Panadería Franquiciada')}</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)]">{t('landing:business_models.central_workshop.subtitle', 'Punto de venta con obrador central')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[var(--text-secondary)] mb-6 leading-relaxed">
|
||||
{t('landing:business_models.central_workshop.description', 'Produces centralmente y distribuyes a múltiples puntos de venta. Necesitas coordinar producción, logística y demanda entre ubicaciones para optimizar cada punto.')}
|
||||
{t('landing:business_models.central_workshop.description', 'Operas un punto de venta que recibe productos de un obrador central. Necesitas gestionar pedidos, inventario y ventas para optimizar tu operación retail.')}
|
||||
</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)]" dangerouslySetInnerHTML={{ __html: t('landing:business_models.central_workshop.features.prediction', '<strong>Predicción agregada y por punto de venta</strong> individual') }} />
|
||||
<span className="text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML={{ __html: t('landing:business_models.central_workshop.features.prediction', '<strong>Gestión de pedidos</strong> al obrador central') }} />
|
||||
</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)]" dangerouslySetInnerHTML={{ __html: t('landing:business_models.central_workshop.features.distribution', '<strong>Gestión de distribución</strong> multi-ubicación coordinada') }} />
|
||||
<span className="text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML={{ __html: t('landing:business_models.central_workshop.features.distribution', '<strong>Control de inventario</strong> de productos recibidos') }} />
|
||||
</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)]" dangerouslySetInnerHTML={{ __html: t('landing:business_models.central_workshop.features.visibility', '<strong>Visibilidad centralizada</strong> con control granular') }} />
|
||||
<span className="text-sm text-[var(--text-secondary)]" dangerouslySetInnerHTML={{ __html: t('landing:business_models.central_workshop.features.visibility', '<strong>Previsión de ventas</strong> para tu punto') }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user