// sections-v2.jsx — Fluentra landing sections (production version) // Content adapted for Fluentra's real product & plans. // Pricing: Test (Free), POC ($50), Starter ($500), Custom // i18n: detects navigator.language → es | en // ─── i18n ──────────────────────────────────────────────────────────────────── const LANG = (navigator.language || '').toLowerCase().startsWith('es') ? 'es' : 'en'; const T = { en: { // nav how: 'How it works', features: 'Features', demo: 'Demo', cases: 'Use cases', pricing: 'Pricing', docs: 'docs ↗', signin: 'Sign in', start: 'Start free', // hero eyebrow: 'Now in production', h1a: 'Automate your logic.', h1b: 'React to anything.', sub: 'Fluentra is an event-driven workflow engine for backends. Define stateful logic with triggers, conditions, and waits — then run long-lived instances without babysitting a queue.', cta1: 'Start building free', cta2: 'Watch 2-min demo', trust1: 'Zero infra to manage', trust2: '99.9% uptime', trust3: 'Global', trust4: '$0 to start · usage-based', // how how_kicker: 'How it works', how_title: 'From event to outcome in three steps', how_desc: 'Compose triggers, conditions, and durable waits. Fluentra handles the state, retries, and timing — for as long as it takes.', step1_n: '01 / DEFINE', step1_t: 'Sketch the workflow', step1_b: 'Drag and drop nodes — triggers, branches, waits, actions — in the visual editor. No code required.', step2_n: '02 / TRIGGER', step2_t: 'Receive any event', step2_b: 'Webhooks, HTTP, or any integration. Each event spawns a stateful instance with its own memory and timeline.', step3_n: '03 / RUN', step3_t: 'Run for seconds — or months', step3_b: 'Instances persist across restarts. Wait hours for an event, days for a follow-up, or months for a renewal.', // features feat_kicker: 'Platform', feat_title: 'Built like infrastructure should be', feat_desc: 'Six guarantees that turn brittle cron jobs and tangled queues into durable, observable workflows.', f1t: 'Durable waits', f1b: 'Wait minutes, days, or months. Instances survive restarts without losing context.', f2t: 'Branching logic', f2b: 'Conditional logic, parallel forks, joins, and sub-flows — all visual, all testable.', f3t: 'API actions', f3b: 'Call external REST APIs directly from any node. Capture responses as variables for downstream logic.', f4t: 'Multi-tenant', f4b: 'Fully isolated environments per organization with role-based access and per-tenant endpoints.', f5t: 'Audit-grade logs', f5b: 'Every transition and side effect is captured. Replay any instance, inspect any state, prove any action.', f6t: 'Secure by default', f6b: 'JWT-based auth, per-tenant isolation, and scoped webhook endpoints. Your data never crosses tenant boundaries.', // demo demo_kicker: 'Live demo', demo_title: 'Speeding truck monitor', demo_desc: 'A real workflow: count three speeding events per truck within an hour, then auto-issue a ticket. Watch it run.', demo_pause: 'Pause', demo_resume: 'Resume', demo_stream: 'stream', demo_reset: 'Reset', demo_watching: 'watching', demo_ticket: 'ticket issued', // cases cases_kicker: 'Use cases', cases_title: 'Replaces a queue, a cron, and a state machine', cases_desc: 'Teams use Fluentra wherever logic outlives a single request.', c1t: 'Payments & dunning', c1b: 'Retry failed charges on a schedule, escalate to humans, freeze accounts — all in one durable flow.', c2t: 'User onboarding', c2b: 'Drip emails, in-app nudges, sales handoff. Long-lived state per user, branched on behavior.', c3t: 'Fleet & IoT', c3b: 'Aggregate sensor events, fire alerts, throttle false positives. Stateful per-device with hourly windows.', // pricing price_kicker: 'Pricing', price_title: 'Pay for what runs, not what waits', price_desc: 'Start free. Scale as you grow. No hidden fees.', p1n: 'Test', p1p: '$0', p1per: '/ forever', p1f1: '5 workflow instances / month', p1f2: 'All node types', p1f3: 'Webhook endpoints', p1f4: 'Instance history', p1cta: 'Start free', popular: 'Popular', p2n: 'POC', p2p: '$50', p2per: '/ month', p2f1: '50 workflow instances / month', p2f2: 'All node types', p2f3: 'Multiple webhook endpoints', p2f4: 'Full instance history', p2f5: 'Multi-tenant support', p2cta: 'Start POC', p3n: 'Starter', p3p: '$500', p3per: '/ month', p3f1: '10,000 instances / month', p3f2: 'All node types + sub-flows', p3f3: 'Unlimited webhook endpoints', p3f4: 'Priority support', p3f5: 'SLA monitoring', p3cta: 'Get Starter', // footer ft1: 'Event-driven workflow automation for developers and technical teams.', fc1: 'Product', fc2: 'Resources', fc3: 'Company', fwf: 'Workflows', ftr: 'Triggers', fch: 'Changelog', fdo: 'Docs', fex: 'Examples', fst: 'Status', fab: 'About', fbl: 'Blog', fco: 'Contact', copy: '© 2026 Fluentra, Inc.', sys: 'All systems operational', }, es: { how: 'Cómo funciona', features: 'Funciones', demo: 'Demo', cases: 'Casos de uso', pricing: 'Precios', docs: 'docs ↗', signin: 'Iniciar sesión', start: 'Comenzar gratis', eyebrow: 'Ya en producción', h1a: 'Automatiza tu lógica.', h1b: 'Reacciona a todo.', sub: 'Fluentra es un motor de flujos de trabajo orientado a eventos. Define lógica con estado — triggers, condiciones y esperas — y ejecuta instancias de larga duración sin gestionar colas.', cta1: 'Comenzar gratis', cta2: 'Ver demo de 2 min', trust1: 'Cero infra que gestionar', trust2: '99.9% uptime', trust3: 'Global', trust4: '$0 para empezar · pago por uso', how_kicker: 'Cómo funciona', how_title: 'De evento a resultado en tres pasos', how_desc: 'Compón triggers, condiciones y esperas duraderas. Fluentra gestiona el estado, los reintentos y el tiempo — todo el tiempo que sea necesario.', step1_n: '01 / DEFINIR', step1_t: 'Diseña el flujo', step1_b: 'Arrastra y suelta nodos — triggers, ramas, esperas, acciones — en el editor visual. Sin código.', step2_n: '02 / DISPARAR', step2_t: 'Recibe cualquier evento', step2_b: 'Webhooks, HTTP o cualquier integración. Cada evento crea una instancia con su propio estado y línea de tiempo.', step3_n: '03 / EJECUTAR', step3_t: 'Corre segundos — o meses', step3_b: 'Las instancias persisten entre reinicios. Espera horas un evento, días un seguimiento, o meses una renovación.', feat_kicker: 'Plataforma', feat_title: 'Construido como debería ser la infraestructura', feat_desc: 'Seis garantías que convierten cron jobs frágiles y colas enredadas en flujos de trabajo duraderos y observables.', f1t: 'Esperas duraderas', f1b: 'Espera minutos, días o meses. Las instancias sobreviven a reinicios sin perder contexto.', f2t: 'Lógica de ramificación', f2b: 'Lógica condicional, forks paralelos, joins y sub-flujos — todo visual, todo testeable.', f3t: 'Acciones API', f3b: 'Llama a APIs REST externas desde cualquier nodo. Captura respuestas como variables para la lógica siguiente.', f4t: 'Multi-tenant', f4b: 'Entornos completamente aislados por organización con acceso por roles y endpoints por tenant.', f5t: 'Logs de auditoría', f5b: 'Cada transición y efecto secundario queda registrado. Reproduce cualquier instancia, inspecciona cualquier estado.', f6t: 'Seguro por defecto', f6b: 'Auth JWT, aislamiento por tenant y endpoints con alcance. Tus datos nunca cruzan fronteras entre tenants.', demo_kicker: 'Demo en vivo', demo_title: 'Monitor de velocidad excesiva', demo_desc: 'Un flujo real: cuenta tres eventos de exceso de velocidad por camión en una hora y emite un ticket automáticamente.', demo_pause: 'Pausar', demo_resume: 'Reanudar', demo_stream: 'stream', demo_reset: 'Reiniciar', demo_watching: 'monitoreando', demo_ticket: 'ticket emitido', cases_kicker: 'Casos de uso', cases_title: 'Reemplaza una cola, un cron y una máquina de estados', cases_desc: 'Los equipos usan Fluentra donde la lógica supera la duración de una sola solicitud.', c1t: 'Pagos y dunning', c1b: 'Reintenta cargos fallidos en un horario, escala a humanos, congela cuentas — en un solo flujo duradero.', c2t: 'Onboarding de usuarios', c2b: 'Emails graduales, nudges in-app, handoff de ventas. Estado por usuario a largo plazo, ramificado por comportamiento.', c3t: 'Flota e IoT', c3b: 'Agrega eventos de sensores, dispara alertas, filtra falsos positivos. Stateful por dispositivo con ventanas horarias.', price_kicker: 'Precios', price_title: 'Paga por lo que corre, no por lo que espera', price_desc: 'Empieza gratis. Escala conforme creces. Sin costos ocultos.', p1n: 'Test', p1p: '$0', p1per: '/ siempre', p1f1: '5 instancias de flujo / mes', p1f2: 'Todos los tipos de nodo', p1f3: 'Endpoints de webhook', p1f4: 'Historial de instancias', p1cta: 'Comenzar gratis', popular: 'Popular', p2n: 'POC', p2p: '$50', p2per: '/ mes', p2f1: '50 instancias de flujo / mes', p2f2: 'Todos los tipos de nodo', p2f3: 'Múltiples endpoints de webhook', p2f4: 'Historial completo de instancias', p2f5: 'Soporte multi-tenant', p2cta: 'Iniciar POC', p3n: 'Starter', p3p: '$500', p3per: '/ mes', p3f1: '10,000 instancias / mes', p3f2: 'Todos los nodos + sub-flujos', p3f3: 'Endpoints de webhook ilimitados', p3f4: 'Soporte prioritario', p3f5: 'Monitoreo de SLA', p3cta: 'Obtener Starter', ft1: 'Automatización de flujos de trabajo orientada a eventos para desarrolladores y equipos técnicos.', fc1: 'Producto', fc2: 'Recursos', fc3: 'Empresa', fwf: 'Flujos', ftr: 'Triggers', fch: 'Cambios', fdo: 'Docs', fex: 'Ejemplos', fst: 'Estado', fab: 'Acerca de', fbl: 'Blog', fco: 'Contacto', copy: '© 2026 Fluentra, Inc.', sys: 'Todos los sistemas operativos', }, }[LANG]; // ─── Icon component ─────────────────────────────────────────────────────────── function Icon({ name, size = 18 }) { const s = size; const stroke = "currentColor"; const sw = 1.6; const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "bolt": return ; case "check": return ; case "arrow": return ; case "branch": return ; case "clock": return ; case "shield": return ; case "stack": return ; case "globe": return ; case "code": return ; case "lock": return ; case "truck": return ; case "card": return ; case "user": return ; case "play": return ; case "github": return ; } return null; } /* ─── NAV ────────────────────────────────────────────────────── */ function Nav() { return (
Fluentra
{T.signin} {T.start}
); } /* ─── HERO ───────────────────────────────────────────────────── */ function Hero() { return (
{T.eyebrow}

{T.h1a}
{T.h1b}

{T.sub}

{T.cta1} {T.cta2}
{T.trust1} {T.trust2} {T.trust3} {T.trust4}
workflow.run · instance_4f3a 14ms · queued 0
); } /* ─── HOW IT WORKS ───────────────────────────────────────────── */ function HowItWorks() { return (
{T.how_kicker}

{T.how_title}

{T.how_desc}

{T.step1_n}

{T.step1_t}

{T.step1_b}

{T.step2_n}

{T.step2_t}

{T.step2_b}

{T.step3_n}

{T.step3_t}

{T.step3_b}

); } /* ─── FEATURES ───────────────────────────────────────────────── */ function Features() { const items = [ { icon: "clock", title: T.f1t, body: T.f1b }, { icon: "branch", title: T.f2t, body: T.f2b }, { icon: "code", title: T.f3t, body: T.f3b }, { icon: "stack", title: T.f4t, body: T.f4b }, { icon: "shield", title: T.f5t, body: T.f5b }, { icon: "lock", title: T.f6t, body: T.f6b }, ]; return (
{T.feat_kicker}

{T.feat_title}

{T.feat_desc}

{items.map((f, i) => (

{f.title}

{f.body}

))}
); } /* ─── DEMO ───────────────────────────────────────────────────── */ function Demo() { const [events, setEvents] = React.useState([]); const [count, setCount] = React.useState(0); const [fired, setFired] = React.useState(false); const [running, setRunning] = React.useState(true); React.useEffect(() => { if (!running) return; const trucks = ["TRK-019","TRK-042","TRK-007","TRK-113","TRK-228"]; const id = setInterval(() => { const truck = trucks[Math.floor(Math.random()*trucks.length)]; const speed = 78 + Math.floor(Math.random()*22); const isOver = speed > 80; const t = Date.now(); setEvents(evts => [{ t, truck, speed, isOver, ticket: false }, ...evts].slice(0, 14)); if (isOver) { setCount(c => { const n = c + 1; if (n >= 3) { setFired(true); setEvents(evts => [{ t: t+1, truck, speed, isOver, ticket: true }, ...evts].slice(0, 14)); setTimeout(() => { setFired(false); setCount(0); }, 1400); return 0; } return n; }); } }, 1100); return () => clearInterval(id); }, [running]); return (
{T.demo_kicker}

{T.demo_title}

{T.demo_desc}

app.fluentra.cloud · speeding-truck-monitor v2 · prod

Event stream

{events.length === 0 && (
waiting for events…
)} {events.map((e, i) => (
{new Date(e.t).toLocaleTimeString([],{hour12:false}).slice(3)} {e.truck} {e.ticket ? → ticket : {e.speed} mph}
))}
count: {count} / 3 · {fired ? {T.demo_ticket} : T.demo_watching}
); } /* ─── USE CASES ──────────────────────────────────────────────── */ function UseCases() { const cases = [ { icon: "card", title: T.c1t, body: T.c1b, snippet: <>on("charge.failed") → wait 3d → retry → escalate }, { icon: "user", title: T.c2t, body: T.c2b, snippet: <>on("signup") → wait 24h → if !active → email }, { icon: "truck", title: T.c3t, body: T.c3b, snippet: <>window(1h) → count > 3 → issue.ticket() }, ]; return (
{T.cases_kicker}

{T.cases_title}

{T.cases_desc}

{cases.map((c, i) => (

{c.title}

{c.body}

{c.snippet}
))}
); } /* ─── PRICING ────────────────────────────────────────────────── */ function Pricing() { const Bullet = ({children}) => (
  • {children}
    • ); return (
    {T.price_kicker}

    {T.price_title}

    {T.price_desc}

    {/* Test */}
    {T.p1n}
    {T.p1p} USD {T.p1per}
      {T.p1f1} {T.p1f2} {T.p1f3} {T.p1f4}
    {T.p1cta}
    {/* POC — featured */}
    {T.popular} {T.p2n}
    {T.p2p} USD {T.p2per}
      {T.p2f1} {T.p2f2} {T.p2f3} {T.p2f4} {T.p2f5}
    {T.p2cta}
    {/* Starter */}
    {T.p3n}
    {T.p3p} USD {T.p3per}
      {T.p3f1} {T.p3f2} {T.p3f3} {T.p3f4} {T.p3f5}
    {T.p3cta}
    ); } /* ─── FOOTER ─────────────────────────────────────────────────── */ function Footer() { return ( ); } Object.assign(window, { Nav, Hero, HowItWorks, Features, Demo, UseCases, Pricing, Footer, Icon });