@include('public_area.layouts.header_include')

@include('public_area.layouts.aside_include')

@include('public_area.layouts.navbar_include')

<section class="mt-3 mb-3">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="tabbable">
               <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item">
                     <a class="md-ripples nav-link" id="home-tab" data-toggle="tab" href="#" role="tab" aria-controls="home" aria-selected="true">All</a>
                     </li>
                  <li class="nav-item">
                  <a class="md-ripples nav-link text-dark" href="{{ route('ready-food') }}">Ready Food</a>
                  </li>
                  <li class="nav-item">
                  <a class="md-ripples nav-link text-dark" href="{{ route('online-shopping') }}" >Online Shopping</a>
                  </li>
                  <li class="nav-item">
                  <a class="md-ripples nav-link text-dark" href="{{ route('money-transfer') }}" >Money Transfer</a>
                  </li>
                  
               </ul>
            </div>
         </div>
      </div>
   </div>
</section>

<section>
  <div class="wrapper">
    <div class="carousel owl-carousel">
       <div class="md-ripples card">
         <img src="banner/ready_food/B2.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B3.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B4.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B5.jpg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B8.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B14.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B16.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B18.jpeg" alt="">
       </div>
       <div class="md-ripples card">
         <img src="banner/ready_food/B12.jpeg" alt="">
       </div>

    </div>
 </div>
</section>

<section>
   <div class="wrapper">
     <div class="carousel owl-carousel">
        <div class="md-ripples card">
          <img src="banner/online_shopping/B1.jpeg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/online_shopping/B2.jpeg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/online_shopping/B3.jpeg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/online_shopping/B4.jpeg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/online_shopping/B5.jpeg" alt="">
        </div>
       
 
     </div>
  </div>
 </section>

 <section>
   <div class="wrapper">
     <div class="carousel owl-carousel">
        <div class="md-ripples card">
          <img src="banner/money_transfer/B1.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B2.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B3.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B4.jpg" alt="">
        </div>
        <div class="md-ripples card">
          <img src="banner/money_transfer/B5.jpg" alt="">
        </div>
       
 
     </div>
  </div>
 </section>


@include('public_area.layouts.footer_include')

<script>
  $(".carousel").owlCarousel({
    margin: 20,
    loop: true,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    responsive: {
      0:{
        items:1,
        nav: false
      },
      600:{
        items:1,
        nav: false
      },
      800:{
        items:1,
        nav: false
      },
      1000:{
        items:3,
        nav: false
      }
    }
  });
</script>