@section('content')

    <main class="main">
        <div class="intro-slider-container mb-5">
            <div class="intro-slider owl-carousel owl-theme owl-nav-inside owl-light" data-toggle="owl"
                 data-owl-options='{
                        "dots": true,
                        "nav": false,
                        "responsive": {
                            "1200": {
                                "nav": true,
                                "dots": false
                            }
                        }
                    }'>
                <div class="intro-slide" style="background-image: url({{asset('assets/website/assets/images/slider/slide-1.png')}});">
                    <div class="container intro-content">
                        <div class="row justify-content-end">
                            <div class="col-auto col-sm-7 col-md-6 col-lg-5">
{{--                                <h3 >Spécialistes de la </h3>--}}
{{--                                <h2 class="font-7rem font-secondary"> Nutrition Sportive</h2>--}}



{{--                                <a href="{{route('web.shop')}}" class="btn btn-primary btn-round">--}}
{{--                                    <span>Shop More</span>--}}
{{--                                    <i class="icon-long-arrow-right"></i>--}}
{{--                                </a>--}}
                            </div><!-- End .col-lg-11 offset-lg-1 -->
                        </div><!-- End .row -->
                    </div><!-- End .intro-content -->
                </div><!-- End .intro-slide -->
                <div class="intro-slide" style="background-image: url({{asset('assets/website/assets/images/slider/slide-2.jpg')}});">
                    <div class="container intro-content">
                        <div class="row justify-content-end">
                            <div class="col-auto col-sm-7 col-md-6 col-lg-5">
{{--                                <h3 >Vous méritez </h3>--}}
{{--                                <h2 class="font-7rem font-secondary"> Healthy Body</h2>--}}

{{--                                <a href="{{route('web.shop')}}" class="btn btn-primary btn-round">--}}
{{--                                    <span>Shop More</span>--}}
{{--                                    <i class="icon-long-arrow-right"></i>--}}
{{--                                </a>--}}
                            </div><!-- End .col-lg-11 offset-lg-1 -->
                        </div><!-- End .row -->
                    </div><!-- End .intro-content -->
                </div><!-- End .intro-slide -->

             </div><!-- End .intro-slider owl-carousel owl-simple -->

            <span class="slider-loader"></span><!-- End .slider-loader -->
        </div><!-- End .intro-slider-container -->

        <div class="container">
            <h2 class="title text-center mb-4 font-7rem font-secondary hive-icon">Marques </h2><!-- End .title text-center -->

            <div class="container">
                <hr class="mb-0">
                <div class="owl-carousel mt-5 mb-5 owl-simple" data-toggle="owl"
                     data-owl-options='{
                        "nav": false,
                        "dots": true,
                        "margin": 30,
                        "loop": true,
                        "autoplay" : true,
                        "responsive": {
                            "0": {
                                "items":2
                            },
                            "420": {
                                "items":3
                            },
                            "600": {
                                "items":4
                            },
                            "900": {
                                "items":5
                            },
                            "1024": {
                                "items":6
                            }
                        }
                    }'>
                    @foreach($brands as $brand)

                        <a href="/shop?brands[]={{$brand->id}}" class="cat-block">

                            <img src="{{asset($brand->default_image_url)}}" alt="{{$brand->name}}" height="80">



                        </a>


                    @endforeach



                </div><!-- End .owl-carousel -->
            </div><!-- End .container -->
        </div><!-- End .container -->

        <div class="mb-4"></div><!-- End .mb-4 -->

        <div class="container ">
            <div class="row">
                <div class="col-md-12 mb-2">
                    <a href="https://housenutrition.tn/fr/product/473">
                        <img src="{{asset('assets/website/assets/images/products/behemoth.jpg')}}" alt="">
                    </a>
                </div>
                <div class="col-md-6 mt-1">
                    <a href="https://housenutrition.tn/fr/product/447">
                    <img src="{{asset('assets/website/assets/images/products/musclejuice.png')}}" alt="">
                    </a>
                </div>
                <div class="col-md-6 mt-1">
                    <a href="https://housenutrition.tn/fr/product/28">
                        <img src="{{asset('assets/website/assets/images/products/anabolicmass.jpg')}}" alt="">
                    </a>
                </div>
                <div class="col-md-6 mt-1">
                    <a href="https://housenutrition.tn/fr/product/448">
                        <img src="{{asset('assets/website/assets/images/products/iso sensation.png')}}" alt="">
                    </a>
                </div>
                <div class="col-md-6 mt-1">
                    <a href="https://housenutrition.tn/fr/product/58">
                        <img src="{{asset('assets/website/assets/images/products/prostar.png')}}" alt="">
                    </a>
                </div>
                <div class="col-md-12 mt-1">
                    <a href="https://housenutrition.tn/fr/product/334">
                        <img src="{{asset('assets/website/assets/images/products/prostak.webp')}}" alt="" class="w-100">
                    </a>
                </div>
            </div>
        </div>

        <div class="mb-3"></div><!-- End .mb-5 -->
        <div class="mb-3"></div><!-- End .mb-5 -->
        <div class="container new-arrivals m">
            <div class="heading heading-flex mb-3">
                <div class="heading-left">
                    <h2 class="title">Les Plus Commandés</h2><!-- End .title -->
                </div><!-- End .heading-left -->
            </div><!-- End .heading -->

            <div class="tab-content tab-content-carousel just-action-icons-sm">
                <div class="tab-pane p-0 fade show active" id="new-all-tab" role="tabpanel" aria-labelledby="new-all-link">
                    <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl"
                         data-owl-options='{
                                "nav": true,
                                "dots": true,
                                "margin": 20,
                                "loop": false,
                                "responsive": {
                                    "0": {
                                        "items":2
                                    },
                                    "480": {
                                        "items":2
                                    },
                                    "768": {
                                        "items":3
                                    },
                                    "992": {
                                        "items":4
                                    },
                                    "1200": {
                                        "items":5
                                    }
                                }
                            }'>
                        @foreach($products as $product)
                            @include('website2.layouts.product-component', ['product' => $product])

                        @endforeach
                    </div><!-- End .owl-carousel -->
                </div><!-- .End .tab-pane -->

            </div><!-- End .tab-content -->
        </div><!-- End .container -->

        <div class="mb-6"></div><!-- End .mb-6 -->



        <div class="container">
            <div class=" text-center mb-3">
                <h2 class="title text-center mb-4 font-7rem font-secondary hive-icon">Formations </h2><!-- End .title text-center -->
                <p class="title-desc">Spécialistes de la nutrition sportive</p><!-- End .title-desc -->
            </div><!-- End .heading -->

            <div class="row justify-content-center">


                <div class="col-lg-6 deal-col">
                    <div class="deal" style="background-image: url('{{asset('assets/website/assets/images/demos/demo-4/deal/bg-2.jpg')}}');">
                        <div class="deal-top">
                            <h2>Assistance.</h2>
                            <h4>Suivi des professionels.</h4>
                        </div><!-- End .deal-top -->

                        <div class="deal-content">
                            <h3 class="product-title">COACHING SPORTIF ET NUTRITIONNEL SUR MESURE
                                MENUS PERSONNALISÉS ET SUIVI 7J/7
                                MUSCULATION - FITNESS - NUTRITION - MINCEUR</h3><!-- End .product-title -->

                            <div class="product-price">
                                <span class="new-price">A partir de 100TND/mois</span>
                            </div><!-- End .product-price -->
                            <div class="product-price">
                                <span class="new-price">A partir de 270TND/3mois</span>
                            </div><!-- End .product-price -->

                            <a href="{{route('web.contact')}}" class="btn btn-link"><span>Nous Contacter</span><i class="icon-long-arrow-right"></i></a>
                        </div><!-- End .deal-content -->

                        <div class="deal-bottom">
                            <div class="deal-countdown offer-countdown" data-until="+10d"></div><!-- End .deal-countdown -->
                        </div><!-- End .deal-bottom -->
                    </div><!-- End .deal -->
                </div><!-- End .col-lg-6 -->
            </div><!-- End .row -->

            <div class="more-container text-center mt-1 mb-5">
                <a href="#" class="btn btn-outline-dark-2 btn-round btn-more"><span>Shop more Outlet deals</span><i class="icon-long-arrow-right"></i></a>
            </div><!-- End .more-container -->
        </div><!-- End .container -->








@stop
@include('website2.layouts.header')
@include('website2.layouts.topbar')
@include('website2.layouts.footer')

@yield('header')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<!-- Plugins css -->
{{--<link href="{{URL::asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css"/>--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
@yield('topbar')
@yield('sidebar')
@yield('content')
@yield('footer')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--<script src="{{URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-knob/jquery.knob.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-sparkline/jquery.sparkline.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.time.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.tooltip.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.selection.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.crosshair.js')}}"></script>--}}


{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

@include('website2.layouts.end')