templates/application/whileresume/website/candidates/homepage_en.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 %}
  24. {% block css %}
  25.     {# ====== STYLES ====== #}
  26.     <style>
  27.         .wr-search-section{position:relative;z-index:2;width:100%;max-width:720px;margin:0 auto}
  28.         .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}
  29.         .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)}
  30.         .wr-search-icon{padding:12px 14px;color:#9CA3AF;display:flex;align-items:center;flex-shrink:0}
  31.         .wr-search-input-wrapper{flex:1;position:relative;height:48px;display:flex;align-items:center;overflow:hidden}
  32.         .wr-search-typed-text{font-size:16px;color:#1E1B2E;white-space:nowrap}
  33.         .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}
  34.         @keyframes wrBlink{0%,100%{opacity:1}50%{opacity:0}}
  35.         .wr-search-placeholder{color:#9CA3AF;font-size:16px}
  36.         .wr-search-real-input{width:100%;border:none;outline:none;font-size:16px;color:#1E1B2E;background:transparent;font-family:inherit}
  37.         .wr-search-real-input::placeholder{color:#9CA3AF}
  38.         .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}
  39.         .wr-search-btn:hover{filter:brightness(1.1);transform:scale(1.02)}
  40.         @media(max-width:640px){.wr-search-btn span{display:none}.wr-search-btn{padding:12px 14px}}
  41.         .wr-search-tags{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center}
  42.         .wr-search-tags>span.wr-label{font-size:13px;color:#9CA3AF}
  43.         .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}
  44.         .wr-tag:hover{background:#F5F3FF;color:var(--color-primary,#6C3AED);border-color:rgba(108,58,237,.2)}
  45.         .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}
  46.         .wr-search-results.visible{max-height:2000px;padding:8px;margin-top:12px;opacity:1}
  47.         .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}
  48.         .wr-result-item.show{opacity:1;transform:translateY(0)}
  49.         .wr-result-item:hover{background:#F5F3FF}
  50.         .wr-result-item+.wr-result-item{border-top:1px solid rgba(0,0,0,.04)}
  51.         .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}
  52.         .wr-result-logo img{width:100%;height:100%;object-fit:cover;border-radius:10px}
  53.         .wr-result-info{flex:1;text-align:left;min-width:0}
  54.         .wr-result-title{font-size:14px;font-weight:600;color:#1E1B2E;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  55.         .wr-result-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#9CA3AF;flex-wrap:wrap}
  56.         .wr-result-company{color:#4B5563;font-weight:500}
  57.         .wr-result-badge{display:inline-flex;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
  58.         .wr-badge-new{background:#DCFCE7;color:#16A34A}
  59.         .wr-badge-hot{background:#FEF3C7;color:#D97706}
  60.         .wr-badge-expire{background:#FEE2E2;color:#DC2626}
  61.         .wr-result-salary{font-size:13px;font-weight:600;color:var(--color-primary,#6C3AED);white-space:nowrap}
  62.         .wr-result-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
  63.         .wr-like-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;transition:transform .2s,background .2s;display:flex;align-items:center}
  64.         .wr-like-btn:hover{transform:scale(1.15);background:rgba(239,68,68,.06)}
  65.         .wr-like-btn svg{width:20px;height:20px;stroke:#D1D5DB;fill:none;transition:all .2s}
  66.         .wr-like-btn.liked svg{stroke:#EF4444;fill:#EF4444}
  67.         .wr-results-cta-overlay{position:relative;margin-top:4px;border-radius:12px;overflow:hidden}
  68.         .wr-results-blurred{padding:10px 14px;display:flex;flex-direction:column;gap:10px;filter:blur(5px);opacity:.5;pointer-events:none;user-select:none}
  69.         .wr-blurred-row{display:flex;align-items:center;gap:12px}
  70.         .wr-blurred-circle{width:44px;height:44px;border-radius:10px;background:#E5E7EB;flex-shrink:0}
  71.         .wr-blurred-lines{flex:1;display:flex;flex-direction:column;gap:6px}
  72.         .wr-blurred-line{height:10px;border-radius:5px;background:#E5E7EB}
  73.         .wr-blurred-line:first-child{width:60%}.wr-blurred-line:last-child{width:40%}
  74.         .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}
  75.         .wr-cta-overlay-text{font-size:14px;font-weight:600;color:#1E1B2E}
  76.         .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}
  77.         .wr-cta-overlay-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
  78.         .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}
  79.         .wr-results-count strong{color:var(--color-primary,#6C3AED)}
  80.         .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)}
  81.         .wr-hero-badge .wr-dot{width:8px;height:8px;background:#22C55E;border-radius:50%;animation:wrPulseDot 2s ease-in-out infinite}
  82.         @keyframes wrPulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
  83.         .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}
  85.         {# === Styles mode connecté === #}
  86.         .wr-loading{text-align:center;padding:30px 20px}
  87.         .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}
  88.         @keyframes wrSpin{to{transform:rotate(360deg)}}
  89.         .wr-empty-state,.wr-coming-soon{text-align:center;padding:40px 20px}
  90.         .wr-empty-icon,.wr-coming-icon{font-size:40px;margin-bottom:12px}
  91.         .wr-empty-title,.wr-coming-title{font-size:16px;font-weight:600;color:#1E1B2E;margin:0 0 6px}
  92.         .wr-empty-text,.wr-coming-text{font-size:14px;color:#9CA3AF;margin:0}
  93.         .wr-load-more{display:flex;justify-content:center;padding:12px 8px 4px}
  94.         .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}
  95.         .wr-load-more-btn:hover{background:var(--color-primary,#6C3AED);color:#fff}
  96.         .wr-load-more-btn:disabled{opacity:.5;cursor:not-allowed}
  98.         {# === Styles offres populaires === #}
  99.         .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}
  100.         .wr-popular-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
  101.         .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}
  102.         .wr-popular-title{font-size:14px;font-weight:600;color:#1E1B2E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  103.         .wr-popular-meta{font-size:12px;color:#9CA3AF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  104.         .wr-popular-badge{display:inline-flex;padding:2px 10px;border-radius:6px;font-size:11px;font-weight:600}
  105.         .wr-popular-date{font-size:11px;color:#6B7280}
  106.     </style>
  107. {% endblock css %}
  109. {% block body %}
  110.     <div id="hero_header" class="hero-header section panel overflow-hidden">
  111.         <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>
  112.         <div class="section-outer panel py-8 lg:py-9 xl:py-10">
  113.             <div class="container">
  114.                 <div class="section-inner panel">
  115.                     <div class="d-none xl:d-block">
  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: 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="Anonymous candidate"></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: 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="Anonymous candidate"></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: 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="Anonymous candidate"></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: 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="Anonymous candidate"></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: 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="Anonymous candidate"></div>
  121.                         <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="Anonymous candidate"></div>
  122.                     </div>
  123.                     <div class="row child-cols-12 justify-center items-center g-8">
  124.                         <div class="lg:col-12">
  125.                             <div class="panel vstack gap-4 lg:gap-6">
  126.                                 <div class="panel vstack justify-center items-center gap-2 px-2 pt-4 text-center">
  127.                                     <div class="wr-hero-badge">
  128.                                         🎉 +20,000 job listings
  129.                                     </div>
  131.                                     <h1 class="h3 md:h2 lg:display-4 m-0">The next-gen <span class="text-primary dark:text-tertiary">career board</span> — your next job is already looking for you</h1>
  132.                                     <p class="fs-6 xl:fs-4 xl:px-10 dark:text-white text-opacity-70">
  133.                                         Create your profile on <span class="text-primary dark:text-tertiary">Whileresume</span> and let <span class="text-primary dark:text-tertiary">opportunities</span> come to you
  134.                                     </p>
  135.                                 </div>
  137.                                 {# ====== SEARCH BAR ====== #}
  138.                                 <div class="wr-search-section" id="wrSearchSection">
  139.                                     <div class="wr-search-bar{#% if app.user %#} active{#% endif %#}" id="wrSearchBar">
  140.                                         <div class="wr-search-icon">
  141.                                             <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>
  142.                                         </div>
  143.                                         <div class="wr-search-input-wrapper">
  144.                                             {#% if app.user %#}
  145.                                                 <input type="text" id="wrSearchInput" class="wr-search-real-input" placeholder="Search a job title, company, city..." autocomplete="off">
  146.                                             {#% else %}
  147.                                                 <span class="wr-search-typed-text" id="wrTypedText"></span><span class="wr-search-cursor" id="wrCursor"></span>
  148.                                                 <span class="wr-search-placeholder" id="wrPlaceholder">Fullstack Developer, UX Designer, Teacher...</span>
  149.                                             {% endif %#}
  150.                                         </div>
  151.                                         <button class="wr-search-btn" id="wrSearchBtn">
  152.                                             <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>
  153.                                             <span>Search</span>
  154.                                         </button>
  155.                                     </div>
  156.                                     <div class="wr-search-tags">
  157.                                         <span class="wr-label">Popular:</span>
  158.                                         {% for pk in popularKeywords %}
  159.                                             <span class="wr-tag" data-search="{{ pk.keyword }}">{{ pk.icon }} {{ pk.label }}</span>
  160.                                         {% endfor %}
  161.                                     </div>
  162.                                 </div>
  164.                                 {# ====== CTA BUTTONS ====== #}
  165.                                 <div class="panel vstack justify-center items-center text-center">
  166.                                     <div class="vstack md:hstack justify-center">
  167.                                         <a href="{{ ios_us }}" 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.                                             Download for 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_us }}" 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.                                             Download for 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>
  178.                                 {# ====== RESULTS ====== #}
  179.                                 {#% if app.user %#}
  180.                                     {# ========== LOGGED IN: real AJAX results ========== #}
  181.                                     <div class="wr-search-results visible" id="wrSearchResults" style="max-height:none;opacity:1;padding:8px;margin-top:12px;">
  183.                                         <div id="wrJobsList"></div>
  185.                                         <div id="wrLoading" class="wr-loading">
  186.                                             <div class="wr-spinner"></div>
  187.                                         </div>
  189.                                         <div id="wrEmptyState" class="wr-empty-state" style="display:none;">
  190.                                             <div class="wr-empty-icon">🔍</div>
  191.                                             <p class="wr-empty-title">No job matches your search</p>
  192.                                             <p class="wr-empty-text">Try different keywords or check the popular searches above</p>
  193.                                         </div>
  195.                                         <div id="wrComingSoon" class="wr-coming-soon" style="display:none;">
  196.                                             <div class="wr-coming-icon">🚀</div>
  197.                                             <p class="wr-coming-title">New jobs coming soon!</p>
  198.                                             <p class="wr-coming-text">We add new opportunities every day.<br>Come back soon or enable notifications to stay informed.</p>
  199.                                         </div>
  201.                                         <div id="wrLoadMore" class="wr-load-more" style="display:none;">
  202.                                             <button class="wr-load-more-btn" id="wrLoadMoreBtn">See more jobs</button>
  203.                                         </div>
  205.                                         <div class="wr-results-count" id="wrResultsCount" style="display:none;">
  206.                                             <strong id="wrTotalCount">0</strong> jobs found
  207.                                         </div>
  208.                                     </div>
  209.                                 {#% else %}
  211.                                     <div class="wr-search-results" id="wrSearchResults">
  212.                                         <div id="wrResultsList"></div>
  213.                                         <div class="wr-results-cta-overlay">
  214.                                             <div class="wr-results-blurred">
  215.                                                 <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>
  216.                                                 <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>
  217.                                             </div>
  218.                                             <div class="wr-cta-overlay">
  219.                                                 <span class="wr-cta-overlay-text">🔒 Sign up to see all jobs</span>
  220.                                                 <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="wr-cta-overlay-btn">Create my profile for free <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>
  221.                                             </div>
  222.                                         </div>
  223.                                         {% if totalJobs is defined and totalJobs > 0 %}
  224.                                             <div class="wr-results-count">
  225.                                                 <strong>+{{ totalJobs|number_format(0, ',', ' ') }} jobs</strong> found
  226.                                             </div>
  227.                                         {% endif %}
  228.                                     </div>
  229.                                 {% endif %#}
  231.                                 <div class="panel vstack justify-center items-center text-center">
  232.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  233.                                         <span class="wr-video-cta">🎥 Share your <strong>&nbsp;video resume&nbsp;</strong> to increase your chances</span>
  234.                                     </div>
  235.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  236.                                         <span class="desc">Did you know? <a href="https://www.welcometothejungle.com/fr/articles/marche-cache-emploi-candidater" target="_blank">40%</a> of job offers remain hidden and are directly given to recruiters</span>
  237.                                     </div>
  238.                                 </div>
  240.                             </div>
  241.                         </div>
  242.                     </div>
  243.                 </div>
  244.             </div>
  245.         </div>
  246.     </div>
  248.     {#% if app.user %#}
  249.         <script>
  250.             (function(){
  251.                 var LIKED_IDS = {{ likedJobIds|json_encode|raw }};
  252.                 var IS_CANDIDATE = {{ (app.user.typeAccount is defined and app.user.typeAccount == 'candidate') ? 'true' : 'false' }};
  253.                 var JOB_BASE_URL = '/job/';
  254.                 var SEARCH_API = '{{ path("api_jobs_search") }}';
  255.                 var LIKE_API = '{{ path("api_jobs_like") }}';
  257.                 var palette = [
  258.                     {bg:'#EDE9FE',color:'#7C3AED'},{bg:'#DBEAFE',color:'#2563EB'},
  259.                     {bg:'#D1FAE5',color:'#059669'},{bg:'#FEF3C7',color:'#D97706'},
  260.                     {bg:'#FCE7F3',color:'#DB2777'},{bg:'#FEE2E2',color:'#DC2626'},
  261.                     {bg:'#E0E7FF',color:'#4338CA'},{bg:'#CCFBF1',color:'#0D9488'}
  262.                 ];
  263.                 function getColor(name){
  264.                     var h=0;for(var i=0;i<name.length;i++) h=name.charCodeAt(i)+((h<<5)-h);
  265.                     return palette[Math.abs(h)%palette.length];
  266.                 }
  268.                 var searchInput = document.getElementById('wrSearchInput');
  269.                 var searchBtn = document.getElementById('wrSearchBtn');
  270.                 var jobsList = document.getElementById('wrJobsList');
  271.                 var loading = document.getElementById('wrLoading');
  272.                 var emptyState = document.getElementById('wrEmptyState');
  273.                 var comingSoon = document.getElementById('wrComingSoon');
  274.                 var loadMoreWrap = document.getElementById('wrLoadMore');
  275.                 var loadMoreBtn = document.getElementById('wrLoadMoreBtn');
  276.                 var resultsCount = document.getElementById('wrResultsCount');
  277.                 var totalCountEl = document.getElementById('wrTotalCount');
  279.                 var currentQuery = '';
  280.                 var currentOffset = 0;
  281.                 var LIMIT = 10;
  282.                 var isLoading = false;
  283.                 var debounceTimer;
  285.                 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>';
  287.                 function renderJob(job){
  288.                     var col = getColor(job.companyName);
  289.                     var logoHtml;
  290.                     if(job.image){
  291.                         logoHtml = '<div class="wr-result-logo"><img src="'+job.image+'" alt="'+job.companyName+'"></div>';
  292.                     } else {
  293.                         logoHtml = '<div class="wr-result-logo" style="background:'+col.bg+';color:'+col.color+';">'+job.logo+'</div>';
  294.                     }
  296.                     var badgeHtml = '';
  297.                     if(job.isNew) badgeHtml = '<span class="wr-result-badge wr-badge-new">New</span>';
  299.                     var salaryHtml = job.salary ? '<span class="wr-result-salary">'+job.salary+'</span>' : '';
  301.                     var likeHtml = '';
  302.                     if(IS_CANDIDATE){
  303.                         var likedClass = LIKED_IDS.indexOf(job.id) !== -1 ? ' liked' : '';
  304.                         likeHtml = '<button class="wr-like-btn'+likedClass+'" data-job-id="'+job.id+'" title="Save">'+heartSvg+'</button>';
  305.                     }
  307.                     var remoteHtml = '';
  308.                     if(job.remoteWork && job.remoteWork !== '' && job.remoteWork !== 'no'){
  309.                         var remoteLabel = job.remoteWork === 'full' ? 'Full remote' : (job.remoteWork === 'hybrid' ? 'Hybrid' : job.remoteWork);
  310.                         remoteHtml = '<span>·</span><span>'+remoteLabel+'</span>';
  311.                     }
  313.                     var div = document.createElement('a');
  314.                     div.className = 'wr-result-item';
  315.                     div.href = JOB_BASE_URL + job.slug;
  316.                     div.innerHTML = logoHtml +
  317.                         '<div class="wr-result-info">' +
  318.                         '<div class="wr-result-title">' + job.jobTitle + '</div>' +
  319.                         '<div class="wr-result-meta">' +
  320.                         '<span class="wr-result-company">' + job.companyName + '</span>' +
  321.                         (job.city ? '<span>·</span><span>' + job.city + '</span>' : '') +
  322.                         '<span>·</span><span>' + job.employmentType + '</span>' +
  323.                         remoteHtml +
  324.                         badgeHtml +
  325.                         '</div>' +
  326.                         '</div>' +
  327.                         '<div class="wr-result-actions">' + salaryHtml + likeHtml + '</div>';
  329.                     return div;
  330.                 }
  332.                 function fetchJobs(query, offset, append){
  333.                     if(isLoading) return;
  334.                     isLoading = true;
  336.                     if(!append){
  337.                         jobsList.innerHTML = '';
  338.                         loadMoreWrap.style.display = 'none';
  339.                         resultsCount.style.display = 'none';
  340.                     }
  342.                     loading.style.display = 'block';
  343.                     emptyState.style.display = 'none';
  344.                     comingSoon.style.display = 'none';
  346.                     var url = SEARCH_API + '?q=' + encodeURIComponent(query) + '&offset=' + offset + '&limit=' + LIMIT;
  348.                     fetch(url, {credentials:'same-origin'})
  349.                         .then(function(r){ return r.json(); })
  350.                         .then(function(data){
  351.                             loading.style.display = 'none';
  352.                             isLoading = false;
  354.                             if(data.total === 0 && query === ''){
  355.                                 comingSoon.style.display = 'block';
  356.                                 return;
  357.                             }
  359.                             if(data.total === 0 && query !== ''){
  360.                                 emptyState.style.display = 'block';
  361.                                 return;
  362.                             }
  364.                             data.jobs.forEach(function(job, i){
  365.                                 var el = renderJob(job);
  366.                                 jobsList.appendChild(el);
  367.                                 setTimeout(function(){ el.classList.add('show'); }, 50 + i * 60);
  368.                             });
  370.                             totalCountEl.textContent = data.total;
  371.                             resultsCount.style.display = 'block';
  373.                             if(data.hasMore){
  374.                                 loadMoreWrap.style.display = 'flex';
  375.                             } else {
  376.                                 loadMoreWrap.style.display = 'none';
  377.                             }
  379.                             currentOffset = offset + data.jobs.length;
  380.                         })
  381.                         .catch(function(err){
  382.                             console.error('Search error:', err);
  383.                             loading.style.display = 'none';
  384.                             isLoading = false;
  385.                         });
  386.                 }
  388.                 function toggleLike(btn){
  389.                     var jobId = parseInt(btn.getAttribute('data-job-id'));
  391.                     fetch(LIKE_API, {
  392.                         method: 'POST',
  393.                         credentials: 'same-origin',
  394.                         headers: {'Content-Type':'application/json'},
  395.                         body: JSON.stringify({jobId: jobId})
  396.                     })
  397.                         .then(function(r){ return r.json(); })
  398.                         .then(function(data){
  399.                             if(data.liked){
  400.                                 btn.classList.add('liked');
  401.                                 if(LIKED_IDS.indexOf(jobId) === -1) LIKED_IDS.push(jobId);
  402.                             } else {
  403.                                 btn.classList.remove('liked');
  404.                                 var idx = LIKED_IDS.indexOf(jobId);
  405.                                 if(idx !== -1) LIKED_IDS.splice(idx, 1);
  406.                             }
  407.                         })
  408.                         .catch(function(err){ console.error('Like error:', err); });
  409.                 }
  411.                 jobsList.addEventListener('click', function(e){
  412.                     var likeBtn = e.target.closest('.wr-like-btn');
  413.                     if(likeBtn){
  414.                         e.preventDefault();
  415.                         e.stopPropagation();
  416.                         toggleLike(likeBtn);
  417.                     }
  418.                 });
  420.                 searchInput.addEventListener('input', function(){
  421.                     clearTimeout(debounceTimer);
  422.                     debounceTimer = setTimeout(function(){
  423.                         currentQuery = searchInput.value.trim();
  424.                         currentOffset = 0;
  425.                         fetchJobs(currentQuery, 0, false);
  426.                     }, 350);
  427.                 });
  429.                 searchBtn.addEventListener('click', function(e){
  430.                     e.preventDefault();
  431.                     clearTimeout(debounceTimer);
  432.                     currentQuery = searchInput.value.trim();
  433.                     currentOffset = 0;
  434.                     fetchJobs(currentQuery, 0, false);
  435.                 });
  437.                 searchInput.addEventListener('keydown', function(e){
  438.                     if(e.key === 'Enter'){
  439.                         e.preventDefault();
  440.                         clearTimeout(debounceTimer);
  441.                         currentQuery = searchInput.value.trim();
  442.                         currentOffset = 0;
  443.                         fetchJobs(currentQuery, 0, false);
  444.                     }
  445.                 });
  447.                 loadMoreBtn.addEventListener('click', function(){
  448.                     fetchJobs(currentQuery, currentOffset, true);
  449.                 });
  451.                 document.querySelectorAll('.wr-tag').forEach(function(tag){
  452.                     tag.addEventListener('click', function(){
  453.                         var s = tag.getAttribute('data-search');
  454.                         searchInput.value = s;
  455.                         currentQuery = s;
  456.                         currentOffset = 0;
  457.                         fetchJobs(s, 0, false);
  458.                     });
  459.                 });
  461.                 fetchJobs('', 0, false);
  463.             })();
  464.         </script>
  465.     {#% else %}
  466.         <script>
  467.             (function(){
  468.                 var palette = [
  469.                     {bg:'#EDE9FE',color:'#7C3AED'},{bg:'#DBEAFE',color:'#2563EB'},
  470.                     {bg:'#D1FAE5',color:'#059669'},{bg:'#FEF3C7',color:'#D97706'},
  471.                     {bg:'#FCE7F3',color:'#DB2777'},{bg:'#FEE2E2',color:'#DC2626'},
  472.                     {bg:'#E0E7FF',color:'#4338CA'},{bg:'#CCFBF1',color:'#0D9488'}
  473.                 ];
  474.                 function getColor(name){
  475.                     var h=0;for(var i=0;i<name.length;i++) h=name.charCodeAt(i)+((h<<5)-h);
  476.                     return palette[Math.abs(h)%palette.length];
  477.                 }
  479.                 var JOB_BASE_URL = '/job/';
  481.                 var searches = {{ popularJobsForVisitor|json_encode|raw }};
  483.                 var typedEl=document.getElementById('wrTypedText'),placeholderEl=document.getElementById('wrPlaceholder'),searchBar=document.getElementById('wrSearchBar'),searchResults=document.getElementById('wrSearchResults'),resultsList=document.getElementById('wrResultsList');
  484.                 var currentSearch=0,charIndex=0,animTimeout;
  485.                 var resultsVisible=false;
  487.                 function buildResults(items){
  488.                     resultsList.innerHTML='';
  489.                     if(!items || items.length === 0){
  490.                         resultsList.innerHTML='<div style="text-align:center;padding:20px;color:#9CA3AF;font-size:14px;">No jobs found for this search</div>';
  491.                         return;
  492.                     }
  493.                     items.forEach(function(d){
  494.                         var col = getColor(d.jobTitle);
  495.                         var initial = d.jobTitle ? d.jobTitle.charAt(0).toUpperCase() : '?';
  497.                         var badgeHtml = '';
  498.                         if(d.diffDays <= 3){
  499.                             badgeHtml = '<span class="wr-result-badge wr-badge-new">🆕 New</span>';
  500.                         } else if(d.daysUntilExpiry <= 5 && d.daysUntilExpiry > 0){
  501.                             badgeHtml = '<span class="wr-result-badge wr-badge-expire">⏳ Expires in '+d.daysUntilExpiry+'d</span>';
  502.                         } else if(d.daysUntilExpiry <= 0){
  503.                             badgeHtml = '<span class="wr-result-badge wr-badge-expire">⏳ Expired</span>';
  504.                         }
  506.                         var dateHtml = '<span class="wr-popular-date" style="font-size:12px;color:#6B7280;">📅 '+d.createdAt+'</span>';
  508.                         var div=document.createElement('a');
  509.                         div.className='wr-result-item';
  510.                         div.href=JOB_BASE_URL + d.slug;
  511.                         div.innerHTML=
  512.                             '<div class="wr-result-logo" style="background:'+col.bg+';color:'+col.color+';">'+initial+'</div>'+
  513.                             '<div class="wr-result-info">'+
  514.                                 '<div class="wr-result-title">'+d.jobTitle+'</div>'+
  515.                                 '<div class="wr-result-meta">'+
  516.                                     '<span>📍 '+d.city+'</span>'+
  517.                                     '<span>·</span><span>'+d.employmentType+'</span>'+
  518.                                     badgeHtml+
  519.                                 '</div>'+
  520.                             '</div>'+
  521.                             '<div class="wr-result-actions">'+dateHtml+'</div>';
  522.                         resultsList.appendChild(div);
  523.                     });
  524.                 }
  526.                 function showResults(){
  527.                     searchResults.classList.add('visible');
  528.                     searchBar.classList.add('active');
  529.                     resultsVisible=true;
  530.                     resultsList.querySelectorAll('.wr-result-item').forEach(function(item,i){
  531.                         setTimeout(function(){item.classList.add('show');},100+i*80);
  532.                     });
  533.                 }
  535.                 function updateResults(items){
  536.                     var old=resultsList.querySelectorAll('.wr-result-item');
  537.                     old.forEach(function(item){item.classList.remove('show');});
  538.                     setTimeout(function(){
  539.                         buildResults(items);
  540.                         resultsList.querySelectorAll('.wr-result-item').forEach(function(item,i){
  541.                             setTimeout(function(){item.classList.add('show');},50+i*80);
  542.                         });
  543.                     },200);
  544.                 }
  546.                 function typeText(text,cb){
  547.                     if(charIndex<text.length){typedEl.textContent+=text[charIndex];charIndex++;animTimeout=setTimeout(function(){typeText(text,cb)},70+Math.random()*50)}else{cb&&cb()}
  548.                 }
  549.                 function deleteText(cb){
  550.                     var t=typedEl.textContent;if(t.length>0){typedEl.textContent=t.slice(0,-1);animTimeout=setTimeout(function(){deleteText(cb)},35)}else{cb&&cb()}
  551.                 }
  553.                 function runAnimation(){
  554.                     if(searches.length === 0) return;
  555.                     var data=searches[currentSearch];placeholderEl.style.display='none';charIndex=0;
  556.                     typeText(data.text,function(){
  557.                         animTimeout=setTimeout(function(){
  558.                             if(resultsVisible){updateResults(data.jobs)}else{buildResults(data.jobs);showResults()}
  559.                             animTimeout=setTimeout(function(){
  560.                                 deleteText(function(){currentSearch=(currentSearch+1)%searches.length;animTimeout=setTimeout(runAnimation,800)});
  561.                             },4000);
  562.                         },500);
  563.                     });
  564.                 }
  566.                 if(searches.length > 0){
  567.                     var firstData=searches[0];
  568.                     placeholderEl.style.display='none';
  569.                     typedEl.textContent=firstData.text;
  570.                     buildResults(firstData.jobs);
  571.                     showResults();
  572.                     currentSearch=1 % searches.length;
  573.                     animTimeout=setTimeout(function(){deleteText(function(){animTimeout=setTimeout(runAnimation,800)})},3000);
  574.                 }
  576.                 document.querySelectorAll('.wr-tag').forEach(function(tag){
  577.                     tag.addEventListener('click',function(){
  578.                         clearTimeout(animTimeout);typedEl.textContent='';placeholderEl.style.display='none';charIndex=0;
  579.                         var s=tag.getAttribute('data-search');
  580.                         var data=searches.find(function(x){return x.searchKeyword===s})||searches.find(function(x){return x.text===s})||searches[0];
  581.                         if(data){
  582.                             typeText(data.text,function(){setTimeout(function(){if(resultsVisible){updateResults(data.jobs)}else{buildResults(data.jobs);showResults()}},400)});
  583.                         }
  584.                     });
  585.                 });
  586.             })();
  587.         </script>
  588.     {% endif %#}
  590.     <div id="how_it_works" class="how-it-works section panel overflow-hidden" style="margin-top:30px;">
  591.         <div class="section-outer panel">
  592.             <div class="container">
  594.                 <div style="text-align:center; margin-bottom:50px;">
  595.                     <h2 class="h4 sm:h3 xl:h2 m-0">How does it work?</h2>
  596.                 </div>
  598.                 <div class="section-inner panel vstack border rounded-3 overflow-hidden" style="background-color:#F4ECE1;">
  599.                     <div class="row child-cols-12 md:child-cols justify-center col-match g-4 sep uc-grid">
  600.                         <div class="min-w-1/4">
  601.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  602.                                 {#<span class="icon-box w-40px md:w-48px h-40px md:h-48px rounded-circle cstack bg-primary dark:bg-tertiary text-tertiary dark:text-primary">1</span>#}
  603.                                 <img class="w-100" src="/uploads/rh/mascotte_register.png" alt="Alice signs up on Whileresume">
  604.                                 <h3 class="h5 lg:h4 m-0">I sign up for free</h3>
  605.                                 <p class="fs-6">Connect with companies actively looking for profiles like yours, across a wide range of industries.</p>
  606.                             </div>
  607.                         </div>
  608.                         <div class="min-w-1/4">
  609.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  610.                                 {# <span class="icon-box w-40px md:w-48px h-40px md:h-48px rounded-circle cstack bg-primary dark:bg-tertiary text-tertiary dark:text-primary">2</span> #}
  611.                                 <img class="w-100" src="/uploads/rh/mascotte_upload2.png" alt="Alice uploads her resume on Whileresume">
  612.                                 <h3 class="h5 lg:h4 m-0">I upload my resume</h3>
  613.                                 <p class="fs-6"> I upload my resume in PDF format and/or my video presentation. I define my skills, level, and expectations.</p>
  614.                             </div>
  615.                         </div>
  616.                         <div class="min-w-100 lg:min-w-1/4">
  617.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  618.                                 {# <span class="icon-box w-40px md:w-48px h-40px md:h-48px rounded-circle cstack bg-primary dark:bg-tertiary text-tertiary dark:text-primary">3</span> #}
  619.                                 <img class="w-100" src="/uploads/rh/mascotte_reunion.png" alt="Alice meets an IT recruiter">
  620.                                 <h3 class="h5 lg:h4 m-0">Companies contact me</h3>
  621.                                 <p class="fs-6">They use our filters to find my profile and contact me directly with matching opportunities, or I can apply directly to open positions.</p>
  622.                             </div>
  623.                         </div>
  624.                     </div>
  625.                 </div>
  626.             </div>
  627.         </div>
  628.     </div>
  630.     <div id="main_features" class="main-features section panel overflow-hidden">
  631.         <div class="section-outer panel py-6 lg:py-8 xl:py-10">
  632.             <div class="container">
  633.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10">
  634.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  635.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_filtrage3.png" title="Criteria-based filtering" alt="Criteria-based filtering" class="rounded-2" style="background-color:#F5EDE3;"></div>
  636.                     </div>
  637.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  638.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  639.                             <div>
  640.                                 <div class="panel vstack gap-2">
  641.                                     <span class="fs-6 fw-bold m-0 text-primary">01.</span>
  642.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Criteria-based filtering</h2>
  643.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80"><strong>Define once</strong> your essential criteria: desired position, industry, preferred city, and work preferences. Our advanced filtering system allows recruiters to identify you precisely based on your expectations.</p>
  644.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">No more irrelevant opportunities: only offers that truly match your profile will reach out to you.</p>
  645.                                 </div>
  646.                             </div>
  647.                             <div>
  648.                                 <div class="p-3 panel vstack gap-3 rounded border">
  649.                                     <p class="fs-6 dark:text-white">"Finally, a recruitment platform that works for me. I set my essential criteria just once and only receive opportunities that actually match my profile. It saves me time and makes the whole process much more efficient."</p>
  650.                                     <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>
  651.                                 </div>
  652.                             </div>
  653.                         </div>
  654.                     </div>
  655.                 </div>
  656.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  657.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  658.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_upload.png" title="Alice uploads her resume" alt="Alice uploads her resume" class="rounded-2" style="background-color:#F5EDE3;"></div>
  659.                     </div>
  660.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  661.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  662.                             <div>
  663.                                 <div class="panel vstack gap-2">
  664.                                     <span class="fs-6 fw-bold m-0 text-primary">02.</span>
  665.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Smart optimization</h2>
  666.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80"><strong>Upload your existing resume</strong> and let Whileresume analyze it automatically. The system extracts and structures all your information to create an <strong>optimized presentation</strong> tailored to your profile.</p>
  667.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Whileresume identifies and highlights your <strong>soft skills</strong> (leadership, communication, adaptability...), your <strong>hard skills</strong> (technical expertise, tools, certifications), your <strong>professional experience</strong> with quantifiable achievements, and your <strong>notable projects</strong>.</p>
  668.                                 </div>
  669.                             </div>
  670.                             <div>
  671.                                 <div class="p-3 panel vstack gap-3 rounded border">
  672.                                     <p class="fs-6 dark:text-white">"The AI-powered tool helps me build a strong profile by integrating all the key skills from my resume. It makes it easier for companies to find me than on any other platform, which means more opportunities."</p>
  673.                                     <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>
  674.                                 </div>
  675.                             </div>
  676.                         </div>
  677.                     </div>
  678.                 </div>
  679.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  680.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  681.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_register.png" class="rounded-2" alt="A recruiter receives a stack of qualified resumes" loading="lazy"></div>
  682.                     </div>
  683.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  684.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  685.                             <div>
  686.                                 <div class="panel vstack gap-2">
  687.                                     <span class="fs-6 fw-bold m-0 text-primary">03.</span>
  688.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Qualified search</h2>
  689.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">No need to actively search anymore: <strong>recruiters</strong> find you through <strong>your predefined criteria</strong>. Your profile stays visible 24/7 to companies & recruiters that match your expectations.</p>
  690.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">You save time while multiplying <strong>your career opportunities</strong>. Job searching finally becomes passive and efficient.</p>
  691.                                 </div>
  692.                             </div>
  693.                             <div>
  694.                                 <div class="p-3 panel vstack gap-3 rounded border">
  695.                                     <p class="fs-6 dark:text-white">"This platform cuts out the noise. Every message I receive is a real opportunity that matches my profile. It's truly refreshing to finally have a recruitment process that respects my time."</p>
  696.                                     <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>
  697.                                 </div>
  698.                             </div>
  699.                         </div>
  700.                     </div>
  701.                 </div>
  702.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  703.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  704.                         <div class="panel w-100"><img src="/uploads/rh/mascotte_reunion.png" alt="" class="rounded-2"></div>
  705.                     </div>
  706.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  707.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  708.                             <div>
  709.                                 <div class="panel vstack gap-2">
  710.                                     <span class="fs-6 fw-bold m-0 text-primary">04.</span>
  711.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Qualified direct contact</h2>
  712.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">Recruiters contact you <strong>directly</strong> only if they have <strong>a concrete opportunity</strong> that matches your criteria. Every <strong>contact</strong> you receive is <strong>qualified and relevant</strong>.</p>
  713.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">You avoid irrelevant solicitations and focus on real opportunities. The recruitment process becomes more transparent and respectful of your time.</p>
  714.                                 </div>
  715.                             </div>
  716.                             <div>
  717.                                 <div class="p-3 panel vstack gap-3 rounded border">
  718.                                     <p class="fs-6 dark:text-white">"Since I started using Whileresume, I only receive offers that truly match my profile. Within two weeks, I landed three interviews for roles I'm genuinely excited about. It's a real time and energy saver."</p>
  719.                                     <div class="panel hstack gap-1">
  720.                                         <div class="panel vstack items-start gap-0">
  721.                                             <h6 class="h6 m-0">Sophie MARCHAND</h6>
  722.                                             <span class="fs-7 opacity-70">Senior Full-Stack Developer</span>
  723.                                         </div>
  724.                                     </div>
  725.                                 </div>
  726.                             </div>
  727.                         </div>
  728.                     </div>
  729.                 </div>
  730.             </div>
  731.         </div>
  732.     </div>
  734.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  735.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  736.             <div class="container max-w-xl">
  737.                 <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;">
  738.                     <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});">
  740.                         <h2 class="h3 m-0">
  741.                             Whileresume connects talent with high-growth companies
  742.                         </h2>
  744.                         <div class="row" style="margin-top:15px;">
  745.                             <div class="col-md-6">
  746.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  747.                                     <h3 class="h3 m-0" style="color:purple;">Recruiter</h3>
  748.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  749.                                         We connect the best talent in the market with growing companies looking for exceptional collaborators.
  750.                                     </p>
  752.                                     <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">I'm hiring <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  753.                                 </div>
  754.                             </div>
  755.                             <div class="col-md-6">
  757.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  758.                                     <h3 class="h3 m-0" style="color:purple;">Candidate</h3>
  759.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  760.                                         We support you in your search for the ideal position within the most promising companies in the market.
  761.                                     </p>
  763.                                     <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">I'm looking for a job <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  764.                                 </div>
  766.                             </div>
  767.                         </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>
  781.                             <div class="vstack items-center text-center gap-2">
  782.                                 <h2 class="h4 lg:h3 m-0">How does it work?</h2>
  783.                             </div>
  784.                         </div>
  785.                         <div>
  786.                             <div class="panel">
  787.                                 <ul class="uc-accordion gap-1 max-w-850px mx-auto" data-uc-accordion="targets: > li; multiple: false;">
  788.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  789.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">How do recruiters find me?</a>
  790.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  791.                                             <p>Recruiters use our advanced filters (position, sector, city, preferences) to identify candidates who exactly match their needs. Your profile appears only in relevant searches according to your predefined criteria.</p>
  792.                                         </div>
  793.                                     </li>
  794.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  795.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Can I modify my criteria after registration?</a>
  796.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  797.                                             <p>Yes, you can modify your position, sector, city and contract type preferences at any time. These changes are immediately reflected in recruiters' searches.</p>
  798.                                         </div>
  799.                                     </li>
  800.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  801.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">How does AI work to create my resume?</a>
  802.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  803.                                             <p>AI analyzes your information and creates a professional resume adapted to your sector. You can choose from different formats (European, corporate, themed) and AI automatically optimizes the presentation of your skills to maximize your impact.</p>
  804.                                         </div>
  805.                                     </li>
  806.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  807.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Is my personal data protected?</a>
  808.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  809.                                             <p>All your data is encrypted and stored securely. You have complete control over your profile and can choose to use an anonymous resume if you wish. No information is shared without your consent.</p>
  810.                                         </div>
  811.                                     </li>
  812.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  813.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">What happens when a recruiter contacts me?</a>
  814.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  815.                                             <p>You receive a notification with the opportunity details. The recruiter contacts you directly because your profile matches their search criteria. You can then communicate and decide if the opportunity interests you.</p>
  816.                                         </div>
  817.                                     </li>
  818.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  819.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Is the platform really free?</a>
  820.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  821.                                             <p>Yes, registration and use of the platform are 100% free for candidates. You can create your profile, upload your resume, use AI and receive contacts from recruiters without any fees.</p>
  822.                                         </div>
  823.                                     </li>
  824.                                 </ul>
  825.                             </div>
  826.                         </div>
  827.                     </div>
  828.                 </div>
  829.             </div>
  830.         </div>
  831.     </div>
  833.     <div id="articles" class="faq section panel" style="margin-bottom:100px;">
  834.         <div class="section-outer panel">
  835.             <div class="container">
  837.                 <div style="margin-bottom:50px; margin-top:50px;">
  838.                     <div class="vstack items-center text-center gap-2">
  839.                         <h2 class="h4 lg:h3 m-0">Our articles to help you apply</h2>
  840.                     </div>
  841.                 </div>
  843.                 <div class="row child-cols-12 sm:child-cols-4 col-match gy-4 gx-2 xl:gx-4">
  844.                     {% for article in articles %}
  845.                         {% set urlArticle = path('blog_article',{'slug': article.slug})  %}
  846.                         {% if article.pageslug3 is not empty %}
  847.                             {% set urlArticle =  article.pageslug ~ '/' ~  article.pageslug2 ~ '/' ~ article.pageslug3  %}
  848.                         {% elseif article.pageslug2 is not empty %}
  849.                             {% set urlArticle = article.pageslug ~ '/' ~  article.pageslug2  %}
  850.                         {% elseif article.pageslug is not empty %}
  851.                             {% set urlArticle = article.pageslug  %}
  852.                         {% endif %}
  853.                         <div class="col-12">
  854.                             <article class="post type-post panel rounded-3 p-2 md:p-4 bg-secondary dark:bg-gray-800">
  855.                                 <div class="panel row child-cols-12 sm:child-cols items-center g-3 md:g-4">
  856.                                     <div class="sm:col-4 md:col-6 lg:col-4">
  857.                                         <div class="panel">
  858.                                             {% if article.image.name is not null %}
  859.                                                 <figure class="featured-image m-0 rounded ratio ratio-1x1 rounded-2 uc-transition-toggle overflow-hidden">
  860.                                                     <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ vich_uploader_asset(article, 'imageFile') }}" alt="{{ article.title }}" title="{{ article.title }}">
  861.                                                     <a class="position-cover" data-caption="Maximizing your reach with marketing strategies" href="#"></a>
  862.                                                 </figure>
  863.                                             {% else %}
  864.                                                 <figure class="featured-image m-0 rounded ratio ratio-1x1 rounded-2 uc-transition-toggle overflow-hidden">
  865.                                                     <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="/uploads/no_article.jpg" alt="{{ article.title }}" title="{{ article.title }}">
  866.                                                     <a class="position-cover" data-caption="Maximizing your reach with marketing strategies" href="#"></a>
  867.                                                 </figure>
  868.                                             {% endif %}
  869.                                         </div>
  870.                                     </div>
  871.                                     <div>
  872.                                         <div class="vstack items-start gap-2 md:gap-3">
  873.                                             <ul class="post-meta nav-x ft-tertiary justify-start gap-1 fs-7">
  874.                                                 <li>
  875.                                                     <div class="post-date hstack gap-narrow">
  876.                                                         <span>{{ article.publishedAt|date("d, M, Y") }}</span>
  877.                                                     </div>
  878.                                                 </li>
  879.                                             </ul>
  880.                                             <h3 class="h4 sm:h5 md:h4 lg:h3 m-0 m-0">
  881.                                                 <a class="text-none" href="{{ urlArticle }}">{{ article.title }}</a>
  882.                                             </h3>
  883.                                             <p class="fs-6 md:fs-5 d-none md:d-block">{{ article.subtitle }}</p>
  884.                                             <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 }}">
  885.                                                 Read the article
  886.                                             </a>
  887.                                         </div>
  888.                                     </div>
  889.                                 </div>
  890.                             </article>
  891.                         </div>
  893.                     {% endfor  %}
  894.                 </div>
  896.             </div>
  897.         </div>
  898.     </div>
  901.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  902.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  903.             <div class="container max-w-xl">
  904.                 <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;">
  905.                     <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});">
  907.                         <h2 class="h3 m-0">
  908.                             Whileresume connects talent with high-growth companies
  909.                         </h2>
  911.                         <div class="row" style="margin-top:15px;">
  912.                             <div class="col-md-6">
  913.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  914.                                     <h3 class="h3 m-0" style="color:purple;">Recruiter</h3>
  915.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  916.                                         We connect the best talent in the market with growing companies looking for exceptional collaborators.
  917.                                     </p>
  919.                                     <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">I'm hiring <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  920.                                 </div>
  921.                             </div>
  922.                             <div class="col-md-6">
  924.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  925.                                     <h3 class="h3 m-0" style="color:purple;">Candidate</h3>
  926.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  927.                                         We support you in your search for the ideal position within the most promising companies in the market.
  928.                                     </p>
  930.                                     <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">I'm looking for a job <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  931.                                 </div>
  933.                             </div>
  934.                         </div>
  936.                     </div>
  937.                 </div>
  938.             </div>
  939.         </div>
  940.     </div>
  943. {% endblock body %}