@extends('layouts.app')

@section('head')
 {{--   <style>
        a.box:hover{
            background-color: rgba(0, 0, 0,0.3) !important;
        }
    </style>--}}
@endsection
@section('content')

   
  <section class="hero">
        <div class="hero-body">
            <div class="container has-text-centered">
             <div class="columns">
                 <div class="column">
                     <div class="box cat_top wow bounceInLeft" style="background: url('/images/fishingapparels.jpg');">
                            <a href="{{route('getSubCat',"fishing-apparels")}}" class="box hvr-bounce-to-right" style="padding: 20%;">
                                <h3 class="title color-is-white">Fishing Apparels</h3>
                            </a>
                     </div>
                 </div>
                 <div class="column">
                     <div class="box cat_top wow bounceInRight"  style="background: url('/images/huntingapparels.jpg');">
                         <a href="{{route('getSubCat',"hunting-apparels")}}" class="box  hvr-bounce-to-left" style="padding: 20%;">
                             <h3 class="title color-is-white">Hunting Apparels</h3>
                         </a>
                     </div>
                 </div>
             </div>
            </div>
        </div>
    </section>
    <div class="new_collection" style="padding: 3% 0">

        <div class="container category_collection has-text-centered" style="padding-left: 10%; padding-right: 10%">
            <div class="tile is-ancestor">

                <div class="tile is-parent wow slideInLeft" style="background: url('/images/sportswear.jpg')">
                    <a href="{{route('getSubCat',"sports-wears")}}" class="box background-none hvr-shutter-in-vertical" style="padding: 15%; margin: 10%;">
                        <div class="content">
                            <p class="title  color-is-white">Sports Wear</p>
                        </div>
                    </a>
                </div>
                <div class="tile is-vertical is-8">
                    <div class="tile">
                        <div class="tile is-parent is-vertical">
                            <article class="tile is-child wow slideInDown" style="background: url('/images/fitnesswear.jpg'); min-height: 280px;">
                                <a href="{{route('getSubCat','fitness-wears')}}" class="box hvr-shutter-in-horizontal"  style="padding: 14%;margin: 7.1% 7% 7% 7%;">
                                    <p class="title  color-is-white">Fitness Wear</p>
                                </a>
                            </article>
                            <article class="tile is-child wow slideInUp" style="background: url('/images/martial-arts.jpg'); min-height: 280px;">
                                <a href="{{route('getSubCat','martial-arts')}}" class="box hvr-shutter-in-horizontal"  style="padding: 14%;margin: 7.1% 7% 7% 7%;">
                                    <p class="title  color-is-white">Martial Arts</p>
                                </a>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <section class="hero featured">
        <div class="hero-body">
            <div class="container">
                <h1 class="title has-text-centered">FEATURED PRODUCTS</h1>
                <div class='carousel is-4 carousel-animated carousel-animate-slide'
                     data-autoplay="true" data-delay="10000">
                      <div class="carousel-navigation">
                        <div class="carousel-nav-left">
                            <i class="fa fa-chevron-left" aria-hidden="true"></i>
                        </div>
                        <div class="carousel-nav-right">
                            <i class="fa fa-chevron-right" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div class='carousel-container'>
                        @foreach($products as $product)
                            <div class='carousel-item {{$loop->iteration == 1?'is-active':''}}'>
                                @include('partials._product-card',['product'=>$product])
                            </div>
                        @endforeach
                    </div>
                  
                </div>
            </div>
        </div>
    </section>
    

   
 
@endsection