templates/application/whileresume/website/business/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 body_header %}
  11.     {% embed "/vitrine/lexend/components/header.html.twig" with {'navcolor':'blue','navtype':'default'} %}
  12.         {% block header_content %}
  13.             {% include "/vitrine/lexend/components/languages/loader.html.twig" %}
  14.         {% endblock %}
  15.         {% block header_content2 %}
  16.             {% include "/vitrine/lexend/components/languages/loader_mobile.html.twig" %}
  17.         {% endblock %}
  18.     {% endembed %}
  19. {% endblock body_header %}
  21. {% block css %}
  22.     <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
  23. {% endblock css %}
  25. {% block js %}
  26.     <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
  27. {% endblock js %}
  29. {% block body %}
  31.     <div id="register" class="hero-header section panel overflow-hidden">
  32.                             <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>
  33.                             <div class="section-outer panel py-8 lg:py-9 xl:py-10">
  34.                                 <div class="container">
  35.                                     <div class="section-inner panel">
  36.                                         <div class="d-none xl:d-block">
  37.                                             <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>
  38.                                             <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>
  39.                                             <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>
  40.                                             <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>
  41.                                             <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>
  42.                                             <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>
  43.                                         </div>
  44.                                         <div class="row child-cols-12 justify-center items-center g-8">
  45.                                             <div class="lg:col-12">
  46.                                                 <div class="panel vstack gap-4 lg:gap-8">
  47.                                                     <div class="panel vstack justify-center items-center gap-2 px-2 pt-4 text-center">
  49.                                                         <h1 class="h4 lg:display-5 m-0"><span class="text-primary dark:text-tertiary">Publiez</span> vos offres, <span class="text-primary dark:text-tertiary">attirez</span> les bons talents, <span class="text-primary dark:text-tertiary">échangez</span> directement</h1>
  51.                                                         <p class="fs-6 xl:fs-4 xl:px-10 dark:text-white text-opacity-70">
  52.                                                             Chaque jour, des professionnels de tous horizons rejoignent notre plateforme pour être mis en relation avec des entreprises comme la vôtre . Obtenez un accès instantané aux meilleurs candidats
  53.                                                         </p>
  55.                                                         <div class="vstack md:hstack justify-center">
  57.                                                             <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; margin-right:5px; margin-left:5px;">
  58.                                                                 Télécharger sur iOS
  59.                                                                 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
  60.                                                                 <svg fill="#000000" width="25px" height="25px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  61.                                                                     <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"/>
  62.                                                                 </svg>
  63.                                                             </a>
  65.                                                             <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-right:5px; margin-left:5px;">
  66.                                                                 Télécharger sur Android
  67.                                                                 <?xml version="1.0" encoding="iso-8859-1"?>
  68.                                                                 <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"
  69.                                                                      viewBox="0 0 512 512"  xml:space="preserve">
  70.                                                                     <g>
  71.                                                                         <g>
  72.                                                                             <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
  73.                                                                                 C0.087,470.305,0,468.91,0,467.518V44.499c0-9.488,2.873-18.02,7.574-24.987L225.656,256.052z"/>
  74.                                                                             <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"
  75.                                                                             />
  76.                                                                             <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
  77.                                                                                 L320.811,152.8l70.518,40.745l41.614,24.026C448.178,226.366,455.579,241.861,455.056,257.27z"/>
  78.                                                                             <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
  79.                                                                                 L7.591,492.492z"/>
  80.                                                                         </g>
  81.                                                                         <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
  82.                                                                             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
  83.                                                                             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
  84.                                                                             C323.988,277.849,391.567,264.55,454.067,246.447z"/>
  85.                                                                     </g>
  86.                                                                 </svg>
  87.                                                             </a>
  89.                                                         </div>
  92.                                                     </div>
  93.                                                     <div class="hero-scroll-scene panel max-w-500px mx-auto">
  95.                                                         <div style="background-color:white; border-radius:40px; padding:30px;">
  97.                                                             <div class="vstack gap-1">
  99.                                                                 <h2 style="font-size:22px !important;">Créer mon profil d'entreprise</h2>
  101.                                                                 {{ form_start(form,{'attr':{'class':''}}) }}
  103.                                                                 {% for message in app.flashes('danger') %}
  104.                                                                     <div style="background-color:#98121B; color:white; border-radius:40px; padding:7px; margin-top:10px; margin-bottom:10px;">
  105.                                                                         {{ message }}
  106.                                                                     </div>
  107.                                                                 {% endfor %}
  109.                                                                 <div class="row child-cols-12 md:child-cols-6 g-2" style="margin-top:7px;">
  110.                                                                     <div>
  111.                                                                         {{ form_widget(form.name,{'attr':{'placeholder':'John'}}) }}
  112.                                                                     </div>
  113.                                                                     <div>
  114.                                                                         {{ form_widget(form.lastname,{'attr':{'placeholder':'DOE'}}) }}
  115.                                                                     </div>
  116.                                                                 </div>
  118.                                                                 <div class="row child-cols-12 g-2" style="margin-top:7px;">
  119.                                                                     <div>
  120.                                                                         {{ form_widget(form.email,{'attr':{'placeholder':'john.doe@whileresume.com'}}) }}
  121.                                                                         <div id="emailMessage" class="message hidden"></div>
  122.                                                                     </div>
  123.                                                                 </div>
  125.                                                                 <div class="row child-cols-12 md:child-cols-6 g-2" style="margin-top:7px;">
  126.                                                                     <div>
  127.                                                                         {{ form_widget(form.password.first,{'attr':{'placeholder':'Mot de passe','class':'form-control'}}) }}
  128.                                                                     </div>
  129.                                                                     <div>
  130.                                                                         {{ form_widget(form.password.second,{'attr':{'placeholder':'Confirmer le mot de passe','class':'form-control'}}) }}
  131.                                                                     </div>
  132.                                                                 </div>
  134.                                                                 <div class="row child-cols-12" style="margin-top:20px;">
  135.                                                                     <div>
  136.                                                                         <p class="fs-7 text-dark dark:text-white text-opacity-70">{{ form_widget(form.acceptTerm) }} J'accepte la <a href="/fr/protections-donnees-recruteurs" class="uc-link text-underline dark:text-secondary">politique de protection des données</a> et des <a href="/fr/conditions-generales-vente">conditions générales de ventes</a>.</p>
  137.                                                                     </div>
  138.                                                                 </div>
  140.                                                                 <div style="margin-bottom:20px; margin-top:20px;">
  141.                                                                     {{ form_widget(form.recaptcha) }}
  142.                                                                 </div>
  144.                                                                 <button type="submit" class="btn btn-primary btn-md text-white mt-2">Je valide l'inscription</button>
  146.                                                             </div>
  148.                                                             {{ form_rest(form) }}
  149.                                                             {{ form_end(form) }}
  151.                                                         </div>
  153.                                                     </div>
  155.                                                 </div>
  156.                                             </div>
  157.                                         </div>
  158.                                     </div>
  159.                                 </div>
  160.                             </div>
  161.                         </div>
  163.     <div id="features" class="main-features section panel overflow-hidden" style="margin-top:30px;">
  164.         <div class="section-outer panel py-6 lg:py-8 xl:py-10">
  165.             <div class="container">
  167.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10">
  168.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  169.                         <div class="panel w-100">
  170.                             <img src="/uploads/rh/mascotte_filtrage3.png" alt="Un recruteur avec une pile de CV." class="rounded-2" style="background-color:#F5EDE3;">
  171.                         </div>
  172.                     </div>
  173.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  174.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  175.                             <div>
  176.                                 <div class="panel vstack gap-2">
  177.                                     <span class="fs-6 fw-bold m-0 text-primary">01.</span>
  178.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Publiez des offres d’emploi en illimité</h2>
  180.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  181.                                         Depuis le tableau de bord de votre entreprise, créez des offres complètes en quelques minutes et bénéficiez d’une visibilité immédiate auprès de milliers de candidats qualifiés à la recherche d’opportunités comme la vôtre.
  182.                                     </p>
  184.                                 </div>
  185.                             </div>
  186.                             <div>
  187.                                 <div class="p-3 panel vstack gap-3 rounded border">
  188.                                     <p class="fs-6 dark:text-white">"Ce qui m'a vraiment marqué, c'est le prix. Comparé à d'autres plateformes similaires, elle offre une solution bien plus compétitive et économique sans compromis sur la qualité. Je peux publier une offre en quelques minutes et accéder à des profils de candidats pertinents. Avec l'application mobile, je gère facilement tout en déplacement — des échanges avec les candidats à la consultation des CV et des vidéos de présentation. C'est une solution de recrutement efficace qui offre un vrai rapport qualité-prix."</p>
  189.                                     <div class="panel hstack gap-1">
  190.                                         {#<img class="w-40px rounded-circle" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">#}
  191.                                         <div class="panel vstack items-start gap-0">
  192.                                             <h6 class="h6 m-0">Peter OWENS</h6>
  193.                                             <span class="fs-7 opacity-70">Associé gérant</span>
  194.                                         </div>
  195.                                     </div>
  196.                                 </div>
  197.                             </div>
  198.                         </div>
  199.                     </div>
  200.                 </div>
  202.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  203.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  204.                         <div class="panel w-100">
  205.                             <img src="/uploads/rh/mascotte_upload2.png" alt="Un recruteur consultant un CV sur son téléphone." class="rounded-2" style="background-color:#F5EDE3;">
  206.                         </div>
  207.                     </div>
  208.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  209.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  210.                             <div>
  211.                                 <div class="panel vstack gap-2">
  212.                                     <span class="fs-6 fw-bold m-0 text-primary">02.</span>
  213.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Profils candidats enrichis</h2>
  215.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  216.                                         Les candidats créent des profils complets avec CV standardisé, CV vidéo et portfolio détaillé. Au-delà du CV traditionnel, découvrez leurs projets, réalisations, compétences techniques et savoir-être.
  217.                                     </p>
  218.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  219.                                         Le CV vidéo révèle la personnalité et la motivation du candidat, tandis que le CV classique structuré centralise toutes les informations professionnelles. Une vision à 360° pour des décisions de recrutement éclairées.
  220.                                     </p>
  222.                                 </div>
  223.                             </div>
  224.                             <div>
  225.                                 <div class="p-3 panel vstack gap-3 rounded border">
  226.                                     <p class="fs-6 dark:text-white">"Les CV traditionnels m'ont toujours semblé limités. Avec cette plateforme, j'ai une vue complète des candidats : leur CV, une vidéo qui montre qui ils sont vraiment, et chaque détail pour recruter de manière plus intelligente, plus rapide et avec plus de confiance."</p>
  227.                                     <div class="panel hstack gap-1">
  228.                                         {#<img class="w-40px rounded-circle" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">#}
  229.                                         <div class="panel vstack items-start gap-0">
  230.                                             <h6 class="h6 m-0">Elisa VAN HOEK</h6>
  231.                                             <span class="fs-7 opacity-70">Recruteuse</span>
  232.                                         </div>
  233.                                     </div>
  234.                                 </div>
  235.                             </div>
  236.                         </div>
  237.                     </div>
  238.                 </div>
  240.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  241.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  242.                         <div class="panel w-100">
  243.                             <img src="/uploads/rh/mascotte_reunion.png" alt="Un recruteur et un candidat en conversation" class="rounded-2">
  244.                         </div>
  245.                     </div>
  246.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  247.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  248.                             <div>
  249.                                 <div class="panel vstack gap-2">
  250.                                     <span class="fs-6 fw-bold m-0 text-primary">03.</span>
  251.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Contact illimité des candidats en un clic</h2>
  253.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  254.                                         Messagerie instantanée pour contacter directement les candidats qui vous intéressent. Plus besoin d'attendre que les candidats qualifiés viennent à vous.
  255.                                     </p>
  256.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  257.                                         Communication fluide et rapide pour accélérer vos processus de recrutement. Conservez un historique d'échanges centralisé pour un suivi optimal, et bénéficiez des CV classiques et vidéo à tout moment.
  258.                                     </p>
  260.                                 </div>
  261.                             </div>
  262.                             <div>
  263.                                 <div class="p-3 panel vstack gap-3 rounded border">
  264.                                     <p class="fs-6 dark:text-white">
  265.                                         "Je voulais un outil qui se fait oublier et me laisse me concentrer sur l'essentiel : mes candidats. Cette plateforme allie simplicité et efficacité, me faisant gagner du temps sur les tâches techniques pour que je puisse me consacrer aux interactions humaines et construire des relations authentiques avec les talents."
  266.                                     </p>
  267.                                     <div class="panel hstack gap-1">
  268.                                         {#<img class="w-40px rounded-circle" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">#}
  269.                                         <div class="panel vstack items-start gap-0">
  270.                                             <h6 class="h6 m-0">Olivia BASTEN</h6>
  271.                                             <span class="fs-7 opacity-70">Partenaire acquisition de talents</span>
  272.                                         </div>
  273.                                     </div>
  274.                                 </div>
  275.                             </div>
  276.                         </div>
  277.                     </div>
  278.                 </div>
  280.                 <div class="row child-cols col-match justify-between g-4 lg:g-8 xl:g-10" style="margin-top:40px;">
  281.                     <div class="col-12 sm:col-6 order-0 lg:order-1">
  282.                         <div class="panel w-100">
  283.                             <img src="/uploads/rh/mascotte_register.png" alt="Un recruteur sur un canapé utilisant l'application Whileresume" class="rounded-2">
  284.                         </div>
  285.                     </div>
  286.                     <div class="col-12 sm:col-6 order-1 lg:order-0">
  287.                         <div class="panel vstack justify-between gap-4 sm:gap-6 h-100">
  288.                             <div>
  289.                                 <div class="panel vstack gap-2">
  290.                                     <span class="fs-6 fw-bold m-0 text-primary">04.</span>
  291.                                     <h2 class="h4 lg:h3 xl:h2 m-0">Interface intuitive et performante</h2>
  293.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  294.                                         Plateforme web et mobile qui allie simplicité et performance. Interface intuitive avec navigation fluide, filtres multicritères avancés et tableaux de bord personnalisables.
  295.                                     </p>
  296.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  297.                                         Prise en main immédiate, aucune formation nécessaire. Conçue pour être accessible aux entreprises qui souhaitent recruter, tout en offrant des fonctionnalités professionnelles puissantes.
  298.                                     </p>
  299.                                     <p class="fs-6 lg:fs-5 opacity-70 dark:opacity-80">
  300.                                         L'outil s'efface au profit de l'essentiel : vos candidats. Gagnez un temps précieux sur les tâches de recrutement pour vous concentrer sur l'échange humain et la construction de relations authentiques avec vos talents.
  301.                                     </p>
  303.                                 </div>
  304.                             </div>
  305.                             <div>
  306.                                 <div class="p-3 panel vstack gap-3 rounded border">
  307.                                     <p class="fs-6 dark:text-white">"Je voulais un outil qui me permette de me concentrer sur ce qui compte vraiment : mes candidats. Cette plateforme allie simplicité et effi cacité, en m’aidant à gagner du temps sur les tâches techniques afi n que je puisse me consacrer aux interactions humaines et à la création de relations authentiques avec les talents."</p>
  308.                                     <div class="panel hstack gap-1">
  309.                                         {#<img class="w-40px rounded-circle" src="/uploads/sylvaindieterle_circle.jpeg" alt="Sylvain DIETERLE">#}
  310.                                         <div class="panel vstack items-start gap-0">
  311.                                             <h6 class="h6 m-0">Olivier BASTEN</h6>
  312.                                             <span class="fs-7 opacity-70">Talent acquisition partner</span>
  313.                                         </div>
  314.                                     </div>
  315.                                 </div>
  316.                             </div>
  317.                         </div>
  318.                     </div>
  319.                 </div>
  321.             </div>
  322.         </div>
  323.     </div>
  325.     <div id="our_service_details" class="services-details section panel overflow-hidden" style="margin-bottom:80px;">
  326.         <div class="section-outer panel">
  327.             <div class="container sm:max-w-lg xl:max-w-xl">
  328.                 <div class="section-inner panel">
  329.                     <div class="panel vstack items-center gap-2 xl:gap-3 mb-4 lg:mb-8 max-w-650px mx-auto text-center" data-anime="onview: -100; targets: &gt;*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 200});">
  330.                         <h2 class="h3 lg:h2 xl:h1 m-0">Une alternative à LinkedIn</h2>
  331.                     </div>
  332.                     <div class="services-items row child-cols-12 sm:child-cols-6 lg:child-cols-4 g-4 col-match" data-anime="onview: -100; targets: &gt;*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 400});">
  333.                         <div style="transform: translateY(0px); opacity: 1;">
  334.                             <div class="service-item vstack gap-2 p-1 rounded-2 border" style="border:2px solid green !important;">
  335.                                 <div class="hstack gap-2 p-2 bg-secondary dark:bg-white dark:bg-opacity-5 rounded-1-5">
  336.                                     <img class="w-40px" src="https://whileresume.com/uploads/favicon.png" alt="feature-icon" data-uc-svg="">
  337.                                     <h3 class="title h5 xl:h4 m-0">1er. Whileresume</h3>
  338.                                 </div>
  339.                                 <div class="uc-list uc-list-divider fs-7 xl:fs-6 text-muted px-2 pb-1">
  340.                                     <div class="panel">
  341.                                         <div style="font-size:16px !important;">Publication d'offres</div>
  342.                                         <div class="hstack items-center gap-1 py-narrow">
  343.                                             <i class="icon-narrow unicon-checkmark fw-bold text-primary"></i>
  344.                                             <p>Illimité</p>
  345.                                         </div>
  346.                                     </div>
  347.                                     <div class="panel">
  348.                                         <div style="font-size:16px !important;">Prix moyen</div>
  349.                                         <div class="hstack items-center gap-1 py-narrow">
  350.                                             <i class="icon-narrow unicon-checkmark fw-bold text-primary dark:text-secondary"></i>
  351.                                             <p>1 200 € / an</p>
  352.                                         </div>
  353.                                     </div>
  354.                                     <div class="panel">
  355.                                         <div style="font-size:16px !important;">Limites d'utilisation liées au contact des candidats</div>
  356.                                         <div class="hstack items-center gap-1 py-narrow">
  357.                                             <i class="icon-narrow unicon-checkmark fw-bold text-primary dark:text-secondary"></i>
  358.                                             <p>Illimité</p>
  359.                                         </div>
  360.                                     </div>
  361.                                     <div class="panel">
  362.                                         <div style="font-size:16px !important;">Diffusion continue sans interruption</div>
  363.                                         <div class="hstack items-center gap-1 py-narrow">
  364.                                             <i class="icon-narrow unicon-checkmark fw-bold text-primary dark:text-secondary"></i>
  365.                                             <p>Illimité</p>
  366.                                         </div>
  367.                                     </div>
  368.                                     <div class="panel">
  369.                                         <div style="font-size:16px !important;">Messagerie interne intégrée</div>
  370.                                         <div class="hstack items-center gap-1 py-narrow">
  371.                                             <i class="icon-narrow unicon-checkmark fw-bold text-primary dark:text-secondary"></i>
  372.                                             <p>Oui</p>
  373.                                         </div>
  374.                                     </div>
  375.                                 </div>
  376.                             </div>
  377.                         </div>
  378.                         <div style="transform: translateY(0px); opacity: 1;">
  379.                             <div class="service-item vstack gap-2 p-1 rounded-2 border dark:text-white">
  380.                                 <div class="hstack gap-2 p-2 bg-secondary dark:bg-white dark:bg-opacity-5 rounded-1-5">
  381.                                     <img class="w-40px" src="/images/linkedin.png" alt="feature-icon" data-uc-svg="">
  382.                                     <h3 class="title h5 xl:h4 m-0">2e. LinkedIn</h3>
  383.                                 </div>
  384.                                 <div class="uc-list uc-list-divider fs-7 xl:fs-6 text-muted px-2 pb-1">
  385.                                     <div class="panel">
  386.                                         <div style="font-size:16px !important;">Publication d'offres</div>
  387.                                         <div class="hstack items-center gap-1 py-narrow">
  388.                                             <i class="icon-narrow unicon-checkmark fw-bold text-warning"></i>
  389.                                             <p>Limité</p>
  390.                                         </div>
  391.                                     </div>
  392.                                     <div class="panel">
  393.                                         <div style="font-size:16px !important;">Prix moyen</div>
  394.                                         <div class="hstack items-center gap-1 py-narrow">
  395.                                             <i class="fa-solid fa-times fw-bold text-danger"></i>
  396.                                             <p>7 290 € / an</p>
  397.                                         </div>
  398.                                     </div>
  399.                                     <div class="panel">
  400.                                         <div style="font-size:16px !important;">Limites d'utilisation liées au contact des candidats</div>
  401.                                         <div class="hstack items-center gap-1 py-narrow">
  402.                                             <i class="icon-narrow unicon-checkmark fw-bold text-warning"></i>
  403.                                             <p>Limité</p>
  404.                                         </div>
  405.                                     </div>
  406.                                     <div class="panel">
  407.                                         <div style="font-size:16px !important;">Diffusion continue sans interruption</div>
  408.                                         <div class="hstack items-center gap-1 py-narrow">
  409.                                             <i class="icon-narrow unicon-checkmark fw-bold text-warning"></i>
  410.                                             <p>Limité</p>
  411.                                         </div>
  412.                                     </div>
  413.                                     <div class="panel">
  414.                                         <div style="font-size:16px !important;">Messagerie interne intégrée</div>
  415.                                         <div class="hstack items-center gap-1 py-narrow">
  416.                                             <i class="icon-narrow unicon-checkmark fw-bold text-primary"></i>
  417.                                             <p>Oui</p>
  418.                                         </div>
  419.                                     </div>
  420.                                 </div>
  421.                             </div>
  422.                         </div>
  423.                         <div style="transform: translateY(0px); opacity: 1;">
  424.                             <div class="service-item vstack gap-2 p-1 rounded-2 border dark:text-white">
  425.                                 <div class="hstack gap-2 p-2 bg-secondary dark:bg-white dark:bg-opacity-5 rounded-1-5">
  426.                                     <img class="w-40px" src="/images/indeed.png" alt="feature-icon" data-uc-svg="">
  427.                                     <h3 class="title h5 xl:h4 m-0">3e. Indeed</h3>
  428.                                 </div>
  429.                                 <div class="uc-list uc-list-divider fs-7 xl:fs-6 text-muted px-2 pb-1">
  430.                                     <div class="panel">
  431.                                         <div style="font-size:16px !important;">Publication d'offres</div>
  432.                                         <div class="hstack items-center gap-1 py-narrow">
  433.                                             <i class="icon-narrow unicon-checkmark fw-bold text-warning"></i>
  434.                                             <p>Limité</p>
  435.                                         </div>
  436.                                     </div>
  437.                                     <div class="panel">
  438.                                         <div style="font-size:16px !important;">Prix moyen</div>
  439.                                         <div class="hstack items-center gap-1 py-narrow">
  440.                                             <i class="fa-solid fa-times fw-bold text-danger"></i>
  441.                                             <p>3 840 € / an</p>
  442.                                         </div>
  443.                                     </div>
  444.                                     <div class="panel">
  445.                                         <div style="font-size:16px !important;">Limites d'utilisation liées au contact des candidats</div>
  446.                                         <div class="hstack items-center gap-1 py-narrow">
  447.                                             <i class="icon-narrow unicon-checkmark fw-bold text-warning"></i>
  448.                                             <p>Limité</p>
  449.                                         </div>
  450.                                     </div>
  451.                                     <div class="panel">
  452.                                         <div style="font-size:16px !important;">Diffusion continue sans interruption</div>
  453.                                         <div class="hstack items-center gap-1 py-narrow">
  454.                                             <i class="icon-narrow unicon-checkmark fw-bold text-warning"></i>
  455.                                             <p>Limité</p>
  456.                                         </div>
  457.                                     </div>
  458.                                     <div class="panel">
  459.                                         <div style="font-size:16px !important;">Messagerie interne intégrée</div>
  460.                                         <div class="hstack items-center gap-1 py-narrow">
  461.                                             <i class="fa-solid fa-times fw-bold text-danger"></i>
  462.                                             <p>Non</p>
  463.                                         </div>
  464.                                     </div>
  465.                                 </div>
  466.                             </div>
  467.                         </div>
  468.                     </div>
  469.                 </div>
  470.             </div>
  471.         </div>
  472.     </div>
  474.     <div id="cta" class="cta section panel overflow-hidden">
  475.         <div class="section-outer panel">
  476.             <div class="container max-w-xl">
  477.                 <div class="section-inner panel overflow-hidden rounded xl:rounded-2 px-2 sm:px-0 py-4 sm:py-6 xl:py-9 bg-secondary dark:bg-gray-800">
  478.                     <div class="vstack items-center gap-2 max-w-400px lg:max-w-600px mx-auto text-center">
  479.                         <h2 class="h3 sm:h1 xl:display-6 m-0">Prêt à rencontrer vos futurs talents ?</h2>
  480.                         <p class="fs-6 sm:fs-5 text-dark dark:text-white text-opacity-70">Réservez une démo gratuite de 30 min et découvrez comment Whileresume transforme votre recrutement.</p>
  481.                         <a href="#register" class="btn btn-md h-48px lg:h-56px min-w-150px btn-primary text-white mt-2">
  482.                             <span>Réserver ma démo gratuite</span>
  483.                             <i class="icon icon-1 unicon-arrow-up-right"></i>
  484.                         </a>
  485.                     </div>
  486.                 </div>
  487.             </div>
  488.         </div>
  489.     </div>
  491.     <div id="pricing" class="pricing-tiers section panel overflow-hidden">
  492.                     <div class="section-outer panel" style="margin-bottom:100px; margin-top:50px;">
  493.                         <div class="container max-w-lg">
  494.                             <div class="section-inner panel">
  495.                                 <div class="panel vstack items-center gap-4 sm:gap-6 xl:gap-8">
  496.                                     <div class="heading panel vstack items-center gap-2 xl:gap-3 text-center">
  497.                                         <h2 class="h4 lg:h3 m-0">Nos offres</h2>
  498.                                         <p class="fs-6 xl:fs-5 text-dark dark:text-white text-opacity-70">Nos solutions sont conçues pour répondre aux besoins de votre type d'entreprise</p>
  499.                                     </div>
  500.                                     <div class="panel w-100 lg:max-w-900px border rounded-3 overflow-hidden">
  501.                                         <div class="row child-cols-12 sm:child-cols-6 col-match justify-between g-0">
  502.                                          {#   <div>
  503.                                                 <div class="tier panel vstack gap-2 xl:gap-4 px-3 py-4 sm:p-4 lg:p-6 rounded-0">
  504.                                                     <span class="position-absolute top-0 ltr:end-0 rtl:start-0 d-inline-flex py-narrow px-1 bg-primary rounded-1 fs-7 text-white fw-medium" style="margin-top:15px;">Populaire</span>
  505.                                                     <div class="panel">
  506.                                                         <h3 class="title h5 sm:h4 dark:text-white">Essentiel</h3>
  507.                                                         <p class="desc dark:text-whiteopacity-70 dark:opacity-80">
  508.                                                             Pour un recrutement saisonnier
  509.                                                         </p>
  510.                                                     </div>
  511.                                                     <div class="panel">
  512.                                                         <div class="panel vstack gap-narrow">
  513.                                                             <h5 class="title h3 sm:h2 m-0 dark:text-white">€0 <span style="text-decoration: line-through; color:slategrey;">€120</span> EUR</h5>
  514.                                                             <span class="fs-7 opacity-70">HT/mois par utilisateur</span>
  515.                                                             <div class="vstack gap-1 justify-center text-center mt-3">
  516.                                                                 <a href="#register" class="btn btn-md sm:btn-sm lg:btn-md btn-primary text-white">Gratuit pendant la béta test</a>
  517.                                                                 <span class="fs-7 opacity-70 min-h-24px">Sans engagement</span>
  518.                                                             </div>
  519.                                                         </div>
  520.                                                     </div>
  521.                                                     <div class="panel">
  522.                                                         <div class="panel vstack gap-2">
  523.                                                             <span class="fs-6 fw-bold dark:text-white">Fonctionnalités :</span>
  524.                                                             <div class="hstack gap-1 fs-7">
  525.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  526.                                                                 <span>Application mobile friendly</span>
  527.                                                             </div>
  528.                                                             <div class="hstack gap-1 fs-7">
  529.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  530.                                                                 <span>Filtres des candidats</span>
  531.                                                             </div>
  532.                                                             <div class="hstack gap-1 fs-7">
  533.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  534.                                                                 <span>Discussions instantanée</span>
  535.                                                             </div>
  536.                                                             <div class="hstack gap-1 fs-7">
  537.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  538.                                                                 <span>Notifications mails</span>
  539.                                                             </div>
  540.                                                             <div class="hstack gap-1 fs-7">
  541.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  542.                                                                 <span>Convertissez un CV en CV anonyme</span>
  543.                                                             </div>
  544.                                                             <div class="hstack gap-1 fs-7">
  545.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  546.                                                                 <span>Votre entreprise dans notre annuaire</span>
  547.                                                             </div>
  548.                                                             <div class="hstack gap-1 fs-7">
  549.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  550.                                                                 <span>Support 48H</span>
  551.                                                             </div>
  552.                                                         </div>
  553.                                                     </div>
  554.                                                 </div>
  555.                                             </div>
  556.                                             #}
  557.                                             <div>
  558.                                                 <div class="tier panel vstack gap-2 xl:gap-4 px-3 py-4 sm:p-4 lg:p-6 rounded-0 bg-secondary dark:bg-gray-800">
  559.                                                     <span class="position-absolute top-0 ltr:end-0 rtl:start-0 d-inline-flex py-narrow px-1 bg-primary rounded-1 fs-7 text-white fw-medium" style="margin-top:15px;">Populaire</span>
  560.                                                     <div class="panel">
  561.                                                         <h3 class="title h5 sm:h4 dark:text-white">Business</h3>
  562.                                                         <p class="desc dark:text-whiteopacity-70 dark:opacity-80">Boostez votre recrutement à grande échelle</p>
  563.                                                     </div>
  564.                                                     <div class="panel">
  565.                                                         <div class="panel vstack gap-narrow">
  566.                                                             <h5 class="title h3 sm:h2 m-0 dark:text-white">1200€ <span style="text-decoration: line-through; color:slategrey;">1500</span> EUR</h5>
  567.                                                             <span class="fs-7 opacity-70">HT/année par utilisateur &nbsp; &nbsp; -20% d'économie sur l'année</span>
  568.                                                             <div class="vstack gap-1 justify-center text-center mt-3">
  569.                                                                 <a href="#register" class="btn btn-md sm:btn-sm lg:btn-md btn-primary text-white">Souscrire</a>
  570.                                                                 <span class="fs-7 opacity-70 min-h-24px">Engagement 12 mois</span>
  571.                                                             </div>
  572.                                                         </div>
  573.                                                     </div>
  574.                                                     <div class="panel">
  575.                                                         <div class="panel vstack gap-2">
  576.                                                             <span class="fs-6 fw-bold dark:text-white">Fonctionnalités :</span>
  577.                                                             <div class="hstack gap-1 fs-7">
  578.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  579.                                                                 <span>Application iOS</span>
  580.                                                             </div>
  581.                                                             <div class="hstack gap-1 fs-7">
  582.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  583.                                                                 <span>Application Android</span>
  584.                                                             </div>
  585.                                                             <div class="hstack gap-1 fs-7">
  586.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  587.                                                                 <span>Offre d'emploi illimités</span>
  588.                                                             </div>
  589.                                                             <div class="hstack gap-1 fs-7">
  590.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  591.                                                                 <span>Assistant d'offre d'emploi</span>
  592.                                                             </div>
  593.                                                             <div class="hstack gap-1 fs-7">
  594.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  595.                                                                 <span>Discussions instantanée</span>
  596.                                                             </div>
  597.                                                             <div class="hstack gap-1 fs-7">
  598.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  599.                                                                 <span>Votre entreprise dans notre annuaire</span>
  600.                                                             </div>
  601.                                                             <div class="hstack gap-1 fs-7">
  602.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  603.                                                                 <span>Support 24H</span>
  604.                                                             </div>
  605.                                                         </div>
  606.                                                     </div>
  607.                                                 </div>
  608.                                             </div>
  609.                                             <div>
  610.                                                 <div class="tier panel vstack gap-2 xl:gap-4 px-3 py-4 sm:p-4 lg:p-6 rounded-0">
  611.                                                     <div class="panel">
  612.                                                         <h3 class="title h5 sm:h4 dark:text-white">Premium+</h3>
  613.                                                         <p class="desc dark:text-whiteopacity-70 dark:opacity-80">
  614.                                                             Pour une grande entrerprise
  615.                                                         </p>
  616.                                                     </div>
  617.                                                     <div class="panel">
  618.                                                         <div class="panel vstack gap-narrow">
  619.                                                             <h5 class="title h3 sm:h2 m-0 dark:text-white">Sur devis</h5>
  620.                                                         </div>
  621.                                                     </div>
  622.                                                     <div class="panel">
  623.                                                         <div class="panel vstack gap-2">
  624.                                                             <span class="fs-6 fw-bold dark:text-white">Fonctionnalités :</span>
  625.                                                             <div class="hstack gap-1 fs-7">
  626.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  627.                                                                 <span>Application iOS</span>
  628.                                                             </div>
  629.                                                             <div class="hstack gap-1 fs-7">
  630.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  631.                                                                 <span>Application Android</span>
  632.                                                             </div>
  633.                                                             <div class="hstack gap-1 fs-7">
  634.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  635.                                                                 <span>Offre d'emploi illimités</span>
  636.                                                             </div>
  637.                                                             <div class="hstack gap-1 fs-7">
  638.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  639.                                                                 <span>Utilisateurs illimités</span>
  640.                                                             </div>
  641.                                                             <div class="hstack gap-1 fs-7">
  642.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  643.                                                                 <span>Assistant d'offre d'emploi</span>
  644.                                                             </div>
  645.                                                             <div class="hstack gap-1 fs-7">
  646.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  647.                                                                 <span>Moteur de recherche avancée</span>
  648.                                                             </div>
  649.                                                             <div class="hstack gap-1 fs-7">
  650.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  651.                                                                 <span>Discussions instantanée</span>
  652.                                                             </div>
  653.                                                             <div class="hstack gap-1 fs-7">
  654.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  655.                                                                 <span>Notifications mails</span>
  656.                                                             </div>
  657.                                                             <div class="hstack gap-1 fs-7">
  658.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  659.                                                                 <span>Votre entreprise dans notre annuaire</span>
  660.                                                             </div>
  661.                                                             <div class="hstack gap-1 fs-7">
  662.                                                                 <i class="cstack w-16px h-16px bg-primary text-white rounded-circle unicon-checkmark fw-bold"></i>
  663.                                                                 <span>Support 24H</span>
  664.                                                             </div>
  665.                                                         </div>
  666.                                                     </div>
  667.                                                 </div>
  668.                                             </div>
  669.                                         </div>
  670.                                     </div>
  671.                                 </div>
  672.                             </div>
  673.                         </div>
  674.                     </div>
  675.                 </div>
  677.     <div id="about-team" class="clients-feedbacks section panel overflow-hidden swiper-parent">
  678.                     <div class="section-outer panel overflow-hidden pb-6 sm:pb-8 xl:pb-10">
  679.                         <div class="container">
  680.                             <div class="section-inner panel" data-anime="onview: -200; targets: &gt;*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 200});">
  681.                                 <div class="section-heading panel vstack items-center gap-2 xl:gap-3 mb-6 max-w-700px mx-auto text-center" style="transform: translateY(0px); opacity: 1;">
  682.                                     <h2 class="h4 lg:h3 m-0">Qui sommes-nous ?</h2>
  683.                                 </div>
  684.                                 <div class="section-content panel" style="transform: translateY(0px); opacity: 1;">
  685.                                     <div class="swiper overflow-unset swiper-initialized swiper-horizontal swiper-watch-progress swiper-backface-hidden" data-uc-swiper="items: 1.05; gap: 8; center: true; active: 1; dots: .swiper-pagination;" data-uc-swiper-s="items: 1.2; gap: 16;" data-uc-swiper-m="items: 1.3; gap: 16;" data-uc-swiper-l="items: 1.5; gap: 32;">
  686.                                         <div class="swiper-wrapper items-center" id="swiper-wrapper-52846922df4bcdaa" aria-live="polite" style="transition-duration: 0ms; transition-delay: 0ms; transform: translate3d(-660px, 0px, 0px);">
  687.                                             <div class="swiper-slide swiper-slide-visible swiper-slide-prev" role="group" aria-label="1 / 3" style="width: 848px; margin-right: 32px;">
  688.                                                 <div class="clients-item panel overflow-hidden rounded-2 xl:rounded-3 border border-1 bg-white dark:bg-opacity-5 dark:text-white">
  689.                                                     <div class="row child-cols-12 sm:child-cols-6 g-0 col-match">
  690.                                                         <div>
  691.                                                             <div class="clients-item-video panel">
  692.                                                                 <figure class="clients-item-video panel ratio ratio-1x1 overflow-hidden h-100">
  693.                                                                     <img class="image media-cover" src="/uploads/sylvaindieterle.jpeg" alt="Sylvain DIETERLE">
  694.                                                                 </figure>
  695.                                                             </div>
  696.                                                         </div>
  697.                                                         <div>
  698.                                                             <div class="clients-item-content panel vstack justify-between gap-3 xl:gap-4 p-3 lg:p-4 xl:p-6">
  699.                                                                 <div>
  700.                                                                     <p class="desc fs-6 sm:fs-7 lg:fs-5 lh-xxl text-gray dark:text-gray-100">
  701.                                                                         Double diplômé en Marketing Digital et Développement Informatique, Sylvain conjugue vision stratégique et excellence technique depuis plus de 10 ans. À la tête de Mirtillo, il conçoit des expériences digitales sur mesure pour startups et entreprises en transformation : applications web & mobile, plateformes intelligentes, stratégies de croissance.
  702.                                                                     </p>
  704.                                                                     {#
  705.                                                                     <p class="desc fs-6 sm:fs-7 lg:fs-5 lh-xxl text-gray dark:text-gray-100">
  706.                                                                         Passionné par l'IA et l'innovation produit, il co-pilote aujourd'hui Whileresume, une solution qui réinvente le recrutement grâce à la technologie. Son credo ? Créer des outils intuitifs, performants et à impact, là où tech et humain se rencontrent.
  707.                                                                     </p>
  708.                                                                     #}
  710.                                                                     <p class="desc fs-6 sm:fs-7 lg:fs-5 lh-xxl text-gray dark:text-gray-100" style="margin-bottom:60px;">
  711.                                                                         <strong>Stack mentale :</strong> Vision produit • Architecture technique • Growth mindset • IA & automation
  712.                                                                     </p>
  713.                                                                 </div>
  714.                                                                 <div>
  715.                                                                     <h4 class="title h6 lg:h5 mb-0 lg:mb-narrow text-inherit">Sylvain, 34ans</h4>
  716.                                                                     <span class="fs-7 lg:fs-6 text-gray-300 dark:text-gray-200"> Fondateur & Architecte Digital chez Mirtillo</span>
  717.                                                                 </div>
  718.                                                             </div>
  719.                                                         </div>
  720.                                                     </div>
  721.                                                 </div>
  722.                                             </div>
  723.                                             <div class="swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" role="group" aria-label="2 / 3" style="width: 848px; margin-right: 32px;">
  724.                                                 <div class="clients-item panel overflow-hidden rounded-2 xl:rounded-3 border border-1 bg-white dark:bg-opacity-5 dark:text-white">
  725.                                                     <div class="row child-cols-12 sm:child-cols-6 g-0 col-match">
  726.                                                         <div>
  727.                                                             <div class="clients-item-video panel">
  728.                                                                 <figure class="clients-item-video panel ratio ratio-1x1 overflow-hidden h-100">
  729.                                                                     <img class="image media-cover" src="/uploads/keithshema.jpeg" alt="Keith SHEMA">
  730.                                                                 </figure>
  731.                                                             </div>
  732.                                                         </div>
  733.                                                         <div>
  734.                                                             <div class="clients-item-content panel vstack justify-between gap-3 xl:gap-4 p-3 lg:p-4 xl:p-6">
  735.                                                                 <div>
  737.                                                                     <p class="desc fs-6 sm:fs-7 lg:fs-5 lh-xxl text-gray dark:text-gray-100">
  738.                                                                         Diplômé d'un Master en Droit, Keith évolue depuis 7 ans dans l'univers du recrutement de talents d'exception. Après ses armes en cabinet réputé, il fonde Holyfield & Partners il y a 5 ans : une boutique de chasse de têtes spécialisée dans les profils juridiques premium. Sa mission ? Connecter grands groupes et cabinets d'avocats internationaux avec les meilleurs talents, grâce à une approche sur mesure et data-driven.
  739.                                                                     </p>
  741.                                                                     {#
  742.                                                                     <p class="desc fs-6 sm:fs-7 lg:fs-5 lh-xxl text-gray dark:text-gray-100">
  743.                                                                         Entrepreneur convaincu que la tech doit servir l'humain, il réinvente aujourd'hui le matching talent-entreprise en alliant exigence, performance et innovation RH.
  744.                                                                     </p>
  745.                                                                     #}
  747.                                                                     <p class="desc fs-6 sm:fs-7 lg:fs-5 lh-xxl text-gray dark:text-gray-100">
  748.                                                                         <strong>Stack mentale :</strong> Executive search • Legal expertise • Data-driven recruitment • Innovation RH
  749.                                                                     </p>
  752.                                                                 </div>
  753.                                                                 <div>
  754.                                                                     <h4 class="title h6 lg:h5 mb-0 lg:mb-narrow text-inherit">Keith, 32 ans</h4>
  755.                                                                     <span class="fs-7 lg:fs-6 text-gray-300 dark:text-gray-200">Fondateur & CEO d'Holyfield & Partners</span>
  756.                                                                 </div>
  757.                                                             </div>
  758.                                                         </div>
  759.                                                     </div>
  760.                                                 </div>
  761.                                             </div>
  762.                                         </div>
  763.                                         <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
  764.                                 </div>
  765.                                 <div class="section-footer panel mt-6 sm:mt-6 h-8px" style="transform: translateY(0px); opacity: 1;">
  766.                                     <div class="swiper-pagination position-absolute bottom-0 text-primary dark:text-quaternary m-0 justify-center swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
  767.                                 </div>
  768.                             </div>
  769.                         </div>
  770.                     </div>
  771.                 </div>
  773.     <div id="faq" class="faq section panel" style="margin-top:100px; margin-bottom:100px;">
  774.                     <div class="section-outer panel">
  775.                         <div class="container">
  776.                             <div class="section-inner panel">
  777.                                 <div class="row child-cols-12 col-match gy-2 lg:gy-6">
  778.                                     <div>
  779.                                         <div class="vstack items-center text-center gap-2">
  780.                                             <h2 class="h4 lg:h3 m-0">Comment ça marche ?</h2>
  781.                                         </div>
  782.                                     </div>
  783.                                     <div>
  784.                                         <div class="panel">
  785.                                             <ul class="uc-accordion gap-1 max-w-850px mx-auto" data-uc-accordion="targets: > li; multiple: false;">
  786.                                                 <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  787.                                                     <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Puis-je filtrer les CV ?</a>
  788.                                                     <div class="uc-accordion-content lg:fs-5 opacity-70">
  789.                                                         <p>Oui, notre plateforme dispose d'un système de recherche avancé spécialement conçu pour faciliter votre recrutement. Vous pouvez filtrer les candidats selon de nombreux critères : compétences spécifiques, années d'expérience, localisation géographique, niveau d'études, type de contrat souhaité, disponibilité, et bien d'autres. Ces filtres précis vous permettent d'identifier rapidement les profils qui correspondent exactement à vos besoins, sans perdre de temps à parcourir des CV non pertinents.</p>
  790.                                                     </div>
  791.                                                 </li>
  792.                                                 <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  793.                                                     <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Comment contacter les candidats ?</a>
  794.                                                     <div class="uc-accordion-content lg:fs-5 opacity-70">
  795.                                                         <p>La mise en relation avec les candidats est simple et directe. Une messagerie intégrée à la plateforme vous permet d'entrer en contact avec les candidats qui vous intéressent en toute confidentialité. Vous pouvez également, si le candidat a choisi de partager ses coordonnées, le joindre directement par mail ou par téléphone. Cette flexibilité vous permet de choisir le mode de communication le plus adapté à chaque situation et d'établir un contact rapide avec vos futurs talents.</p>
  796.                                                     </div>
  797.                                                 </li>
  798.                                                 <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  799.                                                     <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Quels secteurs sont couverts ?</a>
  800.                                                     <div class="uc-accordion-content lg:fs-5 opacity-70">
  801.                                                         <p>Notre CVthèque est volontairement ouverte à tous les secteurs d'activité et à tous types de métiers. Que vous recrutiez dans l'IT, la finance, le marketing, l'industrie, le commerce, la santé, l'éducation ou tout autre domaine, vous trouverez des profils qualifiés. Cette diversité fait la richesse de notre base de données et vous permet de recruter pour n'importe quel poste, du junior au senior, dans tous les secteurs professionnels.</p>
  802.                                                     </div>
  803.                                                 </li>
  804.                                                 <li class="panel p-3 lg:p-4 rounded-1-5 bg-secondary dark:bg-gray-300 dark:bg-opacity-15">
  805.                                                     <a class="uc-accordion-title h6 md:h5 lg:h4 ls-0 fw-bold ltr:pe-4 rtl:ps-4" href="#">Quelle est la différence avec LinkedIn ?</a>
  806.                                                     <div class="uc-accordion-content lg:fs-5 opacity-70">
  807.                                                         <p>Notre CVthèque se distingue fondamentalement de LinkedIn et des job boards classiques par son approche qualitative. Contrairement aux plateformes généralistes où vous devez parcourir des milliers de profils inactifs ou peu engagés, notre base ne présente que des candidats réellement disponibles et prêts à être contactés. La base est qualifiée et régulièrement mise à jour pour garantir la pertinence des profils. Nos filtres précis (compétences, expérience, localisation, disponibilité…) vous permettent d'identifier rapidement les bons profils sans vous noyer dans la masse. La mise en relation est directe, simple et sans intermédiaire, loin du bruit et des distractions des réseaux sociaux professionnels. Vous accédez également à des talents rares, parfois absents des grands réseaux traditionnels. En résumé : plus de pertinence, moins de bruit, et des candidats vraiment ouverts aux opportunités.</p>
  808.                                                     </div>
  809.                                                 </li>
  810.                                             </ul>
  811.                                         </div>
  812.                                     </div>
  813.                                 </div>
  814.                             </div>
  815.                         </div>
  816.                     </div>
  817.                 </div>
  819. {% endblock body %}
  821.                 {% block footerjs %}
  822.                     <script>
  824.                         // Liste des domaines interdits (synchronisée avec PHP)
  825.                         const forbiddenDomains = [
  826.                             'gmail.com', 'yahoo.com', 'yahoo.fr', 'hotmail.com', 'hotmail.fr',
  827.                             'outlook.com', 'outlook.fr', 'live.com', 'live.fr', 'aol.com',
  828.                             'free.fr', 'orange.fr', 'wanadoo.fr', 'laposte.net', 'sfr.fr',
  829.                             'bbox.fr', 'icloud.com', 'me.com', 'protonmail.com', 'tutanota.com'
  830.                         ];
  832.                         // Domaines temporaires également interdits
  833.                         const tempDomains = [
  834.                             'tempmail.org', '10minutemail.com', 'guerrillamail.com',
  835.                             'mailinator.com', 'yopmail.com'
  836.                         ];
  838.                         // Fonction principale de validation
  839.                         function validateProfessionalEmail(email) {
  840.                             // Validation basique du format
  841.                             const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  842.                             if (!emailRegex.test(email)) {
  843.                                 return {
  844.                                     valid: false,
  845.                                     message: 'Format d\'email invalide'
  846.                                 };
  847.                             }
  849.                             // Extraction du domaine
  850.                             const domain = email.split('@')[1]?.toLowerCase().trim();
  851.                             if (!domain) {
  852.                                 return {
  853.                                     valid: false,
  854.                                     message: 'Domaine email manquant'
  855.                                 };
  856.                             }
  858.                             // Vérification des domaines interdits
  859.                             if ($.inArray(domain, forbiddenDomains) !== -1) {
  860.                                 return {
  861.                                     valid: false,
  862.                                     message: 'Les adresses personnelles ne sont pas autorisées. Utilisez votre email professionnel.'
  863.                                 };
  864.                             }
  866.                             // Vérification des domaines temporaires
  867.                             if ($.inArray(domain, tempDomains) !== -1) {
  868.                                 return {
  869.                                     valid: false,
  870.                                     message: 'Les adresses temporaires ne sont pas autorisées.'
  871.                                 };
  872.                             }
  874.                             // Vérifications supplémentaires
  875.                             if (domain.length < 4 || domain.indexOf('.') === -1) {
  876.                                 return {
  877.                                     valid: false,
  878.                                     message: 'Domaine email invalide'
  879.                                 };
  880.                             }
  882.                             return {
  883.                                 valid: true,
  884.                                 message: '✅ Adresse email professionnelle valide !'
  885.                             };
  886.                         }
  889.             function updateEmailField($input, isValid, message) {
  890.                 const $messageDiv = $('#emailMessage');
  891.                 const $submitBtn = $('#submitBtn');
  893.                 // Suppression des classes précédentes
  894.                 $input.removeClass('email-valid email-invalid');
  895.                 $messageDiv.removeClass('success error');
  897.                 if ($input.val().trim() === '') {
  898.                     // Champ vide - masquer le message et remettre l'état par défaut
  899.                     $messageDiv.addClass('hidden').text('');
  900.                     $submitBtn.prop('disabled', true);
  901.                     return;
  902.                 }
  904.                 // Afficher le message (enlever la classe hidden)
  905.                 $messageDiv.removeClass('hidden');
  907.                 if (isValid) {
  908.                     // Email valide
  909.                     $input.addClass('email-valid');
  910.                     $messageDiv.addClass('success').text(message);
  911.                     $submitBtn.prop('disabled', false);
  912.                 } else {
  913.                     // Email invalide
  914.                     $input.addClass('email-invalid');
  915.                     $messageDiv.addClass('error').text('❌ ' + message);
  916.                     $submitBtn.prop('disabled', true);
  917.                 }
  918.             %}
  920.                         // Affichage des domaines interdits
  921.                         $.each(forbiddenDomains, function(index, domain) {
  922.                             $('#domainsList').append(
  923.                                 $('<span>').addClass('domain-tag').text(domain)
  924.                             );
  925.                         });
  927.                         // Validation en temps réel
  928.                         $('#users_email').on('input', function() {
  929.                             const email = $(this).val().trim();
  930.                             const result = validateProfessionalEmail(email);
  931.                             updateEmailField($(this), result.valid, result.message);
  932.                         });
  934.                         // Validation au focus perdu
  935.                         $('#users_email').on('blur', function() {
  936.                             const email = $(this).val().trim();
  937.                             if (email) {
  938.                                 const result = validateProfessionalEmail(email);
  939.                                 updateEmailField($(this), result.valid, result.message);
  940.                             }
  941.                         });
  943.                         // Soumission du formulaire
  944.                         $('#emailForm').on('submit', function(e) {
  945.                             e.preventDefault();
  947.                             const email = $('#users_email').val().trim();
  948.                             const result = validateProfessionalEmail(email);
  950.                             if (result.valid) {
  951.                                 // Ici vous pouvez envoyer les données au serveur PHP avec AJAX
  952.                                 $.ajax({
  953.                                     url: 'votre-script.php',
  954.                                     method: 'POST',
  955.                                     data: { email: email },
  956.                                     success: function(response) {
  957.                                         alert('Inscription réussie !');
  958.                                         console.log('Réponse serveur:', response);
  959.                                     },
  960.                                     error: function(xhr, status, error) {
  961.                                         alert('Erreur lors de l\'inscription: ' + xhr.responseText);
  962.                                     }
  963.                                 });
  964.                             } else {
  965.                                 updateEmailField($('#users_email'), false, result.message);
  966.                             }
  967.                         });
  969.                     </script>
  970.                 {% endblock footerjs %}