templates/themesWebsite/cvs/website/homepage.html.twig line 1

Open in your IDE?
  1. {% extends 'themesWebsite/blog_cvs/base.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 "/themesWebsite/blog_cpn/components/socialmedia.html.twig" with { 'page':page,'social_type':'website' } %}{% endblock meta_social %}
  8. {% block meta %}{{ parent() }}{% include "/themesWebsite/blog_cpn/components/author.html.twig" with {'page':page } %}{% endblock meta %}
  10. {% block body %}
  11.     <div class="image-cover hero-header gray-simple pb-lg-5 pb-0">
  12.         <div class="container d-flex flex-column justify-content-center position-relative zindex-2 pt-sm-3 pt-md-4 pt-xl-5">
  14.             <div class="row justify-content-between align-items-center">
  15.                 <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 pe-xl-4 pe-lg-3">
  16.                     <h6 class="text-primary bg-light-primary py-2 px-3 rounded-5 fw-medium d-inline-flex align-items-center mb-3">
  17.                         <span class="primary-2-bg w-5 h-05 me-2"></span>
  18.                         Postulez autrement en transformant vos candidatures
  19.                     </h6>
  20.                     <h1 class="mb-4">
  21.                         Un CV anonyme, l'arme secrète pour révéler votre véritable potentiel
  22.                     </h1>
  24.                     <p class="fs-5">Mentionnez l'adresse e-mail du recruteur ou du responsable RH et laissez votre CV anonyme faire le reste.</p>
  26.                     <p class="fs-5"><i class="fa fa-circle" style="font-size:10px;"></i> Mettez votre expérience en avant, sans qu'aucun préjugé ne vienne fausser la première impression.</p>
  29.                     <div class="d-flex align-items-center mt-5">
  31.                         {% if app.user is null %}
  32.                         <div class="position-relative">
  33.                             <a href="#avantages" class="btn btn-primary fw-medium px-4">Avantages</a>
  34.                         </div>
  35.                         <div class="position-relative ms-4">
  36.                             ou &nbsp; &nbsp;
  37.                             <a href="{{ path('cvs_website_homepage_recruiter') }}" class="fw-medium">
  38.                                Je suis recruteur
  39.                             </a>
  40.                         </div>
  41.                         {% else %}
  43.                                 <div class="position-relative">
  44.                                     <a href="#metiers" class="btn btn-primary fw-medium px-4">
  45.                                         Explorer les métiers
  46.                                     </a>
  47.                                 </div>
  48.                                 <div class="position-relative ms-4">
  49.                                     ou &nbsp; &nbsp;
  50.                                     <a href="{{ path('cvs_website_customer_deposer_un_cv') }}" class="fw-medium">
  51.                                         Déposer mon CV
  52.                                     </a>
  53.                                 </div>
  55.                         {% endif %}
  56.                     </div>
  58.                     <div class="d-block mt-5 mb-5">
  59.                         <div class="exs-los mb-4">
  60.                             <h6 class="fw-medium">Soutenu par</h6>
  61.                         </div>
  62.                         <div class="row align-items-center justify-content-start row-cols-xl-5 row-cols-lg-5 row-cols-md-3 row-cols-3 gx-4 gy-3">
  63.                             <div class="col ps-0">
  64.                                 <figure class="single-brand thumb-figure">
  65.                                     <a href="https://mirtillo.fr/" target="_blank">
  66.                                         <img src="/uploads/logo-mirtillo.png" class="img-fluid" alt="Mirtillo" loading="lazy" />
  67.                                     </a>
  68.                                 </figure>
  69.                             </div>
  70.                             <div class="col ps-0">
  71.                                 <figure class="single-brand thumb-figure">
  72.                                     <a href="https://whileproject.com/" target="_blank">
  73.                                     <img src="/uploads/logo-whileproject.png" style="width: 200px; height:40px;" alt="Whileproject" loading="lazy" />
  74.                                     </a>
  75.                                 </figure>
  76.                             </div>
  77.                         </div>
  78.                     </div>
  79.                 </div>
  80.                 <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 d-xl-none">
  81.                     <img src="/uploads/person-04.png" class="img-fluid" loading="lazy">
  82.                 </div>
  83.             </div>
  85.         </div>
  86.         <div class="d-xl-block d-lg-none d-none position-absolute end-0 bottom-0 pe-5">
  87.             <div class="square--80 circle bg-white shadow position-absolute start-0 top-0 mt-5 ms-5 animate-bounce">
  88.                 <img src="/uploads/avatar03.png" class="img-fluid" width="80" alt="CV classique" style="border-radius: 40px;">
  89.             </div>
  90.             <div class="square--80 circle bg-white shadow position-absolute end-0 top-0 mt-5 me-5 animate-bounce">
  91.                 <img src="/uploads/no_avatar.png" class="img-fluid" width="80" alt="CV anonyme" style="border-radius: 40px;">
  92.             </div>
  93.             <div class="position-absolute end-0 bottom-0 mb-5 me-5">
  94.                 <div class="d-inline-flex align-items-center py-3 px-3 rounded-2 animate-leftright">
  95.                     <div>
  96.                         <a href="{{ path('cvs_gestion_candidates_generate_coordinates') }}" class="btn btn-primary fw-medium px-4">
  97.                             Déposer mon CV
  98.                         </a>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.             <img src="/uploads/person-04.png" class="img-fluid clios-img" loading="lazy">
  103.         </div>
  104.     </div>
  106.     <section class="primary-bg-dark py-4">
  107.         <div class="container">
  109.             <div class="row align-items-center justify-content-center gx-3 gy-3">
  111.                 <div class="col-xl-3 col-lg-3 col-md-6 col-12">
  112.                     <div class="d-flex align-items-center justify-content-start">
  113.                         <div class="tryui-pos"><h2 class="display-4 fw-medium text-light m-0"><span class="ctr">73</span>%</h2></div>
  114.                         <div class="exploi ps-3">
  115.                             <p class="m-0 text-light lh-base">des entreprises ont utilisé les réseaux sociaux pour au moins un recrutement.</p>
  116.                         </div>
  117.                     </div>
  118.                 </div>
  120.                 <div class="col-xl-3 col-lg-3 col-md-6 col-12">
  121.                     <div class="d-flex align-items-center justify-content-start">
  122.                         <div class="tryui-pos"><h2 class="display-4 fw-medium text-light m-0"><span class="ctr">61</span>%</h2></div>
  123.                         <div class="exploi ps-3">
  124.                             <p class="m-0 text-light lh-base">des recrutements sont jugés "difficiles".</p>
  125.                         </div>
  126.                     </div>
  127.                 </div>
  129.                 <div class="col-xl-3 col-lg-3 col-md-6 col-12">
  130.                     <div class="d-flex align-items-center justify-content-start">
  131.                         <div class="tryui-pos"><h2 class="display-4 fw-medium text-light m-0"><span class="ctr">76</span>%</h2></div>
  132.                         <div class="exploi ps-3">
  133.                             <p class="m-0 text-light lh-base">des recruteurs citent le faible nombre de candidatures reçues comme la difficulté.</p>
  134.                         </div>
  135.                     </div>
  136.                 </div>
  138.                 <div class="col-xl-3 col-lg-3 col-md-6 col-12">
  139.                     <div class="d-flex align-items-center justify-content-start">
  140.                         <div class="tryui-pos"><h2 class="display-4 fw-medium text-light m-0"><span class="ctr">45</span>%</h2></div>
  141.                         <div class="exploi ps-3">
  142.                             <p class="m-0 text-light lh-base">des recruteurs affirment passer le plus de temps sur le tri des candidatures.</p>
  143.                         </div>
  144.                     </div>
  145.                 </div>
  147.             </div>
  149.         </div>
  150.     </section>
  151.     <div class="clearfix"></div>
  153.     <section id="metiers">
  154.         <div class="container">
  156.             <div class="row justify-content-center">
  157.                 <div class="col-xl-6 col-lg-7 col-md-10 text-center">
  158.                     <div class="sec-heading center">
  159.                         <h2>Explorez les métiers</h2>
  160.                     </div>
  161.                 </div>
  162.             </div>
  164.             <div class="row justify-content-center gx-4 gy-4">
  165.                 {% for cat in categories %}
  166.                 <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
  167.                     <div class="card border py-4 px-4 rounded-4 mb-0">
  168.                         <div class="ctrd-icons mb-3">
  169.                             {{ cat.icon|raw }}
  170.                         </div>
  171.                         <div class="ctrd-caps">
  172.                             <h4 class="fs-5"><a href="{{ path('cvs_website_category',{'slug':cat.slug}) }}">{{ cat.title }}</a></h4>
  173.                             <p class="mb-3">{{ cat.description }}</p>
  174.                         </div>
  175.                     </div>
  176.                 </div>
  177.                 {% endfor %}
  178.             </div>
  180.         </div>
  181.     </section>
  183.     <section style="margin:0;">
  184.         <div class="container">
  185.             <div class="upload-box">
  186.                 <div class="filedrop_box">
  187.                     <header>
  188.                         <h4>Lancez la création de votre CV anonyme</h4>
  189.                     </header>
  190.                     <p>Créez gratuitement votre CV anonyme et entamez la discussion avec les recruteurs et entreprises.</p>
  191.                     <a href="{{ path('cvs_website_customer_deposer_un_cv') }}" class="btn btn-md btn-primary fw-medium rounded-1">Commencer</a>
  192.                 </div>
  193.             </div>
  194.         </div>
  195.     </section>
  197.     <section id="avantages">
  198.         <div class="container">
  200.             <div class="row justify-content-center">
  201.                 <div class="col-xl-6 col-lg-7 col-md-10">
  202.                     <div class="sec-heading center">
  203.                         <h2>Avantages d'un CV anonyme</h2>
  204.                         <p>Un CV anonyme présente de nombreux avantages, tant pour les recruteurs que pour les candidats, en contribuant à une démarche de recrutement plus équitable et objective.</p>
  205.                     </div>
  206.                 </div>
  207.             </div>
  209.             <div class="row justify-content-center gx-xl-4 gx-lg-4">
  211.                 <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1">
  212.                     <div class="work-process mb-5">
  213.                         <div class="work-process-caption">
  214.                             <h4>En tant que recruteur</h4>
  215.                         </div>
  216.                     </div>
  218.                     <div class="work-process mb-5">
  219.                         <div class="work-process-icon"><span><i class="fa-solid fa-file-shield text-primary"></i></span></div>
  220.                         <div class="work-process-caption">
  221.                             <h4>Moins de biais</h4>
  222.                             <p>Avec le CV anonyme, seuls vos compétences comptent, ce qui limite les jugements non conscients.</p>
  223.                         </div>
  224.                     </div>
  226.                     <div class="work-process mb-5">
  227.                         <div class="work-process-icon"><span><i class="fa-solid fa-paste text-primary"></i></span></div>
  228.                         <div class="work-process-caption">
  229.                             <h4>Plus de diversité</h4>
  230.                             <p>En se concentrant sur le mérite, on encourage une diversité accrue parmi les candidats.</p>
  231.                         </div>
  232.                     </div>
  234.                     <div class="work-process mb-5">
  235.                         <div class="work-process-icon"><span><i class="fa-solid fa-unlock text-primary"></i></span></div>
  236.                         <div class="work-process-caption">
  237.                             <h4>Image d'équité</h4>
  238.                             <p>Renforcez la réputation de votre entreprise en tant qu'employeur équitable et inclusif.</p>
  239.                         </div>
  240.                     </div>
  242.                     <div class="work-process">
  243.                         <div class="work-process-icon"><span><i class="fa-solid fa-user-clock text-primary"></i></span></div>
  244.                         <div class="work-process-caption">
  245.                             <h4>Choix plus juste</h4>
  246.                             <p>Le CV anonyme aide à sélectionner les candidats les plus compétents sans préjugés.</p>
  247.                         </div>
  248.                     </div>
  249.                 </div>
  251.                 <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-2 order-lg-3 order-md-3">
  252.                     <div class="eslio-pincc m-auto">
  253.                         <img src="/uploads/phone-02.png" class="img-fluid" alt="">
  254.                     </div>
  255.                 </div>
  257.                 <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 order-xl-3 order-lg-2 order-md-2">
  258.                     <div class="work-process mb-5">
  259.                         <div class="work-process-caption">
  260.                             <h4>En tant que candidat</h4>
  261.                         </div>
  262.                     </div>
  264.                     <div class="work-process mb-5">
  265.                         <div class="work-process-icon"><span><i class="fa-solid fa-laptop-file text-primary"></i></span></div>
  266.                         <div class="work-process-caption">
  267.                             <h4>Égalité des chances</h4>
  268.                             <p>Soyez évalué uniquement sur vos compétences et expériences, sans risque de discrimination.</p>
  269.                         </div>
  270.                     </div>
  272.                     <div class="work-process mb-5">
  273.                         <div class="work-process-icon"><span><i class="fa-solid fa-business-time text-primary"></i></span></div>
  274.                         <div class="work-process-caption">
  275.                             <h4>Moins de stress</h4>
  276.                             <p>Savoir que votre candidature sera évaluée de manière impartiale vous apaise.</p>
  277.                         </div>
  278.                     </div>
  280.                     <div class="work-process mb-5">
  281.                         <div class="work-process-icon"><span><i class="fa-solid fa-sack-dollar text-primary"></i></span></div>
  282.                         <div class="work-process-caption">
  283.                             <h4>Se concentrer sur l'essentiel</h4>
  284.                             <p>Le CV anonyme vous pousse à mettre en avant vos compétences les plus pertinentes.</p>
  285.                         </div>
  286.                     </div>
  288.                     <div class="work-process">
  289.                         <div class="work-process-icon"><span><i class="fa-regular fa-face-laugh-wink text-primary"></i></span></div>
  290.                         <div class="work-process-caption">
  291.                             <h4>Opportunités équitables</h4>
  292.                             <p>Maximisez vos chances d'être sélectionné, peu importe votre profil personnel.</p>
  293.                         </div>
  294.                     </div>
  295.                 </div>
  298.             </div>
  300.         </div>
  302.     </section>
  304. {% endblock body %}