templates/accueil/index.html.twig line 1

Open in your IDE?
  1. <html lang="{{ app.request.locale }}">
  3. <head>
  4.      <meta charset="UTF-8" name="google-site-verification" content="tcERikbvGgyu1IRFceK0Tl6jp1zSDli11qNlTtLqr44" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     
  7.     <!-- SEO Meta Tags -->
  8. <title>Matchnhire </title>
  9. <meta name="Matchnhire" content=" Plateforme RH , Agent IA pour un recrutement intelligent">
  10. <meta name="description" content="Découvrez MatchNHire, la plateforme RH propulsée par un agent IA. Recrutez plus vite, plus juste et plus intelligemment grâce à l’intelligence artificielle.">
  11. <meta name="keywords" content="plateforme RH, agent IA, IA recrutement, solution RH, ATS intelligent, recrutement intelligent, intelligence artificielle RH, logiciel RH, agent virtuel RH, MatchNHire">
  13. <!-- Open Graph / Facebook -->
  14. <meta property="og:title" content="MatchNHire | Plateforme RH , Agent IA pour un recrutement intelligent">
  15. <meta property="og:description" content="L’agent IA RH qui transforme le recrutement. Recrutez plus vite, plus juste, plus intelligent. Découvrez la plateforme RH nouvelle génération.">
  16. <meta property="og:url" content="https://matchnhire.com/">
  17. <meta property="og:type" content="website">
  18. <meta property="og:image" content="https://matchnhire.com/img/final.png">  
  20. <!-- Canonical -->
  21. <link rel="canonical" href="https://matchnhire.com/">
  23. <!-- Favicon -->
  24. <link rel="icon" href="https://matchnhire.com/img/final.png" type="image/x-icon">
  26. <!-- Schema.org JSON-LD (pour enrichir le SEO) -->
  27. <script type="application/ld+json">
  28. {
  29.   "@context": "https://schema.org/",
  30.   "@type": "SoftwareApplication",
  31.   "name": "MatchNHire",
  32.   "url": "https://matchnhire.com/",
  33.   "description": "MatchNHire est une plateforme RH intelligente intégrant un agent IA pour transformer le recrutement et optimiser la sélection des talents.",
  34.   "applicationCategory": "Human Resources, Recruitment, AI Software",
  35.   "operatingSystem": "Web",
  36.   "creator": {
  37.     "@type": "Organization",
  38.     "name": "MatchNHire",
  39.     "url": "https://matchnhire.com/"
  40.   },
  41.   "image": "https://matchnhire.com/img/final.png"
  42. }
  43. </script>
  46.      <!-- favicons Icons -->
  47.     <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('img/favicon.png') }}">
  48.     <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('img/favicon.png') }}">
  49.     <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('img/favicon.png') }}">
  50.     <link rel="manifest" href="{{ asset('assets/images/favicons/site.webmanifest') }}">
  51.     <!-- fonts -->
  52.     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&amp;display=swap"
  53.           rel="stylesheet">
  54.     <!-- template styles -->
  55.     <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
  56.     <link rel="stylesheet" href="{{ asset('css/animate.min.css') }}">
  57.     <link rel="stylesheet" href="{{ asset('css/style.css') }}">
  58.     <link rel="stylesheet" href="{{ asset('css/carousel.min.css') }}">
  59.     <link rel="stylesheet" href="{{ asset('css/default.min.css') }}">
  60.     <link rel="stylesheet" href="{{ asset('css/hire.css') }}">
  61. </head>
  63. <body class="custom-cursor" id="walid">
  64. <div class="custom-cursor__cursor"></div>
  65. <div class="custom-cursor__cursor-two"></div>
  69. <div id="loading" class="lds-ellipsis">
  70.     <div></div>
  71.     <div></div>
  72.     <div></div>
  73.     <div></div>
  74. </div>
  75. <div id="content-wrapper">
  78.     <div class="page-wrapper">
  79.         <div class="topbar-one">
  80.             <div class="container-fluid">
  81.                 <div class="topbar-one__inner">
  82.                     <ul class="list-unstyled topbar-one__info">
  83.                         <li class="topbar-one__info__item">
  84.                             <i class="fas fa-envelope" aria-hidden="true"></i>
  85.                             <a href="mailto:commercial@matchnhire.com">commercial@matchnhire.com</a>
  86.                         </li>
  87.                         <li class="topbar-one__info__item">
  88.                             <i class="fa fa-map-marker" aria-hidden="true"></i>
  89.                             <a href="tel:+216 71 96 34 53">Toulouse – 41 rue de la découverte 31670 Labège Toulouse.</a>
  90.                         </li>
  91.                     </ul><!-- /.list-unstyled topbar-one__info -->
  92.                     <div class="topbar-one__right">
  93.                         <!-- <div class="topbar-one__nav">
  94.                         <ul>
  95.                             <li>
  96.                                 <a href="#">Nos Objectifs</a>
  97.                             </li>
  98.                             <li>
  99.                                 <a href="#">Contact</a>
  100.                             </li>
  101.                         </ul>
  102.                     </div> -->
  103.                         <div class="topbar-one__social">
  104.                             <a href="https://tn.linkedin.com/company/abshore">
  105.                                 <i class="fab fa-linkedin" aria-hidden="true"></i>
  106.                                 <span class="sr-only">linkedin</span>
  107.                             </a>
  109.                             <a href="https://www.facebook.com/ABSHORE?mibextid=ZbWKwL">
  110.                                 <i class="fab fa-facebook" aria-hidden="true"></i>
  111.                                 <span class="sr-only">Facebook</span>
  112.                             </a>
  114.                         </div><!-- /.topbar-one__social -->
  115.                     </div><!-- /.topbar-one__right -->
  116.                 </div><!-- /.topbar-one__inner -->
  117.             </div>
  118.         </div>
  120.         <header class="main-header sticky-header sticky-header--normal">
  121.             <div class="main-header__inner" style="width: 103% !important;">
  122.                 <div class="main-header__logo">
  123.                     <a href="#">
  124.                         <img src="img/final.png" alt="MatchnHire" width="125">
  125.                     </a>
  126.                 </div><!-- /.main-header__logo -->
  127.                 <a href="#" class="search-toggler main-header__search d-none">
  128.                     <i class="icon-magnifying-glass" aria-hidden="true"></i>
  129.                     <span class="sr-only">Search</span>
  130.                 </a><!-- /.search-toggler -->
  131.                 <div class="main-header__menu">
  132.                     <nav class="main-header__nav main-menu">
  133.                         <ul class="main-menu__list">
  134.                             <li class="dropdown current">
  135.                                 <a href="#Accueil">{{ 'nav.home'|trans }}</a>
  136.                                 <!-- <ul>
  137.                                 <li><a href="/">Home One</a></li>
  138.                                 <li><a href="index-2.html">Home Two</a></li>
  139.                                 <li><a href="index-3.html">Home Three</a></li>
  140.                                 <li class="dropdown">
  141.                                     <a href="#">Header Styles</a>
  142.                                     <ul>
  143.                                         <li><a href="/">Header One</a></li>
  144.                                         <li><a href="index-2.html">Header Two</a></li>
  145.                                         <li><a href="index-3.html">Header Three</a></li>
  146.                                     </ul>
  147.                                 </li>
  148.                             </ul> -->
  149.                             </li>
  150.                             <li class="dropdown">
  151.                                 <a href="#propos">{{ 'nav.about'|trans }}</a>
  152.                             </li>
  153.                             <li>
  154.                                 <a href="#objetifs">{{ 'nav.objectives'|trans }}</a>
  155.                             </li>
  157.                             <li class="dropdown">
  158.                                 <a href="#process">{{ 'nav.solution'|trans }}</a>
  159.                             </li>
  160.                             <li class="dropdown">
  161.                                 <a href="#news">{{ 'nav.news'|trans }}</a>
  162.                             </li>
  163.                             <li>
  164.                                 <a href="#contact">{{ 'nav.contact'|trans }}</a>
  165.                             </li>
  166.                             <li>
  167.                                 <a href="https://candidat.matchnhire.com/login">{{ 'nav.candidate_portal'|trans }}</a>
  168.                             </li>
  169.                         </ul>
  170.                     </nav><!-- /.main-header__nav -->
  171.                     <div class="main-header__call" style="display: flex; align-items: center; gap: 15px;">
  172.                         <div class="locale-switcher" style="display: inline-block; position: relative; z-index: 1001;">
  173.                             <select id="locale-selector" onchange="changeLocale(this.value)" 
  174.                                     style="padding:9px; 
  175.                                            border: 2px solid #e0e0e0; 
  176.                                            border-radius: 8px; 
  177.                                            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); 
  178.                                            color: #2c3e50; 
  179.                                            font-size: 14px; 
  180.                                            font-weight: 600; 
  181.                                            cursor: pointer; 
  182.                                            appearance: none; 
  183.                                            -webkit-appearance: none;
  184.                                            -moz-appearance: none;
  185.                                            background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22><path fill=%22%23666%22 d=%22M8 12L2 5h12z%22/></svg>'); 
  186.                                            background-repeat: no-repeat; 
  187.                                            background-position: right 12px center; 
  188.                                            transition: all 0.3s ease; 
  189.                                            outline: none;
  190.                                            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  191.                                            min-width: 60px;
  192.                                            position: relative;
  193.                                            z-index: 1002;
  194.                                            pointer-events: auto;">
  195.                                 <option value="fr" {{ app.request.locale == 'fr' ? 'selected' : '' }}>FR </option>
  196.                                 <option value="en" {{ app.request.locale == 'en' ? 'selected' : '' }}>EN </option>
  197.                             </select>
  198.                         </div>
  199.                         <a class="matchnhire-btn matchnhire-btn--base" href="" onclick="Calendly.initPopupWidget({url: 'https://meetings.hubspot.com/matchnhire?embed=true'});return false;">{{ 'nav.book_demo'|trans }}</a>
  200.                     </div>
  201.                     <style>
  202.                         #locale-selector {
  203.                             z-index: 1002 !important;
  204.                             pointer-events: auto !important;
  205.                             position: relative !important;
  206.                         }
  207.                         #locale-selector:hover {
  208.                             border-color: #4a90e2 !important;
  209.                             box-shadow: 0 3px 8px rgba(74, 144, 226, 0.2) !important;
  210.                             transform: translateY(-1px) !important;
  211.                         }
  212.                         #locale-selector:focus {
  213.                             border-color: #4a90e2 !important;
  214.                             box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
  215.                             z-index: 1003 !important;
  216.                         }
  217.                         #locale-selector option {
  218.                             padding: 10px;
  219.                             background: #fff;
  220.                         }
  221.                         .locale-switcher {
  222.                             z-index: 1001 !important;
  223.                             pointer-events: auto !important;
  224.                         }
  225.                     </style>
  227.                 </div>
  228.                 <div class="main-header__link">
  229.                     <a class="main-header__btn" href="https://app.matchnhire.com/">{{ 'nav.login'|trans }}
  230.                     </a>
  231.                 </div>
  233.                 <div class="mobile-nav__btn mobile-nav__toggler">
  234.                     <span></span>
  235.                     <span></span>
  236.                     <span></span>
  237.                 </div><!-- /.mobile-nav__toggler -->
  238.             </div>
  239.         </header>
  240.         <!-- main-slider-start -->
  241.         <section class="main-slider-one" id="Accueil">
  242.             <div class="main-slider-one__carousel matchnhire-owl__carousel owl-carousel owl-loaded owl-drag"
  243.                  data-owl-options="{ &quot;loop&quot;: true, &quot;animateOut&quot;: &quot;slideOutDown&quot;,     &quot;animateIn&quot;: &quot;fadeIn&quot;, &quot;items&quot;: 1,
  244.         &quot;autoplay&quot;: true, &quot;autoplayTimeout&quot;: 9000, &quot;smartSpeed&quot;: 1000,     &quot;nav&quot;: true,     &quot;dots&quot;: true,  &quot;dotsData&quot;: true, &quot;margin&quot;: 0  }">
  246.                 <div class="owl-stage-outer">
  247.                     <div class="owl-stage"
  248.                          style="transform: translate3d(-3806px, 0px, 0px); transition: all 0s ease 0s; width: 13321px;">
  249.                         <div class="owl-item cloned" style="width: 1903px;">
  250.                             <div class="item" data-dot="<button>2/</button>">
  251.                                 <div class="main-slider-one__item">
  252.                                     <div class="main-slider-one__bg"
  253.                                          style="background-image: url(https://images.pexels.com/photos/590016/pexels-photo-590016.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);">
  254.                                     </div>
  255.                                     <div class="main-slider-one__overlay"></div>
  256.                                     <div class="main-slider-one__shape"
  257.                                          style="background-image: url(img/slider-1-shape-1.png);">
  258.                                     </div>
  259.                                     <div class="container">
  260.                                         <div class="row">
  261.                                             <div class="col-md-12">
  262.                                                 <div class="main-slider-one__content">
  263.                                                     <div class="main-slider-one__image"><img
  264.                                                                 src="img/slider-1-shape-2.png" alt="matchnhire">
  265.                                                     </div><!-- slider-layer -->
  266.                                                     <h2 class="main-slider-one__title">{{ 'slider.ai_agent_title'|trans|raw }}</h2><!-- slider-title -->
  267.                                                     <div class="main-slider-one__btn">
  268.                                                         <a href="https://app.matchnhire.com/"
  269.                                                            class="matchnhire-btn"><span>{{ 'slider.discover_more'|trans }}
  270.                                                                     </span></a><!-- slider-btn -->
  271.                                                     </div>
  272.                                                 </div>
  273.                                             </div>
  274.                                         </div>
  275.                                     </div>
  276.                                 </div>
  277.                             </div>
  278.                         </div>
  280.                         <div class="owl-item active" style="width: 1903px;">
  281.                             <div class="item" data-dot="<button>1/</button>">
  282.                                 <div class="main-slider-one__item">
  283.                                     <div class="main-slider-one__bg"
  284.                                          style="background-image: url(https://images.pexels.com/photos/5439137/pexels-photo-5439137.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);">
  285.                                     </div>
  286.                                     <div class="main-slider-one__overlay"></div>
  287.                                     <div class="main-slider-one__shape"
  288.                                          style="background-image: url(img//slider-1-shape-1.png);">
  289.                                     </div>
  290.                                     <div class="container">
  291.                                         <div class="row">
  292.                                             <div class="col-md-12">
  293.                                                 <div class="main-slider-one__content">
  294.                                                     <div class="main-slider-one__image"><img
  295.                                                                 src="img/slider-1-shape-2.png" alt="matchnhire"></div>
  296.                                                     <!-- slider-layer -->
  297.                                                     <h2 class="main-slider-one__title"><br>{{ 'slider.accelerated_recruitment'|trans|raw }}
  298.                                                     </h2><!-- slider-title -->
  299.                                                     <div class="main-slider-one__btn">
  300.                                                         <a href="https://app.matchnhire.com/"
  301.                                                            class="matchnhire-btn"><span>{{ 'slider.discover_more'|trans }}
  302.                                                                     </span></a><!-- slider-btn -->
  303.                                                     </div>
  304.                                                 </div>
  305.                                             </div>
  306.                                         </div>
  307.                                     </div>
  308.                                 </div>
  309.                             </div>
  310.                         </div>
  311.                         <div class="owl-item" style="width: 1903px;">
  312.                             <div class="item" data-dot="<button>2/</button>">
  313.                                 <div class="main-slider-one__item">
  314.                                     <div class="main-slider-one__bg"
  315.                                          style="background-image: url(https://images.pexels.com/photos/5668858/pexels-photo-5668858.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);">
  316.                                     </div>
  317.                                     <div class="main-slider-one__overlay"></div>
  318.                                     <div class="main-slider-one__shape"
  319.                                          style="background-image: url(img/slider-1-shape-1.png);">
  320.                                     </div>
  321.                                     <div class="container">
  322.                                         <div class="row">
  323.                                             <div class="col-md-12">
  324.                                                 <div class="main-slider-one__content">
  325.                                                     <div class="main-slider-one__image"><img
  326.                                                                 src="img/slider-1-shape-2.png" alt="matchnhire"></div>
  327.                                                     <!-- slider-layer -->
  328.                                                     <h2 class="main-slider-one__title"><br><br>{{ 'slider.vision_360'|trans }}</h2>
  329.                                                     <!-- slider-title -->
  330.                                                     <div class="main-slider-one__btn">
  331.                                                         <a href="https://app.matchnhire.com/"
  332.                                                            class="matchnhire-btn"><span>{{ 'slider.discover_more'|trans }}
  333.                                                                     </span></a><!-- slider-btn -->
  334.                                                     </div>
  335.                                                 </div>
  336.                                             </div>
  337.                                         </div>
  338.                                     </div>
  339.                                 </div>
  340.                             </div>
  341.                         </div>
  344.                     </div>
  345.                 </div>
  346.                 <div class="owl-nav">
  347.                     <button type="button" role="presentation" class="owl-prev" aria-label="carousel button">
  348.                         <i class="fas fa-arrow-left"></i>
  349.                     </button>
  350.                     <button type="button" role="presentation" class="owl-next" aria-label="carousel button">
  351.                         <i class="fas fa-arrow-right"></i>
  352.                     </button>
  353.                 </div>
  355.             </div>
  356.         </section>
  357.         <!-- main-slider-end -->
  358.         <section class="about-one" id="propos">
  359.             <div class="container">
  360.                 <div class="row">
  361.                     <div class="col-xl-6">
  362.                         <div class="about-one__image wow fadeInLeft animated" data-wow-delay="300ms"
  363.                              style="visibility: visible; animation-delay: 300ms; animation-name: fadeInLeft;">
  364.                             <div class="about-one__image-one">
  365.                                 <img src="https://images.pexels.com/photos/669617/pexels-photo-669617.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  366.                                      alt="matchnhire">
  367.                                 <div class="about-one__image-icon"><img src="img/about-1-bulb.png" alt="Matchnhire">
  368.                                 </div>
  369.                             </div>
  370.                         </div><!-- /.why-choose-two__image -->
  371.                     </div><!-- /.col-lg-6 -->
  372.                     <div class="col-xl-6 wow fadeInRight animated" data-wow-delay="300ms"
  373.                          style="visibility: visible; animation-delay: 300ms; animation-name: fadeInRight;">
  374.                         <div class="about-one__content">
  375.                             <div class="sec-title text-left">
  377.                                 <h6 class="sec-title__tagline">{{ 'about.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  379.                                 <h3 class="sec-title__title">{{ 'about.title'|trans }}</h3>
  381.                             </div><!-- /.sec-title -->
  382.                             <p class="about-one__content__text">
  383.                                 {{ 'about.description'|trans }}
  384.                             </p>
  385.                             <div class="row">
  386.                                 <div class="col-md-6">
  387.                                     <ul class="about-one__content__list">
  388.                                         <li><span class="fa fa-check-circle" aria-hidden="true"></span> {{ 'about.accelerated_recruitment'|trans }}
  389.                                         </li>
  390.                                         <li><span class="fa fa-check-circle" aria-hidden="true"></span> {{ 'about.cv_database'|trans }}
  391.                                         </li>
  393.                                         <li><span class="fa fa-check-circle" aria-hidden="true"></span> {{ 'about.vision_360'|trans }}
  394.                                         </li>
  395.                                     </ul>
  398.                                 </div>
  399.                                 <div class="col-md-6">
  402.                                     <a class="matchnhire-btn matchnhire-btn--base" href="" onclick="Calendly.initPopupWidget({url: 'https://meetings.hubspot.com/matchnhire?embed=true'});return false;">{{ 'about.book_demo'|trans }}</a>
  404.                                 </div>
  405.                             </div>
  406.                         </div><!-- /.why-choose-two__content -->
  407.                     </div><!-- /.col-lg-6 -->
  408.                 </div><!-- /.row -->
  409.             </div><!-- /.container -->
  410.         </section><!-- /.about-one -->
  412.         <!-- Feature Start -->
  413.         <section class="feature-one" id="objetifs">
  414.             <div class="container">
  415.                 <div class="container">
  416.                     <div class="sec-title text-center">
  418.                         <h6 class="sec-title__tagline">{{ 'objectives.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  420.                     </div><!-- /.sec-title -->
  421.                 </div>
  422.                 <div class="row gutter-y-30">
  423.                     <div class="col-lg-4 col-md-6 wow fadeInUp animated" data-wow-delay="100ms"
  424.                          style="visibility: visible; animation-delay: 100ms; animation-name: fadeInUp;">
  425.                         <div class="feature-one__item text-center">
  426.                             <div class="feature-one__item__img">
  427.                                 <img src="https://images.pexels.com/photos/6285074/pexels-photo-6285074.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  428.                                      alt="matchnhire">
  429.                             </div>
  430.                             <div class="feature-one__item__content">
  431.                                 <div class="feature-one__item__ball"></div>
  432.                                 <h3 class="feature-one__item__title">{{ 'objectives.accelerated_recruitment_title'|trans }} <br> </h3>
  433.                                 <p class="feature-one__item__text">{{ 'objectives.accelerated_recruitment_text'|trans }}</p>
  434.                                 <a href="https://app.matchnhire.com/" class="matchnhire-btn"><span>{{ 'objectives.discover_more'|trans }}
  435.                                             </span></a>
  436.                             </div>
  437.                         </div><!-- feature-item -->
  438.                     </div>
  439.                     <div class="col-lg-4 col-md-6 wow fadeInUp animated" data-wow-delay="200ms"
  440.                          style="visibility: visible; animation-delay: 200ms; animation-name: fadeInUp;">
  441.                         <div class="feature-one__item text-center">
  442.                             <div class="feature-one__item__img">
  443.                                 <img src="https://images.pexels.com/photos/7735625/pexels-photo-7735625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  444.                                      alt="matchnhire">
  445.                             </div>
  446.                             <div class="feature-one__item__content">
  447.                                 <div class="feature-one__item__ball"></div>
  448.                                 <h3 class="feature-one__item__title">{{ 'objectives.interactive_cv_title'|trans }} <br></h3>
  449.                                 <p class="feature-one__item__text">{{ 'objectives.interactive_cv_text'|trans }}</p>
  450.                                 <a href="https://app.matchnhire.com/" class="matchnhire-btn"><span>{{ 'objectives.discover_more'|trans }}
  451.                                             </span></a>
  452.                             </div>
  453.                         </div><!-- feature-item -->
  454.                     </div>
  455.                     <div class="col-lg-4 col-md-6 wow fadeInUp animated" data-wow-delay="300ms"
  456.                          style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">
  457.                         <div class="feature-one__item text-center">
  458.                             <div class="feature-one__item__img">
  459.                                 <img src="https://images.pexels.com/photos/17682883/pexels-photo-17682883/free-photo-of-mains-bureau-affaires-document.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  460.                                      alt="matchnhire">
  461.                             </div>
  462.                             <div class="feature-one__item__content">
  463.                                 <div class="feature-one__item__ball"></div>
  464.                                 <h3 class="feature-one__item__title"> {{ 'objectives.vision_360_title'|trans }} <br> </h3>
  465.                                 <p class="feature-one__item__text">{{ 'objectives.vision_360_text'|trans }}</p>
  466.                                 <a href="https://app.matchnhire.com/"
  467.                                    class="matchnhire-btn"><span>{{ 'objectives.discover_more'|trans }}
  468.                                             </span></a>
  469.                             </div>
  470.                         </div><!-- feature-item -->
  471.                     </div>
  472.                 </div>
  473.             </div>
  474.         </section>
  475.         <!-- Feature End -->
  476.         <div class="project-two" style="background-image: url(assets/images/backgrounds/project-bg-1.jpg);">
  477.             <div class="container">
  478.                 <div class="row tabs-box">
  479.                     <div class="col-lg-4">
  480.                         <div class="project-two__left-content">
  481.                             <div class="sec-title text-left">
  483.                                 <h6 class="sec-title__tagline">{{ 'product.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  485.                                 <h3 class="sec-title__title">Matchnhire</h3>
  486.                             </div><!-- /.sec-title -->
  487.                             <ul class="list-unstyled tab-buttons project-two__list">
  488.                                 <li data-tab="#staffing_solution" class="tab-btn active-btn">{{ 'product.portail'|trans }}</li>
  489.                                 <li data-tab="#scale_up_business" class="tab-btn">{{ 'product.dashboard'|trans }}</li>
  490.                             </ul><!-- /.list-unstyledf -->
  491.                         </div>
  492.                     </div>
  493.                     <div class="col-lg-8">
  494.                         <div class="Matchnhire-stretch-element-inside-column"
  495.                              style="margin-left: 0px; margin-right: -366.5px;">
  496.                             <div class="tabs-content">
  497.                                 <div class="tab active-tab fadeInUp animated" id="staffing_solution">
  498.                                     <div class="project-two__card">
  499.                                         <div class="project-two__img">
  500.                                             <img src="img/mockup_pc.png" alt="Matchnhire">
  501.                                         </div>
  503.                                     </div>
  504.                                 </div>
  505.                                 <div class="tab fadeInUp animated" id="scale_up_business">
  506.                                     <div class="project-two__card">
  507.                                         <div class="project-two__img">
  508.                                             <img src="img/mockup_pc_app.png" alt="Matchnhire">
  509.                                         </div>
  510.                                     </div>
  511.                                 </div>
  512.                             </div>
  513.                         </div>
  514.                     </div>
  515.                 </div>
  516.             </div>
  517.         </div>
  520.         <div class="project-one" id="process">
  521.             <div class="container">
  522.                 <div class="sec-title text-center">
  524.                     <h6 class="sec-title__tagline">{{ 'solution.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  526.                 </div><!-- /.sec-title -->
  527.             </div>
  528.             <div class="project-one__carousel matchnhire-owl__carousel matchnhire-owl__carousel--with-shadow matchnhire-owl__carousel--basic-nav owl-carousel owl-theme owl-loaded owl-drag"
  529.                  data-owl-options="{
  530.         &quot;items&quot;: 1,
  531.         &quot;margin&quot;: 30,
  532.         &quot;loop&quot;: true,
  533.         &quot;smartSpeed&quot;: 100,
  534.         &quot;nav&quot;: true,
  535.         &quot;navText&quot;: [&quot;<span class=\&quot;fa fa-angle-left\&quot;></span>&quot;,&quot;<span class=\&quot;fa fa-angle-right\&quot;></span>&quot;],
  536.         &quot;dots&quot;: false,
  537.         &quot;autoplay&quot;: true,
  538.         &quot;responsive&quot;: {
  539.             &quot;0&quot;: {
  540.                 &quot;items&quot;: 1
  541.             },
  542.             &quot;576&quot;: {
  543.                 &quot;items&quot;: 2
  544.             },
  545.             &quot;992&quot;: {
  546.                 &quot;items&quot;: 3
  547.             },
  548.             &quot;1300&quot;: {
  549.                 &quot;items&quot;: 3.5
  550.             },
  551.             &quot;1600&quot;: {
  552.                 &quot;items&quot;: 4.83
  553.             }
  554.         }
  555.         }">
  556.                 <div class="owl-stage-outer">
  557.                     <div class="owl-stage solution">
  559.                         <div class="owl-item active" style="width: 370.207px; margin-right: 30px;">
  560.                             <div class="item">
  561.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  562.                                      data-wow-delay="1ms"
  563.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  564.                                     <div class="project-one__img">
  565.                                         <img src="https://images.pexels.com/photos/5474284/pexels-photo-5474284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  566.                                              alt="Staffing Solution">
  567.                                     </div>
  568.                                     <div class="project-one__content">
  569.                                         <span class="project-one__tagline"> {{ 'solution.authentification'|trans }}</span>
  570.                                         <h3 class="project-one__title"><a href="#"> {{ 'solution.secure_authentification'|trans }}</a>
  571.                                         </h3>
  572.                                     </div>
  573.                                 </div>
  574.                             </div>
  575.                         </div>
  576.                         <div class="owl-item active" style="width: 370.207px; margin-right: 30px;">
  577.                             <div class="item">
  578.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  579.                                      data-wow-delay="1ms"
  580.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  581.                                     <div class="project-one__img">
  582.                                         <img src="https://images.pexels.com/photos/5439152/pexels-photo-5439152.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  583.                                              alt="Staffing Solution">
  584.                                     </div>
  585.                                     <div class="project-one__content">
  586.                                         <span class="project-one__tagline">{{ 'solution.extraction'|trans }}</span>
  587.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.key_information_extraction'|trans }}</a></h3>
  588.                                     </div>
  589.                                 </div>
  590.                             </div>
  591.                         </div>
  592.                         <div class="owl-item active" style="width: 370.207px; margin-right: 30px;">
  593.                             <div class="item">
  594.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  595.                                      data-wow-delay="1ms"
  596.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  597.                                     <div class="project-one__img">
  598.                                         <img src="https://images.pexels.com/photos/8101922/pexels-photo-8101922.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  599.                                              alt="Staffing Solution">
  600.                                     </div>
  601.                                     <div class="project-one__content">
  602.                                         <span class="project-one__tagline">{{ 'solution.profiles'|trans }}</span>
  603.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.intelligent_profile_selection'|trans }}</a>
  604.                                         </h3>
  605.                                     </div>
  606.                                 </div>
  607.                             </div>
  608.                         </div>
  609.                         <div class="owl-item" style="width: 370.207px; margin-right: 30px;">
  610.                             <div class="item">
  611.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  612.                                      data-wow-delay="1ms"
  613.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  614.                                     <div class="project-one__img">
  615.                                         <img src="https://images.pexels.com/photos/7681097/pexels-photo-7681097.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  616.                                              alt="Staffing Solution">
  617.                                     </div>
  618.                                     <div class="project-one__content">
  619.                                         <span class="project-one__tagline">{{ 'solution.reporting'|trans }}</span>
  620.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.intuitive_reporting'|trans }}</a>
  621.                                         </h3>
  622.                                     </div>
  623.                                 </div>
  624.                             </div>
  625.                         </div>
  627.                         <div class="owl-item" style="width: 370.207px; margin-right: 30px;">
  628.                             <div class="item">
  629.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  630.                                      data-wow-delay="1ms"
  631.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  632.                                     <div class="project-one__img">
  633.                                         <img src=https://images.pexels.com/photos/5387265/pexels-photo-5387265.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  634.                                              alt="Staffing Solution">
  635.                                     </div>
  636.                                     <div class="project-one__content">
  637.                                         <span class="project-one__tagline">{{ 'solution.jobs'|trans }}</span>
  638.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.simplified_job_posting'|trans }}</a>
  639.                                         </h3>
  640.                                     </div>
  641.                                 </div>
  642.                             </div>
  643.                         </div>
  645.                         <div class="owl-item" style="width: 370.207px; margin-right: 30px;">
  646.                             <div class="item">
  647.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  648.                                      data-wow-delay="1ms"
  649.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  650.                                     <div class="project-one__img">
  651.                                         <img src="https://images.pexels.com/photos/7821484/pexels-photo-7821484.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  652.                                              alt="Staffing Solution">
  653.                                     </div>
  654.                                     <div class="project-one__content">
  655.                                         <span class="project-one__tagline">{{ 'solution.matching'|trans }}</span>
  656.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.precise_alignment'|trans }}</a>
  657.                                         </h3>
  658.                                     </div>
  659.                                 </div>
  660.                             </div>
  661.                         </div>
  662.                     </div>
  663.                 </div>
  664.                 <div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"
  665.                                                       aria-label="carousel button"><span class="fa fa-angle-left"
  666.                                                                                          aria-hidden="true"></span></button><button type="button" role="presentation"
  667.                                                                                                                                     class="owl-next" aria-label="carousel button"><span class="fa fa-angle-right"
  668.                                                                                                                                                                                         aria-hidden="true"></span></button></div>
  669.                 <div class="owl-dots disabled"></div>
  670.             </div>
  671.         </div>
  679.         <div class="project-one project" id="news">
  680.             <div class="container">
  681.                 <div class="sec-title text-center">
  683.                     <h6 class="sec-title__tagline">{{ 'news.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  685.                 </div><!-- /.sec-title -->
  686.             </div>
  687.             <div class="project-one__carousel matchnhire-owl__carousel matchnhire-owl__carousel--with-shadow matchnhire-owl__carousel--basic-nav owl-carousel owl-theme owl-loaded owl-drag"
  688.                  data-owl-options="{
  689.         &quot;items&quot;: 1,
  690.         &quot;margin&quot;: 30,
  691.         &quot;loop&quot;: false,
  692.         &quot;smartSpeed&quot;: 700,
  693.         &quot;nav&quot;: false,
  694.         &quot;navText&quot;: [&quot;<span class=\&quot;fa fa-angle-left\&quot;></span>&quot;,&quot;<span class=\&quot;fa fa-angle-right\&quot;></span>&quot;],
  695.         &quot;dots&quot;: false,
  696.         &quot;autoplay&quot;: false,
  697.         &quot;responsive&quot;: {
  698.             &quot;0&quot;: {
  699.                 &quot;items&quot;: 1
  700.             },
  701.             &quot;576&quot;: {
  702.                 &quot;items&quot;: 2
  703.             },
  704.             &quot;992&quot;: {
  705.                 &quot;items&quot;: 3
  706.             },
  707.             &quot;1300&quot;: {
  708.                 &quot;items&quot;: 3.5
  709.             },
  710.             &quot;1600&quot;: {
  711.                 &quot;items&quot;: 4.83
  712.             }
  713.         }
  714.         }">
  715.                 <div class="owl-stage-outer">
  716.                     <div class="owl-stage"
  717.                          style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2402px;     margin: 0px auto;">
  719.                         <div class="owl-item" style="width: 395px;">
  720.                             <div class="item">
  721.                                 <div class="blog-card wow fadeInUp animated" data-wow-duration="1500ms"
  722.                                      data-wow-delay="100ms"
  723.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 100ms; animation-name: fadeInUp;">
  724.                                     <div class="blog-card__image">
  725.                                         <img src="https://abshore.com/img/events/matchnhire.jpg" alt="17e HR EXPO ">
  726.                                     </div>
  727.                                     <div class="blog-card__content">
  728.                                         <div class="blog-card__date"><span>27 </span>
  729.                                             Fév </div>
  730.                                         <ul class="list-unstyled blog-card__meta">
  731.                                             <li><a href="https://abshore.com"><i class="fas fa-tags"></i>ABSHORE</a>
  732.                                             </li>
  734.                                         </ul>
  735.                                         <h3 class="blog-card__title"><a href="#">17e HR EXPO </a>
  736.                                         </h3>
  737.                                         <p class="blog-card__info">17e HR EXPO : Découvrez le futur de la gestion
  738.                                             des recrutements avec ABSHORE</p>
  739.                                         <a href="#" class="blog-card__link">
  740.                                             {{ 'news.read_more'|trans }}
  741.                                             <i class="fa fa-arrow-right"></i>
  742.                                         </a>
  743.                                     </div>
  744.                                 </div>
  745.                             </div>
  746.                         </div>
  747.                         <div class="owl-item" style="width: 395px;">
  748.                             <div class="item">
  749.                                 <div class="blog-card wow fadeInUp animated" data-wow-duration="1500ms"
  750.                                      data-wow-delay="200ms"
  751.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInUp;">
  752.                                     <div class="blog-card__image">
  753.                                         <img src="img/medRH.png" alt="Outstanding island for winter sun">
  754.                                     </div>
  755.                                     <div class="blog-card__content">
  756.                                         <div class="blog-card__date"><span>8</span>
  757.                                             Nov</div>
  758.                                         <ul class="list-unstyled blog-card__meta">
  759.                                             <li><a href="https://abshore.com"><i class="fas fa-tags"></i>ABSHORE</a>
  760.                                             </li>
  762.                                         </ul>
  763.                                         <h3 class="blog-card__title"><a href="#">MEDRH2024</a></h3>
  764.                                         <p class="blog-card__info">Rencontres Méditerranéennes des Ressources
  765.                                             Humaines</p>
  766.                                         <a href="#" class="blog-card__link">
  767.                                             {{ 'news.read_more'|trans }}
  768.                                             <i class="fa fa-arrow-right"></i>
  769.                                         </a>
  770.                                     </div>
  771.                                 </div>
  772.                             </div>
  773.                         </div>
  774.                     </div>
  775.                 </div>
  776.                 <div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"
  777.                                                       aria-label="carousel button"><span class="fa fa-angle-left"
  778.                                                                                          aria-hidden="true"></span></button><button type="button" role="presentation"
  779.                                                                                                                                     class="owl-next" aria-label="carousel button"><span class="fa fa-angle-right"
  780.                                                                                                                                                                                         aria-hidden="true"></span></button></div>
  781.                 <div class="owl-dots disabled"></div>
  782.             </div>
  783.         </div>
  788.         <!-- Call To Action Start -->
  789.         <section class="cta-two contact-two  " id="contact">
  790.             <div class="contact-two__bg">
  792.             </div>
  793.             <div class="container">
  794.                 <div class="row">
  795.                     <div class="col-lg-7">
  796.                         {{ form_start(form, {'attr': {'class': 'contact-two__form contact-form wow fadeInUp animated'}}) }}
  797.                         <div class="contact-one__form__top">
  798.                             <div class="sec-title text-@@textAlign">
  799.                                 <h3 class="sec-title__title">{{ 'contact.title'|trans }}</h3>
  800.                             </div>
  801.                         </div>
  802.                         <div class="form-two__group">
  803.                             <div class="form-two__control form-two__control--full">
  804.                                 {{ form_widget(form.societe, {'attr': {'placeholder': ('contact.company'|trans)}}) }}
  805.                             </div>
  806.                             <div class="form-two__control form-two__control--full">
  807.                                 {{ form_widget(form.email, {'attr': {'placeholder': ('contact.email'|trans)}}) }}
  808.                             </div>
  809.                             <div class="form-two__control form-two__control--full">
  810.                                 {{ form_widget(form.telephone, {'attr': {'placeholder': ('contact.phone'|trans), 'pattern': '[0-9]*'}}) }}
  811.                             </div>
  812.                             <div class="form-two__control form-two__control--full">
  813.                                 {{ form_widget(form.message, {'attr': {'placeholder': ('contact.message'|trans)}}) }}
  814.                             </div>
  816.                             <div class="custom-control custom-checkbox customcheck">
  817.                                 <div class="switch">
  818.                                     <div class="icon">
  819.                                         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="bi bi-unlock-fill" viewBox="0 0 20 20" fill="currentColor">
  820.                                             <path d="M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2"/>
  821.                                         </svg>
  822.                                         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="bi bi-lock-fill" viewBox="0 0 20 20" fill="currentColor">
  823.                                             <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"/>
  824.                                         </svg>
  825.                                     </div>
  826.                                     <label for="{{ form.agreeTerms.vars.id }}" aria-label="Toggle Filter">
  827.                                         {{ form_widget(form.agreeTerms) }}
  828.                                     </label>
  829.                                     <span class="led"></span>
  830.                                 </div>
  831.                             </div>
  833.                             <button id="btnform" disabled style="cursor: not-allowed;" type="submit" class="matchnhire-btn">
  834.                                 {{ 'contact.send'|trans }}
  835.                             </button>
  836.                         </div>
  837.                         {{ form_end(form) }}
  838.                     </div>
  839.                     <div class="col-lg-5 wow fadeInRight" data-wow-delay="300ms"
  840.                          style="visibility: hidden; animation-delay: 300ms; animation-name: none;">
  841.                         <div class="cta-two__image">
  842.                             <img src="img/cta-2-1.png" alt="matchnhire">
  843.                         </div>
  844.                     </div>
  845.                 </div>
  846.             </div>
  847.         </section>
  848.         <!-- Call To Action End -->
  851.         <!-- <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/whrizi?embed=true"></div> -->
  853.         <!-- /.blog-one -->
  854.         <footer class="main-footer background-black">
  855.             <div class="main-footer__bg" style="background-image: url(img/footer-bg.jpg);">
  856.             </div>
  857.             <!-- /.main-footer__bg -->
  859.             <div class="main-footer__top">
  860.                 <div class="container">
  861.                     <div class="row">
  862.                         <div class="col-md-6 col-xl-5">
  863.                             <div class="footer-widget footer-widget--about">
  864.                                 <a href="/" class="footer-widget__logo" style="width: 100%;place-content: center;">
  865.                                     <img src="img/abshore_matchnhire.png"   alt="matchnhire  " style="width: 19rem;">
  866.                                 </a>
  868.                                 <p class="footer-widget__text">{{ 'footer.description'|trans }}</p>
  870.                             </div><!-- /.footer-widget -->
  871.                         </div><!-- /.col-md-6 -->
  873.                         <div class="col-md-6 col-xl-4">
  874.                             <div class="footer-widget footer-widget--contact">
  875.                                 <h2 class="footer-widget__title">{{ 'footer.links'|trans }}</h2><!-- /.footer-widget__title -->
  876.                                 <ul class="list-unstyled footer-widget__links">
  877.                                     <li><a href="/">{{ 'footer.footer_home'|trans }}</a></li>
  878.                                     <li><a href="#propos">{{ 'footer.footer_about'|trans }}</a></li>
  879.                                     <li><a href="#objetifs">{{ 'footer.footer_objectives'|trans }}</a></li>
  880.                                     <li><a href="#process">{{ 'footer.footer_solution'|trans }}</a></li>
  881.                                     <li><a href="#news">{{ 'footer.footer_news'|trans }}</a></li>
  882.                                     <li><a href="#contact">{{ 'footer.footer_contact'|trans }}</a></li>
  884.                                 </ul><!-- /.list-unstyled footer-widget__links -->
  885.                             </div><!-- /.footer-widget -->
  886.                         </div><!-- /.col-md-6 -->
  887.                         <div class="col-md-6 col-xl-3">
  888.                             <div class="footer-widget footer-widget--time">
  889.                                 <h2 class="footer-widget__title">{{ 'footer.contact_title'|trans }}</h2><!-- /.footer-widget__title -->
  891.                                 <!-- /.footer-widget__text -->
  892.                                 <ul class="list-unstyled footer-widget__info">
  893.                                     <img src="img/QRcontact.png" width="155" alt="">
  894.                                     <li>
  895.                                         <i class="fas fa-envelope" aria-hidden="true"></i> <a
  896.                                                 href="mailto:commercial@matchnhire.com">commercial@matchnhire.com</a></li>
  898.                                 </ul><!-- /.list-unstyled -->
  899.                             </div><!-- /.footer-widget -->
  900.                         </div><!-- /.col-md-6 -->
  901.                     </div><!-- /.row -->
  902.                 </div><!-- /.container -->
  903.             </div><!-- /.main-footer__top -->
  904.             <div class="main-footer__bottom">
  905.                 <div class="container">
  906.                     <div class="main-footer__bottom__inner">
  907.                         <div class="footer-widget__social">
  908.                             <a href="https://tn.linkedin.com/company/abshore">
  909.                                 <i class="fab fa-linkedin" aria-hidden="true"></i>
  910.                                 <span class="sr-only">linkedin</span>
  911.                             </a>
  913.                             <a href="https://www.facebook.com/ABSHORE?mibextid=ZbWKwL">
  914.                                 <i class="fab fa-facebook" aria-hidden="true"></i>
  915.                                 <span class="sr-only">Facebook</span>
  916.                             </a>
  919.                         </div><!-- /.footer-widget__social -->
  920.                         <p class="main-footer__copyright">
  921.                             {{ 'footer.copyright'|trans({'%year%': '2024'}) }} <a href="https://abshore.com/"
  922.                                                                                      target="_blank" alt="walid.hrizi@abshore.com">Abshore.</a>
  923.                         </p>
  924.                     </div><!-- /.main-footer__inner -->
  925.                 </div><!-- /.container -->
  926.             </div><!-- /.main-footer__bottom -->
  927.         </footer><!-- /.main-footer -->
  929.     </div><!-- /.page-wrapper -->
  932.     <div class="mobile-nav__wrapper">
  933.         <div class="mobile-nav__overlay mobile-nav__toggler"></div>
  934.         <!-- /.mobile-nav__overlay -->
  935.         <div class="mobile-nav__content">
  936.                 <span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"
  937.                                                                        aria-hidden="true"></i></span>
  938.             <div class="logo-box">
  939.                 <a href="#" aria-label="logo image"><img src="img/final-png.png" width="155" alt=""></a>
  940.             </div>
  941.             <!-- /.logo-box -->
  942.             <div class="mobile-nav__container">
  943.                 <ul class="main-menu__list">
  944.                     <li class="dropdown current">
  945.                         <a href="/">Home<button aria-label="dropdown toggler"><i class="fa fa-angle-down"
  946.                                                                                  aria-hidden="true"></i></button></a>
  947.                         <ul>
  948.                             <li><a href="#">Home One</a></li>
  949.                             <li><a href="#">Home Two</a></li>
  950.                             <li><a href="#">Home Three</a></li>
  951.                             <li class="dropdown">
  952.                                 <a href="#">Header Styles<button aria-label="dropdown toggler"><i
  953.                                                 class="fa fa-angle-down" aria-hidden="true"></i></button></a>
  954.                                 <ul>
  955.                                     <li><a href="#">Header One</a></li>
  956.                                     <li><a href="#">Header Two</a></li>
  957.                                     <li><a href="#">Header Three</a></li>
  958.                                 </ul>
  959.                             </li>
  960.                         </ul>
  961.                     </li>
  963.                     <li>
  964.                         <a href="#">About</a>
  965.                     </li>
  966.                     <li class="dropdown">
  967.                         <a href="#">Pages<button aria-label="dropdown toggler"><i class="fa fa-angle-down"
  968.                                                                                   aria-hidden="true"></i></button></a>
  969.                         <ul>
  970.                             <li><a href="#">Team </a></li>
  971.                             <li><a href="#">Jobs</a></li>
  972.                             <li><a href="#">History</a></li>
  973.                             <li><a href="#">FAQs</a></li>
  974.                         </ul>
  975.                     </li>
  976.                     <li class="dropdown">
  977.                         <a href="#">Services<button aria-label="dropdown toggler"><i class="fa fa-angle-down"
  978.                                                                                      aria-hidden="true"></i></button></a>
  979.                         <ul>
  980.                             <li><a href="#">HR</a></li>
  981.                             <li><a href="#">HR </a></li>
  982.                             <li><a href="#">Tech </a></li>
  983.                             <li><a href="#"> Solution</a></li>
  984.                             <li><a href="#"> Program</a></li>
  985.                             <li> <a href="#"> Training</a></li>
  986.                             <li><a href="#"> Management</a></li>
  987.                         </ul>
  988.                     </li>
  990.                     <li class="dropdown">
  991.                         <a href="#">Projects<button aria-label="dropdown toggler"><i class="fa fa-angle-down"
  992.                                                                                      aria-hidden="true"></i></button></a>
  993.                         <ul>
  994.                             <li><a href="#">Projects</a></li>
  995.                             <li><a href="#">Projects Details</a></li>
  996.                         </ul>
  997.                     </li>
  998.                     <li class="dropdown">
  999.                         <a href="#">News<button aria-label="dropdown toggler"><i class="fa fa-angle-down"
  1000.                                                                                  aria-hidden="true"></i></button></a>
  1001.                         <ul>
  1002.                             <li><a href="#">News</a></li>
  1003.                             <li><a href="#">News Details</a></li>
  1004.                         </ul>
  1005.                     </li>
  1006.                     <li>
  1007.                         <a href="#">Contact</a>
  1008.                     </li>
  1009.                 </ul>
  1010.             </div>
  1011.             <!-- /.mobile-nav__container -->
  1012.             <ul class="mobile-nav__contact list-unstyled">
  1013.                 <li>
  1014.                     <i class="fa fa-envelope" aria-hidden="true"></i>
  1015.                     <a href="mailto:Contact@abshore.com">Contact@abshore.com</a>
  1016.                 </li>
  1017.                 <li>
  1018.                     <i class="fa fa-phone-alt" aria-hidden="true"></i>
  1019.                     <a href="tel:+216 71 96 34 53">+216 71 96 34 53</a>
  1020.                 </li>
  1021.             </ul><!-- /.mobile-nav__contact -->
  1022.             <div class="mobile-nav__social">
  1023.                 <a href="https://tn.linkedin.com/company/abshore">
  1024.                     <i class="fab fa-linkedin" aria-hidden="true"></i>
  1025.                     <span class="sr-only">linkedin</span>
  1026.                 </a>
  1028.                 <a href="https://www.facebook.com/ABSHORE?mibextid=ZbWKwL">
  1029.                     <i class="fab fa-facebook" aria-hidden="true"></i>
  1030.                     <span class="sr-only">Facebook</span>
  1031.                 </a>
  1032.             </div><!-- /.mobile-nav__social -->
  1033.         </div>
  1034.         <!-- /.mobile-nav__content -->
  1035.     </div>
  1037.     <!-- /.mobile-nav__wrapper -->
  1038.     <div class="search-popup">
  1039.         <div class="search-popup__overlay search-toggler"></div>
  1040.         <!-- /.search-popup__overlay -->
  1041.         <div class="search-popup__content">
  1042.             <form role="search" method="get" class="search-popup__form" action="#">
  1043.                 <input type="text" id="search" placeholder="Search Here...">
  1044.                 <button type="submit" aria-label="search submit" class="matchnhire-btn matchnhire-btn--base">
  1045.                     <span><i class="icon-magnifying-glass"></i></span>
  1046.                 </button>
  1047.             </form>
  1048.         </div>
  1049.         <!-- /.search-popup__content -->
  1050.     </div>
  1051.     <!-- /.search-popup -->
  1052. </div>
  1053. <a href="#" data-target="html" class="scroll-to-target scroll-to-top">
  1054.     <span class="scroll-to-top__text">{{ 'contact.back_to_top'|trans }}</span>
  1055.     <span class="scroll-to-top__wrapper"><span class="scroll-to-top__inner"></span></span>
  1056. </a>
  1057. <script src="https://kit.fontawesome.com/5b8eba834f.js" crossorigin="anonymous"></script>
  1058. <script src="{{ asset('js/jquery-3.7.0.min.js') }}"></script>
  1059. <script src="{{ asset('js/owl.carousel.min.js') }}"></script>
  1060. <script src="{{ asset('js/wow.js') }}"></script>
  1061. <script src="{{ asset('js/hire.js') }}"></script>
  1064. <script type="text/javascript">
  1065.     window.addEventListener("load", function() {
  1066.         document.getElementById("content-wrapper").style.display = "none";
  1068.         setTimeout(function() {
  1069.             document.getElementById("loading").style.display = "none";
  1070.             document.getElementById("content-wrapper").style.display = "block";
  1071.         }, 2000);
  1072.     });
  1073. </script>
  1074. <script>
  1075.     document.getElementById('{{ form.agreeTerms.vars.id }}').addEventListener('change', function() {
  1076.         var btn = document.getElementById('btnform');
  1077.         if (this.checked) {
  1078.             btn.removeAttribute('disabled');
  1079.             btn.style.cursor = 'pointer';
  1080.         } else {
  1081.             btn.setAttribute('disabled', 'disabled');
  1082.             btn.style.cursor = 'not-allowed';
  1083.         }
  1084.     });
  1085.     document.getElementById('toggle-2').addEventListener('change', function() {
  1086.         var btn = document.getElementById('btnform');
  1087.         if (this.checked) {
  1088.             btn.removeAttribute('disabled'); // Supprime l'attribut disabled
  1089.             btn.style.cursor = 'pointer'; // Change le curseur
  1090.         } else {
  1091.             btn.setAttribute('disabled', 'disabled'); // Ajoute l'attribut disabled
  1092.             btn.style.cursor = 'not-allowed'; // Change le curseur
  1093.         }
  1094.     });
  1096.     // Fonction pour changer la locale
  1097.     function changeLocale(locale) {
  1098.         if (!locale) {
  1099.             console.error('Locale is required');
  1100.             return;
  1101.         }
  1102.         
  1103.         // Récupérer l'URL actuelle
  1104.         var currentUrl = window.location.href;
  1105.         var parsedUrl = new URL(currentUrl);
  1106.         var path = parsedUrl.pathname;
  1107.         var query = parsedUrl.search;
  1108.         var hash = parsedUrl.hash;
  1109.         
  1110.         // Construire la nouvelle URL avec la locale
  1111.         var newPath;
  1112.         
  1113.         // Si le chemin commence par /fr ou /en
  1114.         if (path.match(/^\/(fr|en)(\/|$)/)) {
  1115.             // Remplacer la locale existante
  1116.             newPath = path.replace(/^\/(fr|en)/, '/' + locale);
  1117.         } else if (path === '/' || path === '') {
  1118.             // Si on est à la racine, ajouter la locale
  1119.             newPath = '/' + locale + '/';
  1120.         } else {
  1121.             // Sinon, insérer la locale au début
  1122.             newPath = '/' + locale + (path.startsWith('/') ? path : '/' + path);
  1123.         }
  1124.         
  1125.         // Construire la nouvelle URL complète
  1126.         var newUrl = parsedUrl.origin + newPath + query + hash;
  1127.         
  1128.         // Rediriger vers la nouvelle URL
  1129.         window.location.href = newUrl;
  1130.     }
  1131.     
  1132.     // Vérifier que le select est accessible au chargement
  1133.     document.addEventListener('DOMContentLoaded', function() {
  1134.         var select = document.getElementById('locale-selector');
  1135.         if (select) {
  1136.             // Forcer les propriétés CSS importantes
  1137.             select.style.zIndex = '1002';
  1138.             select.style.pointerEvents = 'auto';
  1139.             select.style.position = 'relative';
  1140.             
  1141.             // Ajouter un event listener de secours si onchange ne fonctionne pas
  1142.             select.addEventListener('change', function(e) {
  1143.                 changeLocale(e.target.value);
  1144.             });
  1145.             
  1146.             // Test de clic
  1147.             select.addEventListener('click', function(e) {
  1148.                 e.stopPropagation();
  1149.             });
  1150.         } else {
  1151.             console.error('Locale selector not found');
  1152.         }
  1153.     });
  1154. </script>
  1155. <!-- Start of HubSpot Embed Code -->
  1156. <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/48156815.js"></script>
  1157. <!-- End of HubSpot Embed Code -->
  1159. </body>
  1164. <!-- Calendly badge widget begin -->
  1165. <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
  1166. <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
  1167. <!-- <script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/adef29042/30min?text_color=000000&primary_color=f32a35', text: 'Prise de rendez-vous', color: '#f32a35', textColor: '#ffffff' }); }</script> -->
  1168. <!-- Calendly badge widget end -->
  1170. <!-- Start of HubSpot Embed Code -->
  1171. <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/48156815.js"></script>
  1172. <!-- End of HubSpot Embed Code -->
  1175. <!-- Start of Meetings Embed Script -->
  1176. <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
  1177. <!-- End of Meetings Embed Script -->
  1181. </html>