@extends('layouts.main-app')

@section('title', 'Homepage')

@section('content')


    @include('layouts.navbar', [
        'headerTitle' => 'About Us',
         'headerDescription' => ''])
<section class="w-full h-1/2 relative px-3">
  
    <div class="w-full  relative h-full mb-24">
        <img src="{{asset('assets/about/aboutbanner.png')}}" alt="Healthcare" class="w-full h-full object-cover absolute top-0 left-0 z-0">
            <div class="flex flex-col md:flex-row gap-2 justify-center items-center relative py-32">
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">Home > </span>
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">About Us > </span>
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">Company Profile</span>
            </div>
    </div>

    @include('frontend.components.about.about')
    @include('frontend.components.about.aboutservice')
    
    <div class="w-full max-w-screen-xl mx-auto flex justify-center items-center py-10 relative "
    
      data-aos="fade-up"
              data-aos-duration="1200"
              >
        <div class="swiper single-slide-carousel swiper-container">
         <div class="swiper-wrapper mb-16">

           <div class="swiper-slide flex justify-center items-center">
            <img src="{{asset('assets/homepage/Below Banner.png')}}" alt="Healthcare" class="w-3/4 h-[500px] object-cover rounded-3xl">
           </div>
          
           <div class="swiper-slide flex justify-center items-center">
               <img src="{{asset('assets/homepage/Below Banner.png')}}" alt="Healthcare" class="w-3/4 h-[500px] object-cover rounded-3xl">
           </div>

           <div class="swiper-slide flex justify-center items-center">
            <img src="{{asset('assets/homepage/Below Banner.png')}}" alt="Healthcare" class="w-3/4 h-[500px] object-cover rounded-3xl">
           </div>
          
           <div class="swiper-slide flex justify-center items-center">
            <img src="{{asset('assets/homepage/Below Banner.png')}}" alt="Healthcare" class="w-3/4 h-[500px] object-cover rounded-3xl">
           </div>

         </div>
        </div>

        <div class="absolute flex justify-center items-center m-auto right-[20%] z-30 w-fit bottom-20 gap-2">
            <button id="swiper-button-prev" data-carousel-prev>
             <i class="bx bx-chevron-left  bg-blue-500 text-white rounded-full p-[20px]"></i>
            </button>
         
            <button id="swiper-button-next" data-carousel-next>
             <i class="bx bx-chevron-right  bg-blue-500 text-white rounded-full p-[20px]"></i>
            </button>
          </div>
</div>
    @include('frontend.components.about.history')


    

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    var swiper = new Swiper(".single-slide-carousel", {
      loop: true,
      speed: 1000,
      slidesPerView: 1,
      spaceBetween: 20,
      navigation: {
        nextEl: "#swiper-button-next",
        prevEl: "#swiper-button-prev",
      },
    
    });
   </script>


</section>

@endsection