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.     {% endembed %}
  18. {% endblock body_header %}
  20. {% block body %}
  22.     <div id="hero_header" class="hero-header section panel overflow-hidden">
  23.         <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>
  24.         <div class="section-outer panel py-8 lg:py-9 xl:py-10">
  25.             <div class="container">
  26.                 <div class="section-inner panel">
  27.                     <div class="d-none xl:d-block">
  28.                         <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>
  29.                         <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>
  30.                         <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>
  31.                         <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>
  32.                         <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>
  33.                         <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>
  34.                     </div>
  35.                     <div class="row child-cols-12 justify-center items-center g-8">
  36.                         <div class="lg:col-12">
  37.                             <div class="panel vstack gap-4 lg:gap-8">
  38.                                 <div class="panel vstack justify-center items-center gap-2 px-2 pt-4 text-center">
  40.                                     <h1 class="h2 md:h1 lg:display-5 m-0">Get headhunted for tech <span class="text-primary dark:text-tertiary">jobs</span></h1>
  42.                                     <p class="fs-6 xl:fs-4 xl:px-10 dark:text-white text-opacity-70">
  43.                                         Are you a software engineer, data scientist, DevOps or other tech professional? <span class="text-primary dark:text-tertiary">Join</span> the platform that connects you with the <span class="text-primary dark:text-tertiary">best tech companies</span>.
  44.                                         Upload your resume, define your stack, location and preferences. Receive only ultra-qualified tech opportunities. <span class="text-primary dark:text-tertiary">100% free registration</span>.
  45.                                     </p>
  47.                                     <div class="vstack md:hstack justify-center">
  48.                                         <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="btn btn-md btn-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;">Start now for free <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  49.                                     </div>
  51.                                     <div class="vstack md:hstack justify-center">
  52.                                         <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;">
  53.                                             Download for iOS
  54.                                             <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
  55.                                             <svg fill="#000000" width="25px" height="25px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  56.                                                 <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"/>
  57.                                             </svg>
  58.                                         </a>
  59.                                         <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;">
  60.                                             Download for Android
  61.                                             <?xml version="1.0" encoding="iso-8859-1"?>
  62.                                             <svg height="20px" width="20px" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  63.                                                  viewBox="0 0 512 512"  xml:space="preserve">
  64.                                                 <g>
  65.                                                     <g>
  66.                                                         <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.806
  67.                                                             C0.087,470.305,0,468.91,0,467.518V44.499c0-9.488,2.873-18.02,7.574-24.987L225.656,256.052z"/>
  68.                                                         <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"
  69.                                                         />
  70.                                                         <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.163
  71.                                                             L320.811,152.8l70.518,40.745l41.614,24.026C448.178,226.366,455.579,241.861,455.056,257.27z"/>
  72.                                                         <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.209
  73.                                                             L7.591,492.492z"/>
  74.                                                     </g>
  75.                                                     <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.026
  76.                                                         L320.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.72
  77.                                                         c36.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.314
  78.                                                         C323.988,277.849,391.567,264.55,454.067,246.447z"/>
  79.                                                 </g>
  80.                                             </svg>
  81.                                         </a>
  82.                                     </div>
  84.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  85.                                         <span class="desc">Share your <strong>video resume</strong> to increase your chances</span>
  86.                                     </div>
  88.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  89.                                         <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>
  90.                                     </div>
  92.                                 </div>
  93.                                 <div class="hero-scroll-scene panel max-w-850px mx-auto">
  94.                                     <div class="panel border shadow-lg rounded-1-5 p-1 bg-white dark:bg-gray-800 overflow-hidden">
  95.                                         <img class="rounded-default" src="/uploads/home.jpg" alt="Hero image">
  96.                                     </div>
  97.                                     <div class="hero-ten-01 position-absolute w-150px xl:w-250px d-none lg:d-block" style="top: 20%">
  98.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  99.                                     </div>
  100.                                     <div class="hero-ten-02 position-absolute w-200px xl:w-300px d-none lg:d-block"  style="bottom: 20%">
  101.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  102.                                     </div>
  103.                                     <div class="hero-ten-03 position-absolute w-150px d-none lg:d-block" style="top: 10%">
  104.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  105.                                     </div>
  106.                                 </div>
  108.                             </div>
  109.                         </div>
  110.                     </div>
  111.                 </div>
  112.             </div>
  113.         </div>
  114.     </div>
  116.     <div id="how_it_works" class="how-it-works section panel overflow-hidden" style="margin-top:30px;">
  117.         <div class="section-outer panel">
  118.             <div class="container">
  120.                 <div style="text-align:center; margin-bottom:50px;">
  121.                     <h2 class="h4 sm:h3 xl:h2 m-0">How does it work?</h2>
  122.                 </div>
  124.                 <div class="section-inner panel vstack border rounded-3 overflow-hidden" style="background-color:#F4ECE1;">
  125.                     <div class="row child-cols-12 md:child-cols justify-center col-match g-4 sep uc-grid">
  126.                         <div class="min-w-1/4">
  127.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  128.                                 {#<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>#}
  129.                                 <img class="w-100" src="/uploads/rh/mascotte_register.png" alt="Alice signs up on Whileresume">
  130.                                 <h3 class="h5 lg:h4 m-0">I sign up for free</h3>
  131.                                 <p class="fs-6">We connect you with qualified recruiters across startups, scale-ups, unicorns, SMEs, large enterprises, and Fortune 500 companies.</p>
  132.                             </div>
  133.                         </div>
  134.                         <div class="min-w-1/4">
  135.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  136.                                 {# <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> #}
  137.                                 <img class="w-100" src="/uploads/rh/mascotte_upload2.png" alt="Alice uploads her resume on Whileresume">
  138.                                 <h3 class="h5 lg:h4 m-0">I upload my resume</h3>
  139.                                 <p class="fs-6">I add my resume in PDF format and/or my video presentation. I define my stack, my level, my expectations.</p>
  140.                             </div>
  141.                         </div>
  142.                         <div class="min-w-100 lg:min-w-1/4">
  143.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  144.                                 {# <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> #}
  145.                                 <img class="w-100" src="/uploads/rh/mascotte_reunion.png" alt="Alice meets an IT recruiter">
  146.                                 <h3 class="h5 lg:h4 m-0">Companies contact me</h3>
  147.                                 <p class="fs-6">They use our filters to find me and contact me directly for matching opportunities</p>
  148.                             </div>
  149.                         </div>
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.         </div>
  154.     </div>
  156.     <div id="main_features" class="main-features section panel overflow-hidden">
  157.         <div class="section-outer panel py-6 lg:py-8 xl:py-10">
  158.             <div class="container">
  160.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10">
  161.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  162.                         <div class="panel w-100">
  163.                             <img src="/uploads/rh/mascotte_filtrage3.png" title="Two smiling professionals collaborating in front of a wall of colorful post-its in team brainstorming" alt="Two smiling professionals collaborating in front of a wall of colorful post-its in team brainstorming" class="rounded-2" style="background-color:#F5EDE3;">
  164.                         </div>
  165.                     </div>
  166.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  167.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  168.                             <div>
  169.                                 <div class="panel vstack gap-2">
  170.                                     <span class="fs-6 fw-bold m-0 text-primary">01.</span>
  171.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Criteria-based filtering</h2>
  173.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  174.                                         <strong>Define once</strong> your essential criteria: desired position, industry sector, preferred city and work preferences. Our advanced filter system allows recruiters to identify you precisely according to your expectations.
  175.                                     </p>
  176.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  177.                                         No more inadequate opportunities: only offers that truly match your profile will contact you.
  178.                                     </p>
  180.                                 </div>
  181.                             </div>
  182.                             <div>
  183.                                 <div class="p-3 panel vstack gap-3 rounded border">
  184.                                     <p class="fs-6 dark:text-white">" We wanted to revolutionize the recruitment approach by putting the candidate at the center. Rather than enduring a flood of inadequate opportunities, talents define their essential criteria once and for all and only receive offers that truly match them. It's this precision that makes all the difference. "</p>
  185.                                     <div class="panel hstack gap-1">
  186.                                         <img class="w-40px rounded-circle" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">
  187.                                         <div class="panel vstack items-start gap-0">
  188.                                             <h6 class="h6 m-0">Keith SHEMA</h6>
  189.                                             <span class="fs-7 opacity-70">Founder Whileresume & Holyfield and partners</span>
  190.                                         </div>
  191.                                     </div>
  192.                                 </div>
  193.                             </div>
  194.                         </div>
  195.                     </div>
  196.                 </div>
  198.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  199.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  200.                         <div class="panel w-100">
  201.                             <img src="/uploads/rh/mascotte_upload.png" title="Alice uploads her resume" alt="Alice uploads her resume" class="rounded-2" style="background-color:#F5EDE3;">
  202.                         </div>
  203.                     </div>
  204.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  205.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  206.                             <div>
  207.                                 <div class="panel vstack gap-2">
  209.                                     <span class="fs-6 fw-bold m-0 text-primary">02.</span>
  210.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Smart optimization</h2>
  212.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  213.                                         <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.
  214.                                     </p>
  216.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  217.                                         Whileresume identifies and highlights your <strong>soft skills</strong> (leadership, communication, adaptability...), your <strong>hard skills</strong> (technical skills, tools, certifications), your <strong>professional experiences</strong> with their quantifiable achievements, and your <strong>notable projects</strong>.
  218.                                     </p>
  220.                                     {#
  221.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  222.                                         You can modify your resume and <strong>rerun the analysis as many times as needed</strong> to perfect your application and adapt it to each opportunity.
  223.                                     </p>
  224.                                     #}
  226.                                 </div>
  227.                             </div>
  228.                             <div>
  229.                                 <div class="p-3 panel vstack gap-3 rounded border">
  230.                                     <p class="fs-6 dark:text-white">" We developed a tool for AI to improve your resume based on the job offer you want to apply for"</p>
  231.                                     <div class="panel hstack gap-1">
  232.                                         <img class="w-40px rounded-circle" src="/uploads/sylvaindieterle_circle.jpeg" alt="Sylvain DIETERLE">
  233.                                         <div class="panel vstack items-start gap-0">
  234.                                             <h6 class="h6 m-0">Sylvain DIETERLE</h6>
  235.                                             <span class="fs-7 opacity-70">Founder Whileresume & Mirtillo</span>
  236.                                         </div>
  237.                                     </div>
  238.                                 </div>
  239.                             </div>
  240.                         </div>
  241.                     </div>
  242.                 </div>
  244.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  245.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  246.                         <div class="panel w-100">
  247.                             <img src="/uploads/rh/mascotte_register.png" class="rounded-2" alt="A recruiter receives a stack of qualified resumes" title="" loading="lazy">
  248.                         </div>
  249.                     </div>
  250.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  251.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  252.                             <div>
  253.                                 <div class="panel vstack gap-2">
  254.                                     <span class="fs-6 fw-bold m-0 text-primary">03.</span>
  255.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Qualified search</h2>
  257.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  258.                                         No need to actively search: <strong>recruiters</strong> find you thanks to <strong>your predefined criteria</strong>. Your profile remains visible 24/7 to companies & recruiters that match your expectations.
  259.                                     </p>
  260.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  261.                                         You save time while multiplying <strong>your career opportunities</strong>. Job search finally becomes passive and efficient.
  262.                                     </p>
  264.                                 </div>
  265.                             </div>
  266.                             <div>
  267.                                 <div class="p-3 panel vstack gap-3 rounded border">
  268.                                     <p class="fs-6 dark:text-white">" Why waste hours applying when the right opportunities can come directly to you? "</p>
  269.                                     <div class="panel hstack gap-1">
  270.                                         <img class="w-40px rounded-circle" src="/uploads/sylvaindieterle_circle.jpeg" alt="Sylvain DIETERLE">
  271.                                         <div class="panel vstack items-start gap-0">
  272.                                             <h6 class="h6 m-0">Sylvain DIETERLE</h6>
  273.                                             <span class="fs-7 opacity-70">Founder Whileresume & Mirtillo</span>
  274.                                         </div>
  275.                                     </div>
  276.                                 </div>
  277.                             </div>
  278.                         </div>
  279.                     </div>
  280.                 </div>
  282.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  283.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  284.                         <div class="panel w-100">
  285.                             <img src="/uploads/rh/mascotte_reunion.png" alt="" title="" class="rounded-2">
  286.                         </div>
  287.                     </div>
  288.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  289.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  290.                             <div>
  291.                                 <div class="panel vstack gap-2">
  292.                                     <span class="fs-6 fw-bold m-0 text-primary">04.</span>
  293.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Qualified direct contact</h2>
  295.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  296.                                         Recruiters contact you <strong>directly</strong> only if they have <strong>a concrete opportunity</strong> that matches your criteria. Each <strong>contact</strong> received is <strong>qualified and relevant</strong>.
  297.                                     </p>
  298.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  299.                                         You avoid inadequate solicitations and focus on real opportunities. The recruitment process becomes more transparent and respectful of your time.
  300.                                     </p>
  302.                                 </div>
  303.                             </div>
  304.                             <div>
  305.                                 <div class="p-3 panel vstack gap-3 rounded border">
  306.                                     <p class="fs-6 dark:text-white">" We eliminated the noise to keep only the essential: every contact you receive corresponds to a concrete and qualified opportunity. No more inadequate solicitations, welcome to transparent recruitment that respects your time. "</p>
  307.                                     <div class="panel hstack gap-1">
  308.                                         <img class="w-40px rounded-circle" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">
  309.                                         <div class="panel vstack items-start gap-0">
  310.                                             <h6 class="h6 m-0">Keith SHEMA</h6>
  311.                                             <span class="fs-7 opacity-70">Founder Whileresume & Holyfield and partners </span>
  312.                                         </div>
  313.                                     </div>
  314.                                 </div>
  315.                             </div>
  316.                         </div>
  317.                     </div>
  318.                 </div>
  320.             </div>
  321.         </div>
  322.     </div>
  324.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  325.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  326.             <div class="container max-w-xl">
  327.                 <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;">
  328.                     <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});">
  330.                         <h2 class="h3 m-0">
  331.                             Whileresume connects talent with high-growth companies
  332.                         </h2>
  334.                         <div class="row" style="margin-top:15px;">
  335.                             <div class="col-md-6">
  336.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  337.                                     <h3 class="h3 m-0" style="color:purple;">Recruiter</h3>
  338.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  339.                                         We connect the best talent in the market with growing companies looking for exceptional collaborators.
  340.                                     </p>
  342.                                     <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>
  343.                                 </div>
  344.                             </div>
  345.                             <div class="col-md-6">
  347.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  348.                                     <h3 class="h3 m-0" style="color:purple;">Candidate</h3>
  349.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  350.                                         We support you in your search for the ideal position within the most promising companies in the market.
  351.                                     </p>
  353.                                     <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>
  354.                                 </div>
  356.                             </div>
  357.                         </div>
  359.                     </div>
  360.                 </div>
  361.             </div>
  362.         </div>
  363.     </div>
  365.     <div id="faq" class="faq section panel" style="margin-bottom:100px;">
  366.         <div class="section panel">
  367.             <div class="container">
  368.                 <div class="section-inner panel">
  369.                     <div class="row child-cols-12 col-match gy-2 lg:gy-6">
  370.                         <div>
  371.                             <div class="vstack items-center text-center gap-2">
  372.                                 <h2 class="h4 lg:h3 m-0">How does it work?</h2>
  373.                             </div>
  374.                         </div>
  375.                         <div>
  376.                             <div class="panel">
  377.                                 <ul class="uc-accordion gap-1 max-w-850px mx-auto" data-uc-accordion="targets: > li; multiple: false;">
  378.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  379.                                         <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>
  380.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  381.                                             <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>
  382.                                         </div>
  383.                                     </li>
  384.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  385.                                         <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>
  386.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  387.                                             <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>
  388.                                         </div>
  389.                                     </li>
  390.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  391.                                         <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>
  392.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  393.                                             <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>
  394.                                         </div>
  395.                                     </li>
  396.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  397.                                         <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>
  398.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  399.                                             <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>
  400.                                         </div>
  401.                                     </li>
  402.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  403.                                         <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>
  404.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  405.                                             <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>
  406.                                         </div>
  407.                                     </li>
  408.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  409.                                         <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>
  410.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  411.                                             <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>
  412.                                         </div>
  413.                                     </li>
  414.                                 </ul>
  415.                             </div>
  416.                         </div>
  417.                     </div>
  418.                 </div>
  419.             </div>
  420.         </div>
  421.     </div>
  423.     <div id="articles" class="faq section panel" style="margin-bottom:100px;">
  424.         <div class="section-outer panel">
  425.             <div class="container">
  427.                 <div style="margin-bottom:50px; margin-top:50px;">
  428.                     <div class="vstack items-center text-center gap-2">
  429.                         <h2 class="h4 lg:h3 m-0">Our articles to help you apply</h2>
  430.                     </div>
  431.                 </div>
  433.                 <div class="row child-cols-12 sm:child-cols-4 col-match gy-4 gx-2 xl:gx-4">
  434.                     {% for article in articles %}
  435.                         {% set urlArticle = path('blog_article',{'slug': article.slug})  %}
  436.                         {% if article.pageslug3 is not empty %}
  437.                             {% set urlArticle =  article.pageslug ~ '/' ~  article.pageslug2 ~ '/' ~ article.pageslug3  %}
  438.                         {% elseif article.pageslug2 is not empty %}
  439.                             {% set urlArticle = article.pageslug ~ '/' ~  article.pageslug2  %}
  440.                         {% elseif article.pageslug is not empty %}
  441.                             {% set urlArticle = article.pageslug  %}
  442.                         {% endif %}
  443.                         <div class="col-12">
  444.                             <article class="post type-post panel rounded-3 p-2 md:p-4 bg-secondary dark:bg-gray-800">
  445.                                 <div class="panel row child-cols-12 sm:child-cols items-center g-3 md:g-4">
  446.                                     <div class="sm:col-4 md:col-6 lg:col-4">
  447.                                         <div class="panel">
  448.                                             {% if article.image.name is not null %}
  449.                                                 <figure class="featured-image m-0 rounded ratio ratio-1x1 rounded-2 uc-transition-toggle overflow-hidden">
  450.                                                     <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ vich_uploader_asset(article, 'imageFile') }}" alt="{{ article.title }}" title="{{ article.title }}">
  451.                                                     <a class="position-cover" data-caption="Maximizing your reach with marketing strategies" href="#"></a>
  452.                                                 </figure>
  453.                                             {% else %}
  454.                                                 <figure class="featured-image m-0 rounded ratio ratio-1x1 rounded-2 uc-transition-toggle overflow-hidden">
  455.                                                     <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="/uploads/no_article.jpg" alt="{{ article.title }}" title="{{ article.title }}">
  456.                                                     <a class="position-cover" data-caption="Maximizing your reach with marketing strategies" href="#"></a>
  457.                                                 </figure>
  458.                                             {% endif %}
  459.                                         </div>
  460.                                     </div>
  461.                                     <div>
  462.                                         <div class="vstack items-start gap-2 md:gap-3">
  463.                                             <ul class="post-meta nav-x ft-tertiary justify-start gap-1 fs-7">
  464.                                                 <li>
  465.                                                     <div class="post-date hstack gap-narrow">
  466.                                                         <span>{{ article.publishedAt|date("d, M, Y") }}</span>
  467.                                                     </div>
  468.                                                 </li>
  469.                                             </ul>
  470.                                             <h3 class="h4 sm:h5 md:h4 lg:h3 m-0 m-0">
  471.                                                 <a class="text-none" href="{{ urlArticle }}">{{ article.title }}</a>
  472.                                             </h3>
  473.                                             <p class="fs-6 md:fs-5 d-none md:d-block">{{ article.subtitle }}</p>
  474.                                             <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 }}">
  475.                                                 Read the article
  476.                                             </a>
  477.                                         </div>
  478.                                     </div>
  479.                                 </div>
  480.                             </article>
  481.                         </div>
  483.                     {% endfor  %}
  484.                 </div>
  486.             </div>
  487.         </div>
  488.     </div>
  491.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  492.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  493.             <div class="container max-w-xl">
  494.                 <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;">
  495.                     <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});">
  497.                         <h2 class="h3 m-0">
  498.                             Whileresume connects talent with high-growth companies
  499.                         </h2>
  501.                         <div class="row" style="margin-top:15px;">
  502.                             <div class="col-md-6">
  503.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  504.                                     <h3 class="h3 m-0" style="color:purple;">Recruiter</h3>
  505.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  506.                                         We connect the best talent in the market with growing companies looking for exceptional collaborators.
  507.                                     </p>
  509.                                     <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>
  510.                                 </div>
  511.                             </div>
  512.                             <div class="col-md-6">
  514.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  515.                                     <h3 class="h3 m-0" style="color:purple;">Candidate</h3>
  516.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  517.                                         We support you in your search for the ideal position within the most promising companies in the market.
  518.                                     </p>
  520.                                     <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>
  521.                                 </div>
  523.                             </div>
  524.                         </div>
  526.                     </div>
  527.                 </div>
  528.             </div>
  529.         </div>
  530.     </div>
  533. {% endblock body %}