// LandingV1.jsx — Editorial Enke. Two variants: 'A' (default, dark hero, mesh) // and 'B' (light hero, abstract waves, warmer feel). Same DNA, different mood. // // Updates per feedback: // - Big ENKE wordmark moment + "¿En ke se va tu plata?" wordplay // - Real bank logos (BankLogo) + Apple Pay // - Copy: Google signup, "1 min", removed "sin tarjeta" // - Simplified PWA install (static phone w/ banner) // - Responsive (CSS clamps + media queries via container width) // - No more particle network animation in V1-B const V1Ink = '#0B1220'; const V1Blue = '#005AD6'; const V1Sky = '#2171E0'; const V1Cloud = '#F6F8FC'; const V1Mint = '#34d399'; const V1Warm = '#FBF7F0'; const v1Styles = { serif: { fontFamily: "'DM Serif Display', serif", fontStyle: 'italic' }, mono: { fontFamily: "'IBM Plex Mono', monospace" }, }; function V1Pill({ tone = 'light', children }) { const dark = tone === 'dark'; return ( {children} ); } function V1Btn({ children, primary, dark, style, fullWidth }) { return ( { e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }} > {children} ); } function V1GoogleBtn({ dark, fullWidth, children = 'Empezar con Google' }) { return ( { e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }} > {children} ); } // ─── HERO V1-A: BRUTALIST — cream + lime + coral, hard shadows, oversized type ─── const V1Lime = '#D9FF3C'; const V1Coral = '#FF5A4E'; const V1Cream = '#F5F0E1'; function V1HeroA() { return (
{/* nav */} {/* split layout */}
{/* LEFT — massive type */}
{/* lime stripe accent */}
Finanzas personales · Chile

¿En
ke ·
se va
tu plata?

Conecta tu banco con Google. Enke detecta cada gasto, lo clasifica y te muestra adónde se va — sin planillas, sin esfuerzo, en menos de un minuto.

Empezar con Google 20 DÍAS
GRATIS
↳ LUEGO $2.500 CLP/MES · CANCELA CUANDO QUIERAS
{/* RIGHT — visual: stacked bold panels */}
● HOY · 14:32 EN VIVO
CAFETERÍA · LASTARRIA
Café Altura
$3.800
● HOY · 11:08
Uber · Providencia
$2.450
● AYER · 19:44
Líder · Ñuñoa
$48.230
{/* stats strip */}
{[ ['1 min', 'CONECTAR TU BANCO'], ['0', 'INGRESOS MANUALES'], ['100%', 'AUTOMÁTICO'], ['$2.500', 'CLP/MES'], ].map(([v, l], i) => (
{v}
{l}
))}
); } // ─── HERO V1-B: light, warm, professional & approachable ─── function V1HeroB() { return (
{/* abstract serif waves bg */} {/* nav */} {/* HUGE serif wordmark */}
Finanzas personales · Chile
enke.

¿En ke se va
tu plata?

Regístrate con Google y Enke detecta automáticamente tus gastos, los clasifica y te muestra exactamente dónde se va tu plata. Sin planillas, sin esfuerzo, en menos de un minuto.

Empezar con Google 20 DÍAS GRATIS · LUEGO $2.500 CLP/MES
{/* sample transaction stack — friendlier visual */}
{[ { t: 'HOY · 14:32', n: 'Café Altura · Lastarria', a: '$3.800', tag: 'Cafetería', tx: 0, ty: 0, rot: -2 }, { t: 'HOY · 11:08', n: 'Uber · Providencia', a: '$2.450', tag: 'Transporte', tx: 60, ty: 90, rot: 1.5 }, { t: 'AYER · 19:44', n: 'Líder · Ñuñoa', a: '$48.230', tag: 'Supermercado', tx: 20, ty: 200, rot: -1 }, ].map((c, i) => (
{c.t} {c.tag.toUpperCase()}
{c.n} {c.a}
))}
{/* stats strip */}
{[ ['1 min', 'PARA CONECTAR TU BANCO'], ['0', 'INGRESOS MANUALES'], ['100%', 'AUTOMÁTICO'], ['$2.500', 'CLP/MES · MENOS QUE UN CAFÉ'], ].map(([v, l], i) => (
{v}
{l}
))}
); } // ─── FEATURES — qué hace Enke (3 tarjetas) ─── function V1Features() { return (
Cómo funciona

Tres cosas que Enke hace por ti, automáticamente.

Conecta una vez. Después, todo es automático. Sin planillas, sin ingresos manuales, sin esfuerzo.

{/* Card 1 — Cross-bank */}
● Orden automático

Cross-bank sin fricción

Todos tus bancos y tarjetas unificados y clasificados en un solo lugar.

{/* Visual: stacked account cards */}
{[ { bank: 'Banco de Chile', last: '8821', tone: '#0033A0', y: 0, scale: 0.92, opacity: 0.5 }, { bank: 'Santander', last: '4012', tone: '#EC0000', y: 18, scale: 0.96, opacity: 0.75 }, { bank: 'Mach', last: '7740', tone: '#FF3358', y: 42, scale: 1, opacity: 1 }, ].map((c, i) => (
CUENTA / TARJETA
{c.bank} ···· {c.last}
))}
{/* Card 2 — Detección instantánea */}
● Tiempo real

Detección instantánea

Cada gasto aparece con monto, fecha y comercio — automáticamente, en el momento en que ocurre.

{/* Visual: animated transaction list */}
{[ { tag: 'CAFETERÍA', name: 'Café Altura', amt: '$3.800', t: 'AHORA' }, { tag: 'TRANSPORTE', name: 'Uber · Providencia', amt: '$2.450', t: 'HACE 2H' }, { tag: 'SUSCRIPCIÓN', name: 'Spotify Premium', amt: '$5.990', t: 'AYER' }, ].map((tx, i) => (
{i === 0 && ( NUEVA )}
{tx.tag} · {tx.t} {tx.name}
{tx.amt}
))}
{/* Card 3 — Recurrentes */}
● Suscripciones

Recurrentes y metas

Detecta pagos recurrentes, planifica tu mes y ahorra con metas inteligentes.

{/* Visual: mini calendar + recurrent badge */}
{['D', 'L', 'M', 'M', 'J', 'V', 'S'].map((d, i) => (
{d}
))}
{[12, 13, 14, 15, 16, 17, 18].map((n) => { const today = n === 15; return (
{n}
); })}
Netflix
RECURRENTE
); } // ─── BANKS — real logo glyphs ─── const V1_BANKS = ['Banco de Chile', 'Santander', 'BCI', 'Falabella', 'Itaú', 'Mach', 'Tenpo', 'BancoEstado']; function V1Banks({ variant = 'A' }) { const dark = variant === 'A'; return (
Compatibilidad

Funciona con todos los bancos de Chile.

+12 BANCOS · ACTUALIZÁNDOSE
{V1_BANKS.map(b => (
{ e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,90,214,0.1)'; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }} >
))}
COMPATIBLE PARA GEOREFERENCIACIÓN DE GASTOS
); } // ─── MAP — same component (already animated) ─── const V1_PINS = [ { x: 52, y: 16, label: 'Antofagasta', amt: '$8.420', t: 0 }, { x: 48, y: 34, label: 'La Serena', amt: '$12.300', t: 0.6 }, { x: 50, y: 52, label: 'Santiago · Lastarria', amt: '$24.500', t: 1.0 }, { x: 53, y: 56, label: 'Providencia', amt: '$9.890', t: 1.4 }, { x: 47, y: 60, label: 'Viña del Mar', amt: '$15.200', t: 1.8 }, { x: 51, y: 72, label: 'Concepción', amt: '$6.750', t: 2.2 }, { x: 49, y: 86, label: 'Pucón', amt: '$32.100', t: 2.6 }, ]; function V1Map({ variant = 'A' }) { const dark = variant === 'A'; const bg = dark ? V1Ink : '#fff'; const fg = dark ? '#fff' : V1Ink; const subFg = dark ? 'rgba(255,255,255,0.6)' : 'rgba(11,18,32,0.6)'; const subSubFg = dark ? 'rgba(255,255,255,0.4)' : 'rgba(11,18,32,0.4)'; const stroke = dark ? 'rgba(255,255,255,0.08)' : 'rgba(11,18,32,0.08)'; const cardBg = dark ? 'rgba(255,255,255,0.04)' : V1Cloud; return (
Mapa de gastos

Ve dónde gastaste
tu plata.

Cada gasto aparece en el mapa con su monto, fecha y comercio. Entiende tus patrones de gasto geográficamente y descubre adónde se va tu plata sin abrir una sola planilla.

{[['7', 'CIUDADES'], ['$108K', 'GASTADO'], ['43', 'TXNS']].map(([v, l]) => (
{v}
{l}
))}
Ver mi mapa de gastos
LA GEOREFERENCIACIÓN DE GASTOS SÓLO APLICA A GASTOS REALIZADOS CON APPLE PAY
{/* MAP */}
{V1_PINS.map((p, i) => (
{p.label}
{p.amt}
))}
); } // ─── INSTALL — simplified static phone with banner ─── function V1Install({ variant = 'A' }) { return (
{/* phone */}
{/* home screen icons grid */}
PANTALLA DE INICIO
{Array.from({ length: 12 }).map((_, i) => { const isEnke = i === 5; return (
{isEnke && } {isEnke && (
)}
); })}
↓ ENKE INSTALADA COMO APP NATIVA
Web App

Úsala como una app nativa.

Enke es una Progressive Web App. Instálala en tu pantalla de inicio en segundos — sin App Store, sin descargas pesadas, sin esperar.

    {[ ['Abre enke.cl en Safari', 'Visita desde tu iPhone'], ['Toca el botón Compartir', 'El ícono cuadrado con la flecha'], ['Añadir a pantalla de inicio', 'Listo · Enke aparece como app'], ].map((s, i) => (
  1. {i + 1}
    {s[0]}
    {s[1]}
    2. ))}
); } // ─── PRICING ─── function V1Pricing({ variant = 'A' }) { return (
Precio

20 días gratis.
Luego, $2.500 al mes... ¡Menos que un café!

Una inversión accesible para tener finanzas claras todo el mes. Cancela cuando quieras desde la app.

PRUEBA
Gratis
20 días completos
    {['Acceso completo', 'Todos los bancos', 'Mapa de gastos', 'Sin restricciones'].map(f => (
  • {f}
    • ))}
ENKE PRO
$2.500 CLP/MES
Menos que un café · 1 vez al mes
    {['Sincronización en tiempo real', 'Mapa de gastos georeferenciado', 'Detección de recurrentes', 'Categorías de gastos inteligentes', 'Soporte prioritario'].map(f => (
  • {f}
    • ))}
Empezar prueba gratis
); } // ─── FINAL CTA ─── function V1FinalCta({ variant = 'A' }) { return (
Empieza hoy

Toma el control
sin esfuerzo.

Conecta tu banco con Google en menos de un minuto y descubre exactamente en qué se va tu plata.

Empezar con Google 20 DÍAS GRATIS · LUEGO $2.500 CLP/MES · CANCELA CUANDO QUIERAS
); } function V1Footer() { return ( ); } const V1_GLOBAL_CSS = ` html { scroll-behavior: smooth; } @keyframes v1blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } @keyframes v1pin { 0% { opacity: 0; transform: translate(-50%, -150%) scale(0.5); } 60% { transform: translate(-50%, -50%) scale(1.3); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes v1ring { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes v1fadeIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes v1float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } } @keyframes v1iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @media (max-width: 900px) { .v1-nav-links { display: none !important; } .v1-stats-strip { grid-template-columns: repeat(2, 1fr) !important; } .v1-banks-grid { grid-template-columns: repeat(2, 1fr) !important; } .v1-pricing-grid { grid-template-columns: 1fr !important; } .v1b-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .v1a-hero-grid { grid-template-columns: 1fr !important; } .v1-features-grid { grid-template-columns: 1fr !important; } .v1b-hero-cards { min-height: 360px !important; } .v1-map-grid > div { grid-template-columns: 1fr !important; gap: 32px !important; } .v1-install-grid > div { grid-template-columns: 1fr !important; gap: 32px !important; } .v1-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; } } @media (max-width: 600px) { .v1-stats-strip { grid-template-columns: 1fr 1fr !important; } .v1-banks-grid { grid-template-columns: 1fr 1fr !important; } .v1-footer-grid { grid-template-columns: 1fr !important; } } `; function LandingV1({ variant = 'A' }) { return (
{variant === 'A' ? : }
); } window.LandingV1 = LandingV1;