> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bienvenido a Kameleoon

> Kameleoon es una plataforma unificada y potente diseñada para ayudar a los equipos a ofrecer mejores experiencias digitales mediante la experimentación, la gestión de funcionalidades y la personalización.

export const Quiz = () => {
  const translations = {
    en: {
      ui: {
        questionLabel: (current, total) => `Question ${current} of ${total}`,
        resultTitleSingle: "Your recommended solution",
        resultTitleMulti: "Your personalized solution mix",
        retake: "↺ Retake the quiz"
      },
      questions: [{
        question: "What is your team's primary objective?",
        options: [{
          text: "Launch UI/UX tests rapidly using AI",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Safely roll out backend changes and reduce risk",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Experiment fast with AI and transpose winning tests into the codebase behind flags",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Personalize the user journey based on behavioral data",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Integrate Kameleoon with custom LLM tools or workflows",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "How technical is the person managing the experiments?",
        options: [{
          text: "Mostly non-technical (Marketer, PM) using a visual editor",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Highly technical (Engineer) writing code and managing infrastructure",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "Where do you plan to deploy your experiments?",
        options: [{
          text: "Strictly on the front-end website",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Across web, mobile, and server-side applications",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "Within an IDE like Cursor or via custom AI agents",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Web experimentation and PBX",
          description: "Generate variations instantly and test without touching code. Prompt-Based Experimentation (PBX) transforms your ideas into working experiments using natural language.",
          linkText: "Get started with PBX →"
        },
        feature: {
          icon: "🚦",
          title: "Feature experimentation",
          description: "Control deployments and reduce risk. Feature Experimentation lets you decouple deployment from release and target specific segments server-side.",
          linkText: "Explore feature flagging →"
        },
        mcp: {
          icon: "🤖",
          title: "Kameleoon MCP server",
          description: "Build advanced AI integrations. The Kameleoon MCP Server acts as a bridge between Kameleoon and your IDE (like Cursor), enabling you to manage experiments directly from your code editor.",
          linkText: "View MCP server docs →"
        },
        personalization: {
          icon: "✨",
          title: "Web personalization",
          description: "Tailor the user journey in real-time. Leverage CRM and behavioral data to deliver personalized content across your website.",
          linkText: "Launch a personalization →"
        }
      }
    },
    fr: {
      ui: {
        questionLabel: (current, total) => `Question ${current} sur ${total}`,
        resultTitleSingle: "Votre solution recommandée",
        resultTitleMulti: "Votre combinaison de solutions personnalisée",
        retake: "↺ Refaire le quiz"
      },
      questions: [{
        question: "Quel est l'objectif principal de votre équipe ?",
        options: [{
          text: "Lancer rapidement des tests UI/UX grâce à l'IA",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Déployer en toute sécurité des changements backend et réduire les risques",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Expérimenter rapidement avec l'IA et transposer les tests gagnants dans le code derrière des feature flags",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Personnaliser le parcours utilisateur à partir de données comportementales",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Intégrer Kameleoon à des outils LLM ou workflows personnalisés",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "Quel est le profil technique de la personne qui gère les expériences ?",
        options: [{
          text: "Principalement non technique (Marketing, PM) utilisant un éditeur visuel",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Très technique (Ingénieur) écrivant du code et gérant l'infrastructure",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "Où prévoyez-vous de déployer vos expériences ?",
        options: [{
          text: "Strictement sur le site front-end",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Sur le web, le mobile et les applications côté serveur",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "Dans un IDE comme Cursor ou via des agents IA personnalisés",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Expérimentation web et PBX",
          description: "Générez des variations instantanément et testez sans toucher au code. L'expérimentation basée sur les prompts (PBX) transforme vos idées en expériences fonctionnelles en langage naturel.",
          linkText: "Démarrer avec PBX →"
        },
        feature: {
          icon: "🚦",
          title: "Feature experimentation",
          description: "Maîtrisez vos déploiements et réduisez les risques. La Feature Experimentation vous permet de découpler le déploiement de la mise en production et de cibler des segments spécifiques côté serveur.",
          linkText: "Découvrir le feature flagging →"
        },
        mcp: {
          icon: "🤖",
          title: "Serveur MCP Kameleoon",
          description: "Créez des intégrations IA avancées. Le serveur MCP Kameleoon fait le lien entre Kameleoon et votre IDE (comme Cursor), vous permettant de gérer vos expériences directement depuis votre éditeur de code.",
          linkText: "Voir la documentation du serveur MCP →"
        },
        personalization: {
          icon: "✨",
          title: "Personnalisation web",
          description: "Adaptez le parcours utilisateur en temps réel. Exploitez les données CRM et comportementales pour diffuser des contenus personnalisés sur votre site.",
          linkText: "Lancer une personnalisation →"
        }
      }
    },
    de: {
      ui: {
        questionLabel: (current, total) => `Frage ${current} von ${total}`,
        resultTitleSingle: "Ihre empfohlene Lösung",
        resultTitleMulti: "Ihr personalisierter Lösungsmix",
        retake: "↺ Quiz erneut starten"
      },
      questions: [{
        question: "Was ist das wichtigste Ziel Ihres Teams?",
        options: [{
          text: "UI/UX-Tests schnell mit KI starten",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Backend-Änderungen sicher ausrollen und Risiken reduzieren",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Schnell mit KI experimentieren und erfolgreiche Tests hinter Feature-Flags in den Code übertragen",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Die User Journey auf Basis von Verhaltensdaten personalisieren",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Kameleoon mit eigenen LLM-Tools oder Workflows integrieren",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "Wie technisch ist die Person, die die Experimente verwaltet?",
        options: [{
          text: "Überwiegend nicht-technisch (Marketing, PM) mit visuellem Editor",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Sehr technisch (Engineer), schreibt Code und verwaltet Infrastruktur",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "Wo planen Sie, Ihre Experimente auszuspielen?",
        options: [{
          text: "Ausschließlich auf der Frontend-Website",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Über Web-, Mobile- und serverseitige Anwendungen hinweg",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "In einer IDE wie Cursor oder über eigene KI-Agenten",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Web-Experimentation und PBX",
          description: "Erstellen Sie Varianten sofort und testen Sie, ohne Code anzufassen. Prompt-Based Experimentation (PBX) verwandelt Ihre Ideen mithilfe natürlicher Sprache in lauffähige Experimente.",
          linkText: "Mit PBX starten →"
        },
        feature: {
          icon: "🚦",
          title: "Feature Experimentation",
          description: "Steuern Sie Deployments und reduzieren Sie Risiken. Feature Experimentation entkoppelt Deployment und Release und ermöglicht serverseitiges Targeting bestimmter Segmente.",
          linkText: "Feature Flagging entdecken →"
        },
        mcp: {
          icon: "🤖",
          title: "Kameleoon MCP-Server",
          description: "Bauen Sie fortgeschrittene KI-Integrationen. Der Kameleoon MCP-Server fungiert als Brücke zwischen Kameleoon und Ihrer IDE (z. B. Cursor) und lässt Sie Experimente direkt aus Ihrem Code-Editor verwalten.",
          linkText: "MCP-Server-Dokumentation ansehen →"
        },
        personalization: {
          icon: "✨",
          title: "Web-Personalisierung",
          description: "Passen Sie die User Journey in Echtzeit an. Nutzen Sie CRM- und Verhaltensdaten, um personalisierte Inhalte auf Ihrer Website auszuspielen.",
          linkText: "Personalisierung starten →"
        }
      }
    },
    ja: {
      ui: {
        questionLabel: (current, total) => `質問 ${current} / ${total}`,
        resultTitleSingle: "おすすめのソリューション",
        resultTitleMulti: "あなたに合ったソリューションの組み合わせ",
        retake: "↺ もう一度挑戦する"
      },
      questions: [{
        question: "あなたのチームの主な目標は何ですか？",
        options: [{
          text: "AIを活用してUI/UXテストを素早く実施する",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "バックエンドの変更を安全にリリースし、リスクを軽減する",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "AIで素早く実験し、勝利したテストをフィーチャーフラグの背後でコードベースに組み込む",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "行動データに基づいてユーザーのジャーニーをパーソナライズする",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "KameleoonをカスタムLLMツールやワークフローと連携する",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "実験を管理する担当者のテクニカルレベルは？",
        options: [{
          text: "主に非技術系（マーケター、PM）でビジュアルエディターを使用",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "技術系（エンジニア）でコードを書きインフラを管理",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "実験をどこで展開する予定ですか？",
        options: [{
          text: "フロントエンドのウェブサイトのみ",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "ウェブ、モバイル、サーバーサイドアプリケーションにまたがって",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "CursorなどのIDEやカスタムAIエージェント経由",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Webエクスペリメンテーションと PBX",
          description: "バリエーションを即座に生成し、コードを変更せずにテストできます。プロンプトベースエクスペリメンテーション（PBX）は自然言語を使ってアイデアを実際の実験に変換します。",
          linkText: "PBXを始める →"
        },
        feature: {
          icon: "🚦",
          title: "フィーチャーエクスペリメンテーション",
          description: "デプロイを制御しリスクを軽減します。フィーチャーエクスペリメンテーションを使うと、デプロイとリリースを切り離し、サーバーサイドで特定セグメントをターゲットにできます。",
          linkText: "フィーチャーフラグを探索する →"
        },
        mcp: {
          icon: "🤖",
          title: "Kameleoon MCPサーバー",
          description: "高度なAI統合を構築します。Kameleoon MCPサーバーはKameleoonとIDE（Cursorなど）の橋渡しをし、コードエディターから直接実験を管理できます。",
          linkText: "MCPサーバーのドキュメントを見る →"
        },
        personalization: {
          icon: "✨",
          title: "Webパーソナライゼーション",
          description: "ユーザーのジャーニーをリアルタイムでカスタマイズします。CRMデータや行動データを活用して、ウェブサイト全体でパーソナライズされたコンテンツを配信します。",
          linkText: "パーソナライゼーションを開始する →"
        }
      }
    },
    es: {
      ui: {
        questionLabel: (current, total) => `Pregunta ${current} de ${total}`,
        resultTitleSingle: "Su solución recomendada",
        resultTitleMulti: "Su combinación personalizada de soluciones",
        retake: "↺ Volver a hacer el cuestionario"
      },
      questions: [{
        question: "¿Cuál es el objetivo principal de su equipo?",
        options: [{
          text: "Lanzar rápidamente tests de UI/UX con IA",
          weights: {
            pbx: 3,
            personalization: 1,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Desplegar cambios de backend de forma segura y reducir riesgos",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 1
          }
        }, {
          text: "Experimentar rápido con IA y trasladar los tests ganadores al código detrás de feature flags",
          weights: {
            pbx: 2,
            personalization: 0,
            feature: 2,
            mcp: 0
          }
        }, {
          text: "Personalizar el recorrido del usuario a partir de datos de comportamiento",
          weights: {
            pbx: 1,
            personalization: 3,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Integrar Kameleoon con herramientas LLM o flujos de trabajo personalizados",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 1,
            mcp: 3
          }
        }]
      }, {
        question: "¿Qué perfil técnico tiene la persona que gestiona los experimentos?",
        options: [{
          text: "Principalmente no técnico (Marketing, PM) usando un editor visual",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "Muy técnico (Ingeniero) escribiendo código y gestionando infraestructura",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 2,
            mcp: 2
          }
        }]
      }, {
        question: "¿Dónde planea desplegar sus experimentos?",
        options: [{
          text: "Únicamente en el sitio web front-end",
          weights: {
            pbx: 2,
            personalization: 2,
            feature: 0,
            mcp: 0
          }
        }, {
          text: "En web, móvil y aplicaciones del lado del servidor",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 3,
            mcp: 0
          }
        }, {
          text: "En un IDE como Cursor o a través de agentes de IA personalizados",
          weights: {
            pbx: 0,
            personalization: 0,
            feature: 0,
            mcp: 3
          }
        }]
      }],
      results: {
        pbx: {
          icon: "🪄",
          title: "Experimentación web y PBX",
          description: "Genere variaciones al instante y haga tests sin tocar el código. La experimentación basada en prompts (PBX) convierte sus ideas en experimentos funcionales mediante lenguaje natural.",
          linkText: "Empezar con PBX →"
        },
        feature: {
          icon: "🚦",
          title: "Feature experimentation",
          description: "Controle los despliegues y reduzca riesgos. Feature Experimentation le permite desacoplar el despliegue del lanzamiento y segmentar grupos específicos del lado del servidor.",
          linkText: "Descubrir el feature flagging →"
        },
        mcp: {
          icon: "🤖",
          title: "Servidor MCP de Kameleoon",
          description: "Cree integraciones de IA avanzadas. El servidor MCP de Kameleoon actúa como puente entre Kameleoon y su IDE (como Cursor), permitiéndole gestionar experimentos directamente desde su editor de código.",
          linkText: "Ver la documentación del servidor MCP →"
        },
        personalization: {
          icon: "✨",
          title: "Personalización web",
          description: "Adapte el recorrido del usuario en tiempo real. Aproveche los datos de CRM y de comportamiento para ofrecer contenido personalizado en todo su sitio web.",
          linkText: "Lanzar una personalización →"
        }
      }
    }
  };
  const resultLinks = {
    pbx: "/user-manual/experimentation/web-experimentation/prompt-based-experiments/get-started",
    feature: "/developer-docs/feature-experimentation/get-started/overview",
    mcp: "/mcp/mcp-server",
    personalization: "/user-manual/web-personalization/set-up-and-launch-a-personalization"
  };
  const detectLanguage = () => {
    if (typeof window === 'undefined') return 'en';
    const seg = window.location.pathname.split('/').filter(Boolean)[0];
    return ['fr', 'de', 'es', 'ja'].includes(seg) ? seg : 'en';
  };
  const [lang, setLang] = useState(detectLanguage);
  useEffect(() => {
    setLang(detectLanguage());
    const onChange = () => setLang(detectLanguage());
    window.addEventListener('popstate', onChange);
    return () => window.removeEventListener('popstate', onChange);
  }, []);
  const t = translations[lang] || translations.en;
  const questions = t.questions;
  const buildLink = key => {
    const base = resultLinks[key];
    return lang === 'en' ? base : `/${lang}${base}`;
  };
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [scores, setScores] = useState({
    pbx: 0,
    feature: 0,
    mcp: 0,
    personalization: 0
  });
  const [showResult, setShowResult] = useState(false);
  const handleAnswer = weights => {
    const newScores = {
      pbx: scores.pbx + (weights.pbx || 0),
      feature: scores.feature + (weights.feature || 0),
      mcp: scores.mcp + (weights.mcp || 0),
      personalization: scores.personalization + (weights.personalization || 0)
    };
    setScores(newScores);
    if (currentQuestion + 1 < questions.length) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      setShowResult(true);
    }
  };
  const getTopResults = () => {
    const sorted = Object.entries(scores).sort(([, a], [, b]) => b - a);
    const topScore = sorted[0][1];
    if (topScore === 0) return [{
      key: 'pbx',
      ...t.results.pbx
    }];
    return sorted.filter(([, score]) => score >= topScore - 1 && score > 0).slice(0, 2).map(([key]) => ({
      key,
      ...t.results[key]
    }));
  };
  const resetQuiz = () => {
    setCurrentQuestion(0);
    setScores({
      pbx: 0,
      feature: 0,
      mcp: 0,
      personalization: 0
    });
    setShowResult(false);
  };
  if (showResult) {
    const results = getTopResults();
    return <div className="mt-8 mb-8">
        <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-6 mt-0">
          {results.length > 1 ? t.ui.resultTitleMulti : t.ui.resultTitleSingle}
        </h3>

        <div className={`grid gap-4 ${results.length === 1 ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
          {results.map((result, index) => <div key={index} className="p-4 sm:p-6 border border-slate-200 dark:border-slate-800 rounded-2xl bg-gradient-to-br from-slate-50 to-white dark:from-slate-900 dark:to-slate-800 shadow-sm flex flex-col h-full">
              <div className="text-3xl sm:text-4xl mb-3 sm:mb-4">{result.icon}</div>
              <h4 className="mt-0 text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-2 sm:mb-3">
                {result.title}
              </h4>
              <p className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed mb-4 sm:mb-6 flex-grow">
                {result.description}
              </p>
              <div className="mt-auto">
                <a href={buildLink(result.key)} className="inline-flex items-center justify-center w-full sm:w-auto px-4 py-2.5 sm:py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold transition-colors no-underline shadow-sm">
                  {result.linkText}
                </a>
              </div>
            </div>)}
        </div>

        <div className="mt-8 pt-6 border-t border-slate-200 dark:border-slate-700 flex justify-center">
          <button onClick={resetQuiz} className="text-sm text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 font-medium transition-colors bg-transparent border-none cursor-pointer flex items-center gap-2">
            {t.ui.retake}
          </button>
        </div>
      </div>;
  }
  const progressPercentage = currentQuestion / questions.length * 100;
  return <div className="p-4 sm:p-8 border border-slate-200 dark:border-slate-800 rounded-2xl bg-white dark:bg-slate-900 mt-8 mb-8 shadow-sm">
      <div className="mb-8">
        <div className="flex justify-between items-center mb-3">
          <span className="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest">
            {t.ui.questionLabel(currentQuestion + 1, questions.length)}
          </span>
        </div>
        <div className="w-full bg-slate-100 dark:bg-slate-800 rounded-full h-1.5 overflow-hidden">
          <div className="bg-blue-600 h-1.5 rounded-full transition-all duration-500 ease-out" style={{
    width: `${progressPercentage}%`
  }}></div>
        </div>
      </div>

      <h3 className="text-xl font-bold mb-6 text-slate-900 dark:text-white leading-snug mt-0">
        {questions[currentQuestion].question}
      </h3>

      <div className="flex flex-col gap-3">
        {questions[currentQuestion].options.map((option, index) => <button key={index} onClick={() => handleAnswer(option.weights)} className="group w-full flex justify-between items-center text-left p-4 border-2 border-slate-100 dark:border-slate-800 rounded-xl bg-white dark:bg-slate-900 hover:border-blue-500 dark:hover:border-blue-500 hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">
            <span className="font-medium text-slate-700 dark:text-slate-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">
              {option.text}
            </span>
            <span className="text-blue-500 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200 font-bold">
              →
            </span>
          </button>)}
      </div>
    </div>;
};

## Elija su recorrido

Seleccione el portal que mejor se adapte a su función y a lo que esté intentando crear hoy.

<CardGroup cols={2}>
  <Card title="Manual de usuario" icon="book-open" href="/user-manual/home/user-manual-overview">
    Para equipos de marketing, gestores de producto y equipos de QA. Aprenda a crear, configurar y analizar experimentos, gestionar personalizaciones y utilizar el Widget Studio.
  </Card>

  <Card title="Documentación para desarrolladores" icon="code" href="../developer-docs/home/developer-docs-overview">
    Para ingenieros y equipos técnicos. Encuentre guías de implementación, referencias de SDK, documentación de API y kits de inicio de edge computing.
  </Card>
</CardGroup>

***

## ¿No sabe por dónde empezar?

Realice este breve cuestionario de 3 preguntas para encontrar la documentación exacta que necesita para su stack tecnológico y caso de uso.

<Quiz />

***

## Use la documentación con su asistente de IA

Haga preguntas, obtenga orientación paso a paso y explore la base de conocimientos completa de Kameleoon, directamente desde su herramienta de IA.

<Card title="Usar la documentación de Kameleoon con IA" icon="sparkles" href="/mcp/use-docs-with-ai">
  Abra cualquier artículo en Claude o ChatGPT con un solo clic, o configure un servidor MCP persistente para Claude Desktop, Cursor, VS Code y más.
</Card>

***

## Capacidades principales

Combine experimentación, gestión de funcionalidades y personalización en una sola plataforma para entornos web, móvil y backend.

<CardGroup cols={2}>
  <Card title="Web Experimentation y PBX" icon="app-window" href="/user-manual/experimentation/web-experimentation/prompt-based-experiments/get-started">
    Utilice indicaciones en lenguaje natural para generar variaciones al instante, o use el editor visual para probar textos, diseños y maquetaciones en cualquier sitio web o aplicación de una sola página.
  </Card>

  <Card title="Feature Experimentation" icon="toggle-right" href="../developer-docs/feature-experimentation/get-started/overview">
    Desacople el despliegue del lanzamiento. Lance nuevas funcionalidades de forma progresiva, ejecute experimentos del lado del servidor y reduzca el riesgo con feature flags segmentados.
  </Card>

  <Card title="Personalización web" icon="wand-sparkles" href="/user-manual/web-personalization/set-up-and-launch-a-personalization">
    Ofrezca experiencias adaptadas a usuarios específicos en tiempo real aprovechando datos comportamentales, integraciones de CRM o su data warehouse.
  </Card>

  <Card title="Analítica avanzada" icon="chart-line" href="/user-manual/experiment-analytics/analyze-results/results-page/results-page-structure">
    Acceda a resultados fiables y en tiempo real con el motor multiestadístico de Kameleoon (CUPED, bayesiano o pruebas secuenciales).
  </Card>
</CardGroup>

***

## Explore el stack tecnológico de Kameleoon

Despliegue Kameleoon en cualquier lugar. Ofrecemos más de una docena de SDK, API REST e integraciones para encajar perfectamente en su ecosistema existente.

<AccordionGroup>
  <Accordion title="SDK web" icon="file-code">
    Implemente experimentos rápidamente usando JavaScript, TypeScript, React, Vue, PHP, Python, Ruby, Go o Java.

    [Explorar los SDK web →](../developer-docs/sdks/web-sdks/js-sdk)
  </Accordion>

  <Accordion title="SDK móviles" icon="smartphone">
    Lleve la gestión de feature flags y la experimentación a sus aplicaciones nativas con los SDK de iOS, Android, Flutter y React Native.

    [Explorar los SDK móviles →](../developer-docs/sdks/mobile-sdks/ios-sdk)
  </Accordion>

  <Accordion title="API" icon="server">
    Controle experimentos de forma programática, automatice flujos de trabajo e inyecte datos personalizados utilizando las API REST y JS de Kameleoon.

    [Explorar las API →](../developer-docs/apis/overview)
  </Accordion>
</AccordionGroup>