{"id":686,"date":"2026-04-01T19:46:16","date_gmt":"2026-04-01T19:46:16","guid":{"rendered":"https:\/\/stadiaorg.com\/?page_id=686"},"modified":"2026-04-02T10:29:14","modified_gmt":"2026-04-02T10:29:14","slug":"profile-builder-pro","status":"publish","type":"page","link":"https:\/\/stadiaorg.com\/fr\/profile-builder-pro\/","title":{"rendered":"Profile Builder Pro"},"content":{"rendered":"\n<section style=\"font-family:Arial,Helvetica,sans-serif;color:#1b2230;max-width:1020px;margin:0 auto;padding:60px 20px;\">\n\n  <!-- HERO -->\n  <div style=\"background:linear-gradient(180deg,#faf9ff 0%,#ffffff 100%);border:1px solid #e4e7f0;border-radius:28px;padding:36px 28px;box-shadow:0 16px 38px rgba(21,30,60,0.07);text-align:center;\">\n    <div style=\"display:inline-block;padding:8px 12px;border-radius:999px;background:#efeefe;color:#6a5cff;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:16px;\">\n      Profile Builder Pro\n    <\/div>\n\n    <h1 style=\"font-size:42px;line-height:1.08;margin:0 0 14px;\">\n      Build the profile behind your direction\n    <\/h1>\n\n    <p style=\"font-size:18px;color:#5f6b85;line-height:1.7;max-width:780px;margin:0 auto;\">\n      Before deeper recommendations, the system needs a clearer picture of your situation, strengths, pressure points, and aspirations. The better your profile, the more meaningful your direction becomes.\n    <\/p>\n  <\/div>\n\n  <!-- WHY -->\n  <div style=\"margin-top:28px;background:#111626;color:#ffffff;border-radius:24px;padding:26px;box-shadow:0 14px 30px rgba(10,16,30,0.18);\">\n    <div style=\"font-size:12px;color:#b8bfff;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:10px;\">\n      Why this matters\n    <\/div>\n    <p style=\"color:#c9d1e6;line-height:1.8;margin:0;\">\n      Real guidance cannot be based only on a stage label. It becomes more useful when the system also understands your education, work condition, strengths, aspirations, and current pressure.\n    <\/p>\n  <\/div>\n\n  <!-- FORM -->\n  <div style=\"margin-top:30px;background:#ffffff;border:1px solid #e4e7f0;border-radius:24px;padding:26px;box-shadow:0 10px 24px rgba(21,30,60,0.05);\">\n    <h2 style=\"margin-top:0;margin-bottom:18px;\">Your current profile<\/h2>\n\n    <div style=\"display:grid;grid-template-columns:repeat(2,1fr);gap:18px;\">\n\n      <div>\n        <label for=\"pb-name\" style=\"display:block;font-weight:700;margin-bottom:8px;\">First name or nickname<\/label>\n        <input id=\"pb-name\" type=\"text\" style=\"width:100%;padding:12px;border:1px solid #d9dfeb;border-radius:12px;box-sizing:border-box;\" placeholder=\"Your name\">\n      <\/div>\n\n      <div>\n        <label for=\"pb-age\" style=\"display:block;font-weight:700;margin-bottom:8px;\">Age range<\/label>\n        <select id=\"pb-age\" style=\"width:100%;padding:12px;border:1px solid #d9dfeb;border-radius:12px;box-sizing:border-box;\">\n          <option value=\"18-25\">18\u201325<\/option>\n          <option value=\"26-40\" selected>26\u201340<\/option>\n          <option value=\"41-55\">41\u201355<\/option>\n          <option value=\"56+\">56+<\/option>\n        <\/select>\n      <\/div>\n\n      <div>\n        <label for=\"pb-edu\" style=\"display:block;font-weight:700;margin-bottom:8px;\">Education level<\/label>\n        <select id=\"pb-edu\" style=\"width:100%;padding:12px;border:1px solid #d9dfeb;border-radius:12px;box-sizing:border-box;\">\n          <option value=\"basic\">Basic<\/option>\n          <option value=\"secondary\" selected>Secondary<\/option>\n          <option value=\"university\">University<\/option>\n          <option value=\"advanced\">Advanced specialization<\/option>\n        <\/select>\n      <\/div>\n\n      <div>\n        <label for=\"pb-work\" style=\"display:block;font-weight:700;margin-bottom:8px;\">Current work situation<\/label>\n        <select id=\"pb-work\" style=\"width:100%;padding:12px;border:1px solid #d9dfeb;border-radius:12px;box-sizing:border-box;\">\n          <option value=\"stable\">Stable<\/option>\n          <option value=\"uncertain\">Uncertain<\/option>\n          <option value=\"blocked\">Blocked<\/option>\n          <option value=\"changing\">Changing<\/option>\n          <option value=\"unemployed\">Unemployed<\/option>\n          <option value=\"student\">Student<\/option>\n        <\/select>\n      <\/div>\n\n    <\/div>\n\n    <div style=\"margin-top:18px;\">\n      <label for=\"pb-strengths\" style=\"display:block;font-weight:700;margin-bottom:8px;\">Your strengths<\/label>\n      <textarea id=\"pb-strengths\" style=\"width:100%;min-height:100px;padding:12px;border:1px solid #d9dfeb;border-radius:12px;box-sizing:border-box;\" placeholder=\"Example: discipline, empathy, technical skill, creativity, communication...\"><\/textarea>\n    <\/div>\n\n    <div style=\"margin-top:18px;\">\n      <label for=\"pb-difficulties\" style=\"display:block;font-weight:700;margin-bottom:8px;\">Main difficulties now<\/label>\n      <textarea id=\"pb-difficulties\" style=\"width:100%;min-height:100px;padding:12px;border:1px solid #d9dfeb;border-radius:12px;box-sizing:border-box;\" placeholder=\"Example: confusion, low income, unstable work, fatigue, lack of direction...\"><\/textarea>\n    <\/div>\n\n    <div style=\"margin-top:18px;\">\n      <label for=\"pb-aspirations\" style=\"display:block;font-weight:700;margin-bottom:8px;\">What you would like to improve<\/label>\n      <textarea id=\"pb-aspirations\" style=\"width:100%;min-height:100px;padding:12px;border:1px solid #d9dfeb;border-radius:12px;box-sizing:border-box;\" placeholder=\"Example: better work, more clarity, stronger income, a new direction, more stability...\"><\/textarea>\n    <\/div>\n\n    <div style=\"display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px;\">\n\n      <div>\n        <label for=\"pb-workp\" style=\"display:block;font-weight:700;margin-bottom:8px;\">Work pressure (0\u201310)<\/label>\n        <input id=\"pb-workp\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" style=\"width:100%;\">\n        <div id=\"pb-workp-value\" style=\"margin-top:6px;color:#5f6b85;\">5<\/div>\n      <\/div>\n\n      <div>\n        <label for=\"pb-money\" style=\"display:block;font-weight:700;margin-bottom:8px;\">Financial pressure (0\u201310)<\/label>\n        <input id=\"pb-money\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" style=\"width:100%;\">\n        <div id=\"pb-money-value\" style=\"margin-top:6px;color:#5f6b85;\">5<\/div>\n      <\/div>\n\n    <\/div>\n\n    <div style=\"margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;\">\n      <button id=\"pb-save\" type=\"button\" style=\"display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 24px;background:#6a5cff;color:#ffffff;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;\">\n        Save profile\n      <\/button>\n\n      <button id=\"pb-demo\" type=\"button\" style=\"display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 24px;background:#ffffff;color:#1b2230;border:1px solid #d9dfeb;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;\">\n        Load example\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- OUTPUT -->\n  <div id=\"pb-output\" style=\"display:none;margin-top:28px;background:#f8f7ff;border:1px solid #e4e7f0;border-radius:24px;padding:26px;box-shadow:0 10px 24px rgba(21,30,60,0.05);\">\n    <h2 style=\"margin-top:0;margin-bottom:14px;\">Your saved profile summary<\/h2>\n\n    <p id=\"pb-summary\" style=\"margin:0 0 18px;color:#5f6b85;line-height:1.8;\">Loading&#8230;<\/p>\n\n    <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:16px;\">\n      <div style=\"background:#ffffff;border:1px solid #e4e7f0;border-radius:18px;padding:18px;\">\n        <strong>Work condition<\/strong>\n        <p id=\"pb-out-work\" style=\"margin:10px 0 0;color:#5f6b85;line-height:1.7;\">Loading&#8230;<\/p>\n      <\/div>\n\n      <div style=\"background:#ffffff;border:1px solid #e4e7f0;border-radius:18px;padding:18px;\">\n        <strong>Work pressure<\/strong>\n        <p id=\"pb-out-workp\" style=\"margin:10px 0 0;color:#5f6b85;line-height:1.7;\">Loading&#8230;<\/p>\n      <\/div>\n\n      <div style=\"background:#ffffff;border:1px solid #e4e7f0;border-radius:18px;padding:18px;\">\n        <strong>Financial pressure<\/strong>\n        <p id=\"pb-out-money\" style=\"margin:10px 0 0;color:#5f6b85;line-height:1.7;\">Loading&#8230;<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- CTA -->\n  <div style=\"margin-top:34px;background:#111626;color:#ffffff;border-radius:26px;padding:30px;text-align:center;box-shadow:0 14px 30px rgba(10,16,30,0.18);\">\n    <div style=\"font-size:12px;color:#b8bfff;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:10px;\">\n      Continue\n    <\/div>\n\n    <h2 style=\"margin-top:0;margin-bottom:12px;color:#ffffff;font-size:32px;\">\n      Use your profile to clarify direction\n    <\/h2>\n\n    <p style=\"color:#c9d1e6;line-height:1.7;max-width:760px;margin:0 auto 22px;\">\n      Your saved profile will be used to make Work Direction more concrete and more useful.\n    <\/p>\n\n    <a href=\"\/work-direction\/\" style=\"display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;background:#6a5cff;color:#ffffff;border-radius:14px;font-size:17px;font-weight:700;text-decoration:none;box-shadow:0 10px 24px rgba(106,92,255,0.25);\">\n      Continue to Work Direction\n    <\/a>\n  <\/div>\n\n<\/section>\n\n<style>\n@media (max-width: 900px){\n  section[style*=\"max-width:1020px\"] div[style*=\"grid-template-columns:repeat(2,1fr)\"]{\n    grid-template-columns:1fr !important;\n  }\n  section[style*=\"max-width:1020px\"] div[style*=\"grid-template-columns:repeat(3,1fr)\"]{\n    grid-template-columns:1fr !important;\n  }\n}\n<\/style>\n\n<script>\n(function(){\n  const workSlider = document.getElementById(\"pb-workp\");\n  const moneySlider = document.getElementById(\"pb-money\");\n  const workValue = document.getElementById(\"pb-workp-value\");\n  const moneyValue = document.getElementById(\"pb-money-value\");\n  const saveBtn = document.getElementById(\"pb-save\");\n  const demoBtn = document.getElementById(\"pb-demo\");\n  const output = document.getElementById(\"pb-output\");\n\n  function syncSliders(){\n    workValue.textContent = workSlider.value;\n    moneyValue.textContent = moneySlider.value;\n  }\n\n  function getSavedProfile(){\n    try{\n      return JSON.parse(localStorage.getItem(\"sv_profile\") || \"{}\");\n    }catch(e){\n      return {};\n    }\n  }\n\n  function fillForm(profile){\n    if(profile.name) document.getElementById(\"pb-name\").value = profile.name;\n    if(profile.age) document.getElementById(\"pb-age\").value = profile.age;\n    if(profile.edu) document.getElementById(\"pb-edu\").value = profile.edu;\n    if(profile.work) document.getElementById(\"pb-work\").value = profile.work;\n    if(profile.strengths) document.getElementById(\"pb-strengths\").value = profile.strengths;\n    if(profile.difficulties) document.getElementById(\"pb-difficulties\").value = profile.difficulties;\n    if(profile.aspirations) document.getElementById(\"pb-aspirations\").value = profile.aspirations;\n    if(typeof profile.workp === \"number\") workSlider.value = profile.workp;\n    if(typeof profile.money === \"number\") moneySlider.value = profile.money;\n    syncSliders();\n  }\n\n  function showSummary(profile){\n    const name = profile.name ? profile.name : \"This visitor\";\n    let summary = name + \" is currently in a \" + profile.work + \" work situation\";\n    summary += \", with work pressure \" + profile.workp + \"\/10\";\n    summary += \" and financial pressure \" + profile.money + \"\/10.\";\n    if(profile.edu){\n      summary += \" Education level: \" + profile.edu + \".\";\n    }\n\n    document.getElementById(\"pb-summary\").textContent = summary;\n    document.getElementById(\"pb-out-work\").textContent = profile.work || \"-\";\n    document.getElementById(\"pb-out-workp\").textContent = (profile.workp ?? \"-\") + \"\/10\";\n    document.getElementById(\"pb-out-money\").textContent = (profile.money ?? \"-\") + \"\/10\";\n    output.style.display = \"block\";\n  }\n\n  function saveProfile(){\n    const profile = {\n      name: document.getElementById(\"pb-name\").value || \"\",\n      age: document.getElementById(\"pb-age\").value || \"\",\n      edu: document.getElementById(\"pb-edu\").value || \"\",\n      work: document.getElementById(\"pb-work\").value || \"\",\n      strengths: document.getElementById(\"pb-strengths\").value || \"\",\n      difficulties: document.getElementById(\"pb-difficulties\").value || \"\",\n      aspirations: document.getElementById(\"pb-aspirations\").value || \"\",\n      workp: parseInt(workSlider.value || \"5\", 10),\n      money: parseInt(moneySlider.value || \"5\", 10),\n      saved_at: new Date().toISOString()\n    };\n\n    localStorage.setItem(\"sv_profile\", JSON.stringify(profile));\n    showSummary(profile);\n    output.scrollIntoView({behavior:\"smooth\", block:\"start\"});\n  }\n\n  function loadExample(){\n    const example = {\n      name: \"Alex\",\n      age: \"26-40\",\n      edu: \"secondary\",\n      work: \"blocked\",\n      strengths: \"discipline, adaptability, good communication\",\n      difficulties: \"I feel blocked, I do not know what direction to take, and my income feels unstable.\",\n      aspirations: \"I want more clarity, stronger work direction, and better financial stability.\",\n      workp: 7,\n      money: 8\n    };\n    fillForm(example);\n  }\n\n  syncSliders();\n  fillForm(getSavedProfile());\n\n  const existing = getSavedProfile();\n  if(existing && Object.keys(existing).length > 0){\n    showSummary(existing);\n  }\n\n  workSlider.addEventListener(\"input\", syncSliders);\n  moneySlider.addEventListener(\"input\", syncSliders);\n  saveBtn.addEventListener(\"click\", saveProfile);\n  demoBtn.addEventListener(\"click\", loadExample);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Profile Builder Pro Build the profile behind your direction Before deeper recommendations, the system needs a clearer picture of your situation, strengths, pressure points, and aspirations. The better your profile, the more meaningful your direction becomes. Why this matters Real guidance cannot be based only on a stage label. It becomes more useful when the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-686","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/comments?post=686"}],"version-history":[{"count":5,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/686\/revisions"}],"predecessor-version":[{"id":692,"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/pages\/686\/revisions\/692"}],"wp:attachment":[{"href":"https:\/\/stadiaorg.com\/fr\/wp-json\/wp\/v2\/media?parent=686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}