{{define "home"}}
<!--==================== BOOKING ====================-->
<section class="booking">
  <div class="booking-content container">
    <h1>Location des produits et services</h1>
    <p>Des prix imbattables, des réservations flexibles.</p>
    <form class="booking-form" id="booking-form">
      <div class="form-group">
        <i class="ri-map-pin-fill"></i>
        <input type="text" placeholder="Localisation" required />
      </div>
      <div class="form-group">
        <i class="ri-calendar-fill"></i>
        <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="Date de départ" required />
      </div>
      <div class="form-group">
        <i class="ri-calendar-fill"></i>
        <input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="Date de retour" required />
      </div>
      <button type="submit" class="btn btn-primary">Recherche</button>
    </form>
  </div>
</section>

<!--==================== SERVICES ====================-->
<section class="services section">
  <div class="services__container container grid">
    <article class="services__card">
      <i class="ri-truck-line"></i>
      <h3 class="services__title">Livraison gratuite</h3>
      <p class="services__description">Pour plus de 1000€ de locations</p>
    </article>
    <article class="services__card">
      <i class="ri-truck-line"></i>
      <h3 class="services__title">Paiements sécurisés</h3>
      <p class="services__description">100% de paiements sécurisés</p>
    </article>
    <article class="services__card">
      <i class="ri-truck-line"></i>
      <h3 class="services__title">Support 24/7</h3>
      <p class="services__description">Nous contacter au 01 84 21 13 96</p>
    </article>
  </div>
</section>

<!--==================== HOME ====================-->
<section class="home" id="home">
  <div class="home__container container" id="grid">
    <div class="home__data">
      <h1 class="home__title">
        Nos catégories <br>
        de produits
      </h1>
      <p class="home__description">
        Trouve les meilleurs produits de tes catégories préférées,
        explore des centaines de produits avec toutes les catégories
        possibles, profite d’une réduction de 15% et bien plus encore.
      </p>
      <a hx-get="/explore" hx-target="#view" hx-push-url="true" class="button" onclick="explore()">Découvrir maintenant</a>
    </div>
    <div class="home__images">
      <div class="home__swiper swiper">
        <div class="swiper-wrapper">
          <article class="home__article swiper-slide">
            <img src="/public/assets/img/tools/terres-agricoles.jpg" alt="image" class="home__img">
          </article>
          <article class="home__article swiper-slide">
            <img src="/public/assets/img/tools/mat-construction.jpg" alt="image" class="home__img">
          </article>
          <article class="home__article swiper-slide">
            <img src="/public/assets/img/tools/electromenagers.avif" alt="image" class="home__img">
          </article>
          <article class="home__article swiper-slide">
            <img src="/public/assets/img/tools/vehicules.jpg" alt="image" class="home__img">
          </article>
          <article class="home__article swiper-slide">
            <img src="/public/assets/img/tools/salles-evenementielles.jpg" alt="image" class="home__img">
          </article>
          <article class="home__article swiper-slide">
            <img src="/public/assets/img/tools/logements-meubles.jpg" alt="image" class="home__img">
          </article>
        </div>
      </div>
    </div>
  </div>
</section>

<!--==================== FARMLANDS ====================-->
<section class="farmland section" id="farmland">
  <h2 class="section__title">Nos terres agricoles</h2>
  <div class="farmland__container container">
    <div class="farmland__swiper swiper">
      <div class="swiper-wrapper">

        <article class="farmland__card swiper-slide">
          <img src="/public/assets/img/farmlands/terrain-attecoube.jpg" alt="image" class="farmland__img">
          <h2 class="farmland__title">Terrain Nord</h2>
          <div class="farmland__prices">
            <span class="farmland__discount">180€/hectare</span>
            <span class="farmland__price">250€/hectare</span>
          </div>
          <button class="skinny__border__button" onclick="farmlandAttecoubeByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="farmlandAttecoube()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="farmland__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>

        <article class="farmland__card swiper-slide">
          <img src="/public/assets/img/farmlands/terrain-treichville.jpeg" alt="image" class="farmland__img">
          <h2 class="farmland__title">Terrain Sud</h2>
          <div class="farmland__prices">
            <span class="farmland__discount">180€/hectare</span>
            <span class="farmland__price">250€/hectare</span>
          </div>
          <button class="skinny__border__button" onclick="farmlandTreichvilleByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="farmlandTreichville()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="farmland__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>

        <article class="farmland__card swiper-slide">
          <img src="/public/assets/img/farmlands/terrain-marcory.jpg" alt="image" class="farmland__img">
          <h2 class="farmland__title">Terrain Ouest</h2>
          <div class="farmland__prices">
            <span class="farmland__discount">180€/hectare</span>
            <span class="farmland__price">250€/hectare</span>
          </div>
          <button class="skinny__border__button" onclick="farmlandMarcoryByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="farmlandMarcory()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="farmland__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>

        <article class="farmland__card swiper-slide">
          <img src="/public/assets/img/farmlands/terrain-bracodi.avif" alt="image" class="farmland__img">
          <h2 class="farmland__title">Terrain Est</h2>
          <div class="farmland__prices">
            <span class="farmland__discount">180€/hectare</span>
            <span class="farmland__price">250€/hectare</span>
          </div>
          <button class="skinny__border__button" onclick="farmlandBracodiByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="farmlandBracodi()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="farmland__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>

        <article class="farmland__card swiper-slide">
          <img src="/public/assets/img/farmlands/terrain-sikasso.jpeg" alt="image" class="farmland__img">
          <h2 class="farmland__title">Terrain Sud</h2>
          <div class="farmland__prices">
            <span class="farmland__discount">180€/hectare</span>
            <span class="farmland__price">250€/hectare</span>
          </div>
          <button class="skinny__border__button" onclick="farmlandSikassoByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="farmlandSikasso()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="farmland__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>
        
      </div>
      <div class="swiper-button-prev">
        <i class="ri-arrow-left-s-line"></i>
      </div>
      <div class="swiper-button-next">
        <i class="ri-arrow-right-s-line"></i>
      </div>
    </div>
  </div>
</section>

<!--==================== BUILDING ====================-->
<section class="building section" id="building">
  <h2 class="section__title">Matériels de construction</h2>
  <div class="building__container container">
    <div class="building__swiper swiper">
      <div class="swiper-wrapper">
        <article class="building__card swiper-slide">
          <img src="/public/assets/img/tools/pelleteuse.avif" alt="image" class="building__img">
          <h2 class="building__title">Pelleteuse</h2>
          <div class="building__prices">
            <span class="building__discount">12.50€/jour</span>
            <span class="building__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="buildingPelleteuseByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="buildingPelleteuse()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="building__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>
        <article class="building__card swiper-slide">
          <img src="/public/assets/img/tools/marteau_piqueur.avif" alt="image" class="building__img">
          <h2 class="building__title">Marteau piqueur</h2>
          <div class="building__prices">
            <span class="building__discount">12.50€/jour</span>
            <span class="building__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="buildingMarteauByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="buildingMarteau()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="building__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>
        <article class="building__card swiper-slide">
          <img src="/public/assets/img/tools/benne_beton.avif" alt="image" class="building__img">
          <h2 class="building__title">Benne à béton</h2>
          <div class="building__prices">
            <span class="building__discount">12.50€/jour</span>
            <span class="building__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="buildingBenneByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="buildingBenne()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="building__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>
        <article class="building__card swiper-slide">
          <img src="/public/assets/img/tools/goulotte_materiaux.avif" alt="image" class="building__img">
          <h2 class="building__title">Goulotte à matériaux</h2>
          <div class="building__prices">
            <span class="building__discount">12.50€/jour</span>
            <span class="building__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="buildingGoulotteByPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="buildingGoulotte()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="building__actions">
            <button><i class="ri-search-line"></i></button>
            <button><i class="ri-heart-3-line"></i></button>
            <button><i class="ri-eye-line"></i></button>
          </div>
        </article>
      </div>
      <div class="swiper-button-prev">
        <i class="ri-arrow-left-s-line"></i>
      </div>
      <div class="swiper-button-next">
        <i class="ri-arrow-right-s-line"></i>
      </div>
    </div>
  </div>
</section>

<!--==================== DISCOUNT ====================-->
<section class="discount section" id="discount">
  <div class="discount__container container grid">
    <div class="discount__data">
      <h2 class="discount__title section__title">Jusqu'à 50% de réduction</h2>
      <p class="discount__description">
        Profitez des jours de réduction que nous avons pour vous,
        louez vos produits préférés, plus vous louez, plus nous avons
        de réductions pour vous.
      </p>
      <a href="#" class="button" id="discount-login">Louez maintenant</a>
    </div>
    <div class="discount__images">
      <img src="/public/assets/img/tools/benne_beton.avif" alt="image" class="discount__img-1">
      <img src="/public/assets/img/tools/boulonneuse.avif" alt="image" class="discount__img-2">
    </div>
  </div>
</section>

<!--==================== VEHICLE ====================-->
<section class="vehicle section" id="vehicle">
  <h2 class="section__title">Véhicules</h2>
  <div class="vehicle__container container">
    <div class="vehicle__swiper swiper">
      <div class="swiper-wrapper">
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Renault megane</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Mazda</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Audi</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Renault megane</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Mazda</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Audi</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Renault megane</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Mazda</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Audi</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Renault megane</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
      </div>
    </div>
    <div class="vehicle__swiper swiper">
      <div class="swiper-wrapper">
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Mazda</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Audi</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Renault megane</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Mazda</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Audi</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Renault megane</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Mazda</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Audi</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Renault megane</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
        <a href="#" class="vehicle__card swiper-slide">
          <img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
          <div>
            <h2 class="vehicle__title">Mazda</h2>
            <div class="vehicle__prices">
              <span class="vehicle__discount">78.43€</span>
              <span class="vehicle__price">56.67€</span>
            </div>
            <div class="vehicle__stars">
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-fill"></i>
              <i class="ri-star-half-fill"></i>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

<!--==================== JOIN ====================-->
<section class="join section">
  <div class="join__container">
    <img src="/public/assets/img/tools/join-bg.avif" alt="image" class="join__bg">
    <div class="join__data container grid">
      <h2 class="join__title section__title">
        Abonnez-vous pour recevoir <br>
        les dernières mises à jour
      </h2>
      <form action="" class="join__form">
        <input type="email" placeholder="Entrez votre email" class="join__input">
        <button type="submit" class="join__button button">Abonnez-vous</button>
      </form>
    </div>
  </div>
</section>

<!--==================== TESTIMONIAL ====================-->
<section class="testimonial section" id="testimonial">
  <h2 class="section__title">Opinions des clients</h2>
  <div class="testimonial__container container">
    <div class="testimonial__swiper swiper">
      <div class="swiper-wrapper">
        <article class="testimonial__card swiper-slide">
          <i class="ri-user-fill"></i>
          <h2 class="testimonial__title">Alain Doumbia</h2>
          <p class="testimonial__description">
            La meilleure plateforme pour louer des produits, 
            la location est très facile à faire et offre de grandes réductions.
          </p>
          <div class="testimonial__stars">
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-half-fill"></i>
          </div>
        </article>
        <article class="testimonial__card swiper-slide">
          <i class="ri-user-fill"></i>
          <h2 class="testimonial__title">Quentin Loz</h2>
          <p class="testimonial__description">
            La meilleure plateforme pour louer des produits, 
            la location est très facile à faire et offre de grandes réductions.
          </p>
          <div class="testimonial__stars">
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-half-fill"></i>
          </div>
        </article>
        <article class="testimonial__card swiper-slide">
          <i class="ri-user-fill"></i>
          <h2 class="testimonial__title">Karim Sissoko</h2>
          <p class="testimonial__description">
            La meilleure plateforme pour louer des produits, 
            la location est très facile à faire et offre de grandes réductions.
          </p>
          <div class="testimonial__stars">
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-half-fill"></i>
          </div>              
        </article>
        <article class="testimonial__card swiper-slide">
          <i class="ri-user-fill"></i>
          <h2 class="testimonial__title">Abou Traoré</h2>
          <p class="testimonial__description">
            La meilleure plateforme pour louer des produits, 
            la location est très facile à faire et offre de grandes réductions.
          </p>
          <div class="testimonial__stars">
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-fill"></i>
            <i class="ri-star-half-fill"></i>
          </div>              
        </article>
      </div>
    </div>
  </div>
</section>
{{end}}
