templates/application/whileresume/website/candidates/homepage_fr.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/lexend/layout.html.twig' %}
  3. {% block title %}{{ page.shortTitle }}{% endblock title %}
  4. {% block description %}{{ page.shortDescription }}{% endblock description %}
  5. {% block robots %}{{ page.robots }}{% endblock robots %}
  7. {% block meta_social %}{{ parent() }}{% include "/vitrine/components/socialmedia.html.twig" with { 'page':page,'social_type':'website' } %}{% endblock meta_social %}
  8. {% block meta %}{{ parent() }}{% include "/vitrine/components/author.html.twig" with {'page':page } %}{% endblock meta %}
  10. {% block canonical %}{% include "/vitrine/lexend/components/languages/canonical_classic.html.twig" %}{% endblock canonical %}
  12. {% block body_header %}
  13.     {% embed "/vitrine/lexend/components/header.html.twig" with {'navcolor':'blue','navtype':'default'} %}
  14.         {% block header_content %}
  15.             {% include "/vitrine/lexend/components/languages/classic.html.twig" %}
  16.         {% endblock %}
  17.         {% block header_content2 %}
  18.             {% include "/vitrine/lexend/components/languages/classic_mobile.html.twig" %}
  19.         {% endblock %}
  20.     {% endembed %}
  21. {% endblock body_header %}
  23. {% block css %}
  24.     <style>
  25.         .wr-search-section{position:relative;z-index:2;width:100%;max-width:720px;margin:0 auto}
  26.         .wr-search-bar{display:flex;align-items:center;background:#fff;border-radius:16px;padding:6px;box-shadow:0 4px 24px rgba(108,58,237,.08),0 1px 3px rgba(0,0,0,.04);border:2px solid transparent;transition:border-color .3s,box-shadow .3s;cursor:pointer}
  27.         .wr-search-bar:hover,.wr-search-bar.active{border-color:rgba(108,58,237,.2);box-shadow:0 8px 32px rgba(108,58,237,.12),0 2px 6px rgba(0,0,0,.04)}
  28.         .wr-search-icon{padding:12px 14px;color:#9CA3AF;display:flex;align-items:center;flex-shrink:0}
  29.         .wr-search-input-wrapper{flex:1;position:relative;height:48px;display:flex;align-items:center;overflow:hidden}
  30.         .wr-search-typed-text{font-size:16px;color:#1E1B2E;white-space:nowrap}
  31.         .wr-search-cursor{display:inline-block;width:2px;height:20px;background:var(--color-primary,#6C3AED);margin-left:2px;animation:wrBlink 1s step-end infinite;vertical-align:middle}
  32.         @keyframes wrBlink{0%,100%{opacity:1}50%{opacity:0}}
  33.         .wr-search-placeholder{color:#9CA3AF;font-size:16px}
  34.         .wr-search-real-input{width:100%;border:none;outline:none;font-size:16px;color:#1E1B2E;background:transparent;font-family:inherit}
  35.         .wr-search-real-input::placeholder{color:#9CA3AF}
  36.         .wr-search-btn{background:var(--color-primary,#6C3AED);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s,transform .15s;flex-shrink:0;font-family:inherit}
  37.         .wr-search-btn:hover{filter:brightness(1.1);transform:scale(1.02)}
  38.         @media(max-width:640px){.wr-search-btn span{display:none}.wr-search-btn{padding:12px 14px}}
  39.         .wr-search-tags{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center}
  40.         .wr-search-tags>span.wr-label{font-size:13px;color:#9CA3AF}
  41.         .wr-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:100px;font-size:13px;font-weight:500;background:#fff;color:#4B5563;border:1px solid rgba(0,0,0,.06);cursor:pointer;transition:all .2s;text-decoration:none}
  42.         .wr-tag:hover{background:#F5F3FF;color:var(--color-primary,#6C3AED);border-color:rgba(108,58,237,.2)}
  43.         .wr-search-results{position:relative;background:#fff;border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.04);padding:0;max-height:0;overflow:hidden;transition:max-height .5s ease,padding .5s ease,margin .5s ease,opacity .4s ease;z-index:10;opacity:0;margin-top:0}
  44.         .wr-search-results.visible{max-height:2000px;padding:8px;margin-top:12px;opacity:1}
  45.         .wr-result-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .2s,opacity .3s ease,transform .3s ease;opacity:0;transform:translateY(8px);text-decoration:none;color:inherit}
  46.         .wr-result-item.show{opacity:1;transform:translateY(0)}
  47.         .wr-result-item:hover{background:#F5F3FF}
  48.         .wr-result-item+.wr-result-item{border-top:1px solid rgba(0,0,0,.04)}
  49.         .wr-result-logo{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;font-weight:700}
  50.         .wr-result-logo img{width:100%;height:100%;object-fit:cover;border-radius:10px}
  51.         .wr-result-info{flex:1;text-align:left;min-width:0}
  52.         .wr-result-title{font-size:14px;font-weight:600;color:#1E1B2E;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  53.         .wr-result-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#9CA3AF;flex-wrap:wrap}
  54.         .wr-result-company{color:#4B5563;font-weight:500}
  55.         .wr-result-badge{display:inline-flex;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
  56.         .wr-badge-new{background:#DCFCE7;color:#16A34A}
  57.         .wr-badge-hot{background:#FEF3C7;color:#D97706}
  58.         .wr-badge-expire{background:#FEE2E2;color:#DC2626}
  59.         .wr-result-salary{font-size:13px;font-weight:600;color:var(--color-primary,#6C3AED);white-space:nowrap}
  60.         .wr-result-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
  61.         .wr-like-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;transition:transform .2s,background .2s;display:flex;align-items:center}
  62.         .wr-like-btn:hover{transform:scale(1.15);background:rgba(239,68,68,.06)}
  63.         .wr-like-btn svg{width:20px;height:20px;stroke:#D1D5DB;fill:none;transition:all .2s}
  64.         .wr-like-btn.liked svg{stroke:#EF4444;fill:#EF4444}
  65.         .wr-results-cta-overlay{position:relative;margin-top:4px;border-radius:12px;overflow:hidden}
  66.         .wr-results-blurred{padding:10px 14px;display:flex;flex-direction:column;gap:10px;filter:blur(5px);opacity:.5;pointer-events:none;user-select:none}
  67.         .wr-blurred-row{display:flex;align-items:center;gap:12px}
  68.         .wr-blurred-circle{width:44px;height:44px;border-radius:10px;background:#E5E7EB;flex-shrink:0}
  69.         .wr-blurred-lines{flex:1;display:flex;flex-direction:column;gap:6px}
  70.         .wr-blurred-line{height:10px;border-radius:5px;background:#E5E7EB}
  71.         .wr-blurred-line:first-child{width:60%}.wr-blurred-line:last-child{width:40%}
  72.         .wr-cta-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.65);backdrop-filter:blur(2px);border-radius:12px;gap:8px}
  73.         .wr-cta-overlay-text{font-size:14px;font-weight:600;color:#1E1B2E}
  74.         .wr-cta-overlay-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:var(--color-primary,#6C3AED);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;font-family:inherit}
  75.         .wr-cta-overlay-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
  76.         .wr-results-count{text-align:center;padding:10px;font-size:13px;color:#9CA3AF;border-top:1px solid rgba(0,0,0,.04);margin-top:4px}
  77.         .wr-results-count strong{color:var(--color-primary,#6C3AED)}
  78.         .wr-hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(108,58,237,.15);padding:6px 16px;border-radius:100px;font-size:13px;font-weight:500;color:var(--color-primary,#6C3AED)}
  79.         .wr-hero-badge .wr-dot{width:8px;height:8px;background:#22C55E;border-radius:50%;animation:wrPulseDot 2s ease-in-out infinite}
  80.         @keyframes wrPulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
  81.         .wr-video-cta{display:inline-flex;align-items:center;gap:6px;background:rgba(108,58,237,.06);padding:6px 14px;border-radius:100px;font-weight:500;color:var(--color-primary,#6C3AED);font-size:14px}
  83.         {# === Styles mode connectĂ© === #}
  84.         .wr-loading{text-align:center;padding:30px 20px}
  85.         .wr-spinner{display:inline-block;width:28px;height:28px;border:3px solid rgba(108,58,237,.15);border-top-color:var(--color-primary,#6C3AED);border-radius:50%;animation:wrSpin .7s linear infinite}
  86.         @keyframes wrSpin{to{transform:rotate(360deg)}}
  87.         .wr-empty-state,.wr-coming-soon{text-align:center;padding:40px 20px}
  88.         .wr-empty-icon,.wr-coming-icon{font-size:40px;margin-bottom:12px}
  89.         .wr-empty-title,.wr-coming-title{font-size:16px;font-weight:600;color:#1E1B2E;margin:0 0 6px}
  90.         .wr-empty-text,.wr-coming-text{font-size:14px;color:#9CA3AF;margin:0}
  91.         .wr-load-more{display:flex;justify-content:center;padding:12px 8px 4px}
  92.         .wr-load-more-btn{background:none;border:2px solid var(--color-primary,#6C3AED);color:var(--color-primary,#6C3AED);padding:8px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
  93.         .wr-load-more-btn:hover{background:var(--color-primary,#6C3AED);color:#fff}
  94.         .wr-load-more-btn:disabled{opacity:.5;cursor:not-allowed}
  96.         {# === Styles offres populaires === #}
  97.         .wr-popular-card{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:14px;padding:16px;border:1px solid rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
  98.         .wr-popular-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
  99.         .wr-popular-avatar{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
  100.         .wr-popular-title{font-size:14px;font-weight:600;color:#1E1B2E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  101.         .wr-popular-meta{font-size:12px;color:#9CA3AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  102.         .wr-popular-badge{display:inline-flex;padding:2px 10px;border-radius:6px;font-size:11px;font-weight:600}
  103.         .wr-popular-date{font-size:11px;color:#6B7280}
  104.     </style>
  105. {% endblock css %}
  107. {% block body %}
  109.     <div id="hero_header" class="hero-header section panel overflow-hidden">
  110.         <div class="position-absolute top-0 start-0 end-0 h-screen bg-secondary dark:bg-gray-300 dark:bg-opacity-15 rounded-bottom-2 lg:rounded-bottom-5"></div>
  111.         <div class="section-outer panel py-8 lg:py-9 xl:py-10">
  112.             <div class="container">
  113.                 <div class="section-inner panel">
  114.                     <div class="d-none xl:d-block">
  115.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 5%; left: 5%" data-anime="translateY: [0, 10]; easing: linear; loop: true; direction: alternate; delay: 0;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  116.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 20%; left: 10%" data-anime="translateY: [0, 15]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  117.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 35%; left: 0%" data-anime="translateY: [0, 5]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  118.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 5%; right: 5%" data-anime="translateY: [0, 10]; easing: linear; loop: true; direction: alternate; delay: 0;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  119.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 20%; right: 10%" data-anime="translateY: [0, 15]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  120.                         <div class="position-absolute rounded-circle border border-dashed border-primary-300 dark:border-white dark:border-opacity-15 cstack w-56px h-56px d-none lg:d-block" style="top: 35%; right: 0%" data-anime="translateY: [0, 5]; easing: linear; loop: true; direction: alternate; delay: 25;"><img class="p-narrow rounded-circle" src="/uploads/no_avatar.png" alt="Candidat anonyme"></div>
  121.                     </div>
  122.                     <div class="row child-cols-12 justify-center items-center g-8">
  123.                         <div class="lg:col-12">
  124.                             <div class="panel vstack gap-4 lg:gap-6">
  125.                                 <div class="panel vstack justify-center items-center gap-2 px-2 pt-4 text-center">
  126.                                     <div class="wr-hero-badge">
  127.                                         đźŽ‰ + 20000 offres d'emploi
  128.                                     </div>
  130.                                     <h1 class="h3 md:h2 lg:display-4 m-0">Le <span class="text-primary dark:text-tertiary">career board</span> nouvelle gĂ©nĂ©ration â€” votre prochain poste vous cherche dĂ©jĂ </h1>
  131.                                     <p class="fs-6 xl:fs-4 xl:px-10 dark:text-white text-opacity-70">
  132.                                         CrĂ©ez votre profil sur <span class="text-primary dark:text-tertiary">Whileresume</span> et laissez les <span class="text-primary dark:text-tertiary">offres</span> venir Ă  vous
  133.                                     </p>
  134.                                 </div>
  136.                                 {# ====== BARRE DE RECHERCHE ====== #}
  137.                                 <div class="wr-search-section" id="wrSearchSection">
  138.                                     <div class="wr-search-bar{#% if app.user %#} active{#% endif %#}" id="wrSearchBar">
  139.                                         <div class="wr-search-icon">
  140.                                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  141.                                         </div>
  142.                                         <div class="wr-search-input-wrapper">
  143.                                             {#% if app.user %#}
  144.                                                 <input type="text" id="wrSearchInput" class="wr-search-real-input" placeholder="Rechercher un poste, une entreprise, une ville..." autocomplete="off">
  145.                                             {#% else %}
  146.                                                 <span class="wr-search-typed-text" id="wrTypedText"></span><span class="wr-search-cursor" id="wrCursor"></span>
  147.                                                 <span class="wr-search-placeholder" id="wrPlaceholder">Agent immobilier, SecrĂ©taire, Avocat...</span>
  148.                                             {% endif %#}
  149.                                         </div>
  150.                                         <button class="wr-search-btn" id="wrSearchBtn">
  151.                                             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  152.                                             <span>Rechercher</span>
  153.                                         </button>
  154.                                     </div>
  155.                                     <div class="wr-search-tags">
  156.                                         <span class="wr-label">Populaire :</span>
  157.                                         {% for pk in popularKeywords %}
  158.                                             <span class="wr-tag" data-search="{{ pk.keyword }}">{{ pk.icon }} {{ pk.label }}</span>
  159.                                         {% endfor %}
  160.                                     </div>
  161.                                 </div>
  163.                                 {# ====== BOUTONS CTA ====== #}
  165.                                 <div class="panel vstack justify-center items-center text-center">
  166.                                     <div class="vstack md:hstack justify-center">
  167.                                         <a href="{{ ios_fr }}" class="btn btn-md btn-outline-primary dark:border-tertiary dark:text-tertiary dark:hover:bg-tertiary dark:hover:text-primary-700 border-2 px-3 w-auto" style="margin-top:10px;">
  168.                                             TĂ©lĂ©charger sur iOS
  169.                                             <svg fill="#000000" width="25px" height="25px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/></svg>
  170.                                         </a>
  171.                                         <a href="{{ android_fr }}" class="btn btn-md btn-outline-primary dark:border-tertiary dark:text-tertiary dark:hover:bg-tertiary dark:hover:text-primary-700 border-2 px-3 w-auto" style="margin-top:10px; margin-left:10px;">
  172.                                             TĂ©lĂ©charger sur Android
  173.                                             <svg height="20px" width="20px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xml:space="preserve"><g><g><path style="fill:#3A9BC8;" d="M225.656,256.052L14.016,485.451l-6.442,7.052c-4.005-5.919-6.704-12.972-7.313-20.806C0.087,470.305,0,468.91,0,467.518V44.499c0-9.488,2.873-18.02,7.574-24.987L225.656,256.052z"/><path style="fill:#9BCD83;" d="M320.811,152.8l-95.155,103.253L7.574,19.512C19.936,1.405,45.183-6.342,66.6,6.02L320.811,152.8z"/><path style="fill:#EEB84C;" d="M455.056,257.27c-0.348,14.453-7.748,28.904-22.113,37.174l-112.132,64.771l-95.155-103.163L320.811,152.8l70.518,40.745l41.614,24.026C448.178,226.366,455.579,241.861,455.056,257.27z"/><path style="fill:#B43F70;" d="M7.591,492.492c12.368,18.116,37.599,25.838,58.976,13.496L320.775,359.22l-95.156-103.209L7.591,492.492z"/></g><path style="opacity:0.2;fill:#FFFFFF;" d="M454.067,246.447c-2.453-11.518-9.483-22.156-21.124-28.876l-41.614-24.026L320.811,152.8L66.6,6.02C45.183-6.342,19.936,1.405,7.574,19.512C2.873,26.479,0,35.011,0,44.499v243.72c36.681,3.114,74.226,4.746,112.451,4.746c47.984,0,94.85-2.644,140.318-7.505l-27.027-29.314l27.038,29.314C323.988,277.849,391.567,264.55,454.067,246.447z"/></g></svg>
  174.                                         </a>
  175.                                     </div>
  176.                                 </div>
  179.                                 {# ====== RÉSULTATS ====== #}
  180.                                 {#% if app.user %#}
  182.                                     <div class="wr-search-results visible" id="wrSearchResults" style="max-height:none;opacity:1;padding:8px;margin-top:12px;">
  184.                                         <div id="wrJobsList"></div>
  186.                                         <div id="wrLoading" class="wr-loading">
  187.                                             <div class="wr-spinner"></div>
  188.                                         </div>
  190.                                         <div id="wrEmptyState" class="wr-empty-state" style="display:none;">
  191.                                             <div class="wr-empty-icon">🔍</div>
  192.                                             <p class="wr-empty-title">Aucune offre ne correspond Ă  votre recherche</p>
  193.                                             <p class="wr-empty-text">Essayez avec d'autres mots-clĂ©s ou consultez les recherches populaires ci-dessus</p>
  194.                                         </div>
  196.                                         <div id="wrComingSoon" class="wr-coming-soon" style="display:none;">
  197.                                             <div class="wr-coming-icon">🚀</div>
  198.                                             <p class="wr-coming-title">De nouvelles offres arrivent bientĂ´t !</p>
  199.                                             <p class="wr-coming-text">Nous ajoutons de nouvelles opportunitĂ©s chaque jour.<br>Revenez vite ou activez les notifications pour ĂŞtre alertĂ©.</p>
  200.                                         </div>
  202.                                         <div id="wrLoadMore" class="wr-load-more" style="display:none;">
  203.                                             <button class="wr-load-more-btn" id="wrLoadMoreBtn">Voir plus d'offres</button>
  204.                                         </div>
  206.                                         <div class="wr-results-count" id="wrResultsCount" style="display:none;">
  207.                                             <strong id="wrTotalCount">0</strong> offres trouvĂ©es
  208.                                         </div>
  209.                                     </div>
  211.                                 {#% else %}
  213.                                     <div class="wr-search-results" id="wrSearchResults">
  214.                                         <div id="wrResultsList"></div>
  215.                                         <div class="wr-results-cta-overlay">
  216.                                             <div class="wr-results-blurred">
  217.                                                 <div class="wr-blurred-row"><div class="wr-blurred-circle"></div><div class="wr-blurred-lines"><div class="wr-blurred-line"></div><div class="wr-blurred-line"></div></div></div>
  218.                                                 <div class="wr-blurred-row"><div class="wr-blurred-circle"></div><div class="wr-blurred-lines"><div class="wr-blurred-line"></div><div class="wr-blurred-line"></div></div></div>
  219.                                             </div>
  220.                                             <div class="wr-cta-overlay">
  221.                                                 <span class="wr-cta-overlay-text">đź”’ Inscrivez-vous pour voir toutes les offres</span>
  222.                                                 <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="wr-cta-overlay-btn">CrĂ©er mon profil gratuitement <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg></a>
  223.                                             </div>
  224.                                         </div>
  225.                                         {% if totalJobs is defined and totalJobs > 0 %}
  226.                                             <div class="wr-results-count">
  227.                                                 <strong>+{{ totalJobs|number_format(0, ',', ' ') }} offres</strong> dans notre base de donnĂ©es
  228.                                             </div>
  229.                                         {% endif %}
  230.                                     </div>
  231.                                 {% endif %#}
  233.                                 <div class="panel vstack justify-center items-center text-center">
  234.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  235.                                         <span class="wr-video-cta">🎥 Partagez votre <strong>&nbsp;CV vidĂ©o&nbsp;</strong> pour augmenter vos chances</span>
  236.                                     </div>
  237.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  238.                                         <span class="desc">Le saviez-vous ? <a href="https://www.welcometothejungle.com/fr/articles/marche-cache-emploi-candidater" target="_blank">40%</a> des offres d emploi restent cachĂ©es et sont directement confiĂ©es aux recruteurs</span>
  239.                                     </div>
  240.                                 </div>
  242.                             </div>
  243.                         </div>
  244.                     </div>
  245.                 </div>
  246.             </div>
  247.         </div>
  248.     </div>
  250.     {#% if app.user %#}
  251.         <script>
  252.             (function(){
  254.                 var LIKED_IDS = {{ likedJobIds|json_encode|raw }};
  255.                 var IS_CANDIDATE = {{ (app.user.typeAccount is defined and app.user.typeAccount == 'candidate') ? 'true' : 'false' }};
  257.             var JOB_BASE_URL = '/{{ app.request.locale }}/job/';
  258.                 var SEARCH_API = '{{ path("locale_api_jobs_search", {"_locale": app.request.locale}) }}';
  259.                 var LIKE_API = '{{ path("locale_api_jobs_like", {"_locale": app.request.locale}) }}';
  261.                 // --- Palette couleurs logos ---
  262.                 var palette = [
  263.                     {bg:'#EDE9FE',color:'#7C3AED'},{bg:'#DBEAFE',color:'#2563EB'},
  264.                     {bg:'#D1FAE5',color:'#059669'},{bg:'#FEF3C7',color:'#D97706'},
  265.                     {bg:'#FCE7F3',color:'#DB2777'},{bg:'#FEE2E2',color:'#DC2626'},
  266.                     {bg:'#E0E7FF',color:'#4338CA'},{bg:'#CCFBF1',color:'#0D9488'}
  267.                 ];
  268.                 function getColor(name){
  269.                     var h=0;for(var i=0;i<name.length;i++) h=name.charCodeAt(i)+((h<<5)-h);
  270.                     return palette[Math.abs(h)%palette.length];
  271.                 }
  273.                 // --- DOM ---
  274.                 var searchInput = document.getElementById('wrSearchInput');
  275.                 var searchBtn = document.getElementById('wrSearchBtn');
  276.                 var jobsList = document.getElementById('wrJobsList');
  277.                 var loading = document.getElementById('wrLoading');
  278.                 var emptyState = document.getElementById('wrEmptyState');
  279.                 var comingSoon = document.getElementById('wrComingSoon');
  280.                 var loadMoreWrap = document.getElementById('wrLoadMore');
  281.                 var loadMoreBtn = document.getElementById('wrLoadMoreBtn');
  282.                 var resultsCount = document.getElementById('wrResultsCount');
  283.                 var totalCountEl = document.getElementById('wrTotalCount');
  285.                 var currentQuery = '';
  286.                 var currentOffset = 0;
  287.                 var LIMIT = 10;
  288.                 var isLoading = false;
  289.                 var debounceTimer;
  291.                 // --- IcĂ´nes SVG ---
  292.                 var heartSvg = '<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>';
  294.                 // --- Rendu d'une offre ---
  295.                 function renderJob(job){
  296.                     var col = getColor(job.companyName);
  297.                     var logoHtml;
  298.                     if(job.image){
  299.                         logoHtml = '<div class="wr-result-logo"><img src="'+job.image+'" alt="'+job.companyName+'"></div>';
  300.                     } else {
  301.                         logoHtml = '<div class="wr-result-logo" style="background:'+col.bg+';color:'+col.color+';">'+job.logo+'</div>';
  302.                     }
  304.                     var badgeHtml = '';
  305.                     if(job.isNew) badgeHtml = '<span class="wr-result-badge wr-badge-new">Nouveau</span>';
  307.                     var salaryHtml = job.salary ? '<span class="wr-result-salary">'+job.salary+'</span>' : '';
  309.                     var likeHtml = '';
  310.                     if(IS_CANDIDATE){
  311.                         var likedClass = LIKED_IDS.indexOf(job.id) !== -1 ? ' liked' : '';
  312.                         likeHtml = '<button class="wr-like-btn'+likedClass+'" data-job-id="'+job.id+'" title="Sauvegarder">'+heartSvg+'</button>';
  313.                     }
  315.                     var remoteHtml = '';
  316.                     if(job.remoteWork && job.remoteWork !== '' && job.remoteWork !== 'no'){
  317.                         var remoteLabel = job.remoteWork === 'full' ? 'Full remote' : (job.remoteWork === 'hybrid' ? 'Hybride' : job.remoteWork);
  318.                         remoteHtml = '<span>·</span><span>'+remoteLabel+'</span>';
  319.                     }
  321.                     var div = document.createElement('a');
  322.                     div.className = 'wr-result-item';
  323.                     div.href = JOB_BASE_URL + job.slug;
  324.                     div.innerHTML = logoHtml +
  325.                         '<div class="wr-result-info">' +
  326.                         '<div class="wr-result-title">' + job.jobTitle + '</div>' +
  327.                         '<div class="wr-result-meta">' +
  328.                         '<span class="wr-result-company">' + job.companyName + '</span>' +
  329.                         (job.city ? '<span>·</span><span>' + job.city + '</span>' : '') +
  330.                         '<span>·</span><span>' + job.employmentType + '</span>' +
  331.                         remoteHtml +
  332.                         badgeHtml +
  333.                         '</div>' +
  334.                         '</div>' +
  335.                         '<div class="wr-result-actions">' + salaryHtml + likeHtml + '</div>';
  337.                     return div;
  338.                 }
  340.                 // --- Fetch offres ---
  341.                 function fetchJobs(query, offset, append){
  342.                     if(isLoading) return;
  343.                     isLoading = true;
  345.                     if(!append){
  346.                         jobsList.innerHTML = '';
  347.                         loadMoreWrap.style.display = 'none';
  348.                         resultsCount.style.display = 'none';
  349.                     }
  351.                     loading.style.display = 'block';
  352.                     emptyState.style.display = 'none';
  353.                     comingSoon.style.display = 'none';
  355.                     var url = SEARCH_API + '?q=' + encodeURIComponent(query) + '&offset=' + offset + '&limit=' + LIMIT;
  357.                     fetch(url, {credentials:'same-origin'})
  358.                         .then(function(r){ return r.json(); })
  359.                         .then(function(data){
  360.                             loading.style.display = 'none';
  361.                             isLoading = false;
  363.                             // Aucune offre du tout (base vide pour cette langue)
  364.                             if(data.total === 0 && query === ''){
  365.                                 comingSoon.style.display = 'block';
  366.                                 return;
  367.                             }
  369.                             // Aucun rĂ©sultat pour cette recherche
  370.                             if(data.total === 0 && query !== ''){
  371.                                 emptyState.style.display = 'block';
  372.                                 return;
  373.                             }
  375.                             // Afficher les rĂ©sultats
  376.                             data.jobs.forEach(function(job, i){
  377.                                 var el = renderJob(job);
  378.                                 jobsList.appendChild(el);
  379.                                 // Animation stagger
  380.                                 setTimeout(function(){ el.classList.add('show'); }, 50 + i * 60);
  381.                             });
  383.                             // Compteur
  384.                             totalCountEl.textContent = data.total;
  385.                             resultsCount.style.display = 'block';
  387.                             // Bouton "Voir plus"
  388.                             if(data.hasMore){
  389.                                 loadMoreWrap.style.display = 'flex';
  390.                             } else {
  391.                                 loadMoreWrap.style.display = 'none';
  392.                             }
  394.                             currentOffset = offset + data.jobs.length;
  395.                         })
  396.                         .catch(function(err){
  397.                             console.error('Erreur recherche:', err);
  398.                             loading.style.display = 'none';
  399.                             isLoading = false;
  400.                         });
  401.                 }
  403.                 // --- Like / Unlike ---
  404.                 function toggleLike(btn){
  405.                     var jobId = parseInt(btn.getAttribute('data-job-id'));
  407.                     fetch(LIKE_API, {
  408.                         method: 'POST',
  409.                         credentials: 'same-origin',
  410.                         headers: {'Content-Type':'application/json'},
  411.                         body: JSON.stringify({jobId: jobId})
  412.                     })
  413.                         .then(function(r){ return r.json(); })
  414.                         .then(function(data){
  415.                             if(data.liked){
  416.                                 btn.classList.add('liked');
  417.                                 if(LIKED_IDS.indexOf(jobId) === -1) LIKED_IDS.push(jobId);
  418.                             } else {
  419.                                 btn.classList.remove('liked');
  420.                                 var idx = LIKED_IDS.indexOf(jobId);
  421.                                 if(idx !== -1) LIKED_IDS.splice(idx, 1);
  422.                             }
  423.                         })
  424.                         .catch(function(err){ console.error('Erreur like:', err); });
  425.                 }
  427.                 // --- Event: delegation click like ---
  428.                 jobsList.addEventListener('click', function(e){
  429.                     var likeBtn = e.target.closest('.wr-like-btn');
  430.                     if(likeBtn){
  431.                         e.preventDefault();
  432.                         e.stopPropagation();
  433.                         toggleLike(likeBtn);
  434.                     }
  435.                 });
  437.                 // --- Event: recherche avec debounce ---
  438.                 searchInput.addEventListener('input', function(){
  439.                     clearTimeout(debounceTimer);
  440.                     debounceTimer = setTimeout(function(){
  441.                         currentQuery = searchInput.value.trim();
  442.                         currentOffset = 0;
  443.                         fetchJobs(currentQuery, 0, false);
  444.                     }, 350);
  445.                 });
  447.                 // --- Event: bouton recherche ---
  448.                 searchBtn.addEventListener('click', function(e){
  449.                     e.preventDefault();
  450.                     clearTimeout(debounceTimer);
  451.                     currentQuery = searchInput.value.trim();
  452.                     currentOffset = 0;
  453.                     fetchJobs(currentQuery, 0, false);
  454.                 });
  456.                 // --- Event: touche EntrĂ©e ---
  457.                 searchInput.addEventListener('keydown', function(e){
  458.                     if(e.key === 'Enter'){
  459.                         e.preventDefault();
  460.                         clearTimeout(debounceTimer);
  461.                         currentQuery = searchInput.value.trim();
  462.                         currentOffset = 0;
  463.                         fetchJobs(currentQuery, 0, false);
  464.                     }
  465.                 });
  467.                 // --- Event: voir plus ---
  468.                 loadMoreBtn.addEventListener('click', function(){
  469.                     fetchJobs(currentQuery, currentOffset, true);
  470.                 });
  472.                 // --- Event: tags populaires ---
  473.                 document.querySelectorAll('.wr-tag').forEach(function(tag){
  474.                     tag.addEventListener('click', function(){
  475.                         var s = tag.getAttribute('data-search');
  476.                         searchInput.value = s;
  477.                         currentQuery = s;
  478.                         currentOffset = 0;
  479.                         fetchJobs(s, 0, false);
  480.                     });
  481.                 });
  483.                 // --- Chargement initial ---
  484.                 fetchJobs('', 0, false);
  486.             })();
  487.         </script>
  489.     {#% else %}
  490.         <script>
  491.             (function(){
  492.                 var palette = [
  493.                     {bg:'#EDE9FE',color:'#7C3AED'},{bg:'#DBEAFE',color:'#2563EB'},
  494.                     {bg:'#D1FAE5',color:'#059669'},{bg:'#FEF3C7',color:'#D97706'},
  495.                     {bg:'#FCE7F3',color:'#DB2777'},{bg:'#FEE2E2',color:'#DC2626'},
  496.                     {bg:'#E0E7FF',color:'#4338CA'},{bg:'#CCFBF1',color:'#0D9488'}
  497.                 ];
  498.                 function getColor(name){
  499.                     var h=0;for(var i=0;i<name.length;i++) h=name.charCodeAt(i)+((h<<5)-h);
  500.                     return palette[Math.abs(h)%palette.length];
  501.                 }
  503.                 var JOB_BASE_URL = '/{{ app.request.locale }}/job/';
  504.             var searches = {{ popularJobsForVisitor|json_encode|raw }};
  506.                 var typedEl=document.getElementById('wrTypedText'),placeholderEl=document.getElementById('wrPlaceholder'),searchBar=document.getElementById('wrSearchBar'),searchResults=document.getElementById('wrSearchResults'),resultsList=document.getElementById('wrResultsList');
  507.                 var currentSearch=0,charIndex=0,animTimeout;
  508.                 var resultsVisible=false;
  510.                 function buildResults(items){
  511.                     resultsList.innerHTML='';
  512.                     if(!items || items.length === 0){
  513.                         resultsList.innerHTML='<div style="text-align:center;padding:20px;color:#9CA3AF;font-size:14px;">Aucune offre trouvĂ©e pour cette recherche</div>';
  514.                         return;
  515.                     }
  516.                     items.forEach(function(d){
  517.                         var col = getColor(d.jobTitle);
  518.                         var initial = d.jobTitle ? d.jobTitle.charAt(0).toUpperCase() : '?';
  520.             var badgeHtml = '';
  521.             if(d.diffDays <= 3){
  522.                 badgeHtml = '<span class="wr-result-badge wr-badge-new">🆕 New</span>';
  523.             } else if(d.daysUntilExpiry <= 5 && d.daysUntilExpiry > 0){
  524.                 badgeHtml = '<span class="wr-result-badge wr-badge-expire">⏳ Expire dans '+d.daysUntilExpiry+'j</span>';
  525.             } else if(d.daysUntilExpiry <= 0){
  526.                 badgeHtml = '<span class="wr-result-badge wr-badge-expire">⏳ ExpirĂ©e</span>';
  527.             }
  529.             var dateHtml = '<span class="wr-popular-date" style="font-size:12px;color:#6B7280;">đź“… '+d.createdAt+'</span>';
  531.             var div=document.createElement('a');
  532.             div.className='wr-result-item';
  533.             div.href=JOB_BASE_URL + d.slug;
  534.             div.innerHTML=
  535.                 '<div class="wr-result-logo" style="background:'+col.bg+';color:'+col.color+';">'+initial+'</div>'+
  536.                 '<div class="wr-result-info">'+
  537.                     '<div class="wr-result-title">'+d.jobTitle+'</div>'+
  538.                     '<div class="wr-result-meta">'+
  539.                         '<span>đź“Ť '+d.city+'</span>'+
  540.                         '<span>·</span><span>'+d.employmentType+'</span>'+
  541.                         badgeHtml+
  542.                     '</div>'+
  543.                 '</div>'+
  544.                 '<div class="wr-result-actions">'+dateHtml+'</div>';
  545.             resultsList.appendChild(div);
  546.         });
  547.     }
  549.     function showResults(){
  550.         searchResults.classList.add('visible');
  551.         searchBar.classList.add('active');
  552.         resultsVisible=true;
  553.         resultsList.querySelectorAll('.wr-result-item').forEach(function(item,i){
  554.             setTimeout(function(){item.classList.add('show');},100+i*80);
  555.         });
  556.     }
  558.     function updateResults(items){
  559.         var old=resultsList.querySelectorAll('.wr-result-item');
  560.         old.forEach(function(item){item.classList.remove('show');});
  561.         setTimeout(function(){
  562.             buildResults(items);
  563.             resultsList.querySelectorAll('.wr-result-item').forEach(function(item,i){
  564.                 setTimeout(function(){item.classList.add('show');},50+i*80);
  565.             });
  566.         },200);
  567.     }
  569.     function typeText(text,cb){
  570.         if(charIndex<text.length){typedEl.textContent+=text[charIndex];charIndex++;animTimeout=setTimeout(function(){typeText(text,cb)},70+Math.random()*50)}else{cb&&cb()}
  571.     }
  572.     function deleteText(cb){
  573.         var t=typedEl.textContent;if(t.length>0){typedEl.textContent=t.slice(0,-1);animTimeout=setTimeout(function(){deleteText(cb)},35)}else{cb&&cb()}
  574.     }
  576.     function runAnimation(){
  577.         if(searches.length === 0) return;
  578.         var data=searches[currentSearch];placeholderEl.style.display='none';charIndex=0;
  579.         typeText(data.text,function(){
  580.             animTimeout=setTimeout(function(){
  581.                 if(resultsVisible){updateResults(data.jobs)}else{buildResults(data.jobs);showResults()}
  582.                 animTimeout=setTimeout(function(){
  583.                     deleteText(function(){currentSearch=(currentSearch+1)%searches.length;animTimeout=setTimeout(runAnimation,800)});
  584.                 },4000);
  585.             },500);
  586.         });
  587.     }
  588.             if(searches.length > 0){
  589.                 var firstData=searches[0];
  590.                 placeholderEl.style.display='none';
  591.                 typedEl.textContent=firstData.text;
  592.                 buildResults(firstData.jobs);
  593.                 showResults();
  594.                 currentSearch=1 % searches.length;
  595.                 animTimeout=setTimeout(function(){deleteText(function(){animTimeout=setTimeout(runAnimation,800)})},3000);
  596.             }
  598.             document.querySelectorAll('.wr-tag').forEach(function(tag){
  599.                 tag.addEventListener('click',function(){
  600.                     clearTimeout(animTimeout);typedEl.textContent='';placeholderEl.style.display='none';charIndex=0;
  601.                     var s=tag.getAttribute('data-search');
  602.                     var data=searches.find(function(x){return x.searchKeyword===s})||searches.find(function(x){return x.text===s})||searches[0];
  603.                     if(data){
  604.                         typeText(data.text,function(){setTimeout(function(){if(resultsVisible){updateResults(data.jobs)}else{buildResults(data.jobs);showResults()}},400)});
  605.                     }
  606.                 });
  607.             });
  608.         })();
  609.         </script>
  610.     {#% endif %#}
  612.     <div id="how_it_works" class="how-it-works section panel overflow-hidden" style="margin-top:30px;">
  613.         <div class="section-outer panel">
  614.             <div class="container">
  615.                 <div style="text-align:center; margin-bottom:50px;">
  616.                     <h2 class="h4 sm:h3 xl:h2 m-0">Comment Ă§a marche ?</h2>
  617.                 </div>
  618.                 <div class="section-inner panel vstack border rounded-3 overflow-hidden" style="background-color:#F4ECE1;">
  619.                     <div class="row child-cols-12 md:child-cols justify-center col-match g-4 sep uc-grid">
  620.                         <div class="min-w-1/4">
  621.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  622.                                 <img class="w-100" src="/uploads/rh/mascotte_register.png" alt="Alice s'inscrit sur Whileresume">
  623.                                 <h3 class="h5 lg:h4 m-0">Je m'inscris gratuitement</h3>
  624.                                 <p class="fs-6">Connectez-vous avec des entreprises qui recherchent activement des profils comme le vĂ´tre, dans un large Ă©ventail de secteurs.</p>
  625.                             </div>
  626.                         </div>
  627.                         <div class="min-w-1/4">
  628.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  629.                                 <img class="w-100" src="/uploads/rh/mascotte_upload2.png" alt="Alice tĂ©lĂ©charge son CV sur Whileresume">
  630.                                 <h3 class="h5 lg:h4 m-0">Je tĂ©lĂ©charge mon CV</h3>
  631.                                 <p class="fs-6">Je tĂ©lĂ©charge mon CV au format PDF et/ou ma prĂ©sentation vidĂ©o. Je dĂ©finis mes compĂ©tences, mon niveau et mes attentes.</p>
  632.                             </div>
  633.                         </div>
  634.                         <div class="min-w-100 lg:min-w-1/4">
  635.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  636.                                 <img class="w-100" src="/uploads/rh/mascotte_reunion.png" alt="Alice rencontre un recruteur IT">
  637.                                 <h3 class="h5 lg:h4 m-0">Les entreprises me contactent</h3>
  638.                                 <p class="fs-6">Elles utilisent nos filtres pour trouver mon profil et me contactent directement avec des opportunitĂ©s correspondantes, ou je peux postuler directement aux postes ouverts.</p>
  639.                             </div>
  640.                         </div>
  641.                     </div>
  642.                 </div>
  643.             </div>
  644.         </div>
  645.     </div>
  647.     <div id="main_features" class="main-features section panel overflow-hidden">
  648.         <div class="section-outer panel py-6 lg:py-8 xl:py-10">
  649.             <div class="container">
  650.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10">
  651.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  652.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_filtrage3.png" title="Filtrage par critères" alt="Filtrage par critères" class="rounded-2" style="background-color:#F5EDE3;"></div>
  653.                     </div>
  654.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  655.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  656.                             <div>
  657.                                 <div class="panel vstack gap-2">
  658.                                     <span class="fs-6 fw-bold m-0 text-primary">01.</span>
  659.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Filtrage par critères</h2>
  660.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80"><strong>DĂ©finissez une fois</strong> vos critères essentiels : poste recherchĂ©, secteur d'activitĂ©, ville souhaitĂ©e et prĂ©fĂ©rences de travail. Notre système de filtres avancĂ©s permet aux recruteurs de vous identifier prĂ©cisĂ©ment selon vos attentes.</p>
  661.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Fini les opportunitĂ©s inadĂ©quates : seules les offres qui correspondent vraiment Ă  votre profil vous contactent.</p>
  662.                                 </div>
  663.                             </div>
  664.                             <div>
  665.                                 <div class="p-3 panel vstack gap-3 rounded border">
  666.                                     <p class="fs-6 dark:text-white">"Enfin, une plateforme de recrutement qui fonctionne pour moi. Je dĂ©finis une seule fois mes critères essentiels et je ne reçois que des opportunitĂ©s qui correspondent rĂ©ellement Ă  mon profil. Cela me fait gagner du temps et rend tout le processus bien plus efficace."</p>
  667.                                     <div class="panel hstack gap-1"><div class="panel vstack items-start gap-0"><h6 class="h6 m-0">Clark PHILLIP</h6><span class="fs-7 opacity-70">Data Engineer</span></div></div>
  668.                                 </div>
  669.                             </div>
  670.                         </div>
  671.                     </div>
  672.                 </div>
  673.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  674.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  675.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_upload.png" title="Alice upload son CV" alt="Alice upload son CV" class="rounded-2" style="background-color:#F5EDE3;"></div>
  676.                     </div>
  677.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  678.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  679.                             <div>
  680.                                 <div class="panel vstack gap-2">
  681.                                     <span class="fs-6 fw-bold m-0 text-primary">02.</span>
  682.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Optimisation intelligente</h2>
  683.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80"><strong>TĂ©lĂ©chargez votre CV existant</strong> et laissez Whileresume l'analyser automatiquement. Le système extrait et structure l'ensemble de vos informations pour crĂ©er une <strong>prĂ©sentation optimisĂ©e</strong> conforme Ă  votre profil.</p>
  684.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Whileresume identifie et met en valeur vos <strong>soft skills</strong> (leadership, communication, adaptabilitĂ©...), vos <strong>hard skills</strong> (compĂ©tences techniques, outils, certifications), vos <strong>expĂ©riences professionnelles</strong> avec leurs rĂ©alisations quantifiables, et vos <strong>projets marquants</strong>.</p>
  685.                                 </div>
  686.                             </div>
  687.                             <div>
  688.                                 <div class="p-3 panel vstack gap-3 rounded border">
  689.                                     <p class="fs-6 dark:text-white">"L'outil basĂ© sur l’IA m’aide Ă  crĂ©er un profil solide en intĂ©grant toutes les compĂ©tences clĂ©s de mon CV. Cela permet aux entreprises de me trouver plus facilement que sur n’importe quelle autre plateforme et donc d’avoir plus d’opportunitĂ©s."</p>
  690.                                     <div class="panel hstack gap-1"><div class="panel vstack items-start gap-0"><h6 class="h6 m-0">Alicia GEVERS</h6><span class="fs-7 opacity-70">Digital Marketer</span></div></div>
  691.                                 </div>
  692.                             </div>
  693.                         </div>
  694.                     </div>
  695.                 </div>
  696.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  697.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  698.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_register.png" class="rounded-2" alt="Une recruteuse recupère une pile de CV qualifiĂ©" loading="lazy"></div>
  699.                     </div>
  700.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  701.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  702.                             <div><div class="panel vstack gap-2">
  703.                                     <span class="fs-6 fw-bold m-0 text-primary">03.</span>
  704.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Recherche qualifiĂ©</h2>
  705.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Plus besoin de chercher activement : les <strong>recruteurs</strong> vous trouvent grâce Ă  <strong>vos critères prĂ©dĂ©finis</strong>. Votre profil reste visible 24h/24 auprès des entreprises & recruteurs qui correspondent Ă  vos attentes.</p>
  706.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Vous Ă©conomisez du temps tout en multipliant <strong>vos opportunitĂ©s de carrière</strong>. La recherche d'emploi devient enfin passive et efficace.</p>
  707.                                 </div></div>
  708.                             <div><div class="p-3 panel vstack gap-3 rounded border">
  709.                                     <p class="fs-6 dark:text-white">"Cette plateforme Ă©limine le superflu. Chaque message que je reçois est une vĂ©ritable opportunitĂ© qui me correspond. C’est vraiment agrĂ©able d’avoir enfin un recrutement qui respecte mon temps."</p>
  710.                                     <div class="panel hstack gap-1"><div class="panel vstack items-start gap-0"><h6 class="h6 m-0">Bryan OSHEN</h6><span class="fs-7 opacity-70">Product Owner</span></div></div>
  711.                                 </div></div>
  712.                         </div>
  713.                     </div>
  714.                 </div>
  715.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  716.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  717.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_reunion.png" alt="" class="rounded-2"></div>
  718.                     </div>
  719.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  720.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  721.                             <div>
  722.                                 <div class="panel vstack gap-2">
  723.                                     <span class="fs-6 fw-bold m-0 text-primary">04.</span>
  724.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Contact direct qualifiĂ©</h2>
  725.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Les recruteurs vous contactent <strong>directement</strong> uniquement s'ils ont <strong>une opportunitĂ© concrète</strong> qui correspond Ă  vos critères. Chaque <strong>contact</strong> reçu est <strong>qualifiĂ© et pertinent</strong>.</p>
  726.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Vous Ă©vitez les sollicitations inadĂ©quates et vous concentrez sur les vraies opportunitĂ©s. Le processus de recrutement devient plus transparent et respectueux de votre temps.</p>
  727.                                 </div>
  728.                             </div>
  729.                             <div>
  730.                                 <div class="p-3 panel vstack gap-3 rounded border">
  731.                                     <p class="fs-6 dark:text-white">"Depuis que j'utilise Whileresume, je ne reçois que des propositions qui correspondent vraiment Ă  mon profil. En deux semaines, j'ai dĂ©crochĂ© trois entretiens pour des postes qui me passionnent. C'est un vrai gain de temps et d'Ă©nergie."</p>
  732.                                     <div class="panel hstack gap-1">
  733.                                         <div class="panel vstack items-start gap-0">
  734.                                             <h6 class="h6 m-0">Sophie MARCHAND</h6>
  735.                                             <span class="fs-7 opacity-70">DĂ©veloppeuse Full-Stack Senior</span>
  736.                                         </div>
  737.                                     </div>
  738.                                 </div>
  739.                             </div>
  740.                         </div>
  741.                     </div>
  742.                 </div>
  743.             </div>
  744.         </div>
  745.     </div>
  747.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  748.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  749.             <div class="container max-w-xl">
  750.                 <div class="section-inner panel p-4 md:p-6 lg:p-8 rounded-1-5 lg:rounded-2 bg-secondary dark:bg-gray-800 dark:text-white" data-anime="onview: -200; translateY: [24, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500;" style="transform: translateY(0px); opacity: 1;">
  751.                     <div class="vstack items-center gap-2 mx-auto text-center" data-anime="onview: -200; targets: &gt;*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 200});">
  752.                         <h2 class="h3 m-0">Whileresume met en relation des talents avec des entreprises en forte croissance</h2>
  753.                         <div class="row" style="margin-top:15px;">
  754.                             <div class="col-md-6">
  755.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  756.                                     <h3 class="h3 m-0" style="color:purple;">Recruteur</h3>
  757.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">On connecte les meilleurs talents du marchĂ© aux entreprises en croissance qui recherchent des collaborateurs d'exception.</p>
  758.                                     <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je recrute <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  759.                                 </div>
  760.                             </div>
  761.                             <div class="col-md-6">
  762.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  763.                                     <h3 class="h3 m-0" style="color:purple;">Candidat</h3>
  764.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">On vous accompagne dans la recherche de votre poste idĂ©al au sein des entreprises les plus prometteuses du marchĂ©.</p>
  765.                                     <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je cherche un job <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  766.                                 </div>
  767.                             </div>
  768.                         </div>
  769.                     </div>
  770.                 </div>
  771.             </div>
  772.         </div>
  773.     </div>
  775.     <div id="faq" class="faq section panel" style="margin-bottom:100px;">
  776.         <div class="section panel">
  777.             <div class="container">
  778.                 <div class="section-inner panel">
  779.                     <div class="row child-cols-12 col-match gy-2 lg:gy-6">
  780.                         <div><div class="vstack items-center text-center gap-2"><h2 class="h4 lg:h3 m-0">Comment Ă§a marche ?</h2></div></div>
  781.                         <div>
  782.                             <div class="panel">
  783.                                 <ul class="uc-accordion gap-1 max-w-850px mx-auto" data-uc-accordion="targets: > li; multiple: false;">
  784.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15"><a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Comment les recruteurs me trouvent-ils ?</a><div class="uc-accordion-content lg:fs-5 opacity-70"><p>Les recruteurs utilisent nos filtres avancĂ©s (poste, secteur, ville, prĂ©fĂ©rences) pour identifier les candidats qui correspondent exactement Ă  leurs besoins. Votre profil apparaĂ®t uniquement dans les recherches pertinentes selon vos critères prĂ©dĂ©finis.</p></div></li>
  785.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15"><a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Puis-je modifier mes critères après inscription ?</a><div class="uc-accordion-content lg:fs-5 opacity-70"><p>Oui, vous pouvez modifier Ă  tout moment vos prĂ©fĂ©rences de poste, secteur, ville et type de contrat. Ces changements sont immĂ©diatement pris en compte dans les recherches des recruteurs.</p></div></li>
  786.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15"><a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Comment fonctionne l'IA pour crĂ©er mon CV ?</a><div class="uc-accordion-content lg:fs-5 opacity-70"><p>L'IA analyse vos informations et crĂ©Ă© un CV professionnel adaptĂ© Ă  votre secteur. Vous pouvez choisir parmi diffĂ©rents formats (europĂ©en, corporate, thĂ©matisĂ©) et l'IA optimise automatiquement la prĂ©sentation de vos compĂ©tences pour maximiser votre impact.</p></div></li>
  787.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15"><a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Mes donnĂ©es personnelles sont-elles protĂ©gĂ©es ?</a><div class="uc-accordion-content lg:fs-5 opacity-70"><p>Toutes vos donnĂ©es sont chiffrĂ©es et stockĂ©es de manière sĂ©curisĂ©e. Vous contrĂ´lez entièrement votre profil et pouvez choisir d'utiliser un CV anonyme si vous le souhaitez. Aucune information n'est partagĂ©e sans votre consentement.</p></div></li>
  788.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15"><a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Que se passe-t-il quand un recruteur me contacte ?</a><div class="uc-accordion-content lg:fs-5 opacity-70"><p>Vous recevez une notification avec les dĂ©tails de l'opportunitĂ©. Le recruteur vous contacte directement parce que votre profil correspond Ă  ses critères de recherche. Vous pouvez alors Ă©changer et dĂ©cider si l'opportunitĂ© vous intĂ©resse.</p></div></li>
  789.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15"><a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">La plateforme est-elle vraiment gratuite ?</a><div class="uc-accordion-content lg:fs-5 opacity-70"><p>Oui, l'inscription et l'utilisation de la plateforme sont 100% gratuites pour les candidats. Vous pouvez crĂ©er votre profil, tĂ©lĂ©charger votre CV, utiliser l'IA et recevoir des contacts de recruteurs sans aucun frais.</p></div></li>
  790.                                 </ul>
  791.                             </div>
  792.                         </div>
  793.                     </div>
  794.                 </div>
  795.             </div>
  796.         </div>
  797.     </div>
  799.     <div id="articles" class="faq section panel" style="margin-bottom:100px;">
  800.         <div class="section-outer panel">
  801.             <div class="container">
  802.                 <div style="margin-bottom:50px; margin-top:50px;"><div class="vstack items-center text-center gap-2"><h2 class="h4 lg:h3 m-0">Nos articles pour vous aider Ă  candidater</h2></div></div>
  803.                 <div class="row child-cols-12 sm:child-cols-4 col-match gy-4 gx-2 xl:gx-4">
  804.                     {% for article in articles %}
  805.                         {% set urlArticle = '/fr' ~ path('blog_article',{'slug': article.slug})  %}
  806.                         {% if article.pageslug3 is not empty %}
  807.                             {% set urlArticle = '/fr/' ~ article.pageslug ~ '/' ~  article.pageslug2 ~ '/' ~ article.pageslug3  %}
  808.                         {% elseif article.pageslug2 is not empty %}
  809.                             {% set urlArticle = '/fr/' ~ article.pageslug ~ '/' ~  article.pageslug2  %}
  810.                         {% elseif article.pageslug is not empty %}
  811.                             {% set urlArticle = '/fr/' ~ article.pageslug  %}
  812.                         {% endif %}
  813.                         <div class="col-12">
  814.                             <article class="post type-post panel rounded-3 p-2 md:p-4 bg-secondary dark:bg-gray-800">
  815.                                 <div class="panel row child-cols-12 sm:child-cols items-center g-3 md:g-4">
  816.                                     <div class="sm:col-4 md:col-6 lg:col-4">
  817.                                         <div class="panel">
  818.                                             {% if article.image.name is not null %}
  819.                                                 <figure class="featured-image m-0 rounded ratio ratio-1x1 rounded-2 uc-transition-toggle overflow-hidden"><img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ vich_uploader_asset(article, 'imageFile') }}" alt="{{ article.title }}" title="{{ article.title }}"><a class="position-cover" href="#"></a></figure>
  820.                                             {% else %}
  821.                                                 <figure class="featured-image m-0 rounded ratio ratio-1x1 rounded-2 uc-transition-toggle overflow-hidden"><img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="/uploads/no_article.jpg" alt="{{ article.title }}" title="{{ article.title }}"><a class="position-cover" href="#"></a></figure>
  822.                                             {% endif %}
  823.                                         </div>
  824.                                     </div>
  825.                                     <div>
  826.                                         <div class="vstack items-start gap-2 md:gap-3">
  827.                                             <ul class="post-meta nav-x ft-tertiary justify-start gap-1 fs-7"><li><div class="post-date hstack gap-narrow"><span>{{ article.publishedAt|date("d, M, Y") }}</span></div></li></ul>
  828.                                             <h3 class="h4 sm:h5 md:h4 lg:h3 m-0"><a class="text-none" href="{{ urlArticle }}">{{ article.title }}</a></h3>
  829.                                             <p class="fs-6 md:fs-5 d-none md:d-block">{{ article.subtitle }}</p>
  830.                                             <a class="btn btn-text text-primary border-bottom d-inline-flex fs-7 md:fs-6 my-1 md:my-2 d-none md:d-block" href="{{ urlArticle }}">Je lis l'article</a>
  831.                                         </div>
  832.                                     </div>
  833.                                 </div>
  834.                             </article>
  835.                         </div>
  836.                     {% endfor  %}
  837.                 </div>
  838.             </div>
  839.         </div>
  840.     </div>
  842.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  843.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  844.             <div class="container max-w-xl">
  845.                 <div class="section-inner panel p-4 md:p-6 lg:p-8 rounded-1-5 lg:rounded-2 bg-secondary dark:bg-gray-800 dark:text-white" data-anime="onview: -200; translateY: [24, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500;" style="transform: translateY(0px); opacity: 1;">
  846.                     <div class="vstack items-center gap-2 mx-auto text-center" data-anime="onview: -200; targets: &gt;*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 200});">
  847.                         <h2 class="h3 m-0">Whileresume met en relation des talents avec des entreprises en forte croissance</h2>
  848.                         <div class="row" style="margin-top:15px;">
  849.                             <div class="col-md-6">
  850.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  851.                                     <h3 class="h3 m-0" style="color:purple;">Recruteur</h3>
  852.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">On connecte les meilleurs talents du marchĂ© aux entreprises en croissance qui recherchent des collaborateurs d'exception.</p>
  853.                                     <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je recrute <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  854.                                 </div>
  855.                             </div>
  856.                             <div class="col-md-6">
  857.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  858.                                     <h3 class="h3 m-0" style="color:purple;">Candidat</h3>
  859.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">On vous accompagne dans la recherche de votre poste idĂ©al au sein des entreprises les plus prometteuses du marchĂ©.</p>
  860.                                     <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je cherche un job <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  861.                                 </div>
  862.                             </div>
  863.                         </div>
  864.                     </div>
  865.                 </div>
  866.             </div>
  867.         </div>
  868.     </div>
  870. {% endblock body %}