[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68a7c9870c2c8191a9d3f754c2c3c9c1","versionInt","title","Calculadora De Ingresos De Comunidad - Lideratutribu.com","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport {\n LineChart,\n Line,\n XAxis,\n YAxis,\n Tooltip,\n ResponsiveContainer,\n CartesianGrid,\n Legend,\n} from \"recharts\";\n\n// =====================\n// Utilidades de formato\n// =====================\nconst eur = (n) =>\n new Intl.NumberFormat(\"es-ES\", {\n style: \"currency\",\n currency: \"EUR\",\n maximumFractionDigits: 0,\n }).format(Math.max(0, Math.round(n)));\n\nconst num = (n) => new Intl.NumberFormat(\"es-ES\").format(Math.max(0, Math.round(n)));\n\nconst clamp = (v, min, max) => Math.min(Math.max(v, min), max);\n\n// =======================================================\n// Modelo simple de crecimiento + churn por tipo de audiencia\n// (calibrado con los ejemplos compartidos por el usuario)\n// =======================================================\nconst MODEL = {\n email: {\n nombre: \"Suscriptores de email\",\n alcanzable: 0.9,\n // Tasas base (precio de referencia 25€)\n joinRateAvg: 0.006,\n joinRateTop: 0.013,\n initialJoinAvg: 0.004,\n initialJoinTop: 0.008,\n churnAvg: 0.4,\n churnTop: 0.32,\n // Ajustes globales calibrados para coincidir con ejemplos oficiales\n priceElasticity: 0.05534826050052594, // afecta a la conversión\n initPriceExponent: 0.2, // lanzamiento más fuerte con precios bajos\n sizeExponent: 0.17375268222998785, // audiencias pequeñas convierten mejor\n sizeCap: 3,\n tamRef: 135000,\n },\n social: {\n nombre: \"Seguidores en redes\",\n alcanzable: 0.5,\n // Calibrado con ejemplos (precio ref 25; validado a 100)\n joinRateAvg: 0.0032,\n joinRateTop: 0.00505,\n initialJoinAvg: 0.0008,\n initialJoinTop: 0.0012,\n churnAvg: 0.52,\n churnTop: 0.42,\n // Ajustes globales\n priceElasticity: 0.07,\n initPriceExponent: 0.2,\n sizeExponent: 0.4, // más efecto tamaño para redes\n sizeCap: 12,\n tamRef: 150000,\n },\n};\n\nfunction simular({ audiencia, tipo, cuotaMensual }) {\n const p = MODEL[tipo];\n const TAM = audiencia * p.alcanzable; // mercado alcanzable\n\n const priceRef = 25;\n const priceFactor = Math.pow(cuotaMensual / priceRef, -(p.priceElasticity || 0));\n const churnPriceFactor = Math.pow(cuotaMensual / priceRef, (p.priceElasticity || 0) * 0.5);\n const initPriceFactor = Math.pow(priceRef / cuotaMensual, p.initPriceExponent || 0);\n\n const tamRef = p.tamRef || TAM;\n const sizeFactor = Math.min(\n Math.pow(tamRef / Math.max(TAM, 1), p.sizeExponent || 0),\n p.sizeCap || 3\n );\n\n const pasos = [0, 1, 2, 3, 4, 5]; // años 0..5\n\n let mAvg = TAM * (p.initialJoinAvg || 0) * initPriceFactor;\n let mTop = TAM * (p.initialJoinTop || 0) * initPriceFactor;\n\n const data = pasos.map((year) => {\n if (year > 0) {\n const joinAvg = (p.joinRateAvg || 0) * sizeFactor * priceFactor;\n const joinTop = (p.joinRateTop || 0) * sizeFactor * priceFactor;\n const churnAvg = (p.churnAvg || 0) * churnPriceFactor;\n const churnTop = (p.churnTop || 0) * churnPriceFactor;\n\n mAvg = mAvg * (1 - churnAvg) + (TAM - mAvg) * joinAvg;\n mTop = mTop * (1 - churnTop) + (TAM - mTop) * joinTop;\n }\n\n const revAvg = mAvg * cuotaMensual * 12;\n const revTop = mTop * cuotaMensual * 12;\n\n return {\n year,\n miembrosAvg: Math.round(mAvg),\n miembrosTop: Math.round(mTop),\n revAvg,\n revTop,\n label: `Año ${year}`,\n };\n });\n\n return data;\n}\n\n// =====================\n// UI helpers\n// =====================\nfunction Card({ children, className = \"\" }) {\n return

{children}

;\n}\n\nfunction Segmented({ value, onChange, options }) {\n return (\n

\n {options.map((opt) => {\n const active = value === opt.value;\n return (\n onChange(opt.value)}\n className={`px-3 py-1.5 rounded-full transition-colors ${active ? \"bg-white text-slate-900\" : \"text-white/80 hover:text-white\"}`}\n role=\"tab\"\n aria-selected={active}\n >\n {opt.label}\n \n );\n })}\n

\n );\n}\n\nfunction Slider({ value, min, max, step = 1, onChange }) {\n return (\n onChange(Number(e.target.value))}\n className=\"w-full accent-indigo-400\"\n />\n );\n}\n\nfunction NumberField({ value, onChange, suffix = \"\", min, max, step = 1 }) {\n return (\n

\n onChange(clamp(Number(e.target.value), min, max))}\n className=\"w-32 rounded-xl bg-white/10 px-3 py-2 text-white placeholder-white/50 outline-none ring-1 ring-white/10 focus:ring-2 focus:ring-indigo-400\"\n />\n {suffix && {suffix}}\n

\n );\n}\n\nconst CustomTooltip = ({ active, payload, label }) => {\n if (active && payload && payload.length) {\n const p = payload.reduce((acc, cur) => {\n acc[cur.name] = cur.value;\n return acc;\n }, {});\n return (\n

{label}

\n Ingresos promedio: {eur(p.Promedio || 0)}\n

\n Ingresos top 10%: {eur(p[\"Top 10%\"] || 0)}\n

\n );\n }\n return null;\n};\n\nfunction CheckItem({ children }) {\n return (\n

\n ✓\n {children}\n

\n );\n}\n\nfunction CrossItem({ children }) {\n return (\n

\n ✕\n {children}\n

\n );\n}\n\n// ======================================\n// Componente principal\n// ======================================\nexport default function CalculadoraComunidad() {\n const [audiencia, setAudiencia] = useState(56000);\n const [tipo, setTipo] = useState(\"social\"); // \"email\" | \"social\"\n const [cuota, setCuota] = useState(25);\n\n const data = useMemo(() => simular({ audiencia, tipo, cuotaMensual: cuota }), [audiencia, tipo, cuota]);\n\n const ultimo = data[data.length - 1];\n const titulo = `En 5 años, podrías estar generando ${eur(ultimo.revTop)} al año`;\n\n // Límite dinámico de audiencia según el canal\n const maxAudiencia = tipo === \"email\" ? 200000 : 1000000;\n\n // Si cambia el canal a email y el valor supera el límite, lo ajustamos\n useEffect(() => {\n if (audiencia > maxAudiencia) setAudiencia(maxAudiencia);\n }, [tipo, maxAudiencia]);\n\n // URL de resultados (todos los parámetros en minúscula)\n const resultsUrl = useMemo(() => {\n const params = new URLSearchParams({\n audiencia: String(audiencia),\n tipo: String(tipo).toLowerCase(),\n cuota: String(cuota),\n revtop: String(Math.round(ultimo.revTop)),\n revavg: String(Math.round(ultimo.revAvg)),\n miembrostop: String(ultimo.miembrosTop),\n miembrosavg: String(ultimo.miembrosAvg),\n });\n return `https://lideratutribu.com/calculadora-resultados?${params.toString()}`;\n }, [audiencia, tipo, cuota, ultimo.revTop, ultimo.revAvg, ultimo.miembrosTop, ultimo.miembrosAvg]);\n\n // ==============\n // Test cases (no UI): se validan con console.assert, no modifican la interfaz\n // ==============\n useEffect(() => {\n try {\n const tol = 0.2; // tolerancia 20% para evitar falsos negativos por entorno\n const cases = [\n // Social followers @100 €/mes (basados en las capturas compartidas)\n { a: 100000, tipo: \"social\", cuota: 100, expectedTop: 1054867 },\n { a: 70000, tipo: \"social\", cuota: 100, expectedTop: 828956 },\n { a: 30000, tipo: \"social\", cuota: 100, expectedTop: 452053 },\n { a: 9000, tipo: \"social\", cuota: 100, expectedTop: 251411 },\n { a: 2000, tipo: \"social\", cuota: 100, expectedTop: 78462 },\n ];\n // Prop-based sanity checks adicionales\n const more = [\n { a: 50000, tipo: \"email\", cuota: 25 },\n { a: 120000, tipo: \"social\", cuota: 25 },\n ];\n\n cases.forEach((c) => {\n const r = simular({ audiencia: c.a, tipo: c.tipo, cuotaMensual: c.cuota });\n const top = Math.round(r[r.length - 1].revTop);\n const ok = Math.abs(top - c.expectedTop) / c.expectedTop <= tol;\n // eslint-disable-next-line no-console\n console.assert(ok, `Test fallo para ${c.tipo} a=${c.a}, esperado≈${c.expectedTop}, got=${top}`);\n });\n\n more.forEach((c) => {\n const r = simular({ audiencia: c.a, tipo: c.tipo, cuotaMensual: c.cuota });\n const last = r[r.length - 1];\n const valid = r.length === 6 && last.revTop >= last.revAvg && isFinite(last.revTop) && isFinite(last.revAvg);\n // eslint-disable-next-line no-console\n console.assert(valid, `Prop test fallo para ${c.tipo} a=${c.a}, cuota=${c.cuota}`);\n });\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn(\"Tests de calculadora: \", e);\n }\n }, []);\n\n // Test adicional: validar que la URL contiene los parámetros en minúscula\n useEffect(() => {\n try {\n const u = new URL(resultsUrl);\n const sp = u.searchParams;\n const keys = [\"audiencia\", \"tipo\", \"cuota\", \"revtop\", \"revavg\", \"miembrostop\", \"miembrosavg\"];\n const ok = keys.every((k) => sp.has(k));\n // eslint-disable-next-line no-console\n console.assert(ok, \"resultsUrl debe incluir todos los parámetros en minúscula\");\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn(\"Test de URL params: \", e);\n }\n }, [resultsUrl]);\n\n return (\n

\n {/* Hero */}\n

\n Calculadora gratuita de ROI de comunidad\n

\n Descubre el potencial de ingresos de tu comunidad\n

\n ¿Quieres saber cuánto podrías ganar con una comunidad de pago? Descúbrelo con esta calculadora gratuita, basada en datos reales de comunidades que prosperan en Circle.\n

\n \n Guardar mis resultados\n \n

\n\n {/* Controles */}\n

\n \n

Tamaño de la audiencia

{num(audiencia)}

\n setTipo(v)}\n options={[\n { label: \"Email\", value: \"email\" },\n { label: \"Redes sociales\", value: \"social\" },\n ]}\n />\n

\n \n

Arrastra el control o escribe un valor

\n \n

\n \n\n \n

Cuota mensual de la membresía

{eur(cuota)}

\n {/* Solo campo numérico, sin slider */}\n

Introduce un precio mensual

\n \n

\n\n {/* Título */}\n

{titulo}

con tu comunidad

\n\n {/* Gráfico */}\n \n

\n \n \n \n \n eur(v)} stroke=\"#cbd5e1\" width={96} tickMargin={8} />\n } />\n \n \n \n \n \n

\n\n

\n \n

Año 5 · Top 10%

Ingresos: {eur(ultimo.revTop)}

Miembros: {num(ultimo.miembrosTop)}

\n \n \n

Año 5 · Promedio

Ingresos: {eur(ultimo.revAvg)}

Miembros: {num(ultimo.miembrosAvg)}

\n \n

\n \n\n {/* Pie / CTA */}\n

Obtén tus resultados y define una estrategia de precios acertada para tu comunidad.

\n \n Guardar mis resultados\n \n

\n\n {/* Cómo funciona: fondo blanco */}\n

Cómo funciona esta calculadora

\n Hemos construido esta calculadora con datos reales de comunidades en Circle para mostrar tasas medias y del top 10% de conversión de\n seguidores y suscriptores a miembros de pago, además de crecimiento real de membresías y tasas de cancelación. Sin grandes suposiciones; solo datos.\n

\n\n

\n \n \n \n

Seguidores en redes

Tu audiencia más amplia y con mayor alcance, pero con menores tasas de conversión a clientes de pago.

\n\n

\n \n \n \n

Suscriptores de email

Una audiencia más enfocada que ha “levantado la mano” para seguirte; a medida que generas confianza, su potencial de conversión es mayor.

\n\n

\n \n \n

Miembros de la comunidad

Tu audiencia principal de clientes con mejor encaje, comprometida con tu marca y que aporta ingresos recurrentes, feedback y fidelización.

\n\n {/* Qué puedes esperar: fondo blanco */}\n

Qué puedes esperar

Esta calculadora hará:

Revelar el potencial de ingresos de membresías de primer nivel.

Ayudarte a entender el impacto de las comunidades (de cualquier tamaño) a lo largo del tiempo.

Mostrar por qué nosotros (y más de 15.000 personas) apostamos por modelos de comunidad para blindar los negocios.

Ayudarte a imaginar, planificar y construir tu futuro.

\n\n

Esta calculadora no hará:

Prometer que ganarás millones desde el primer día.

Fingir que crear y gestionar una comunidad exitosa es fácil.

Contabilizar otras vías de ingreso añadidas (cursos, coaching o patrocinios), aunque puedas gestionarlas en Circle.

\n\n {/* CTA final estilo banner */}\n

\n Podrías estar ganando {eur(ultimo.revTop)} más con Circle\n

\n \n Guardar mis resultados\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","13370104560910120896","traceTime",1776544015768]