@extends('front.layout')

@section('content')
<!-- Home slider -->
@include('front.slider')
<!-- Home slider end -->


<!-- collection banner -->
@include('front.home.affiche')
<!-- collection banner end -->


<!-- Paragraph-->

<!-- Paragraph end -->


<!-- Product slider -->
@include('front.produits.newcollection')
<!-- Product slider end -->

@include('front.home.categorie')
<!-- Parallax banner -->

@if($banners)
<section class="p-0">
    <div class="full-banner parallax text-center p-left">
        <img src="{{asset('images/banners/'.$banners->image)}}" alt="" class="bg-img blur-up lazyload">
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <div class="banner-contain">
                        <h2>{{ $banners->translate($locale)->title1 }}</h2>
                        <h3>{{ $banners->translate($locale)->title2 }}</h3>
                        <h4>{{ $banners->translate($locale)->title3 }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!-- Parallax banner end -->


<!-- Tab product -->
{{--   @include('front.home.product')--}}
<!-- Tab product end -->


<!-- service layout -->
<div class="container-fluid">
    <section class="service border-section small-section">
        <div class="row">
            <div class="col-md-4 service-block">
                <div class="media">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -117 679.99892 679">
                        <path
                                d="m12.347656 378.382812h37.390625c4.371094 37.714844 36.316407 66.164063 74.277344 66.164063 37.96875 0 69.90625-28.449219 74.28125-66.164063h241.789063c4.382812 37.714844 36.316406 66.164063 74.277343 66.164063 37.96875 0 69.902344-28.449219 74.285157-66.164063h78.890624c6.882813 0 12.460938-5.578124 12.460938-12.460937v-352.957031c0-6.882813-5.578125-12.464844-12.460938-12.464844h-432.476562c-6.875 0-12.457031 5.582031-12.457031 12.464844v69.914062h-105.570313c-4.074218.011719-7.890625 2.007813-10.21875 5.363282l-68.171875 97.582031-26.667969 37.390625-9.722656 13.835937c-1.457031 2.082031-2.2421872 4.558594-2.24999975 7.101563v121.398437c-.09765625 3.34375 1.15624975 6.589844 3.47656275 9.003907 2.320312 2.417968 5.519531 3.796874 8.867187 3.828124zm111.417969 37.386719c-27.527344 0-49.851563-22.320312-49.851563-49.847656 0-27.535156 22.324219-49.855469 49.851563-49.855469 27.535156 0 49.855469 22.320313 49.855469 49.855469 0 27.632813-22.21875 50.132813-49.855469 50.472656zm390.347656 0c-27.53125 0-49.855469-22.320312-49.855469-49.847656 0-27.535156 22.324219-49.855469 49.855469-49.855469 27.539063 0 49.855469 22.320313 49.855469 49.855469.003906 27.632813-22.21875 50.132813-49.855469 50.472656zm140.710938-390.34375v223.34375h-338.375c-6.882813 0-12.464844 5.578125-12.464844 12.460938 0 6.882812 5.582031 12.464843 12.464844 12.464843h338.375v79.761719h-66.421875c-4.382813-37.710937-36.320313-66.15625-74.289063-66.15625-37.960937 0-69.898437 28.445313-74.277343 66.15625h-192.308594v-271.324219h89.980468c6.882813 0 12.464844-5.582031 12.464844-12.464843 0-6.882813-5.582031-12.464844-12.464844-12.464844h-89.980468v-31.777344zm-531.304688 82.382813h99.703125v245.648437h-24.925781c-4.375-37.710937-36.3125-66.15625-74.28125-66.15625-37.960937 0-69.90625 28.445313-74.277344 66.15625h-24.929687v-105.316406l3.738281-5.359375h152.054687c6.882813 0 12.460938-5.574219 12.460938-12.457031v-92.226563c0-6.882812-5.578125-12.464844-12.460938-12.464844h-69.796874zm-30.160156 43h74.777344v67.296875h-122.265625zm0 0"
                                fill="#ff4c3b" />
                    </svg>
                    <div class="media-body">
                        <h4>Livraison rapide</h4>
                        <p>Livraison Monde entier</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 service-block">
                <div class="media">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                         id="Capa_1" x="0px" y="0px" viewBox="0 0 480 480" style="enable-background:new 0 0 480 480;"
                         xml:space="preserve" width="512px" height="512px">
                           <g>
                               <g>
                                   <g>
                                       <path
                                               d="M472,432h-24V280c-0.003-4.418-3.588-7.997-8.006-7.994c-2.607,0.002-5.05,1.274-6.546,3.41l-112,160 c-2.532,3.621-1.649,8.609,1.972,11.14c1.343,0.939,2.941,1.443,4.58,1.444h104v24c0,4.418,3.582,8,8,8s8-3.582,8-8v-24h24 c4.418,0,8-3.582,8-8S476.418,432,472,432z M432,432h-88.64L432,305.376V432z"
                                               fill="#ff4c3b" />
                                       <path
                                               d="M328,464h-94.712l88.056-103.688c0.2-0.238,0.387-0.486,0.56-0.744c16.566-24.518,11.048-57.713-12.56-75.552 c-28.705-20.625-68.695-14.074-89.319,14.631C212.204,309.532,207.998,322.597,208,336c0,4.418,3.582,8,8,8s8-3.582,8-8 c-0.003-26.51,21.486-48.002,47.995-48.005c10.048-0.001,19.843,3.151,28.005,9.013c16.537,12.671,20.388,36.007,8.8,53.32 l-98.896,116.496c-2.859,3.369-2.445,8.417,0.924,11.276c1.445,1.226,3.277,1.899,5.172,1.9h112c4.418,0,8-3.582,8-8 S332.418,464,328,464z"
                                               fill="#ff4c3b" />
                                       <path
                                               d="M216.176,424.152c0.167-4.415-3.278-8.129-7.693-8.296c-0.001,0-0.002,0-0.003,0 C104.11,411.982,20.341,328.363,16.28,224H48c4.418,0,8-3.582,8-8s-3.582-8-8-8H16.28C20.283,103.821,103.82,20.287,208,16.288 V40c0,4.418,3.582,8,8,8s8-3.582,8-8V16.288c102.754,3.974,185.686,85.34,191.616,188l-31.2-31.2 c-3.178-3.07-8.242-2.982-11.312,0.196c-2.994,3.1-2.994,8.015,0,11.116l44.656,44.656c0.841,1.018,1.925,1.807,3.152,2.296 c0.313,0.094,0.631,0.172,0.952,0.232c0.549,0.198,1.117,0.335,1.696,0.408c0.08,0,0.152,0,0.232,0c0.08,0,0.152,0,0.224,0 c0.609-0.046,1.211-0.164,1.792-0.352c0.329-0.04,0.655-0.101,0.976-0.184c1.083-0.385,2.069-1.002,2.888-1.808l45.264-45.248 c3.069-3.178,2.982-8.242-0.196-11.312c-3.1-2.994-8.015-2.994-11.116,0l-31.976,31.952 C425.933,90.37,331.38,0.281,216.568,0.112C216.368,0.104,216.2,0,216,0s-0.368,0.104-0.568,0.112 C96.582,0.275,0.275,96.582,0.112,215.432C0.112,215.632,0,215.8,0,216s0.104,0.368,0.112,0.568 c0.199,115.917,91.939,210.97,207.776,215.28h0.296C212.483,431.847,216.013,428.448,216.176,424.152z"
                                               fill="#ff4c3b" />
                                       <path
                                               d="M323.48,108.52c-3.124-3.123-8.188-3.123-11.312,0L226.2,194.48c-6.495-2.896-13.914-2.896-20.408,0l-40.704-40.704 c-3.178-3.069-8.243-2.981-11.312,0.197c-2.994,3.1-2.994,8.015,0,11.115l40.624,40.624c-5.704,11.94-0.648,26.244,11.293,31.947 c9.165,4.378,20.095,2.501,27.275-4.683c7.219-7.158,9.078-18.118,4.624-27.256l85.888-85.888 C326.603,116.708,326.603,111.644,323.48,108.52z M221.658,221.654c-0.001,0.001-0.001,0.001-0.002,0.002 c-3.164,3.025-8.148,3.025-11.312,0c-3.125-3.124-3.125-8.189-0.002-11.314c3.124-3.125,8.189-3.125,11.314-0.002 C224.781,213.464,224.781,218.53,221.658,221.654z"
                                               fill="#ff4c3b" />
                                   </g>
                               </g>
                           </g>
                       </svg>
                    <div class="media-body">
                        <h4> service client 24 / 7</h4>
                        <p>service en ligne pour nos clients  </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 service-block">
                <div class="media">
                    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="cc-visa" class="svg-inline--fa fa-cc-visa fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M470.1 231.3s7.6 37.2 9.3 45H446c3.3-8.9 16-43.5 16-43.5-.2.3 3.3-9.1 5.3-14.9l2.8 13.4zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM152.5 331.2L215.7 176h-42.5l-39.3 106-4.3-21.5-14-71.4c-2.3-9.9-9.4-12.7-18.2-13.1H32.7l-.7 3.1c15.8 4 29.9 9.8 42.2 17.1l35.8 135h42.5zm94.4.2L272.1 176h-40.2l-25.1 155.4h40.1zm139.9-50.8c.2-17.7-10.6-31.2-33.7-42.3-14.1-7.1-22.7-11.9-22.7-19.2.2-6.6 7.3-13.4 23.1-13.4 13.1-.3 22.7 2.8 29.9 5.9l3.6 1.7 5.5-33.6c-7.9-3.1-20.5-6.6-36-6.6-39.7 0-67.6 21.2-67.8 51.4-.3 22.3 20 34.7 35.2 42.2 15.5 7.6 20.8 12.6 20.8 19.3-.2 10.4-12.6 15.2-24.1 15.2-16 0-24.6-2.5-37.7-8.3l-5.3-2.5-5.6 34.9c9.4 4.3 26.8 8.1 44.8 8.3 42.2.1 69.7-20.8 70-53zM528 331.4L495.6 176h-31.1c-9.6 0-16.9 2.8-21 12.9l-59.7 142.5H426s6.9-19.2 8.4-23.3H486c1.2 5.5 4.8 23.3 4.8 23.3H528z"></path></svg>
                    <div class="media-body">
                        <h4>Paiement sécurisé</h4>
                        <p>Payer vos Commandes en toute sécurité   </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- service layout  end -->




<!-- instagram section -->
<!--section class="instagram ratio_square">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 p-0">
                <h2 class="title-borderless">#getunisie</h2>
                <div class="slide-7 no-arrow slick-instagram">
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/2.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/3.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/4.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/9.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/6.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/7.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/8.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/9.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <div class="instagram-box"> <img src="{{asset('frontend/assets/images/slider/2.jpg')}}" class="bg-img"
                                                             alt="img">
                                <div class="overlay"><i class="fa fa-instagram" aria-hidden="true"></i></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section-->
<!-- instagram section end -->
@endsection