@extends('layouts.app')


@section('content')

<section class="bg-secondary py-4 pt-md-5">
        <div class="container py-xl-2">
          <div class="row">
            <!-- Slider     -->
            <div class="col-xl-9 pt-xl-4 order-xl-2">
              <div class="tns-carousel">
                <div class="tns-carousel-inner" data-carousel-options="{&quot;items&quot;: 1, &quot;controls&quot;: false, &quot;loop&quot;: false}">
                  
                    <div>
                    <div class="row align-items-center">
                      <div class="col-md-6 order-md-2"><img class="d-block mx-auto" src="{{asset('img/home/hero-slider/tawfexx.png')}}" alt="VR Collection"></div>
                      <div class="col-lg-5 col-md-6 offset-lg-1 order-md-1 pt-4 pb-md-4 text-center text-md-start">
                        <h2 class="fw-light pb-1 from-bottom">Gagnez des commissions sur les achats avec</h2>
                        <h1 class="display-4 from-bottom delay-1">la carte TAWFEEX</h1>
                        <h5 class="fw-light pb-3 from-bottom delay-2">Profitez des avantages exclusifs</h5>
                        <div class="d-table scale-up delay-4 mx-auto mx-md-0"><a class="btn btn-primary btn-shadow" href="https://wa.me/221775902353">Contact<i class="ci-arrow-right ms-2 me-n1"></i></a></div>
                      </div>
                    </div>
                  </div>
                  
                    <div>
                    <div class="row align-items-center">
                      <div class="col-md-6 order-md-2"><img class="d-block mx-auto" src="{{asset('img/home/hero-slider/tawfexx.png')}}" alt="VR Collection"></div>
                      <div class="col-lg-5 col-md-6 offset-lg-1 order-md-1 pt-4 pb-md-4 text-center text-md-start">
                        <h2 class="fw-light pb-1 from-bottom">Gagnez des commissions sur les achats avec</h2>
                        <h1 class="display-4 from-bottom delay-1">la carte TAWFEEX</h1>
                        <h5 class="fw-light pb-3 from-bottom delay-2">Profitez des avantages exclusifs</h5>
                        <div class="d-table scale-up delay-4 mx-auto mx-md-0"><a class="btn btn-primary btn-shadow" href="https://wa.me/221775902353">Contact<i class="ci-arrow-right ms-2 me-n1"></i></a></div>
                      </div>
                    </div>
                  </div>
                  
      
                </div>
              </div>
            </div>
            <!-- Banner group-->
            <div class="col-xl-3 order-xl-1 pt-4 mt-3 mt-xl-0 pt-xl-0">
              <div class="table-responsive" data-simplebar>
                <div class="d-flex d-xl-block">
                    <a class="d-flex align-items-center bg-faded-info rounded-3 pt-2 ps-2 mb-4 me-4 me-xl-0" href="/liste_produits" style="min-width: 16rem;">
                        <img src="img/home/banners/banner-sm01.png" width="125" alt="Banner">
                        <div class="py-4 px-2">
                            <h5 class="mb-2"><span class="fw-light">Nouvelles Collections</span><br>
                            </h5>
                            <div class="text-info fs-sm">Visiter<i class="ci-arrow-right fs-xs ms-1"></i></div>
                        </div>
                    </a>
                
                    <a class="d-flex align-items-center bg-faded-warning rounded-3 pt-2 ps-2 mb-4 me-4 me-xl-0" href="/liste_produits" style="min-width: 16rem;">
                        <img src="img/home/banners/banner-sm02.png" width="125" alt="Banner">
                        <div class="py-4 px-2">
                            <h5 class="mb-2"><span class="fw-light">Promotions</span><br>uniques</h5>
                            <div class="text-warning fs-sm">Visiter<i class="ci-arrow-right fs-xs ms-1"></i></div>
                        </div>
                    </a>
                
                    <a class="d-flex align-items-center bg-faded-success rounded-3 pt-2 ps-2 mb-4" href="/liste_produits" style="min-width: 16rem;">
                        <img src="img/home/banners/banner-sm03.png" width="125" alt="Banner">
                        <div class="py-4 px-2">
                            <h5 class="mb-2"><span class="fw-light">Prix </span><br>Inégalés</h5>
                            <div class="text-success fs-sm">Visiter<i class="ci-arrow-right fs-xs ms-1"></i></div>
                        </div>
                    </a>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </section>

          <!-- Brands carousel-->
<!--           <section class="container mb-3 mt-5">
            <div class="tns-carousel border-end">
              <div class="tns-carousel-inner" data-carousel-options="{ &quot;nav&quot;: false, &quot;controls&quot;: false, &quot;autoplay&quot;: true, &quot;autoplayTimeout&quot;: 4000, &quot;loop&quot;: true, &quot;responsive&quot;: {&quot;0&quot;:{&quot;items&quot;:1},&quot;360&quot;:{&quot;items&quot;:2},&quot;600&quot;:{&quot;items&quot;:3},&quot;991&quot;:{&quot;items&quot;:4},&quot;1200&quot;:{&quot;items&quot;:4}} }">
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/13.png" style="width: 165px;" alt="Brand"></a></div>
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/14.png" style="width: 165px;" alt="Brand"></a></div>
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/17.png" style="width: 165px;" alt="Brand"></a></div>
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/16.png" style="width: 165px;" alt="Brand"></a></div>
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/15.png" style="width: 165px;" alt="Brand"></a></div>
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/18.png" style="width: 165px;" alt="Brand"></a></div>
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/19.png" style="width: 165px;" alt="Brand"></a></div>
                <div><a class="d-block bg-white border py-4 py-sm-5 px-2" href="home-electronics-store.html#" style="margin-right: -.0625rem;"><img class="d-block mx-auto" src="img/shop/brands/20.png" style="width: 165px;" alt="Brand"></a></div>
              </div>
            </div>
          </section> -->
      <!-- Products grid (Trending products)-->
      @livewire('sections.blog1')
      <!-- Promo banner-->
      <section class="container mt-4 mb-grid-gutter">
        <div class="bg-faded-info rounded-3 py-4">
          <div class="row align-items-center">
            <div class="col-md-5">
                <div class="px-4 pe-sm-0 ps-sm-5">
                    <h3 class="mt-4 mb-1 text-body fw-light">Lancez votre propre</h3>
                    <h2 class="mb-1">Boutique en ligne</h2>
                    <p class="h5 text-body fw-light">et commencez à vendre dès aujourd'hui!</p>
                    <a class="btn btn-accent" href="create-online-store.html">Créer ma boutique<i class="ci-arrow-right fs-ms ms-1"></i></a>
                </div>
                
            </div>
            <div class="col-md-7"><img src="img/home/banners/ecom.png" alt="Tawfeex Market"></div>
          </div>
        </div>
      </section>

      @livewire('sections.bloc2')
      <!-- Product widgets-->
     @livewire('sections.bloc3')


@endsection