{{define "songon"}}
<!--==================== SONGON ====================-->
<section class="songon section" id="songon">
  <div class="songon__container container grid">
    <div class="songon__data">
      <h2 class="songon__title section__title">Songon</h2>
      <p class="songon__description">
        Une commune et une sous-préfecture située dans le district 
        autonome d'Abidjan. Elle fait partie des communes de la région côtière 
        et longe la lagune Ebrié à l'ouest.
      </p>
      <a href="#" class="button" onclick="songonPhone()">Contactez-nous</a>
    </div>
    <div class="songon__images">
      <img src="/public/assets/img/worldmap.png" alt="image" class="songon__img-1">
      <div class="pin sp">
        <span>Songon</span>
      </div>
    </div>
  </div>

</section>

<!--==================== EVENT ROOMS ====================-->
<section class="eventrooms section" id="eventrooms">
  <h2 class="section__title">Salles évenementielles</h2>
  <div class="eventrooms__container container">
    <div class="eventrooms__swiper swiper">
      <div class="swiper-wrapper">
        <article class="eventrooms__card swiper-slide">
          <img src="/public/assets/img/salle-evenementielle-1.jpg" alt="image" class="eventrooms__img">
          <h2 class="eventrooms__title">Salle A</h2>
          <div class="eventrooms__prices">
            <span class="eventrooms__discount">12.50€/jour</span>
            <span class="eventrooms__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="eventroomSalleAPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="eventroomSalleA()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="eventrooms__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="eventrooms__card swiper-slide">
          <img src="/public/assets/img/salle-evenementielle-2.jpg" alt="image" class="eventrooms__img">
          <h2 class="eventrooms__title">Salle B</h2>
          <div class="eventrooms__prices">
            <span class="eventrooms__discount">12.50€/jour</span>
            <span class="eventrooms__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="eventroomSalleBPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="eventroomSalleB()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="eventrooms__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="eventrooms__card swiper-slide">
          <img src="/public/assets/img/salle-evenementielle-3.jpg" alt="image" class="eventrooms__img">
          <h2 class="eventrooms__title">Salle C</h2>
          <div class="eventrooms__prices">
            <span class="eventrooms__discount">12.50€/jour</span>
            <span class="eventrooms__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="eventroomSalleCPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="eventroomSalleC()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="eventrooms__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="eventrooms__card swiper-slide">
          <img src="/public/assets/img/salle-evenementielle-4.jpg" alt="image" class="eventrooms__img">
          <h2 class="eventrooms__title">Salle D</h2>
          <div class="eventrooms__prices">
            <span class="eventrooms__discount">12.50€/jour</span>
            <span class="eventrooms__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="eventroomSalleDPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="eventroomSalleD()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="eventrooms__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>

<!--==================== TARPAULIN ====================-->
<section class="tarpaulin section" id="tarpaulin">
  <h2 class="section__title">Bâches structure événement</h2>
  <div class="tarpaulin__container container">
    <div class="tarpaulin__swiper swiper">
      <div class="swiper-wrapper">
        <article class="tarpaulin__card swiper-slide">
          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
          <h2 class="tarpaulin__title">Bâche structure A</h2>
          <div class="tarpaulin__prices">
            <span class="tarpaulin__discount">11.50€/jour</span>
            <span class="tarpaulin__price">19.30€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="tarpaulinBacheAPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="tarpaulinBacheA()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="tarpaulin__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="tarpaulin__card swiper-slide">
          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
          <h2 class="tarpaulin__title">Bâche structure B</h2>
          <div class="tarpaulin__prices">
            <span class="tarpaulin__discount">12.10€/jour</span>
            <span class="tarpaulin__price">19.20€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="tarpaulinBacheBPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="tarpaulinBacheB()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="tarpaulin__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="tarpaulin__card swiper-slide">
          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
          <h2 class="tarpaulin__title">Bâche structure C</h2>
          <div class="tarpaulin__prices">
            <span class="tarpaulin__discount">12.50€/jour</span>
            <span class="tarpaulin__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="tarpaulinBacheCPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="tarpaulinBacheC()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="tarpaulin__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="tarpaulin__card swiper-slide">
          <img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
          <h2 class="tarpaulin__title">Bâche structure D</h2>
          <div class="tarpaulin__prices">
            <span class="tarpaulin__discount">12.50€/jour</span>
            <span class="tarpaulin__price">19.50€/jour</span>
          </div>
          <button class="skinny__border__button" onclick="tarpaulinBacheDPhone()">
            <i class="ri-phone-fill"></i>Réserver par téléphone
          </button>
          <button class="skinny__button" onclick="tarpaulinBacheD()">
            <i class="ri-shopping-cart-fill"></i>Réserver en ligne
          </button>
          <div class="tarpaulin__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>
{{end}}