@extends('layout.mainlayout')

@section('content')
  <main class="page-main">
    <!-- Start Banner Section  -->
    <section class="new-sec product-sec">
      <div class="banner d-flex align-items-center">
      <img src="img/left-banner.png" class="float-img left" alt="Blazma Website">
      <div class="container">
        <div class="sec-content text-center">
          <h2 class="sec-title">{{trans('web.our_products')}}</h2>
          <p class="desc">{{trans('web.our_products_desc')}}</p>
          <a href="/partner" class="btn demo-btn">
            {{trans('web.request_a_demo')}}
            <span class="icon">&#10230;</span>
          </a>
        </div>
      </div>
      <img src="img/right-banner.png" class="float-img right" alt="Blazma Website">
      </div>
    </section>
    <!-- ُEnd Banner Section  -->
    <!-- Start Connect Section -->
    <section id="BlazmaLabInformationSystem"class="new-sec connect-sec products">
      <div class="container">
        <div class="sec-header text-center">
          <h2 class="sec-title">{{trans('web.blazma_connect')}}</h2>
          <p class="desc">{{trans('web.blazma_connect_desc')}}</p>
        </div>
        <div class="row">
          <div class="col-lg-6 col-img">
            <div class="image-div">
            <img src="img/lab.png" alt="Lab">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="content">
              <h5 class="num">01</h5>
              <h3 class="title">{{trans('web.lab_info_system')}}</h3>
              <p class="desc">{{trans('web.lab_info_system_desc')}}</p>
              <div class="features">
                <p><i class="ri-check-line"></i>{{trans('web.lab_info_system_list1')}}</p>
                <p><i class="ri-check-line"></i> {{trans('web.lab_info_system_list2')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.lab_info_system_list3')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.lab_info_system_list4')}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
        <div class="col-lg-6">
            <div class="content">
              <h5 class="num">02</h5>
              <h3 class="title">{{trans('web.blazma_smart')}}</h3>
              <p class="desc">{{trans('web.blazma_smart_desc')}}</p>
              <div class="features">
                <p><i class="ri-check-line"></i>{{trans('web.blazma_smart_list1')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_smart_list2')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_smart_list3')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_smart_list4')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_smart_list5')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_smart_list6')}}</p>
              </div>

            </div>
          </div>
          <div class="col-lg-6 col-img">
            <div class="image-div">
              <img src="img/smart.png" alt="Mobile">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 col-img">
            <div class="image-div">
              <img src="img/mobile1.png" alt="Booking">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="content">
              <h5 class="num">03</h5>
              <h3 class="title">{{trans('web.branded_mobile_application')}}</h3>
              <p class="desc">{{trans('web.branded_mobile_application_desc')}}</p>
              <div class="features">
                <p><i class="ri-check-line"></i>{{trans('web.branded_mobile_application_list1')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.branded_mobile_application_list2')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.branded_mobile_application_list3')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.branded_mobile_application_list4')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.branded_mobile_application_list5')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.branded_mobile_application_list6')}}</p>
              </div>
            </div>

          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="content">
            <h5 class="num">04</h5>
              <h3 class="title">{{trans('web.booking_portal')}}</h3>
              <p class="desc">{{trans('web.booking_portal_desc')}}</p>
              <div class="features">
                <p><i class="ri-check-line"></i>{{trans('web.booking_portal_list1')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.booking_portal_list2')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.booking_portal_list3')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.booking_portal_list4')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.booking_portal_list5')}}</p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-img">
            <div class="image-div">
            <img src="img/booking-two.png" alt="Smart">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Start Other Products Section -->
    <section class="new-sec other-prd-sec products" id="BlazmaSmart">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6 col-img">
            <div class="kiosk text-center">
              <img src="img/kiosk-two.png" alt="Kiosk">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="content">
            <h5 class="num">05</h5>
              <h3 class="title">{{trans('web.kiosk')}}</h3>
              <p class="desc">{{trans('web.kiosk_desc')}}</p>
              <div class="features">
                <p><i class="ri-check-line"></i>{{trans('web.kiosk_list1')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.kiosk_list2')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.kiosk_list3')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.kiosk_list4')}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Other Products Section -->
    <!-- Start Other Products Section -->
    <section class="new-sec other-prd-sec products" id="BlazmaGo(Logistics)">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="content content-blazma-care">
              <h5 class="num">06</h5>
              <h3 class="title">{{trans('web.blazma_go_logistic')}}</h3>
              <p class="desc">{{trans('web.blazma_go_logistic_desc')}}</p>
              <div class="features">
                <p><i class="ri-check-line"></i>{{trans('web.blazma_go_logistic_list1')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_go_logistic_list2')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_go_logistic_list3')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_go_logistic_list4')}}</p>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-img">
            <div class="image-div">
              <img src="img/go.png" alt="Go">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Other Products Section -->
    <!-- Start Other Products Section -->
    <section class="new-sec other-prd-sec products" id="BlazmaCare">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6 col-img">
            <div class="image-div">
              <img src="img/care.png" alt="Care">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="content">
              <h5 class="num">07</h5>
              <h3 class="title">{{trans('web.blazma_care')}}</h3>
              <p class="desc">{{trans('web.blazma_care_desc')}}</p>
              <div class="features">
                <p><i class="ri-check-line"></i>{{trans('web.blazma_care_list1')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_care_list2')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_care_list3')}}</p>
                <p><i class="ri-check-line"></i>{{trans('web.blazma_care_list4')}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Other Products Section -->
    <!-- End Connect Section -->
    <!-- Start CTA Solution Section -->
    <section class="new-sec cta-solutions-sec">
      <div class="container">
        <div class="sec-content">
          <img src="img/solution-circles.png" alt="Circles">
          <h5 class="subtitle">{{trans('web.we_will_offer')}}</h5>
          <h3 class="sec-title">{{trans('web.lets_gets_to_know')}}</h3>
          <p class="sec-desc">{{trans('web.contact_our_sales')}}</p>
          <a href="/contact" class="btn btn-blazma">
            {{trans('web.contact_us')}}
            <span class="icon">&#10230;</span>
          </a>
        </div>
      </div>
    </section>
    <!-- End CTA Solution Section -->
    <!-- Start Testimonial Section -->
    <section class="new-sec testimonials-sec without-back">
      <div class="container">
        <div class="sec-header text-center">
          <h5 class="subtitle">{{trans('web.testimonials')}}</h5>
          <h2 class="sec-title">{{trans('web.our_clients_comments')}}</h2>
        </div>
      </div>
      <div class="sec-slider">
        <div id="testimonials" class="splide">
          <div class="splide__track">
            <div class="splide__list">
              <div class="splide__slide">
                <div class="single-testi">
                  <p class="desc">{{trans('web.testimonial_one')}}</p>
                  <div class="testi-footer">
                    <div class="testi-image">
                       <!-- <img src="img/testi1.jfif" alt="Testimonial Picture"> -->
                    </div>
                    <div class="testi-info">
                    <h3 class="name">Laila Jwan</h3>
                      <span class="tag">{{trans("web.client")}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="splide__slide">
                <div class="single-testi">
                <p class="desc">{{trans("web.testimonial_two")}}</p>
                  <div class="testi-footer">
                    <div class="testi-image">
                       <!-- <img src="img/testi2.jfif" alt="Testimonial Picture"> -->
                    </div>
                    <div class="testi-info">
                    <h3 class="name">Ahmad Hazem</h3>
                     <span class="tag">{{trans("web.client")}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="splide__slide">
                <div class="single-testi">
                <p class="desc">{{trans("web.testimonial_three")}}</p>
                  <div class="testi-footer">
                    <div class="testi-image">
                        <!--<img src="img/testi3.jfif" alt="Testimonial Picture">-->
                    </div>
                    <div class="testi-info">
                    <h3 class="name">Salma Khader</h3>
                    <span class="tag">{{trans("web.client")}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="splide__slide">
                <div class="single-testi">
                <p class="desc">{{trans("web.testimonial_foor")}}.</p>
                  <div class="testi-footer">
                    <div class="testi-image">
                        <!--<img src="img/testi4.jfif" alt="Testimonial Picture">-->
                    </div>
                    <div class="testi-info">
                    <h3 class="name">Emad Saad</h3>
                                            <span class="tag">{{trans("web.client")}}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="splide__slide">
                <div class="single-testi">
                <p class="desc">{{trans("web.testimonial_five")}}</p>
                  <div class="testi-footer">
                    <div class="testi-image">
                      <!--<img src="img/testi1.jfif" alt="Testimonial Picture">-->
                    </div>
                    <div class="testi-info">
                    <h3 class="name">Huda Mo</h3>
                      <span class="tag">{{trans("web.client")}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="splide__arrows splide__arrows--ltr">
            <button
                    class="splide__arrow splide__arrow--prev"
                    type="button"
                    aria-label="Previous slide"
                    aria-controls="splide01-track"
            >
              <span class="icon">&#10229;</span>
            </button>
            <button
                    class="splide__arrow splide__arrow--next"
                    type="button"
                    aria-label="Next slide"
                    aria-controls="splide01-track"
            >
              <span class="icon">&#10230;</span>
            </button>
          </div>
        </div>
      </div>
    </section>
    <!-- End Testimonial Section -->
   @include('still-have-question')
  </main>
@endsection
<script src="/bower_components/admin-lte/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
  var hash = window.location.hash;
  if (hash == "#BrandedMobileApplication") {
    var top = document.getElementById("#BrandedMobileApplication").offsetTop; //Getting Y of target element
    window.scrollTo(0, top);
  }
  else if (hash == "#BlazmaLabInformationSystem") {
    var top = document.getElementById("#BlazmaLabInformationSystem").offsetTop; //Getting Y of target element
    window.scrollTo(0, top);
  }
  else if (hash == "#BrandedWebBookingPortal") {
    var top = document.getElementById("#BrandedWebBookingPortal").offsetTop; //Getting Y of target element
    window.scrollTo(0, top);
  }
  else if (hash == "#SelfBookingService(KIOSK)") {
    var top = document.getElementById("#SelfBookingService(KIOSK)").offsetTop; //Getting Y of target element
    window.scrollTo(0, top);
  }
  else if (hash == "#BlazmaSmart") {
    var top = document.getElementById("#BlazmaSmart").offsetTop; //Getting Y of target element
    window.scrollTo(0, top);
  }
  else if (hash == "#BlazmaGo(Logistics)") {
    var top = document.getElementById("#BlazmaGo(Logistics)").offsetTop; //Getting Y of target element
    window.scrollTo(0, top);
  }
  else if (hash == "#BlazmaCare") {
    var top = document.getElementById("#BlazmaCare").offsetTop; //Getting Y of target element
    window.scrollTo(0, top);
  }
  });
</script>