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

Open in your IDE?
  1. {% extends 'vitrine/lexend/layout.html.twig' %}
  3. {% block title %}{{ page.shortTitle }}{% endblock title %}
  4. {% block description %}{{ page.shortDescription }}{% endblock description %}
  5. {% block robots %}{{ page.robots }}{% endblock robots %}
  7. {% block meta_social %}{{ parent() }}{% include "/vitrine/components/socialmedia.html.twig" with { 'page':page,'social_type':'website' } %}{% endblock meta_social %}
  8. {% block meta %}{{ parent() }}{% include "/vitrine/components/author.html.twig" with {'page':page } %}{% endblock meta %}
  10. {% block canonical %}{% include "/vitrine/lexend/components/languages/canonical_classic.html.twig" %}{% endblock canonical %}
  12. {% block body_header %}
  13.     {% embed "/vitrine/lexend/components/header.html.twig" with {'navcolor':'blue','navtype':'default'} %}
  14.         {% block header_content %}
  15.             {% include "/vitrine/lexend/components/languages/classic.html.twig" %}
  16.         {% endblock %}
  17.     {% 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="Candidat anonyme"></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="Candidat anonyme"></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="Candidat anonyme"></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="Candidat anonyme"></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="Candidat anonyme"></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="Candidat anonyme"></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">Soyez chassé pour <span class="text-primary dark:text-tertiary">des jobs</span> en tech !</h1>
  42.                                     <p class="fs-6 xl:fs-4 xl:px-10 dark:text-white text-opacity-70">
  43.                                         Vous êtes ingénieur logiciel, data scientist, DevOps ou autre profil tech ? <span class="text-primary dark:text-tertiary">Rejoignez</span> la plateforme qui vous connecte aux <span class="text-primary dark:text-tertiary">meilleures entreprises</span> tech.
  44.                                         Uploader votre CV, définissez votre stack, votre localisation et vos préférences. Recevez uniquement des opportunités tech ultra-qualifiées. <span class="text-primary dark:text-tertiary">Inscription 100% gratuite</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;">Démarrez gratuitement <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  49.                                     </div>
  51.                                     <div class="vstack md:hstack justify-center">
  53.                                         <a href="{{ ios_fr }}" class="btn btn-md btn-outline-primary dark:border-tertiary dark:text-tertiary dark:hover:bg-tertiary dark:hover:text-primary-700 border-2 px-3 w-auto" style="margin-top:10px;">
  54.                                             Télécharger sur iOS
  55.                                             <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
  56.                                             <svg fill="#000000" width="25px" height="25px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  57.                                                 <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"/>
  58.                                             </svg>
  59.                                         </a>
  61.                                         <a href="{{ android_fr }}" class="btn btn-md btn-outline-primary dark:border-tertiary dark:text-tertiary dark:hover:bg-tertiary dark:hover:text-primary-700 border-2 px-3 w-auto" style="margin-top:10px; margin-left:10px;">
  62.                                             Télécharger sur Android
  63.                                             <?xml version="1.0" encoding="iso-8859-1"?>
  64.                                             <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"
  65.                                                  viewBox="0 0 512 512"  xml:space="preserve">
  66.                                                 <g>
  67.                                                     <g>
  68.                                                         <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
  69.                                                             C0.087,470.305,0,468.91,0,467.518V44.499c0-9.488,2.873-18.02,7.574-24.987L225.656,256.052z"/>
  70.                                                         <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"
  71.                                                         />
  72.                                                         <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
  73.                                                             L320.811,152.8l70.518,40.745l41.614,24.026C448.178,226.366,455.579,241.861,455.056,257.27z"/>
  74.                                                         <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
  75.                                                             L7.591,492.492z"/>
  76.                                                     </g>
  77.                                                     <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
  78.                                                         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
  79.                                                         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
  80.                                                         C323.988,277.849,391.567,264.55,454.067,246.447z"/>
  81.                                                 </g>
  82.                                             </svg>
  83.                                         </a>
  87.                                     </div>
  89.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  90.                                         <span class="desc">Partagez votre <strong>CV vidéo</strong> pour augmenter vos chances</span>
  91.                                     </div>
  93.                                     <div class="vstack sm:hstack items-center justify-center gap-1 fs-6 text-gray-900 dark:text-white">
  94.                                         <span class="desc">Le saviez-vous ? <a href="https://www.welcometothejungle.com/fr/articles/marche-cache-emploi-candidater" target="_blank">40%</a> des offres d'emploi restent cachées et sont directement confiées aux recruteurs</span>
  95.                                     </div>
  97.                                 </div>
  98.                                 <div class="hero-scroll-scene panel max-w-850px mx-auto">
  99.                                     <div class="panel border shadow-lg rounded-1-5 p-1 bg-white dark:bg-gray-800 overflow-hidden">
  100.                                         <img class="rounded-default" src="/uploads/home.jpg" alt="Hero image">
  101.                                     </div>
  102.                                     <div class="hero-ten-01 position-absolute w-150px xl:w-250px d-none lg:d-block" style="top: 20%">
  103.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  104.                                     </div>
  105.                                     <div class="hero-ten-02 position-absolute w-200px xl:w-300px d-none lg:d-block"  style="bottom: 20%">
  106.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  107.                                     </div>
  108.                                     <div class="hero-ten-03 position-absolute w-150px d-none lg:d-block" style="top: 10%">
  109.                                         <img class="rounded-2 shadow-lg border" src="/uploads/no_avatar.png" alt="hero-image">
  110.                                     </div>
  111.                                 </div>
  113.                             </div>
  114.                         </div>
  115.                     </div>
  116.                 </div>
  117.             </div>
  118.         </div>
  119.     </div>
  121.     <div id="how_it_works" class="how-it-works section panel overflow-hidden" style="margin-top:30px;">
  122.         <div class="section-outer panel">
  123.             <div class="container">
  125.                 <div style="text-align:center; margin-bottom:50px;">
  126.                     <h2 class="h4 sm:h3 xl:h2 m-0">Comment ça marche ?</h2>
  127.                 </div>
  129.                 <div class="section-inner panel vstack border rounded-3 overflow-hidden" style="background-color:#F4ECE1;">
  130.                     <div class="row child-cols-12 md:child-cols justify-center col-match g-4 sep uc-grid">
  131.                         <div class="min-w-1/4">
  132.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  133.                                 {#<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>#}
  134.                                 <img class="w-100" src="/uploads/rh/mascotte_register.png" alt="Alice s'incris sur Whileresume">
  135.                                 <h3 class="h5 lg:h4 m-0">Je m'inscris gratuitement</h3>
  136.                                 <p class="fs-6">Nous vous mettons en relation avec des recruteurs qualifiés issus de startups, scale-ups, licornes, PME, grandes entreprises et sociétés du Fortune 500.</p>
  137.                             </div>
  138.                         </div>
  139.                         <div class="min-w-1/4">
  140.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  141.                                 {# <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> #}
  142.                                 <img class="w-100" src="/uploads/rh/mascotte_upload2.png" alt="Alice télécharge son CV sur Whilersume">
  143.                                 <h3 class="h5 lg:h4 m-0">J'upload mon CV</h3>
  144.                                 <p class="fs-6">J'ajoute mon CV au format PDF et/ou ma vidéo de présentation. Je définis ma stack, mon niveau, mes attentes.</p>
  145.                             </div>
  146.                         </div>
  147.                         <div class="min-w-100 lg:min-w-1/4">
  148.                             <div class="panel vstack items-center gap-2 text-center p-5 xl:py-8">
  149.                                 {# <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> #}
  150.                                 <img class="w-100" src="/uploads/rh/mascotte_reunion.png" alt="Alice rencontre un recruteur en IT">
  151.                                 <h3 class="h5 lg:h4 m-0">Les entreprises me contactent</h3>
  152.                                 <p class="fs-6">Ils utilisent nos filtres pour me trouver et me contactent directement pour les opportunités qui correspondent</p>
  153.                             </div>
  154.                         </div>
  155.                     </div>
  156.                 </div>
  157.             </div>
  158.         </div>
  159.     </div>
  161.     <div id="main_features" class="main-features section panel overflow-hidden">
  162.         <div class="section-outer panel py-6 lg:py-8 xl:py-10">
  163.             <div class="container">
  165.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10">
  166.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  167.                         <div class="panel w-100">
  168.                             <img src="/uploads/rh/mascotte_filtrage3.png" title="Deux professionnels souriants collaborent devant un mur de post-it colorés en brainstorming d'équipe" alt="Deux professionnels souriants collaborent devant un mur de post-it colorés en brainstorming d'équipe" class="rounded-2" style="background-color:#F5EDE3;">
  169.                         </div>
  170.                     </div>
  171.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  172.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  173.                             <div>
  174.                                 <div class="panel vstack gap-2">
  175.                                     <span class="fs-6 fw-bold m-0 text-primary">01.</span>
  176.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Filtrage par critères</h2>
  178.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  179.                                         <strong>Définissez une fois</strong> vos critères essentiels : poste recherché, secteur d'activité, ville souhaitée et préférences de travail. Notre système de filtres avancés permet aux recruteurs de vous identifier précisément selon vos attentes.
  180.                                     </p>
  181.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  182.                                         Fini les opportunités inadéquates : seules les offres qui correspondent vraiment à votre profil vous contactent.
  183.                                     </p>
  185.                                 </div>
  186.                             </div>
  187.                             <div>
  188.                                 <div class="p-3 panel vstack gap-3 rounded border">
  189.                                     <p class="fs-6 dark:text-white">“ Nous avons voulu révolutionner l'approche du recrutement en mettant le candidat au centre. Plutôt que de subir un flot d'opportunités inadéquates, les talents définissent une fois pour toutes leurs critères essentiels et ne reçoivent que les offres qui leur correspondent vraiment. C'est cette précision qui fait toute la différence. ”</p>
  190.                                     <div class="panel hstack gap-1">
  191.                                         <img class="w-40px rounded-circle" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">
  192.                                         <div class="panel vstack items-start gap-0">
  193.                                             <h6 class="h6 m-0">Keith SHEMA</h6>
  194.                                             <span class="fs-7 opacity-70">Fondateur Whileresume & Holyfield and partners</span>
  195.                                         </div>
  196.                                     </div>
  197.                                 </div>
  198.                             </div>
  199.                         </div>
  200.                     </div>
  201.                 </div>
  203.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  204.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  205.                         <div class="panel w-100">
  206.                             <img src="/uploads/rh/mascotte_upload.png" title="Alice upload son CV" alt="Alice upload son CV" class="rounded-2" style="background-color:#F5EDE3;">
  207.                         </div>
  208.                     </div>
  209.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  210.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  211.                             <div>
  212.                                 <div class="panel vstack gap-2">
  214.                                     <span class="fs-6 fw-bold m-0 text-primary">02.</span>
  215.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Optimisation intelligente</h2>
  217.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  218.                                         <strong>Téléchargez votre CV existant</strong> et laissez Whileresume l'analyser automatiquement. Le système extrait et structure l'ensemble de vos informations pour créer une <strong>présentation optimisée</strong> conforme à votre profil.
  219.                                     </p>
  221.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  222.                                         Whileresume identifie et met en valeur vos <strong>soft skills</strong> (leadership, communication, adaptabilité...), vos <strong>hard skills</strong> (compétences techniques, outils, certifications), vos <strong>expériences professionnelles</strong> avec leurs réalisations quantifiables, et vos <strong>projets marquants</strong>.
  223.                                     </p>
  225.                                     {#
  226.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  227.                                         Vous pouvez modifier votre CV et <strong>relancer l'analyse autant de fois que nécessaire</strong> pour perfectionner votre candidature et l'adapter à chaque opportunité.
  228.                                     </p>
  229.                                     #}
  231.                                 </div>
  232.                             </div>
  233.                             <div>
  234.                                 <div class="p-3 panel vstack gap-3 rounded border">
  235.                                     <p class="fs-6 dark:text-white">“ Nous avons développé un outil pour que l'IA améliore votre CV en fonction de l'offre que vous souhaitez postuler”</p>
  236.                                     <div class="panel hstack gap-1">
  237.                                         <img class="w-40px rounded-circle" src="/uploads/sylvaindieterle_circle.jpeg" alt="Sylvain DIETERLE">
  238.                                         <div class="panel vstack items-start gap-0">
  239.                                             <h6 class="h6 m-0">Sylvain DIETERLE</h6>
  240.                                             <span class="fs-7 opacity-70">Fondateur Whileresume & Mirtillo</span>
  241.                                         </div>
  242.                                     </div>
  243.                                 </div>
  244.                             </div>
  245.                         </div>
  246.                     </div>
  247.                 </div>
  249.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  250.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  251.                         <div class="panel w-100">
  252.                             <img src="/uploads/rh/mascotte_register.png" class="rounded-2" alt="Une recruteuse recupère une pile de CV qualifié" title="" loading="lazy">
  253.                         </div>
  254.                     </div>
  255.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  256.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  257.                             <div>
  258.                                 <div class="panel vstack gap-2">
  259.                                     <span class="fs-6 fw-bold m-0 text-primary">03.</span>
  260.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Recherche qualifié</h2>
  262.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  263.                                         Plus besoin de chercher activement : les <strong>recruteurs</strong> vous trouvent grâce à <strong>vos critères prédéfinis</strong>. Votre profil reste visible 24h/24 auprès des entreprises & recruteurs qui correspondent à vos attentes.
  264.                                     </p>
  265.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  266.                                         Vous économisez du temps tout en multipliant <strong>vos opportunités de carrière</strong>. La recherche d'emploi devient enfin passive et efficace.
  267.                                     </p>
  269.                                 </div>
  270.                             </div>
  271.                             <div>
  272.                                 <div class="p-3 panel vstack gap-3 rounded border">
  273.                                     <p class="fs-6 dark:text-white">“ Pourquoi perdre des heures à postuler quand les bonnes opportunités peuvent venir directement à vous ? ”</p>
  274.                                     <div class="panel hstack gap-1">
  275.                                         <img class="w-40px rounded-circle" src="/uploads/sylvaindieterle_circle.jpeg" alt="Sylvain DIETERLE">
  276.                                         <div class="panel vstack items-start gap-0">
  277.                                             <h6 class="h6 m-0">Sylvain DIETERLE</h6>
  278.                                             <span class="fs-7 opacity-70">Fondateur Whileresume & Mirtillo</span>
  279.                                         </div>
  280.                                     </div>
  281.                                 </div>
  282.                             </div>
  283.                         </div>
  284.                     </div>
  285.                 </div>
  287.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  288.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  289.                         <div class="panel w-100">
  290.                             <img src="/uploads/rh/mascotte_reunion.png" alt="" title="" class="rounded-2">
  291.                         </div>
  292.                     </div>
  293.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  294.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  295.                             <div>
  296.                                 <div class="panel vstack gap-2">
  297.                                     <span class="fs-6 fw-bold m-0 text-primary">04.</span>
  298.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Contact direct qualifié</h2>
  300.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  301.                                         Les recruteurs vous contactent <strong>directement</strong> uniquement s'ils ont <strong>une opportunité concrète</strong> qui correspond à vos critères. Chaque <strong>contact</strong> reçu est <strong>qualifié et pertinent</strong>.
  302.                                     </p>
  303.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  304.                                         Vous évitez les sollicitations inadéquates et vous concentrez sur les vraies opportunités. Le processus de recrutement devient plus transparent et respectueux de votre temps.
  305.                                     </p>
  307.                                 </div>
  308.                             </div>
  309.                             <div>
  310.                                 <div class="p-3 panel vstack gap-3 rounded border">
  311.                                     <p class="fs-6 dark:text-white">“ Nous avons éliminé le bruit pour ne garder que l'essentiel : chaque contact que vous recevez correspond à une opportunité concrète et qualifiée. Fini les sollicitations inadéquates, place à un recrutement transparent et respectueux de votre temps. ”</p>
  312.                                     <div class="panel hstack gap-1">
  313.                                         <img class="w-40px rounded-circle" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">
  314.                                         <div class="panel vstack items-start gap-0">
  315.                                             <h6 class="h6 m-0">Keith SHEMA</h6>
  316.                                             <span class="fs-7 opacity-70">Fondateur Whileresume & Holyfield and partners </span>
  317.                                         </div>
  318.                                     </div>
  319.                                 </div>
  320.                             </div>
  321.                         </div>
  322.                     </div>
  323.                 </div>
  325.             </div>
  326.         </div>
  327.     </div>
  329.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  330.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  331.             <div class="container max-w-xl">
  332.                 <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;">
  333.                     <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});">
  335.                         <h2 class="h3 m-0">
  336.                             Whileresume met en relation des talents avec des entreprises en forte croissance
  337.                         </h2>
  339.                         <div class="row" style="margin-top:15px;">
  340.                             <div class="col-md-6">
  341.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  342.                                     <h3 class="h3 m-0" style="color:purple;">Recruteur</h3>
  343.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  344.                                         On connecte les meilleurs talents du marché aux entreprises en croissance qui recherchent des collaborateurs d'exception.
  345.                                     </p>
  347.                                     <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je recrute <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  348.                                 </div>
  349.                             </div>
  350.                             <div class="col-md-6">
  352.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  353.                                     <h3 class="h3 m-0" style="color:purple;">Candidat</h3>
  354.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  355.                                         On vous accompagne dans la recherche de votre poste idéal au sein des entreprises les plus prometteuses du marché.
  356.                                     </p>
  358.                                     <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je cherche un job <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  359.                                 </div>
  361.                             </div>
  362.                         </div>
  364.                     </div>
  365.                 </div>
  366.             </div>
  367.         </div>
  368.     </div>
  370.     <div id="faq" class="faq section panel" style="margin-bottom:100px;">
  371.         <div class="section panel">
  372.             <div class="container">
  373.                 <div class="section-inner panel">
  374.                     <div class="row child-cols-12 col-match gy-2 lg:gy-6">
  375.                         <div>
  376.                             <div class="vstack items-center text-center gap-2">
  377.                                 <h2 class="h4 lg:h3 m-0">Comment ça marche ?</h2>
  378.                             </div>
  379.                         </div>
  380.                         <div>
  381.                             <div class="panel">
  382.                                 <ul class="uc-accordion gap-1 max-w-850px mx-auto" data-uc-accordion="targets: > li; multiple: false;">
  383.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  384.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Comment les recruteurs me trouvent-ils ?</a>
  385.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  386.                                             <p>Les recruteurs utilisent nos filtres avancés (poste, secteur, ville, préférences) pour identifier les candidats qui correspondent exactement à leurs besoins. Votre profil apparaît uniquement dans les recherches pertinentes selon vos critères prédéfinis.</p>
  387.                                         </div>
  388.                                     </li>
  389.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  390.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Puis-je modifier mes critères après inscription ?</a>
  391.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  392.                                             <p>Oui, vous pouvez modifier à tout moment vos préférences de poste, secteur, ville et type de contrat. Ces changements sont immédiatement pris en compte dans les recherches des recruteurs.</p>
  393.                                         </div>
  394.                                     </li>
  395.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  396.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Comment fonctionne l'IA pour créer mon CV ?</a>
  397.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  398.                                             <p>L'IA analyse vos informations et créé un CV professionnel adapté à votre secteur. Vous pouvez choisir parmi différents formats (européen, corporate, thématisé) et l'IA optimise automatiquement la présentation de vos compétences pour maximiser votre impact.</p>
  399.                                         </div>
  400.                                     </li>
  401.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  402.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Mes données personnelles sont-elles protégées ?</a>
  403.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  404.                                             <p>Toutes vos données sont chiffrées et stockées de manière sécurisée. Vous contrôlez entièrement votre profil et pouvez choisir d'utiliser un CV anonyme si vous le souhaitez. Aucune information n'est partagée sans votre consentement.</p>
  405.                                         </div>
  406.                                     </li>
  407.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  408.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Que se passe-t-il quand un recruteur me contacte ?</a>
  409.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  410.                                             <p>Vous recevez une notification avec les détails de l'opportunité. Le recruteur vous contacte directement parce que votre profil correspond à ses critères de recherche. Vous pouvez alors échanger et décider si l'opportunité vous intéresse.</p>
  411.                                         </div>
  412.                                     </li>
  413.                                     <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  414.                                         <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">La plateforme est-elle vraiment gratuite ?</a>
  415.                                         <div class="uc-accordion-content lg:fs-5 opacity-70">
  416.                                             <p>Oui, l'inscription et l'utilisation de la plateforme sont 100% gratuites pour les candidats. Vous pouvez créer votre profil, télécharger votre CV, utiliser l'IA et recevoir des contacts de recruteurs sans aucun frais.</p>
  417.                                         </div>
  418.                                     </li>
  419.                                 </ul>
  420.                             </div>
  421.                         </div>
  422.                     </div>
  423.                 </div>
  424.             </div>
  425.         </div>
  426.     </div>
  428.     <div id="articles" class="faq section panel" style="margin-bottom:100px;">
  429.         <div class="section-outer panel">
  430.             <div class="container">
  432.                 <div style="margin-bottom:50px; margin-top:50px;">
  433.                     <div class="vstack items-center text-center gap-2">
  434.                         <h2 class="h4 lg:h3 m-0">Nos articles pour vous aider à candidater</h2>
  435.                     </div>
  436.                 </div>
  438.                 <div class="row child-cols-12 sm:child-cols-4 col-match gy-4 gx-2 xl:gx-4">
  439.                     {% for article in articles %}
  440.                         {% set urlArticle = '/fr' ~ path('blog_article',{'slug': article.slug})  %}
  441.                         {% if article.pageslug3 is not empty %}
  442.                             {% set urlArticle = '/fr/' ~ article.pageslug ~ '/' ~  article.pageslug2 ~ '/' ~ article.pageslug3  %}
  443.                         {% elseif article.pageslug2 is not empty %}
  444.                             {% set urlArticle = '/fr/' ~ article.pageslug ~ '/' ~  article.pageslug2  %}
  445.                         {% elseif article.pageslug is not empty %}
  446.                             {% set urlArticle = '/fr/' ~ article.pageslug  %}
  447.                         {% endif %}
  448.                         <div class="col-12">
  449.                             <article class="post type-post panel rounded-3 p-2 md:p-4 bg-secondary dark:bg-gray-800">
  450.                                 <div class="panel row child-cols-12 sm:child-cols items-center g-3 md:g-4">
  451.                                     <div class="sm:col-4 md:col-6 lg:col-4">
  452.                                         <div class="panel">
  453.                                             {% if article.image.name is not null %}
  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="{{ vich_uploader_asset(article, 'imageFile') }}" alt="{{ article.title }}" title="{{ article.title }}">
  456.                                                     <a class="position-cover" data-caption="Maximizing your reach with marketing strategies" href="#"></a>
  457.                                                 </figure>
  458.                                             {% else %}
  459.                                                 <figure class="featured-image m-0 rounded ratio ratio-1x1 rounded-2 uc-transition-toggle overflow-hidden">
  460.                                                     <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="/uploads/no_article.jpg" alt="{{ article.title }}" title="{{ article.title }}">
  461.                                                     <a class="position-cover" data-caption="Maximizing your reach with marketing strategies" href="#"></a>
  462.                                                 </figure>
  463.                                             {% endif %}
  464.                                         </div>
  465.                                     </div>
  466.                                     <div>
  467.                                         <div class="vstack items-start gap-2 md:gap-3">
  468.                                             <ul class="post-meta nav-x ft-tertiary justify-start gap-1 fs-7">
  469.                                                 <li>
  470.                                                     <div class="post-date hstack gap-narrow">
  471.                                                         <span>{{ article.publishedAt|date("d, M, Y") }}</span>
  472.                                                     </div>
  473.                                                 </li>
  474.                                             </ul>
  475.                                             <h3 class="h4 sm:h5 md:h4 lg:h3 m-0 m-0">
  476.                                                 <a class="text-none" href="{{ urlArticle }}">{{ article.title }}</a>
  477.                                             </h3>
  478.                                             <p class="fs-6 md:fs-5 d-none md:d-block">{{ article.subtitle }}</p>
  479.                                             <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 }}">
  480.                                                 Je lis l'article
  481.                                             </a>
  482.                                         </div>
  483.                                     </div>
  484.                                 </div>
  485.                             </article>
  486.                         </div>
  488.                     {% endfor  %}
  489.                 </div>
  491.             </div>
  492.         </div>
  493.     </div>
  496.     <div id="pre_cta" class="pre-cta section panel overflow-hidden">
  497.         <div class="section-outer panel pb-4 sm:pb-6 xl:pb-9">
  498.             <div class="container max-w-xl">
  499.                 <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;">
  500.                     <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});">
  502.                         <h2 class="h3 m-0">
  503.                             Whileresume met en relation des talents avec des entreprises en forte croissance
  504.                         </h2>
  506.                         <div class="row" style="margin-top:15px;">
  507.                             <div class="col-md-6">
  508.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  509.                                     <h3 class="h3 m-0" style="color:purple;">Recruteur</h3>
  510.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  511.                                         On connecte les meilleurs talents du marché aux entreprises en croissance qui recherchent des collaborateurs d'exception.
  512.                                     </p>
  514.                                     <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je recrute <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  515.                                 </div>
  516.                             </div>
  517.                             <div class="col-md-6">
  519.                                 <div style="background-color:white; text-align:left; border-radius:20px; padding:20px;">
  520.                                     <h3 class="h3 m-0" style="color:purple;">Candidat</h3>
  521.                                     <p class="fs-6 text-dark dark:text-white text-opacity-70" style="margin-top:10px;">
  522.                                         On vous accompagne dans la recherche de votre poste idéal au sein des entreprises les plus prometteuses du marché.
  523.                                     </p>
  525.                                     <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="btn btn-md btn-primary rounded-default text-white shadow-xs" style="margin-top:10px;">Je cherche un job <i class="icon-2 unicon-arrow-up-right rtl:-rotate-90"></i></a>
  526.                                 </div>
  528.                             </div>
  529.                         </div>
  533.                     </div>
  534.                 </div>
  535.             </div>
  536.         </div>
  537.     </div>
  540. {% endblock body %}