);
}
function _Shell({ children, headerCta }) {
return (
<_Header ctaLabel={headerCta} />
{children}
);
}
// ── /features ─────────────────────────────────────────────────────────
const FEATURES = [
{ id: 'vault', title: 'Vault', tagline: 'Todo el conocimiento del proyecto, en un solo lugar.', body: 'Documentos Markdown con historial de versiones automático. Carpetas anidadas, búsqueda full-text en español, edición colaborativa, comentarios por bloque.' },
{ id: 'tracker', title: 'Tracker', tagline: 'Kanban + fases que se mueven solos.', body: 'Tareas con prioridad, asignación, fases ordenadas, locks automáticos al pasar a "en progreso". Mueve tareas con un mensaje desde Claude.' },
{ id: 'observer', title: 'Observer view', tagline: 'Tu cliente ve el avance sin reuniones.', body: 'Rol read-only para invitar al cliente. Ve fases, entregables, tareas cerradas y comentarios. Cero acceso a docs internos.' },
{ id: 'cronograma', title: 'Cronograma', tagline: 'Las fases del proyecto en una sola pantalla.', body: 'Timeline visual de todas las fases activas y queued. Drag para reordenar. Vista de proyecto que cualquier stakeholder entiende.' },
{ id: 'fathom', title: 'Fathom', tagline: 'Tus puntos de acción de Fathom se vuelven tareas.', body: 'Conecta tu Fathom. Los action items de cada llamada llegan al kanban del proyecto correcto con un click. Sin copy-paste.' },
{ id: 'codigo', title: 'Agente de código', tagline: 'Asignas la tarea. El agente la entrega.', body: 'Conecta tu VPS desde la UI. Cada tarea técnica se puede mandar a Claude Code, que corre en tu servidor y entrega el cambio con un commit.' },
];
function FeaturesPage() {
return (
<_Shell>
adentro
El workspace.
Seis módulos pensados para que Claude pueda operar tu negocio entero desde claude.ai. Cada uno con su propia superficie y su propio rol.
{FEATURES.map((f) => (
{f.title}
{f.tagline}
{f.body}
))}
<_FinalCTA />
);
}
// ── /superpoderes ─────────────────────────────────────────────────────
// Agrupados por categoría con naming claro. Cada grupo es una capability
// que Claude desbloquea cuando lo conectas vía MCP.
// Cada superpoder tiene:
// - title: verbo accionable (lo que CLAUDE HACE, no el módulo abstracto)
// - desc: una línea concreta
// - prompts: 3-4 ejemplos REALES de lo que el visitor diría a Claude
// - reply: 2-4 líneas de cómo "responde" Claude para el terminal demo
// - icon: SVG inline (clean, sin depender de lucide)
// - count: cantidad real de tools MCP subyacentes
// Naming literal tipo "superpoder" — nombres cortos de poder, NO
// descripciones. La descripción va abajo del título. Español neutro
// (NUNCA argentinismos: armá/cerrá/mostrame/mandame están prohibidos).
const SUPERPODERES = [
{
key: 'projects',
title: 'Materialización',
desc: 'Le dices qué quieres lanzar. Claude arma fases, tareas, prioridades y asignaciones.',
count: 14,
icon: (
),
demoPrompt: 'Crea un proyecto para lanzar mi curso en 4 semanas',
demoReply: [
'Proyecto creado: "Curso Q4 2026"',
'4 fases con orden lógico de dependencias',
'18 tareas asignadas con prioridades',
'Doc inicial: "Plan de lanzamiento.md"',
],
prompts: [
'Crea un proyecto para lanzar mi curso en 4 semanas',
'Muéstrame todas las tareas urgentes que vencen esta semana',
'Cierra la fase de diseño y mueve las pendientes a desarrollo',
'Sube esta tarea a prioridad alta y reasígnala a Sofía',
],
},
{
key: 'vault',
title: 'Memoria perpetua',
desc: 'Markdown con historial. Claude escribe, lee, busca y mantiene viva la documentación de tu equipo.',
count: 11,
icon: (
),
demoPrompt: 'Documenta lo que decidimos en esta sesión',
demoReply: [
'Doc creado en /sesiones/2026-05-16.md',
'Estructura: contexto · decisiones · next steps',
'Indexado en búsqueda full-text',
'Versión 1 guardada en historial',
],
prompts: [
'Documenta lo que decidimos en esta sesión',
'Resume todos los specs del proyecto en una página',
'Restaura la versión de ayer del README',
'Busca la última doc de pricing y mándamela',
],
},
{
key: 'bitacora',
title: 'Visión continua',
desc: 'Bitácora continua del proyecto. Resúmenes ejecutivos en segundos.',
count: 7,
icon: (
),
demoPrompt: 'Dame un resumen ejecutivo del mes para mi reporte',
demoReply: [
'23 entradas analizadas en 4 proyectos',
'Top moves: 3 deals cerrados · $14k cobrado',
'Blockers detectados: 2 (en fase Diseño)',
'Resumen pegado en /reportes/mayo-2026.md',
],
prompts: [
'¿Qué pasó esta semana en el proyecto Marketing?',
'Registra: hoy cerré 3 deals con clientes nuevos',
'Dame un resumen ejecutivo del mes para mi reporte',
],
},
{
key: 'pagos',
title: 'Cobranza automática',
desc: 'Hitos de cobro vinculados a entregables reales. Claude detecta cuándo facturar.',
count: 5,
icon: (
),
demoPrompt: 'Crea un hito de $5,000 USD al cerrar la fase 2',
demoReply: [
'Hito vinculado a fase: "Desarrollo MVP"',
'Trigger: al cerrar 100% de tareas de la fase',
'Cliente notificado por email automáticamente',
'Aparece en /negocio/pagos como pendiente',
],
prompts: [
'Crea un hito de $5,000 USD al cerrar la fase 2',
'¿Qué entregables tengo cobrables este mes?',
'Marca este pago como cobrado',
],
},
{
key: 'code',
title: 'Ejecución remota',
desc: 'Claude escribe y ejecuta código real en tu servidor. Tú das la orden; el código aparece corriendo.',
count: 9,
icon: (
),
demoPrompt: 'Refactoriza el módulo de auth en mi servidor',
demoReply: [
'Sesión iniciada en vps-prod (uptime 14d)',
'Branch: refactor/auth-2026-05',
'Logs en vivo en el workspace',
'Lock automático mientras corre',
],
prompts: [
'Refactoriza el módulo de auth en mi servidor',
'Muéstrame los logs de la sesión activa',
'Manda este cambio a la sesión que tengo abierta',
],
},
{
key: 'team',
title: 'Mando quirúrgico',
desc: 'Roles exactos por miembro. Observers para clientes. Claude reporta toda la actividad.',
count: 6,
icon: (
),
demoPrompt: 'Invita a Sofía como Editor al proyecto Marketing',
demoReply: [
'Invitación enviada a sofia@team.com',
'Rol: Editor (tareas + docs, no billing)',
'Scope: solo proyecto "Marketing 2026"',
'Notificación pendiente en su email',
],
prompts: [
'Invita a Sofía como Editor al proyecto Marketing',
'Quítale acceso a esta persona del workspace',
'Dame la actividad del equipo de esta semana',
],
},
];
// ── Terminal demo (auto-rotating) ──────────────────────────────────
// Muestra UN ejemplo a la vez, ciclando entre los 6 superpoderes. Cada
// ciclo: typewriter del prompt → reveal escalonado de las 4 líneas de
// respuesta → pausa → siguiente. El visitor puede tocar las flechas
// para avanzar manualmente sin esperar.
function _TerminalDemo() {
const [idx, setIdx] = useState(0);
const [phase, setPhase] = useState('typing'); // 'typing' | 'replying' | 'done'
const [typed, setTyped] = useState(0);
const cur = SUPERPODERES[idx];
const fullPrompt = cur.demoPrompt;
// Type writer del prompt
useEffect(() => {
setTyped(0);
setPhase('typing');
let i = 0;
const t = setInterval(() => {
i += 1;
setTyped(i);
if (i >= fullPrompt.length) {
clearInterval(t);
// Pausa breve antes de mostrar la respuesta
setTimeout(() => setPhase('replying'), 320);
}
}, 24);
return () => clearInterval(t);
}, [idx, fullPrompt]);
// Reply reveal escalonado, luego "done", luego auto-advance
useEffect(() => {
if (phase !== 'replying') return;
const totalRevealMs = cur.demoReply.length * 380 + 400;
const tDone = setTimeout(() => setPhase('done'), totalRevealMs);
return () => clearTimeout(tDone);
}, [phase, idx, cur.demoReply.length]);
// Auto-advance al siguiente cuando el ciclo termina
useEffect(() => {
if (phase !== 'done') return;
const t = setTimeout(() => setIdx((i) => (i + 1) % SUPERPODERES.length), 3200);
return () => clearTimeout(t);
}, [phase]);
const goPrev = () => { setIdx((i) => (i - 1 + SUPERPODERES.length) % SUPERPODERES.length); };
const goNext = () => { setIdx((i) => (i + 1) % SUPERPODERES.length); };
return (
{/* glow naranja sutil de fondo */}
{/* Topbar del terminal */}
);
}
// ── Card individual del grid de superpoderes ─────────────────────────
// Click para expandir/colapsar. Solo una abierta a la vez (controla
// SuperpoderesPage). Cuando está abierta, glow naranja sutil + reveal
// de los prompts en formato terminal.
function _SuperCard({ data, isOpen, onToggle }) {
return (
);
}
function SuperpoderesPage() {
const [openKey, setOpenKey] = useState(SUPERPODERES[0].key);
const totalCmds = SUPERPODERES.reduce((a, s) => a + s.count, 0);
return (
<_Shell headerCta="Aplicar">
{/* System tag superior — mismo lenguaje que [ EL SISTEMA OPERATIVO ] del hero */}
Cada superpoder es una acción que Claude ejecuta dentro de tu workspace sin que tú abras la app. Lo conectas una vez, le dices qué quieres, y aparece hecho.
{/* Terminal demo auto-rotando los 6 ejemplos */}
<_TerminalDemo />
{/* Section header del grid */}
Todas las capacidades
tap para ver ejemplos
{/* Grid de superpoderes — solo una card abierta a la vez */}
Cómo facturé $2,200 USD en 9 días delegando todo en mi workspace.
Workspace para developers.
Ejemplo delegando a Claude Code el desarrollo de un agente IA para un cliente real de $2,200 USD. Claude revisa las tareas y deja comentarios en el workspace.
<_FinalCTA />
);
}
// ── /precios ──────────────────────────────────────────────────────────
function PreciosPage() {
const INCLUYE = [
'Workspace personalizado por IA en tu primer minuto',
'60 superpoderes de Claude conectado',
'Sesiones de Claude Code en tu VPS',
'Tareas, documentos, fases y proyectos ilimitados',
'Observer view para tu cliente',
'Integración con Fathom para action items',
];
return (
<_Shell>
precios
Un solo plan. Todo incluido.
Cobramos solo a operadores aceptados. El precio te llega en el email de aceptación. Cancelas cuando quieras escribiendo a soporte.