@extends('hiremee-revamp.layouts.main-layout')
@section('pageTitle', 'An AI Powered Assessments & hiring platform | HireMee')
@section('content')

<!--===== Vendor CSS (Bootstrap & Icon Font) =====-->
<link rel="stylesheet" type="text/css" href="{{secure_asset('assets/hiremee-revamp/assets/css/bootstrap.min.css') }}">
<!-- fontawesome-free-6.5.2 Version -->
<!-- <link rel="stylesheet" type="text/css" href="{{secure_asset('assets/hiremee-revamp/assets/vendor/fontawesome/css/all.css') }}"> -->
<link rel="stylesheet" type="text/css" href="{{secure_asset('assets/hiremee-revamp/assets/vendor/aos/aos.css') }}">
<link rel="stylesheet" type="text/css" href="{{secure_asset('assets/hiremee-revamp/assets/vendor/owlcarousel/owl.carousel.min.css') }}">
<!--====== Main Style CSS ======-->
<link rel="stylesheet" type="text/css" href="{{secure_asset('assets/hiremee-revamp/assets/css/style.css') }}">
<link rel="stylesheet" type="text/css" href="{{secure_asset('assets/hiremee-revamp/assets/scss/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{secure_asset('assets/hiremee-revamp/assets/css/genric.css') }}">



<style>
  .download-count .phone-img {
      transform: translateY(-100px) scale(0.9);
  }
  @media (width > 1400px) {
      .download-count .phone-img {
          transform: translateY(-230px) scale(0.6);
      }
  }
</style>
    <div>
    <!-- Header Container -->
    <div class="clearfix"></div>

    <!-- Hero section sliders --> 
    @include('hiremee-revamp.partials.new-partials.home-banner')

    <!-- Our Products Section  -->
    @include('hiremee-revamp.partials.new-partials.our-products-home')
    
    <!-- Institution Partners Section -->
    {{-- @include('hiremee-revamp.partials.new-partials.institution-partners-home')--}}
        @include('hiremee-revamp.partials.new-partials.corporate-client-slider-home')
    <!-- HireMee's Solutions Section-->
    @include('hiremee-revamp.partials.new-partials.hiremee-solutions-home')
    
    <!-- Our Trusted Corporate Client Section -->
    {{--@include('hiremee-revamp.partials.new-partials.corporate-client-slider-home')--}}
        
    <!-- Count and Download hiremee app -->
    @include('hiremee-revamp.partials.new-partials.download-app-home')
    
    <!-- Our Best Services Proctoring Tools for Online Examination-->
    @include('hiremee-revamp.partials.new-partials.proctoring-tools-for-online-examinations-home')

    <!-- Jobs app -->
    @include('hiremee-revamp.partials.new-partials.latest-freshers-job')  
        
    <!-- Our blog Section  -->
    @include('hiremee-revamp.partials.new-partials.our-blog-home')

    <!-- Clients Testimonials Section  -->
    @include('hiremee-revamp.partials.new-partials.pro-page-testimonials-view')
    
<!-- <div class="container bcorp-sec-img">
   <div class="row justify-content-center">
     <div class="col-12">
         <a href="https://www.bcorporation.net/en-us/find-a-b-corp/company/karpaga-assessment-app-matrix-services-private-limited/" target="_blank" title="B-Corporation">
           <img style="max-height: 161px;" src="https://upweb.hiremee.co.in:8980/assets/hiremee-revamp/images/home/b-corp-section-image.jpg" alt="B-Corporation">
         </a>
     </div>
   </div>
</div> -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<script src="{{ secure_asset('assets/hiremee-revamp/js/static-page.js') }}"></script>
<script type="text/javascript">
  loadMobileCodeWithCountryNew();
</script>
<script>
function labnolIframe(div) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute(
    "src",
    "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
  );
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("allowfullscreen", "1");
  iframe.setAttribute(
    "allow",
    "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  );
  div.parentNode.replaceChild(iframe, div);
}

function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName("youtube-player");
  for (var n = 0; n < playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var div = document.createElement("div");
    div.setAttribute("data-id", videoId);
    var thumbNode = document.createElement("img");
    thumbNode.src = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace(
      "ID",
      videoId
    );
    div.appendChild(thumbNode);
    var playButton = document.createElement("div");
    playButton.setAttribute("class", "play");
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}

document.addEventListener("DOMContentLoaded", initYouTubeVideos);

</script>  
</div> <!-- Wrapper -->
<script src="{{secure_asset('assets/hiremee-revamp/js/global.js') }}"></script>
<!-- <script src="{{secure_asset('assets/hiremee-revamp/assets/vendor/counter/jquery.min.js') }}"></script> -->
<!-- <script src="{{secure_asset('assets/hiremee-revamp/assets/js/bootstrap.bundle.min.js') }}"></script> -->
<script src="{{secure_asset('assets/hiremee-revamp/assets/vendor/fontawesome/js/all.js') }}"></script>
<script src="{{secure_asset('assets/hiremee-revamp/assets/vendor/aos/aos.js') }}"></script>
<script src="{{secure_asset('assets/hiremee-revamp/assets/vendor/counter/jquery.counterup.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="{{secure_asset('assets/hiremee-revamp/assets/vendor/owlcarousel/owlcarousel.min.js') }}"></script>


<script>
   AOS.init({
       once: true,
   });
</script>

<script>
   $('.carousel-main').owlCarousel({
       items: 6,
       loop: true,
       autoplay: true,
       autoplayTimeout: 3000,
       margin: 20,
       dots: false,
       //  responsiveClass: true,
       responsiveBaseElement: '.carousel-main',
       responsive: {
           0: {
               items: 1,
               nav: false
           },
           600: {
               items: 3,
               nav: true
           },
           1000: {
               items: 5,
               nav: true,
           },
           1200:{
               items: 6,
               nav: true,
   
           },
       },
       navText: ['<span class="fas fa-chevron-left fa-2x left-arrow"></span>',
           '<span class="fas fa-chevron-right fa-2x right-arrow"></span> '],
   })
    $('.blog-carousel').owlCarousel({
    items: 3,
    loop: true,
    autoplay: true,
    autoplayTimeout: 5000,
    // margin: 20,
    dots: false,
    // responsiveClass: true,
    responsiveBaseElement: '.blog-cards',
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:3
        }
    },
    navText: ['<span class="fas fa-chevron-left fa-2x left-arrow"></span>',
           '<span class="fas fa-chevron-right fa-2x right-arrow"></span> '],

})


</script>
@endsection