{"id":719,"date":"2026-06-17T12:57:39","date_gmt":"2026-06-17T12:57:39","guid":{"rendered":"https:\/\/jani-nv.com\/?page_id=719"},"modified":"2026-06-18T00:01:48","modified_gmt":"2026-06-18T00:01:48","slug":"procedure","status":"publish","type":"page","link":"https:\/\/jani-nv.com\/nl\/procedure\/","title":{"rendered":"Werkwijze"},"content":{"rendered":"<!-- =========================================================================\n     1. REMIX ICON EMBED COPPELING (CDN)\n     ========================================================================= -->\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/remixicon@4.2.0\/fonts\/remixicon.css\" rel=\"stylesheet\" \/>\n\n<!-- =========================================================================\n     2. STYLING (EXACT JOUW STRUCTUUR MET AUTOMATISCHE CAROUSEL)\n     ========================================================================= -->\n<style>\n  .jani-container {\n    max-width: min(1240px, calc(100% - 30px));\n    margin: 0 auto;\n    padding: 40px 0;\n    line-height: 1.6;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  .jani-header {\n    text-align: center;\n    margin-bottom: 50px;\n  }\n\n  .jani-header h2 {\n    font-size: 1.8rem;\n    margin-bottom: 15px;\n    font-weight: 800;\n    color: #000;\n    text-transform: uppercase;\n    font-family: 'BR Cobane', -apple-system, BlinkMacSystemFont, sans-serif;\n  }\n\n  .jani-header p {\n    color: #536280;\n    font-size: 0.95rem;\n    margin: 0;\n  }\n\n  .section-title {\n    text-align: center;\n    width: 100%;\n    margin: 60px 0 20px;\n    font-size: 1.4rem;\n    text-transform: uppercase;\n    font-family: 'BR Cobane', -apple-system, BlinkMacSystemFont, sans-serif;\n    color: #000;\n  }\n\n  \/* =========================================================================\n     EXCEL WORKFLOW \/ CHEVRON TRACKER (STRECHED ON DESKTOP, GRID ON MOBILE)\n     ========================================================================= *\/\n  .workflow-tracker {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 1.5rem;\n    margin-bottom: 40px;\n    background: #f8f9fa;\n    padding: 12px;\n    border-radius: 12px;\n    border: 1px solid #eaeaea;\n    overflow-x: auto;\n    scrollbar-width: none; \/* Verberg scrollbar voor Firefox *\/\n  }\n\n  .workflow-tracker::-webkit-scrollbar {\n    display: none; \/* Verberg scrollbar voor Chrome\/Safari *\/\n  }\n\n  .tracker-step {\n    flex: 1;\n    min-width: 160px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px 15px;\n    background: #ffffff;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n    position: relative;\n  }\n\n  .tracker-step:hover {\n    border-color: #f39200;\n  }\n\n  .tracker-step.active {\n    background: #f39200;\n    color: #ffffff;\n    border-color: #f39200;\n    box-shadow: 0 4px 15px rgba(243, 146, 0, 0.2);\n  }\n\n  .tracker-step .step-number {\n    font-weight: 800;\n    font-size: 0.85rem;\n    background: #f0f0f0;\n    color: #666;\n    width: 22px;\n    height: 22px;\n    display: inline-flex; \/* Perfect gecentreerd *\/\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    transition: all 0.4s ease;\n    line-height: 1;\n    padding: 0;\n  }\n\n  .tracker-step.active .step-number {\n    background: #ffffff;\n    color: #f39200;\n  }\n\n  .tracker-step span {\n    font-size: 0.8rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    white-space: nowrap;\n  }\n\n  \/* Pure CSS Chevrons tussen de stappen (alleen op desktop) *\/\n  @media (min-width: 1024px) {\n    .tracker-step {\n      min-width: 0; \/* Laat ze perfect krimpen op desktop *\/\n    }\n    .tracker-step:not(:last-child)::after {\n      content: '';\n      position: absolute;\n      right: -1rem;\n      top: 50%;\n      transform: translateY(-50%) rotate(45deg);\n      width: 8px;\n      height: 8px;\n      border-top: 2px solid #ccc;\n      border-right: 2px solid #ccc;\n      z-index: 5;\n      pointer-events: none;\n    }\n  }\n\n  \/* =========================================================================\n     FLOW PIPELINE (TIMELINE \/ GRID ZONDER LIJN)\n     ========================================================================= *\/\n  .pipeline-flow {\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n    position: relative;\n    margin-top: 20px;\n  }\n\n  \/* Single timeline node *\/\n  .pipeline-node {\n    display: flex;\n    align-items: stretch;\n    gap: 30px;\n    position: relative;\n    z-index: 2;\n    transition: transform 0.4s ease, border-color 0.4s ease;\n  }\n\n  \/* Large number badge on the side of each card *\/\n  .pipeline-badge {\n    width: 44px;\n    height: 44px;\n    background: #ffffff;\n    border: 3px solid #e0e0e0;\n    border-radius: 50%;\n    display: inline-flex; \/* Perfect gecentreerd *\/\n    align-items: center;\n    justify-content: center;\n    font-weight: 800;\n    color: #888;\n    font-size: 1.1rem;\n    flex-shrink: 0;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.03);\n    z-index: 3;\n    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n    align-self: flex-start;\n    margin-top: 25px;\n    line-height: 1;\n    padding: 0;\n  }\n@media (max-width:550px){\n.pipeline-badge{\ndisplay:none;\n}\n}\n\n  .pipeline-node.focused .pipeline-badge {\n    background: #f39200;\n    border-color: #f39200;\n    color: #ffffff;\n    box-shadow: 0 4px 15px rgba(243, 146, 0, 0.3);\n  }\n\n  \/* The actual step cards *\/\n  .workflow-card {\n    background: #f8f8f8;\n    border-radius: 1.0rem;\n    padding: 30px;\n    box-shadow: 0 5px 20px rgba(0,0,0,0.01);\n    border: 1px solid transparent;\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n    gap: 2rem;\n    flex-grow: 1;\n    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n    position: relative;\n  }\n\n  .pipeline-node.focused .workflow-card {\n    border-color: #f39200;\n    box-shadow: 0 10px 35px rgba(243, 146, 0, 0.02);\n  }\n\n  \/* =========================================================================\n     EXACT JOUW ORIGINELE ICON BOX STYLING (GEEN ACHTERGROND!)\n     ========================================================================= *\/\n  .jani-icon-box {\n    width: 44px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-top: 2px;\n  }\n\n  .jani-icon-box i {\n    font-size: 38px;\n    color: #f39200; \/* De oranje accentkleur *\/\n    line-height: 1;\n  }\n\n  \/* Content wrapper within the card *\/\n  .workflow-card-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.35rem;\n    flex-grow: 1;\nwidth:100%;\n  }\n\n  .workflow-card h3 {\n    margin-top: 0;\n    color: #000;\n    font-size: 1.25rem;\n    margin-bottom: 15px;\n    border-bottom: 2px solid #f5f5f5;\n    padding-bottom: 12px;\n    text-transform: uppercase;\n    font-family: 'BR Cobane', -apple-system, BlinkMacSystemFont, sans-serif;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;width:100%;\n  }\n\n  .workflow-card h3 span {\n    font-size: 0.75rem;\n    color: #888;\n    background: #fff;\n    padding: 4px 12px;\n    border-radius: 20px;\n    text-transform: none;\n    font-weight: normal;flex-shrink:0;\n  }\n\n  \/* Bullet points styling *\/\n  .workflow-list {\n    margin: 0;\n    padding-left: 0;\n    list-style-type: none;\n    color: #222;\n    font-size: 0.9rem;\n  }\n\n  .workflow-list li {\n    margin-bottom: 12px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-size: 0.92rem;\n    color: #334155;\n    transition: transform 0.2s ease;\n  }\n\n  .workflow-list li i {\n    color: #f39200;\n    font-size: 1.1rem;\n    flex-shrink: 0;\n  }\n\n  .workflow-list li:last-child {\n    margin-bottom: 0;\n  }\n\n  \/* =========================================================================\n     RESPONSIVE STYLING VOOR MOBIEL (MOBIEL GRID VOOR TRACKER, 1-BY-1 VOOR CARDS)\n     ========================================================================= *\/\n  @media (max-width: 768px) {\n    \/* De bovenste stappenbalk (tracker) op mobiel in een strak grid (2x2 + 1 onderaan) *\/\n    .workflow-tracker {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 10px;\n      padding: 10px;\n    }\n\n    .tracker-step {\n      min-width: 0; \/* Laat ze perfect krimpen in het grid *\/\n      padding: 10px 8px;\n    }\n\n    .tracker-step:last-child {\n      grid-column: span 2; \/* Laatste stap vult de onderste rij mooi uit *\/\n    }\n\n    .tracker-step span {\n      font-size: 0.75rem;\n    }\n\n    \/* De inhoudskaarten (cards) op mobiel gewoon 1-voor-1 onder elkaar *\/\n    .pipeline-flow {\n      display: flex;\n      flex-direction: column;\n      gap: 25px;\n    }\n\n    .pipeline-node {\n      flex-direction: row; \/* Badge links, card rechts *\/\n      gap: 15px;\n    }\n\n    .pipeline-badge {\n      margin-top: 15px; \/* Badge mooi uitgelijnd met de kop van de card *\/\n      align-self: flex-start;\n    }\n\n    .workflow-card {\n      padding: 20px;\n      flex-direction: column; \/* Icon boven, tekst eronder binnen de mobiele card *\/\n      gap: 1.2rem;\n    }\n  }\n\n  \/* =========================================================================\n     DESKTOP GRID UPGRADE (MIN-WIDTH: 1024PX) - 2x2 + 1 CENTRED CARDS LAYOUT\n     ========================================================================= *\/\n  @media (min-width: 1024px) {\n    .pipeline-flow {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr); \/* 4-koloms basis voor makkelijk centreren *\/\n      gap: 30px;\n    }\n\n    \/* Rij 1: Stap 1 & Stap 2 naast elkaar *\/\n    #step-0 {\n      grid-column: 1 \/ span 2;\n    }\n    #step-1 {\n      grid-column: 3 \/ span 2;\n    }\n\n    \/* Rij 2: Stap 3 & Stap 4 naast elkaar *\/\n    #step-2 {\n      grid-column: 1 \/ span 2;\n    }\n    #step-3 {\n      grid-column: 3 \/ span 2;\n    }\n\n    \/* Rij 3: Stap 5 gecentreerd in het absolute midden *\/\n    #step-4 {\n      grid-column: 2 \/ span 2; \/* Kolom 2 & 3 van de 4 *\/\n    }\n\n    \/* Subtiele lift omhoog bij focus *\/\n    .pipeline-node.focused {\n      transform: translateY(0px);\n    }\n  }\n<\/style>\n\n<!-- =========================================================================\n     3. HTML STRUCTUUR (DIRECT VANAF DIV, ZONDER EXTRA HTML RUISTAGS)\n     ========================================================================= -->\n<div class=\"jani-container\">\n  \n  <div class=\"jani-header\">\n    <h2>Werkwijze<\/h2>\n    <p>\n      <strong>Van Aanvraag tot Succesvolle Plaatsing<\/strong><br>\n      Ons gestructureerde wervingsproces garandeert kwaliteit, veiligheid en een vlekkeloze onboarding.\n    <\/p>\n  <\/div>\n\n  <!-- Excel-Style Interactive Process Tracker Header (Strak in Grid op mobiel!) -->\n  <div class=\"workflow-tracker\">\n    <div class=\"tracker-step active\" onclick=\"handleStepClick(0)\">\n      <div class=\"step-number\">1<\/div>\n      <span>Intake &amp; Analyse<\/span>\n    <\/div>\n    \n    <div class=\"tracker-step\" onclick=\"handleStepClick(1)\">\n      <div class=\"step-number\">2<\/div>\n      <span>Werving<\/span>\n    <\/div>\n    \n    <div class=\"tracker-step\" onclick=\"handleStepClick(2)\">\n      <div class=\"step-number\">3<\/div>\n      <span>Presentatie<\/span>\n    <\/div>\n    \n    <div class=\"tracker-step\" onclick=\"handleStepClick(3)\">\n      <div class=\"step-number\">4<\/div>\n      <span>Interviews<\/span>\n    <\/div>\n    \n    <div class=\"tracker-step\" onclick=\"handleStepClick(4)\">\n      <div class=\"step-number\">5<\/div>\n      <span>Onboarding<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- The Actual Timeline Flow (Zonder storende verticale lijn!) -->\n  <div class=\"pipeline-flow\">\n    \n    <!-- Step 1 -->\n    <div class=\"pipeline-node focused\" id=\"step-0\">\n      <div class=\"pipeline-badge\">1<\/div>\n      <div class=\"workflow-card\">\n        <div class=\"jani-icon-box\">\n          <i class=\"ri-search-eye-line\"><\/i>\n        <\/div>\n        <div class=\"workflow-card-content\">\n          <h3>Intake &amp; Analyse <span>Fase 01<\/span><\/h3>\n          <ul class=\"workflow-list\">\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Bespreking van vacature en organisatie<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Inventarisatie functie-eisen<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Inzicht krijgen in de bedrijfscultuur<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Vaststellen salaris en arbeidsvoorwaarden<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Step 2 -->\n    <div class=\"pipeline-node\" id=\"step-1\">\n      <div class=\"pipeline-badge\">2<\/div>\n      <div class=\"workflow-card\">\n        <div class=\"jani-icon-box\">\n          <i class=\"ri-user-search-line\"><\/i>\n        <\/div>\n        <div class=\"workflow-card-content\">\n          <h3>Werving &amp; Screening <span>Fase 02<\/span><\/h3>\n          <ul class=\"workflow-list\">\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Actief op zoek naar geschikte kandidaten.<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Eerste selectiegesprekken<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> CV-screening<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Competentie- en geschiktheidsbeoordeling<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Step 3 -->\n    <div class=\"pipeline-node\" id=\"step-2\">\n      <div class=\"pipeline-badge\">3<\/div>\n      <div class=\"workflow-card\">\n        <div class=\"jani-icon-box\">\n          <i class=\"ri-contacts-book-line\"><\/i>\n        <\/div>\n        <div class=\"workflow-card-content\">\n          <h3>Presentatie Kandidaten <span>Fase 03<\/span><\/h3>\n          <ul class=\"workflow-list\">\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Alleen vooraf gescreende kandidaten worden voorgesteld<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Aanleveren van shortlist<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Deskundig advies en begeleiding van Jani Detachering<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Step 4 -->\n    <div class=\"pipeline-node\" id=\"step-3\">\n      <div class=\"pipeline-badge\">4<\/div>\n      <div class=\"workflow-card\">\n        <div class=\"jani-icon-box\">\n          <i class=\"ri-shield-user-line\"><\/i>\n        <\/div>\n        <div class=\"workflow-card-content\">\n          <h3>Interviews &amp; Verificatie <span>Fase 04<\/span><\/h3>\n          <ul class=\"workflow-list\">\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Co\u00f6rdinatie van gesprekken<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Achtergrondcontrole en verificatie van professionele referenties<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Medische screening \/ keuring<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Eindselectie opdrachtgever<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Step 5 -->\n    <div class=\"pipeline-node\" id=\"step-4\">\n      <div class=\"pipeline-badge\">5<\/div>\n      <div class=\"workflow-card\">\n        <div class=\"jani-icon-box\">\n          <i class=\"ri-rocket-2-line\"><\/i>\n        <\/div>\n        <div class=\"workflow-card-content\">\n          <h3>Onboarding &#038; Start <span>Fase 05<\/span><\/h3>\n          <ul class=\"workflow-list\">\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Arbeidsovereenkomst opstellen<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Administratieve afhandeling<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Introductie en onboarding<\/li>\n            <li><i class=\"ri-checkbox-circle-fill\"><\/i> Succesvolle start bij opdrachtgever<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<!-- =========================================================================\n     4. JAVASCRIPT (GEANIMEERDE LOOP MET ZERO AUTO-SCROLLING)\n     ========================================================================= -->\n<script>\n  let activeIndex = 0;\n  const totalSteps = 5;\n  let autoPlayTimer = null;\n  let resumeTimer = null;\n\n  \/\/ Update de visuele status van de tracker en de cards (ZONDER pagina te scrollen!)\n  function updateActiveState(index) {\n    activeIndex = index;\n    const trackerSteps = document.querySelectorAll('.tracker-step');\n    const nodes = document.querySelectorAll('.pipeline-node');\n\n    \/\/ Update de Excel-stappen bovenaan\n    trackerSteps.forEach((step, i) => {\n      if (i === index) {\n        step.classList.add('active');\n      } else {\n        step.classList.remove('active');\n      }\n    });\n\n    \/\/ Update de stappen\/cards in de timeline\n    nodes.forEach((node, i) => {\n      if (i === index) {\n        node.classList.add('focused');\n      } else {\n        node.classList.remove('focused');\n      }\n    });\n  }\n\n  \/\/ De automatische loop die elke 2 seconden loopt\n  function startAutoPlay() {\n    stopAutoPlay(); \/\/ Reset eventuele actieve timers\n    autoPlayTimer = setInterval(() => {\n      activeIndex = (activeIndex + 1) % totalSteps;\n      updateActiveState(activeIndex);\n    }, 2000);\n  }\n\n  function stopAutoPlay() {\n    if (autoPlayTimer) {\n      clearInterval(autoPlayTimer);\n    }\n  }\n\n  \/\/ Als de gebruiker handmatig klikt (Alleen highlight, GEEN scroll!)\n  function handleStepClick(index) {\n    stopAutoPlay();\n    clearTimeout(resumeTimer);\n\n    \/\/ Alleen visueel updaten\n    updateActiveState(index);\n\n    \/\/ Na 6 seconden van inactiviteit pakt de automatische loop de draad weer op\n    resumeTimer = setTimeout(() => {\n      startAutoPlay();\n    }, 6000);\n  }\n\n  \/\/ Initialisatie bij het laden van de pagina\n  document.addEventListener('DOMContentLoaded', () => {\n    updateActiveState(0);\n    startAutoPlay();\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Placement Procedures From Request to Successful Placement Our structured recruitment process guarantees quality, safety, and seamless onboarding. 1 Intake &#038; Analysis 2 Recruitment 3 Presentation 4 Interviews 5 Onboarding 1 Intake &#038; Analysis Phase 01 In-depth discussion of vacancy and organization Comprehensive inventory of job requirements Gaining insight into corporate culture Establishing salary guidelines and&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_gspb_post_css":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-719","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/pages\/719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/comments?post=719"}],"version-history":[{"count":14,"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/pages\/719\/revisions"}],"predecessor-version":[{"id":746,"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/pages\/719\/revisions\/746"}],"wp:attachment":[{"href":"https:\/\/jani-nv.com\/nl\/wp-json\/wp\/v2\/media?parent=719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}