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/dashboard/recrutement">{{ '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.                         
  226.                         /* Mobile navigation styles */
  227.                         #mobile-locale-selector:hover {
  228.                             border-color: #4a90e2 !important;
  229.                             box-shadow: 0 3px 8px rgba(74, 144, 226, 0.2) !important;
  230.                             transform: translateY(-1px) !important;
  231.                         }
  232.                         #mobile-locale-selector:focus {
  233.                             border-color: #4a90e2 !important;
  234.                             box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
  235.                         }
  236.                         #mobile-locale-selector option {
  237.                             padding: 10px;
  238.                             background: #fff;
  239.                         }
  240.                         .mobile-nav__actions .main-header__btn:hover {
  241.                             background: #357abd !important;
  242.                             transform: translateY(-1px);
  243.                             box-shadow: 0 3px 8px rgba(74, 144, 226, 0.3);
  244.                         }
  245.                         .mobile-nav__actions .matchnhire-btn:hover {
  246.                             transform: translateY(-1px);
  247.                         }
  248.                     </style>
  250.                 </div>
  251.                 <div class="main-header__link">
  252.                     <a class="main-header__btn" href="https://app.matchnhire.com/">{{ 'nav.login'|trans }}
  253.                     </a>
  254.                 </div>
  256.                 <div class="mobile-nav__btn mobile-nav__toggler">
  257.                     <span></span>
  258.                     <span></span>
  259.                     <span></span>
  260.                 </div><!-- /.mobile-nav__toggler -->
  261.             </div>
  262.         </header>
  263.         <!-- main-slider-start -->
  264.         <section class="main-slider-one" id="Accueil">
  265.             <div class="main-slider-one__carousel matchnhire-owl__carousel owl-carousel owl-loaded owl-drag"
  266.                  data-owl-options="{ &quot;loop&quot;: true, &quot;animateOut&quot;: &quot;slideOutDown&quot;,     &quot;animateIn&quot;: &quot;fadeIn&quot;, &quot;items&quot;: 1,
  267.         &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  }">
  269.                 <div class="owl-stage-outer">
  270.                     <div class="owl-stage"
  271.                          style="transform: translate3d(-3806px, 0px, 0px); transition: all 0s ease 0s; width: 13321px;">
  272.                         <div class="owl-item cloned" style="width: 1903px;">
  273.                             <div class="item" data-dot="<button>2/</button>">
  274.                                 <div class="main-slider-one__item">
  275.                                     <div class="main-slider-one__bg"
  276.                                          style="background-image: url(https://images.pexels.com/photos/590016/pexels-photo-590016.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);">
  277.                                     </div>
  278.                                     <div class="main-slider-one__overlay"></div>
  279.                                     <div class="main-slider-one__shape"
  280.                                          style="background-image: url(img/slider-1-shape-1.png);">
  281.                                     </div>
  282.                                     <div class="container">
  283.                                         <div class="row">
  284.                                             <div class="col-md-12">
  285.                                                 <div class="main-slider-one__content">
  286.                                                     <div class="main-slider-one__image"><img
  287.                                                                 src="img/slider-1-shape-2.png" alt="matchnhire">
  288.                                                     </div><!-- slider-layer -->
  289.                                                     <h2 class="main-slider-one__title">{{ 'slider.ai_agent_title'|trans|raw }}</h2><!-- slider-title -->
  290.                                                     <div class="main-slider-one__btn">
  291.                                                         <a href="https://app.matchnhire.com/"
  292.                                                            class="matchnhire-btn"><span>{{ 'slider.discover_more'|trans }}
  293.                                                                     </span></a><!-- slider-btn -->
  294.                                                     </div>
  295.                                                 </div>
  296.                                             </div>
  297.                                         </div>
  298.                                     </div>
  299.                                 </div>
  300.                             </div>
  301.                         </div>
  303.                         <div class="owl-item active" style="width: 1903px;">
  304.                             <div class="item" data-dot="<button>1/</button>">
  305.                                 <div class="main-slider-one__item">
  306.                                     <div class="main-slider-one__bg"
  307.                                          style="background-image: url(https://images.pexels.com/photos/5439137/pexels-photo-5439137.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);">
  308.                                     </div>
  309.                                     <div class="main-slider-one__overlay"></div>
  310.                                     <div class="main-slider-one__shape"
  311.                                          style="background-image: url(img//slider-1-shape-1.png);">
  312.                                     </div>
  313.                                     <div class="container">
  314.                                         <div class="row">
  315.                                             <div class="col-md-12">
  316.                                                 <div class="main-slider-one__content">
  317.                                                     <div class="main-slider-one__image"><img
  318.                                                                 src="img/slider-1-shape-2.png" alt="matchnhire"></div>
  319.                                                     <!-- slider-layer -->
  320.                                                     <h2 class="main-slider-one__title"><br>{{ 'slider.accelerated_recruitment'|trans|raw }}
  321.                                                     </h2><!-- slider-title -->
  322.                                                     <div class="main-slider-one__btn">
  323.                                                         <a href="https://app.matchnhire.com/"
  324.                                                            class="matchnhire-btn"><span>{{ 'slider.discover_more'|trans }}
  325.                                                                     </span></a><!-- slider-btn -->
  326.                                                     </div>
  327.                                                 </div>
  328.                                             </div>
  329.                                         </div>
  330.                                     </div>
  331.                                 </div>
  332.                             </div>
  333.                         </div>
  334.                         <div class="owl-item" style="width: 1903px;">
  335.                             <div class="item" data-dot="<button>2/</button>">
  336.                                 <div class="main-slider-one__item">
  337.                                     <div class="main-slider-one__bg"
  338.                                          style="background-image: url(https://images.pexels.com/photos/5668858/pexels-photo-5668858.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);">
  339.                                     </div>
  340.                                     <div class="main-slider-one__overlay"></div>
  341.                                     <div class="main-slider-one__shape"
  342.                                          style="background-image: url(img/slider-1-shape-1.png);">
  343.                                     </div>
  344.                                     <div class="container">
  345.                                         <div class="row">
  346.                                             <div class="col-md-12">
  347.                                                 <div class="main-slider-one__content">
  348.                                                     <div class="main-slider-one__image"><img
  349.                                                                 src="img/slider-1-shape-2.png" alt="matchnhire"></div>
  350.                                                     <!-- slider-layer -->
  351.                                                     <h2 class="main-slider-one__title"><br><br>{{ 'slider.vision_360'|trans }}</h2>
  352.                                                     <!-- slider-title -->
  353.                                                     <div class="main-slider-one__btn">
  354.                                                         <a href="https://app.matchnhire.com/"
  355.                                                            class="matchnhire-btn"><span>{{ 'slider.discover_more'|trans }}
  356.                                                                     </span></a><!-- slider-btn -->
  357.                                                     </div>
  358.                                                 </div>
  359.                                             </div>
  360.                                         </div>
  361.                                     </div>
  362.                                 </div>
  363.                             </div>
  364.                         </div>
  367.                     </div>
  368.                 </div>
  369.                 <div class="owl-nav">
  370.                     <button type="button" role="presentation" class="owl-prev" aria-label="carousel button">
  371.                         <i class="fas fa-arrow-left"></i>
  372.                     </button>
  373.                     <button type="button" role="presentation" class="owl-next" aria-label="carousel button">
  374.                         <i class="fas fa-arrow-right"></i>
  375.                     </button>
  376.                 </div>
  378.             </div>
  379.         </section>
  380.         <!-- main-slider-end -->
  381.         <section class="about-one" id="propos">
  382.             <div class="container">
  383.                 <div class="row">
  384.                     <div class="col-xl-6">
  385.                         <div class="about-one__image wow fadeInLeft animated" data-wow-delay="300ms"
  386.                              style="visibility: visible; animation-delay: 300ms; animation-name: fadeInLeft;">
  387.                             <div class="about-one__image-one">
  388.                                 <img src="https://images.pexels.com/photos/669617/pexels-photo-669617.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  389.                                      alt="matchnhire">
  390.                                 <div class="about-one__image-icon"><img src="img/about-1-bulb.png" alt="Matchnhire">
  391.                                 </div>
  392.                             </div>
  393.                         </div><!-- /.why-choose-two__image -->
  394.                     </div><!-- /.col-lg-6 -->
  395.                     <div class="col-xl-6 wow fadeInRight animated" data-wow-delay="300ms"
  396.                          style="visibility: visible; animation-delay: 300ms; animation-name: fadeInRight;">
  397.                         <div class="about-one__content">
  398.                             <div class="sec-title text-left">
  400.                                 <h6 class="sec-title__tagline">{{ 'about.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  402.                                 <h3 class="sec-title__title">{{ 'about.title'|trans }}</h3>
  404.                             </div><!-- /.sec-title -->
  405.                             <p class="about-one__content__text">
  406.                                 {{ 'about.description'|trans }}
  407.                             </p>
  408.                             <div class="row">
  409.                                 <div class="col-md-6">
  410.                                     <ul class="about-one__content__list">
  411.                                         <li><span class="fa fa-check-circle" aria-hidden="true"></span> {{ 'about.accelerated_recruitment'|trans }}
  412.                                         </li>
  413.                                         <li><span class="fa fa-check-circle" aria-hidden="true"></span> {{ 'about.cv_database'|trans }}
  414.                                         </li>
  416.                                         <li><span class="fa fa-check-circle" aria-hidden="true"></span> {{ 'about.vision_360'|trans }}
  417.                                         </li>
  418.                                     </ul>
  421.                                 </div>
  422.                                 <div class="col-md-6">
  425.                                     <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>
  427.                                 </div>
  428.                             </div>
  429.                         </div><!-- /.why-choose-two__content -->
  430.                     </div><!-- /.col-lg-6 -->
  431.                 </div><!-- /.row -->
  432.             </div><!-- /.container -->
  433.         </section><!-- /.about-one -->
  435.         <!-- Feature Start -->
  436.         <section class="feature-one" id="objetifs">
  437.             <div class="container">
  438.                 <div class="container">
  439.                     <div class="sec-title text-center">
  441.                         <h6 class="sec-title__tagline">{{ 'objectives.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  443.                     </div><!-- /.sec-title -->
  444.                 </div>
  445.                 <div class="row gutter-y-30">
  446.                     <div class="col-lg-4 col-md-6 wow fadeInUp animated" data-wow-delay="100ms"
  447.                          style="visibility: visible; animation-delay: 100ms; animation-name: fadeInUp;">
  448.                         <div class="feature-one__item text-center">
  449.                             <div class="feature-one__item__img">
  450.                                 <img src="https://images.pexels.com/photos/6285074/pexels-photo-6285074.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  451.                                      alt="matchnhire">
  452.                             </div>
  453.                             <div class="feature-one__item__content">
  454.                                 <div class="feature-one__item__ball"></div>
  455.                                 <h3 class="feature-one__item__title">{{ 'objectives.accelerated_recruitment_title'|trans }} <br> </h3>
  456.                                 <p class="feature-one__item__text">{{ 'objectives.accelerated_recruitment_text'|trans }}</p>
  457.                                 <a href="https://app.matchnhire.com/" class="matchnhire-btn"><span>{{ 'objectives.discover_more'|trans }}
  458.                                             </span></a>
  459.                             </div>
  460.                         </div><!-- feature-item -->
  461.                     </div>
  462.                     <div class="col-lg-4 col-md-6 wow fadeInUp animated" data-wow-delay="200ms"
  463.                          style="visibility: visible; animation-delay: 200ms; animation-name: fadeInUp;">
  464.                         <div class="feature-one__item text-center">
  465.                             <div class="feature-one__item__img">
  466.                                 <img src="https://images.pexels.com/photos/7735625/pexels-photo-7735625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  467.                                      alt="matchnhire">
  468.                             </div>
  469.                             <div class="feature-one__item__content">
  470.                                 <div class="feature-one__item__ball"></div>
  471.                                 <h3 class="feature-one__item__title">{{ 'objectives.interactive_cv_title'|trans }} <br></h3>
  472.                                 <p class="feature-one__item__text">{{ 'objectives.interactive_cv_text'|trans }}</p>
  473.                                 <a href="https://app.matchnhire.com/" class="matchnhire-btn"><span>{{ 'objectives.discover_more'|trans }}
  474.                                             </span></a>
  475.                             </div>
  476.                         </div><!-- feature-item -->
  477.                     </div>
  478.                     <div class="col-lg-4 col-md-6 wow fadeInUp animated" data-wow-delay="300ms"
  479.                          style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">
  480.                         <div class="feature-one__item text-center">
  481.                             <div class="feature-one__item__img">
  482.                                 <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"
  483.                                      alt="matchnhire">
  484.                             </div>
  485.                             <div class="feature-one__item__content">
  486.                                 <div class="feature-one__item__ball"></div>
  487.                                 <h3 class="feature-one__item__title"> {{ 'objectives.vision_360_title'|trans }} <br> </h3>
  488.                                 <p class="feature-one__item__text">{{ 'objectives.vision_360_text'|trans }}</p>
  489.                                 <a href="https://app.matchnhire.com/"
  490.                                    class="matchnhire-btn"><span>{{ 'objectives.discover_more'|trans }}
  491.                                             </span></a>
  492.                             </div>
  493.                         </div><!-- feature-item -->
  494.                     </div>
  495.                 </div>
  496.             </div>
  497.         </section>
  498.         <!-- Feature End -->
  499.         <div class="project-two" style="background-image: url(assets/images/backgrounds/project-bg-1.jpg);">
  500.             <div class="container">
  501.                 <div class="row tabs-box">
  502.                     <div class="col-lg-4">
  503.                         <div class="project-two__left-content">
  504.                             <div class="sec-title text-left">
  506.                                 <h6 class="sec-title__tagline">{{ 'product.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  508.                                 <h3 class="sec-title__title">Matchnhire</h3>
  509.                             </div><!-- /.sec-title -->
  510.                             <ul class="list-unstyled tab-buttons project-two__list">
  511.                                 <li data-tab="#staffing_solution" class="tab-btn active-btn">{{ 'product.portail'|trans }}</li>
  512.                                 <li data-tab="#scale_up_business" class="tab-btn">{{ 'product.dashboard'|trans }}</li>
  513.                             </ul><!-- /.list-unstyledf -->
  514.                         </div>
  515.                     </div>
  516.                     <div class="col-lg-8">
  517.                         <div class="Matchnhire-stretch-element-inside-column"
  518.                              style="margin-left: 0px; margin-right: -366.5px;">
  519.                             <div class="tabs-content">
  520.                                 <div class="tab active-tab fadeInUp animated" id="staffing_solution">
  521.                                     <div class="project-two__card">
  522.                                         <div class="project-two__img">
  523.                                             <img src="img/mockup_pc.png" alt="Matchnhire">
  524.                                         </div>
  526.                                     </div>
  527.                                 </div>
  528.                                 <div class="tab fadeInUp animated" id="scale_up_business">
  529.                                     <div class="project-two__card">
  530.                                         <div class="project-two__img">
  531.                                             <img src="img/mockup_pc_app.png" alt="Matchnhire">
  532.                                         </div>
  533.                                     </div>
  534.                                 </div>
  535.                             </div>
  536.                         </div>
  537.                     </div>
  538.                 </div>
  539.             </div>
  540.         </div>
  543.         <div class="project-one" id="process">
  544.             <div class="container">
  545.                 <div class="sec-title text-center">
  547.                     <h6 class="sec-title__tagline">{{ 'solution.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  549.                 </div><!-- /.sec-title -->
  550.             </div>
  551.             <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"
  552.                  data-owl-options="{
  553.         &quot;items&quot;: 1,
  554.         &quot;margin&quot;: 30,
  555.         &quot;loop&quot;: true,
  556.         &quot;smartSpeed&quot;: 100,
  557.         &quot;nav&quot;: true,
  558.         &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;],
  559.         &quot;dots&quot;: false,
  560.         &quot;autoplay&quot;: true,
  561.         &quot;responsive&quot;: {
  562.             &quot;0&quot;: {
  563.                 &quot;items&quot;: 1
  564.             },
  565.             &quot;576&quot;: {
  566.                 &quot;items&quot;: 2
  567.             },
  568.             &quot;992&quot;: {
  569.                 &quot;items&quot;: 3
  570.             },
  571.             &quot;1300&quot;: {
  572.                 &quot;items&quot;: 3.5
  573.             },
  574.             &quot;1600&quot;: {
  575.                 &quot;items&quot;: 4.83
  576.             }
  577.         }
  578.         }">
  579.                 <div class="owl-stage-outer">
  580.                     <div class="owl-stage solution">
  582.                         <div class="owl-item active" style="width: 370.207px; margin-right: 30px;">
  583.                             <div class="item">
  584.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  585.                                      data-wow-delay="1ms"
  586.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  587.                                     <div class="project-one__img">
  588.                                         <img src="https://images.pexels.com/photos/5474284/pexels-photo-5474284.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  589.                                              alt="Staffing Solution">
  590.                                     </div>
  591.                                     <div class="project-one__content">
  592.                                         <span class="project-one__tagline"> {{ 'solution.authentification'|trans }}</span>
  593.                                         <h3 class="project-one__title"><a href="#"> {{ 'solution.secure_authentification'|trans }}</a>
  594.                                         </h3>
  595.                                     </div>
  596.                                 </div>
  597.                             </div>
  598.                         </div>
  599.                         <div class="owl-item active" style="width: 370.207px; margin-right: 30px;">
  600.                             <div class="item">
  601.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  602.                                      data-wow-delay="1ms"
  603.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  604.                                     <div class="project-one__img">
  605.                                         <img src="https://images.pexels.com/photos/5439152/pexels-photo-5439152.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  606.                                              alt="Staffing Solution">
  607.                                     </div>
  608.                                     <div class="project-one__content">
  609.                                         <span class="project-one__tagline">{{ 'solution.extraction'|trans }}</span>
  610.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.key_information_extraction'|trans }}</a></h3>
  611.                                     </div>
  612.                                 </div>
  613.                             </div>
  614.                         </div>
  615.                         <div class="owl-item active" style="width: 370.207px; margin-right: 30px;">
  616.                             <div class="item">
  617.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  618.                                      data-wow-delay="1ms"
  619.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  620.                                     <div class="project-one__img">
  621.                                         <img src="https://images.pexels.com/photos/8101922/pexels-photo-8101922.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  622.                                              alt="Staffing Solution">
  623.                                     </div>
  624.                                     <div class="project-one__content">
  625.                                         <span class="project-one__tagline">{{ 'solution.profiles'|trans }}</span>
  626.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.intelligent_profile_selection'|trans }}</a>
  627.                                         </h3>
  628.                                     </div>
  629.                                 </div>
  630.                             </div>
  631.                         </div>
  632.                         <div class="owl-item" style="width: 370.207px; margin-right: 30px;">
  633.                             <div class="item">
  634.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  635.                                      data-wow-delay="1ms"
  636.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  637.                                     <div class="project-one__img">
  638.                                         <img src="https://images.pexels.com/photos/7681097/pexels-photo-7681097.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  639.                                              alt="Staffing Solution">
  640.                                     </div>
  641.                                     <div class="project-one__content">
  642.                                         <span class="project-one__tagline">{{ 'solution.reporting'|trans }}</span>
  643.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.intuitive_reporting'|trans }}</a>
  644.                                         </h3>
  645.                                     </div>
  646.                                 </div>
  647.                             </div>
  648.                         </div>
  650.                         <div class="owl-item" style="width: 370.207px; margin-right: 30px;">
  651.                             <div class="item">
  652.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  653.                                      data-wow-delay="1ms"
  654.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  655.                                     <div class="project-one__img">
  656.                                         <img src=https://images.pexels.com/photos/5387265/pexels-photo-5387265.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  657.                                              alt="Staffing Solution">
  658.                                     </div>
  659.                                     <div class="project-one__content">
  660.                                         <span class="project-one__tagline">{{ 'solution.jobs'|trans }}</span>
  661.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.simplified_job_posting'|trans }}</a>
  662.                                         </h3>
  663.                                     </div>
  664.                                 </div>
  665.                             </div>
  666.                         </div>
  668.                         <div class="owl-item" style="width: 370.207px; margin-right: 30px;">
  669.                             <div class="item">
  670.                                 <div class="project-one__card wow fadeInUp animated" data-wow-duration="1500ms"
  671.                                      data-wow-delay="1ms"
  672.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 1ms; animation-name: fadeInUp;">
  673.                                     <div class="project-one__img">
  674.                                         <img src="https://images.pexels.com/photos/7821484/pexels-photo-7821484.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
  675.                                              alt="Staffing Solution">
  676.                                     </div>
  677.                                     <div class="project-one__content">
  678.                                         <span class="project-one__tagline">{{ 'solution.matching'|trans }}</span>
  679.                                         <h3 class="project-one__title"><a href="#">{{ 'solution.precise_alignment'|trans }}</a>
  680.                                         </h3>
  681.                                     </div>
  682.                                 </div>
  683.                             </div>
  684.                         </div>
  685.                     </div>
  686.                 </div>
  687.                 <div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"
  688.                                                       aria-label="carousel button"><span class="fa fa-angle-left"
  689.                                                                                          aria-hidden="true"></span></button><button type="button" role="presentation"
  690.                                                                                                                                     class="owl-next" aria-label="carousel button"><span class="fa fa-angle-right"
  691.                                                                                                                                                                                         aria-hidden="true"></span></button></div>
  692.                 <div class="owl-dots disabled"></div>
  693.             </div>
  694.         </div>
  702.         <div class="project-one project" id="news">
  703.             <div class="container">
  704.                 <div class="sec-title text-center">
  706.                     <h6 class="sec-title__tagline">{{ 'news.tagline'|trans }}</h6><!-- /.sec-title__tagline -->
  708.                 </div><!-- /.sec-title -->
  709.             </div>
  710.             <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"
  711.                  data-owl-options="{
  712.         &quot;items&quot;: 1,
  713.         &quot;margin&quot;: 30,
  714.         &quot;loop&quot;: false,
  715.         &quot;smartSpeed&quot;: 700,
  716.         &quot;nav&quot;: false,
  717.         &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;],
  718.         &quot;dots&quot;: false,
  719.         &quot;autoplay&quot;: false,
  720.         &quot;responsive&quot;: {
  721.             &quot;0&quot;: {
  722.                 &quot;items&quot;: 1
  723.             },
  724.             &quot;576&quot;: {
  725.                 &quot;items&quot;: 2
  726.             },
  727.             &quot;992&quot;: {
  728.                 &quot;items&quot;: 3
  729.             },
  730.             &quot;1300&quot;: {
  731.                 &quot;items&quot;: 3.5
  732.             },
  733.             &quot;1600&quot;: {
  734.                 &quot;items&quot;: 4.83
  735.             }
  736.         }
  737.         }">
  738.                 <div class="owl-stage-outer">
  739.                     <div class="owl-stage"
  740.                          style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2402px;     margin: 0px auto;">
  742.                         <div class="owl-item" style="width: 395px;">
  743.                             <div class="item">
  744.                                 <div class="blog-card wow fadeInUp animated" data-wow-duration="1500ms"
  745.                                      data-wow-delay="100ms"
  746.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 100ms; animation-name: fadeInUp;">
  747.                                     <div class="blog-card__image">
  748.                                         <img src="https://abshore.com/img/events/matchnhire.jpg" alt="17e HR EXPO ">
  749.                                     </div>
  750.                                     <div class="blog-card__content">
  751.                                         <div class="blog-card__date"><span>27 </span>
  752.                                             Fév </div>
  753.                                         <ul class="list-unstyled blog-card__meta">
  754.                                             <li><a href="https://abshore.com"><i class="fas fa-tags"></i>ABSHORE</a>
  755.                                             </li>
  757.                                         </ul>
  758.                                         <h3 class="blog-card__title"><a href="#">17e HR EXPO </a>
  759.                                         </h3>
  760.                                         <p class="blog-card__info">17e HR EXPO : Découvrez le futur de la gestion
  761.                                             des recrutements avec ABSHORE</p>
  762.                                         <a href="#" class="blog-card__link">
  763.                                             {{ 'news.read_more'|trans }}
  764.                                             <i class="fa fa-arrow-right"></i>
  765.                                         </a>
  766.                                     </div>
  767.                                 </div>
  768.                             </div>
  769.                         </div>
  770.                         <div class="owl-item" style="width: 395px;">
  771.                             <div class="item">
  772.                                 <div class="blog-card wow fadeInUp animated" data-wow-duration="1500ms"
  773.                                      data-wow-delay="200ms"
  774.                                      style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInUp;">
  775.                                     <div class="blog-card__image">
  776.                                         <img src="img/medRH.png" alt="Outstanding island for winter sun">
  777.                                     </div>
  778.                                     <div class="blog-card__content">
  779.                                         <div class="blog-card__date"><span>8</span>
  780.                                             Nov</div>
  781.                                         <ul class="list-unstyled blog-card__meta">
  782.                                             <li><a href="https://abshore.com"><i class="fas fa-tags"></i>ABSHORE</a>
  783.                                             </li>
  785.                                         </ul>
  786.                                         <h3 class="blog-card__title"><a href="#">MEDRH2024</a></h3>
  787.                                         <p class="blog-card__info">Rencontres Méditerranéennes des Ressources
  788.                                             Humaines</p>
  789.                                         <a href="#" class="blog-card__link">
  790.                                             {{ 'news.read_more'|trans }}
  791.                                             <i class="fa fa-arrow-right"></i>
  792.                                         </a>
  793.                                     </div>
  794.                                 </div>
  795.                             </div>
  796.                         </div>
  797.                     </div>
  798.                 </div>
  799.                 <div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"
  800.                                                       aria-label="carousel button"><span class="fa fa-angle-left"
  801.                                                                                          aria-hidden="true"></span></button><button type="button" role="presentation"
  802.                                                                                                                                     class="owl-next" aria-label="carousel button"><span class="fa fa-angle-right"
  803.                                                                                                                                                                                         aria-hidden="true"></span></button></div>
  804.                 <div class="owl-dots disabled"></div>
  805.             </div>
  806.         </div>
  811.         <!-- Call To Action Start -->
  812.         <section class="cta-two contact-two  " id="contact">
  813.             <div class="contact-two__bg">
  815.             </div>
  816.             <div class="container">
  817.                 <div class="row">
  818.                     <div class="col-lg-7">
  819.                         {{ form_start(form, {'attr': {'class': 'contact-two__form contact-form wow fadeInUp animated'}}) }}
  820.                         <div class="contact-one__form__top">
  821.                             <div class="sec-title text-@@textAlign">
  822.                                 <h3 class="sec-title__title">{{ 'contact.title'|trans }}</h3>
  823.                             </div>
  824.                         </div>
  825.                         <div class="form-two__group">
  826.                             <div class="form-two__control form-two__control--full">
  827.                                 {{ form_widget(form.societe, {'attr': {'placeholder': ('contact.company'|trans)}}) }}
  828.                             </div>
  829.                             <div class="form-two__control form-two__control--full">
  830.                                 {{ form_widget(form.email, {'attr': {'placeholder': ('contact.email'|trans)}}) }}
  831.                             </div>
  832.                             <div class="form-two__control form-two__control--full">
  833.                                 {{ form_widget(form.telephone, {'attr': {'placeholder': ('contact.phone'|trans), 'pattern': '[0-9]*'}}) }}
  834.                             </div>
  835.                             <div class="form-two__control form-two__control--full">
  836.                                 {{ form_widget(form.message, {'attr': {'placeholder': ('contact.message'|trans)}}) }}
  837.                             </div>
  839.                             <div class="custom-control custom-checkbox customcheck">
  840.                                 <div class="switch">
  841.                                     <div class="icon">
  842.                                         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="bi bi-unlock-fill" viewBox="0 0 20 20" fill="currentColor">
  843.                                             <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"/>
  844.                                         </svg>
  845.                                         <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="bi bi-lock-fill" viewBox="0 0 20 20" fill="currentColor">
  846.                                             <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"/>
  847.                                         </svg>
  848.                                     </div>
  849.                                     <label for="{{ form.agreeTerms.vars.id }}" aria-label="Toggle Filter">
  850.                                         {{ form_widget(form.agreeTerms) }}
  851.                                     </label>
  852.                                     <span class="led"></span>
  853.                                 </div>
  854.                             </div>
  856.                             <button id="btnform" disabled style="cursor: not-allowed;" type="submit" class="matchnhire-btn">
  857.                                 {{ 'contact.send'|trans }}
  858.                             </button>
  859.                         </div>
  860.                         {{ form_end(form) }}
  861.                     </div>
  862.                     <div class="col-lg-5 wow fadeInRight" data-wow-delay="300ms"
  863.                          style="visibility: hidden; animation-delay: 300ms; animation-name: none;">
  864.                         <div class="cta-two__image">
  865.                             <img src="img/cta-2-1.png" alt="matchnhire">
  866.                         </div>
  867.                     </div>
  868.                 </div>
  869.             </div>
  870.         </section>
  871.         <!-- Call To Action End -->
  874.         <!-- <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/whrizi?embed=true"></div> -->
  876.         <!-- /.blog-one -->
  877.         <footer class="main-footer background-black">
  878.             <div class="main-footer__bg" style="background-image: url(img/footer-bg.jpg);">
  879.             </div>
  880.             <!-- /.main-footer__bg -->
  882.             <div class="main-footer__top">
  883.                 <div class="container">
  884.                     <div class="row">
  885.                         <div class="col-md-6 col-xl-5">
  886.                             <div class="footer-widget footer-widget--about">
  887.                                 <a href="/" class="footer-widget__logo" style="width: 100%;place-content: center;">
  888.                                     <img src="img/abshore_matchnhire.png"   alt="matchnhire  " style="width: 19rem;">
  889.                                 </a>
  891.                                 <p class="footer-widget__text">{{ 'footer.description'|trans }}</p>
  893.                             </div><!-- /.footer-widget -->
  894.                         </div><!-- /.col-md-6 -->
  896.                         <div class="col-md-6 col-xl-4">
  897.                             <div class="footer-widget footer-widget--contact">
  898.                                 <h2 class="footer-widget__title">{{ 'footer.links'|trans }}</h2><!-- /.footer-widget__title -->
  899.                                 <ul class="list-unstyled footer-widget__links">
  900.                                     <li><a href="/">{{ 'footer.footer_home'|trans }}</a></li>
  901.                                     <li><a href="#propos">{{ 'footer.footer_about'|trans }}</a></li>
  902.                                     <li><a href="#objetifs">{{ 'footer.footer_objectives'|trans }}</a></li>
  903.                                     <li><a href="#process">{{ 'footer.footer_solution'|trans }}</a></li>
  904.                                     <li><a href="#news">{{ 'footer.footer_news'|trans }}</a></li>
  905.                                     <li><a href="#contact">{{ 'footer.footer_contact'|trans }}</a></li>
  907.                                 </ul><!-- /.list-unstyled footer-widget__links -->
  908.                             </div><!-- /.footer-widget -->
  909.                         </div><!-- /.col-md-6 -->
  910.                         <div class="col-md-6 col-xl-3">
  911.                             <div class="footer-widget footer-widget--time">
  912.                                 <h2 class="footer-widget__title">{{ 'footer.contact_title'|trans }}</h2><!-- /.footer-widget__title -->
  914.                                 <!-- /.footer-widget__text -->
  915.                                 <ul class="list-unstyled footer-widget__info">
  916.                                     <img src="img/QRcontact.png" width="155" alt="">
  917.                                     <li>
  918.                                         <i class="fas fa-envelope" aria-hidden="true"></i> <a
  919.                                                 href="mailto:commercial@matchnhire.com">commercial@matchnhire.com</a></li>
  921.                                 </ul><!-- /.list-unstyled -->
  922.                             </div><!-- /.footer-widget -->
  923.                         </div><!-- /.col-md-6 -->
  924.                     </div><!-- /.row -->
  925.                 </div><!-- /.container -->
  926.             </div><!-- /.main-footer__top -->
  927.             <div class="main-footer__bottom">
  928.                 <div class="container">
  929.                     <div class="main-footer__bottom__inner">
  930.                         <div class="footer-widget__social">
  931.                             <a href="https://tn.linkedin.com/company/abshore">
  932.                                 <i class="fab fa-linkedin" aria-hidden="true"></i>
  933.                                 <span class="sr-only">linkedin</span>
  934.                             </a>
  936.                             <a href="https://www.facebook.com/ABSHORE?mibextid=ZbWKwL">
  937.                                 <i class="fab fa-facebook" aria-hidden="true"></i>
  938.                                 <span class="sr-only">Facebook</span>
  939.                             </a>
  942.                         </div><!-- /.footer-widget__social -->
  943.                         <p class="main-footer__copyright">
  944.                             {{ 'footer.copyright'|trans({'%year%': '2024'}) }} <a href="https://abshore.com/"
  945.                                                                                      target="_blank" alt="walid.hrizi@abshore.com">Abshore.</a>
  946.                         </p>
  947.                     </div><!-- /.main-footer__inner -->
  948.                 </div><!-- /.container -->
  949.             </div><!-- /.main-footer__bottom -->
  950.         </footer><!-- /.main-footer -->
  952.     </div><!-- /.page-wrapper -->
  955.     <div class="mobile-nav__wrapper">
  956.         <div class="mobile-nav__overlay mobile-nav__toggler"></div>
  957.         <!-- /.mobile-nav__overlay -->
  958.         <div class="mobile-nav__content">
  959.                 <span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"
  960.                                                                        aria-hidden="true"></i></span>
  961.             <div class="logo-box">
  962.                 <a href="#" aria-label="logo image"><img src="img/final-png.png" width="155" alt=""></a>
  963.             </div>
  964.             <!-- /.logo-box -->
  965.             <div class="mobile-nav__container">
  966.                 <ul class="main-menu__list">
  967.                     <li class="dropdown current">
  968.                         <a href="#Accueil">{{ 'nav.home'|trans }}</a>
  969.                     </li>
  970.                     <li class="dropdown">
  971.                         <a href="#propos">{{ 'nav.about'|trans }}</a>
  972.                     </li>
  973.                     <li>
  974.                         <a href="#objetifs">{{ 'nav.objectives'|trans }}</a>
  975.                     </li>
  976.                     <li class="dropdown">
  977.                         <a href="#process">{{ 'nav.solution'|trans }}</a>
  978.                     </li>
  979.                     <li class="dropdown">
  980.                         <a href="#news">{{ 'nav.news'|trans }}</a>
  981.                     </li>
  982.                     <li>
  983.                         <a href="#contact">{{ 'nav.contact'|trans }}</a>
  984.                     </li>
  985.                     <li>
  986.                         <a href="https://candidat.matchnhire.com/dashboard/recrutement">{{ 'nav.candidate_portal'|trans }}</a>
  987.                     </li>
  988.                 </ul>
  989.             </div>
  990.             <!-- /.mobile-nav__container -->
  991.             <!-- Mobile Language Selector and Login -->
  992.             <div class="mobile-nav__actions" style="padding: 20px; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); margin: 20px 0;">
  993.                 <div class="mobile-locale-switcher" style="margin-bottom: 15px;">
  994.                     <select id="mobile-locale-selector" onchange="changeLocale(this.value)" 
  995.                             style="width: 100%; 
  996.                                    padding: 12px 40px 12px 15px; 
  997.                                    border: 2px solid #e0e0e0; 
  998.                                    border-radius: 8px; 
  999.                                    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); 
  1000.                                    color: #2c3e50; 
  1001.                                    font-size: 14px; 
  1002.                                    font-weight: 600; 
  1003.                                    cursor: pointer; 
  1004.                                    appearance: none; 
  1005.                                    -webkit-appearance: none;
  1006.                                    -moz-appearance: none;
  1007.                                    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>'); 
  1008.                                    background-repeat: no-repeat; 
  1009.                                    background-position: right 12px center; 
  1010.                                    transition: all 0.3s ease; 
  1011.                                    outline: none;
  1012.                                    box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
  1013.                         <option value="fr" {{ app.request.locale == 'fr' ? 'selected' : '' }}>🇫🇷 Français</option>
  1014.                         <option value="en" {{ app.request.locale == 'en' ? 'selected' : '' }}>🇬🇧 English</option>
  1015.                     </select>
  1016.                 </div>
  1017.                 <div class="mobile-login-btn" style="margin-bottom: 10px;">
  1018.                     <a class="main-header__btn" href="https://app.matchnhire.com/" style="display: block; text-align: center; padding: 12px 20px; background: #4a90e2; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">{{ 'nav.login'|trans }}</a>
  1019.                 </div>
  1020.                 <div class="mobile-demo-btn">
  1021.                     <a class="matchnhire-btn matchnhire-btn--base" href="" onclick="Calendly.initPopupWidget({url: 'https://meetings.hubspot.com/matchnhire?embed=true'});return false;" style="display: block; text-align: center; width: 100%;">{{ 'nav.book_demo'|trans }}</a>
  1022.                 </div>
  1023.             </div>
  1024.             <ul class="mobile-nav__contact list-unstyled">
  1025.                 <li>
  1026.                     <i class="fa fa-envelope" aria-hidden="true"></i>
  1027.                     <a href="mailto:Contact@abshore.com">Contact@abshore.com</a>
  1028.                 </li>
  1029.                 <li>
  1030.                     <i class="fa fa-phone-alt" aria-hidden="true"></i>
  1031.                     <a href="tel:+216 71 96 34 53">+216 71 96 34 53</a>
  1032.                 </li>
  1033.             </ul><!-- /.mobile-nav__contact -->
  1034.             <div class="mobile-nav__social">
  1035.                 <a href="https://tn.linkedin.com/company/abshore">
  1036.                     <i class="fab fa-linkedin" aria-hidden="true"></i>
  1037.                     <span class="sr-only">linkedin</span>
  1038.                 </a>
  1040.                 <a href="https://www.facebook.com/ABSHORE?mibextid=ZbWKwL">
  1041.                     <i class="fab fa-facebook" aria-hidden="true"></i>
  1042.                     <span class="sr-only">Facebook</span>
  1043.                 </a>
  1044.             </div><!-- /.mobile-nav__social -->
  1045.         </div>
  1046.         <!-- /.mobile-nav__content -->
  1047.     </div>
  1049.     <!-- /.mobile-nav__wrapper -->
  1050.     <div class="search-popup">
  1051.         <div class="search-popup__overlay search-toggler"></div>
  1052.         <!-- /.search-popup__overlay -->
  1053.         <div class="search-popup__content">
  1054.             <form role="search" method="get" class="search-popup__form" action="#">
  1055.                 <input type="text" id="search" placeholder="Search Here...">
  1056.                 <button type="submit" aria-label="search submit" class="matchnhire-btn matchnhire-btn--base">
  1057.                     <span><i class="icon-magnifying-glass"></i></span>
  1058.                 </button>
  1059.             </form>
  1060.         </div>
  1061.         <!-- /.search-popup__content -->
  1062.     </div>
  1063.     <!-- /.search-popup -->
  1064. </div>
  1065. <a href="#" data-target="html" class="scroll-to-target scroll-to-top">
  1066.     <span class="scroll-to-top__text">{{ 'contact.back_to_top'|trans }}</span>
  1067.     <span class="scroll-to-top__wrapper"><span class="scroll-to-top__inner"></span></span>
  1068. </a>
  1069. <script src="https://kit.fontawesome.com/5b8eba834f.js" crossorigin="anonymous"></script>
  1070. <script src="{{ asset('js/jquery-3.7.0.min.js') }}"></script>
  1071. <script src="{{ asset('js/owl.carousel.min.js') }}"></script>
  1072. <script src="{{ asset('js/wow.js') }}"></script>
  1073. <script src="{{ asset('js/hire.js') }}"></script>
  1076. <script type="text/javascript">
  1077.     window.addEventListener("load", function() {
  1078.         document.getElementById("content-wrapper").style.display = "none";
  1080.         setTimeout(function() {
  1081.             document.getElementById("loading").style.display = "none";
  1082.             document.getElementById("content-wrapper").style.display = "block";
  1083.         }, 2000);
  1084.     });
  1085. </script>
  1086. <script>
  1087.     document.getElementById('{{ form.agreeTerms.vars.id }}').addEventListener('change', function() {
  1088.         var btn = document.getElementById('btnform');
  1089.         if (this.checked) {
  1090.             btn.removeAttribute('disabled');
  1091.             btn.style.cursor = 'pointer';
  1092.         } else {
  1093.             btn.setAttribute('disabled', 'disabled');
  1094.             btn.style.cursor = 'not-allowed';
  1095.         }
  1096.     });
  1097.     document.getElementById('toggle-2').addEventListener('change', function() {
  1098.         var btn = document.getElementById('btnform');
  1099.         if (this.checked) {
  1100.             btn.removeAttribute('disabled'); // Supprime l'attribut disabled
  1101.             btn.style.cursor = 'pointer'; // Change le curseur
  1102.         } else {
  1103.             btn.setAttribute('disabled', 'disabled'); // Ajoute l'attribut disabled
  1104.             btn.style.cursor = 'not-allowed'; // Change le curseur
  1105.         }
  1106.     });
  1108.     // Fonction pour changer la locale
  1109.     function changeLocale(locale) {
  1110.         if (!locale) {
  1111.             console.error('Locale is required');
  1112.             return;
  1113.         }
  1114.         
  1115.         // Récupérer l'URL actuelle
  1116.         var currentUrl = window.location.href;
  1117.         var parsedUrl = new URL(currentUrl);
  1118.         var path = parsedUrl.pathname;
  1119.         var query = parsedUrl.search;
  1120.         var hash = parsedUrl.hash;
  1121.         
  1122.         // Construire la nouvelle URL avec la locale
  1123.         var newPath;
  1124.         
  1125.         // Si le chemin commence par /fr ou /en
  1126.         if (path.match(/^\/(fr|en)(\/|$)/)) {
  1127.             // Remplacer la locale existante
  1128.             newPath = path.replace(/^\/(fr|en)/, '/' + locale);
  1129.         } else if (path === '/' || path === '') {
  1130.             // Si on est à la racine, ajouter la locale
  1131.             newPath = '/' + locale + '/';
  1132.         } else {
  1133.             // Sinon, insérer la locale au début
  1134.             newPath = '/' + locale + (path.startsWith('/') ? path : '/' + path);
  1135.         }
  1136.         
  1137.         // Construire la nouvelle URL complète
  1138.         var newUrl = parsedUrl.origin + newPath + query + hash;
  1139.         
  1140.         // Rediriger vers la nouvelle URL
  1141.         window.location.href = newUrl;
  1142.     }
  1143.     
  1144.     // Vérifier que le select est accessible au chargement
  1145.     document.addEventListener('DOMContentLoaded', function() {
  1146.         // Desktop selector
  1147.         var select = document.getElementById('locale-selector');
  1148.         if (select) {
  1149.             // Forcer les propriétés CSS importantes
  1150.             select.style.zIndex = '1002';
  1151.             select.style.pointerEvents = 'auto';
  1152.             select.style.position = 'relative';
  1153.             
  1154.             // Ajouter un event listener de secours si onchange ne fonctionne pas
  1155.             select.addEventListener('change', function(e) {
  1156.                 changeLocale(e.target.value);
  1157.             });
  1158.             
  1159.             // Test de clic
  1160.             select.addEventListener('click', function(e) {
  1161.                 e.stopPropagation();
  1162.             });
  1163.         }
  1164.         
  1165.         // Mobile selector
  1166.         var mobileSelect = document.getElementById('mobile-locale-selector');
  1167.         if (mobileSelect) {
  1168.             mobileSelect.addEventListener('change', function(e) {
  1169.                 changeLocale(e.target.value);
  1170.             });
  1171.         }
  1172.     });
  1173. </script>
  1174. <!-- Start of HubSpot Embed Code -->
  1175. <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/48156815.js"></script>
  1176. <!-- End of HubSpot Embed Code -->
  1178. </body>
  1183. <!-- Calendly badge widget begin -->
  1184. <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
  1185. <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
  1186. <!-- <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> -->
  1187. <!-- Calendly badge widget end -->
  1189. <!-- Start of HubSpot Embed Code -->
  1190. <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/48156815.js"></script>
  1191. <!-- End of HubSpot Embed Code -->
  1194. <!-- Start of Meetings Embed Script -->
  1195. <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
  1196. <!-- End of Meetings Embed Script -->
  1200. </html>