@extends("front.layout.master")
@section('meta_tags')
<title>Buy Modern Art Painting, Sculpture & Artwork Online - Artiner</title>
<meta content="Browse artworks online with Artiner. Buy paintings from a vast selection of paintings and sculptures from leading Contemporary, Modern & Pop Artists." name="description" />
@endsection
@section("body")      
<div class="full-container">
   <div class="mobile">
      @isset($sliders)
      <div class="container-fluid owlCarousel_desktop">
         <div class='owl-carousel' id='owlCarousel'>
            @foreach (json_decode($sliders) as $slider)
            <div class='slide banner-img-container' id="main-banner">
               <a href="{{ url($slider->linkedTo) }}">
               @if(file_exists(public_path().'/images/slider/'.$slider->image_link))
               <img data-src="{{ url($slider->image) }}" class="lazyload" alt="">
               @else
               <img data-src="{{ url($slider->image_link) }}" class="lazyload" alt="">
               @endif
               </a>
            </div>
            @endforeach
         </div>
      </div>
      @endisset    
   </div>
   <section id="single_slider" data-bgcolor="#F7F4FD">
      <div class="container">
         <div class="row">
            <div class="col-lg-12">
               <div class="text-center">
                  <h1 style="font-size: 32px;">{{ __('staticwords.BuyOriginalArtOnlineOnOurArtGallery') }}</h1>
                  <h5>{{ __('staticwords.aSelectionOfArtworksAndPaintingsForSaleJustForYou') }}</h5>
                  <div class="small-border bg-color-2"></div>
                  <x-art-slider heading="" :allproducts=$artworks_slider :productCount=count($artworks_slider) />
               </div>
            </div>
         </div>
      </div>
   </section>
   <section id="categories" data-bgcolor="#FFF">
      <div class="container">
         <div class="row">
            <div class="col-lg-12">
               <div class="text-center">
                  <h2>{{ __('staticwords.DiscoverWorldOriginalPaintingsSale') }}</h2>
                  <div class="small-border bg-color-2"></div>
                  @if(count($categories)>0)
                  <x-category heading=" " :allcategories=$categories />
                  @else
                  <x-collection heading="Collections" :allcollections=$collection  />
                  @endif
               </div>
            </div>
         </div>
      </div>
   </section>
   <section id="section-collections" data-bgcolor="#F7F4FD" class="pt30">
      <div class="container">
         <x-product-list heading="{{ __('staticwords.New') }} {{ __('staticwords.artworks') }}" :allproducts=$products :productCount='8' />
      </div>
   </section>
   <section id="artists" data-bgcolor="#FFF">
      <div class="container">
         <div class="row">
            <div class="col-lg-12">
               <div class="text-center">
                  <h2>{{__('staticwords.NewArtistsOnline')}}</h2>
                  <div class="small-border bg-color-2"></div>
               </div>
            </div>
            <x-seller-list heading=" " :allsellers=$sellers />
         </div>
      </div>
   </section>
   <section id="section-steps" data-bgcolor="#F7F4FD">
      <div class="container">
         <div class="row justify-content-center">
            <div class="col-lg-12">
               <div class="text-center">
                  <h2>{{__('staticwords.GetRegisteredAndStartSelling')}}</h2>
                  <div class="small-border bg-color-2"></div>
               </div>
            </div>
            <div class="container">
               <div class="row">
                  <div  class="steps-img col-lg-4 col-md-6 mb-sm-15">
                     <a href="{{ route('applyforseller') }}">
                        <div class="text-center">
                           <img data-src="{{url('https://artiner-prod.s3.ap-south-1.amazonaws.com/images/01.webp')}}" class="lazyload" title="Apply for seller" alt="Apply for seller" />      
                        </div>
                     </a>
                  </div>
                  <div class="steps-img col-lg-4 col-md-6 mb-sm-15">
                     <a href="{{ route('applyforseller') }}">
                        <div class="text-center">
                           <img data-src="{{url('https://artiner-prod.s3.ap-south-1.amazonaws.com/images/02.webp')}}" class="lazyload" title="Apply for seller" alt="Apply for seller"/>
                        </div>
                     </a>
                  </div>
                  <div class="steps-img col-lg-4 col-md-6 mb-sm-15">
                     <a href="{{ route('applyforseller') }}">
                        <div class="text-center">
                           <img data-src="{{url('https://artiner-prod.s3.ap-south-1.amazonaws.com/images/03.webp')}}" class="lazyload" title="Apply for seller" alt="Apply for seller"/>
                        </div>
                     </a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
   <x-guarantees />
   <x-home-content />
</div>
@endsection
@section('script')
<!-- <script src="{{url('giga/js/jquery.magnific-popup.min.js')}}"></script> -->
<script src="{{url('giga/js/jquery.isotope.min.js')}}"></script> 
<script>
   $(document).ready(() => {
       'use strict';
   
       var owl = $('.owl-carousel'),
           item,
           itemsBgArray = [], // to store items background-image
           itemBGImg;
   
       owl.owlCarousel({
           items: 1,
           smartSpeed: 1000,
           autoplay: true,
           autoplayTimeout: 8000,
           autoplaySpeed: 1000,
           loop: true,
           nav: true,
           autoplayHoverPause:true,
           navText: ["<i class='icon fa fa-arrow-left'></i>", "<i class='icon fa fa-arrow-right'></i>"],
          
       });
   
       $('.active').addClass('anim');
   
       var owlItem = $('.owl-item'),
           owlLen = owlItem.length;
       /* --------------------------------
         * store items bg images into array
       --------------------------------- */
       $.each(owlItem, function(i, e) {
           itemBGImg = $(e).find('.owl-item-bg').attr('src');
           itemsBgArray.push(itemBGImg);
       });
   });
</script>
@endsection