{% extends 'pages/base.html.twig' %}
{% block stylesheets %}
<!-- CUSTOM CSS -->
<link href="{{ asset('dev/css/tailwind.min.css')}}" rel="stylesheet" />
<link href="{{ asset('dev/css/pages/home.css')}}" rel="stylesheet" />
<link href="{{ asset('dev/css/header1.css')}}" rel="stylesheet">
<link href="{{ asset('dev/css/forms.css')}}" rel="stylesheet">
<link href="{{ asset('dev/css/pages/search-listing.css')}}" rel="stylesheet">
{% endblock %}
{% block title %}{{"Resultat de recherche"|trans }}{% endblock %}
{% block content %}
<main>
<section id="hero" class="background-image">
<div class="opacity-mask">
<div class="intro_title m-auto bg-hero-sc">
<h3 class="animated fadeInDown">Resultat de recherche</h3>
<p class="animated fadeInDown">Lorem ipsum dolor sit amet iste quod mollitia Illum, labore quis!</p>
</div>
</div>
</section>
<div id="position">
<div class="container">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Seach</a>
</li>
</ul>
</div>
</div>
<!-- Position -->
<div class="collapse" id="collapseMap">
<div id="map" class="map"></div>
</div>
<!-- End Map -->
<div class="container margin_60 background-image background-image">
<div class="row">
<aside class="col-lg-3 col-md-4 hidden sm:block relative side-menu" >
<div id="filters_col" >
<form class="max-w-md mx-auto mt-3">
<div class="form-floating mb-3 recherche ">
<i load-hicon="lens"></i>
<input type="text" name="recherche" class="block sm:text-sm form-control p-2.5 rounded-lg w-full " id="floatingInput" placeholder="coachs, destinations..." >
<label class="mb-2 ps-4 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Recherche</label>
</div>
</form>
<a data-bs-toggle="collapse" class="font-bold text-lg mt-4 pb-2 d-flex" style="color: #ff7f00; border-bottom: 1px solid #d1d5db;" href="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters"
id="filters_col_bt"><i load-hicon="settings" class="me-2"></i>Filtrer par</a>
<div class="collapse show" id="collapseFilters">
<div class="filter_type mt-3 px-2">
<h5 class="text-sm xl:text-base font-semibold mb-2">Prix</h5>
<div>
<div class="range_container">
<div class="sliders_control">
<input id="fromSlider" type="range" value="10" min="0" max="100" />
<input id="toSlider" type="range" value="40" min="0" max="100" />
</div>
<div class="form_control">
<div class="form_control_container d-flex align-items-center">
<span class="form_control_container__time ">$ </span>
<input class="form_control_container__time__input " type="number" id="fromInput" value="10"
min="0" max="100" />
</div>
<div class="form_control_container d-flex align-items-center">
<span class="form_control_container__time ">$ </span>
<input class="form_control_container__time__input " type="number" id="toInput" value="40"
min="0" max="100" style="width: 30px;"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="filter_type mt-3 px-2">
<div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#date-filter" href="#collapseOne_Date-filter">
<h5 class="text-sm xl:text-sm xl:text-base font-semibold mb-2">Choisir une date</h5>
<i load-hicon="chevron-right"></i>
</div>
<div id="collapseOne_Date-filter" class="collapse " data-bs-parent="#date-filter">
<div class="form-floating mb-3 " id="date-reservation">
<input type="text" name="reservation" datepicker datepicker-autohide datepicker-orientation="bottom " class="block sm:text-sm form-control p-2.5 rounded-lg w-full" id="floatingInput" placeholder="date">
<label class="mb-2 ps-4 text-sm font-medium text-gray-900 dark:text-white" for="floatingInput">Date de reservation
</label>
</div>
</div>
</div>
<div class="filter_type mt-3 px-2">
<div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#categories-pop" href="#collapseOne_Categories_pop">
<h5 class="text-sm xl:text-base font-semibold mb-2">Les catégories populaires</h5>
<i load-hicon="chevron-right"></i>
</div>
<div id="collapseOne_Categories_pop" class="collapse " data-bs-parent="#categories-pop">
<div class="filter-cat">
<div class="card-header px-0 py-2">
<h4>
<a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#payment"
href="#collapseOne_payment">Luxury Retreats<i load-hicon="chevron-right"></i></a>
</h4>
</div>
<div id="collapseOne_payment" class="collapse " data-bs-parent="#payment">
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-1" href="#under1">Personnel<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under1" class="collapse ps-4 " data-bs-parent="#under-1">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 2</h5>
</a>
<a>
<h5 class="mb-2">under 3</h5>
</a>
</div>
</li>
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-2" href="#under2">Professional<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under2" class="collapse ps-4 " data-bs-parent="#under-2">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-3" href="#under3">Personnel<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under3" class="collapse ps-4 " data-bs-parent="#under-3">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
</div>
<div class="card-header px-0 py-2">
<h4>
<a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#cat1"
href="#collapseOne_Cat1">Personnel<i load-hicon="chevron-right"></i></a>
</h4>
</div>
<div id="collapseOne_Cat1" class="collapse " data-bs-parent="#cat1">
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-11" href="#under11">Personnel<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under11" class="collapse ps-4 " data-bs-parent="#under-11">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-22" href="#under22">Professional<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under22" class="collapse ps-4 " data-bs-parent="#under-22">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-33" href="#under33">Personnel<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under33" class="collapse ps-4 " data-bs-parent="#under-33">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
</div>
<div class="card-header px-0 py-2">
<h4>
<a class="accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#cat3"
href="#collapseOne_Cat3">Yoga Retreats<i load-hicon="chevron-right"></i></a>
</h4>
</div>
<div id="collapseOne_Cat3" class="collapse " data-bs-parent="#cat3">
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-111" href="#under111">Personnel<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under111" class="collapse ps-4 " data-bs-parent="#under-111">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-222" href="#under222">Professional<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under222" class="collapse ps-4 " data-bs-parent="#under-222">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
<li>
<h4>
<a class="accordion-toggle d-flex justify-content-between pb-1 ps-3" data-bs-toggle="collapse"
data-bs-parent="#under-333" href="#under333">Personnel<i load-hicon="chevron-right"></i></a>
</h4>
<div id="under333" class="collapse ps-4 " data-bs-parent="#under-333">
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
<a>
<h5 class="mb-2">under 1</h5>
</a>
</div>
</li>
</div>
</div>
</div>
</div>
<div class="filter_type mt-3 px-2">
<div class=" d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#destination"
href="#collapseOne_destination">
<h5 class="text-sm xl:text-base font-semibold mb-2">Les Destinations populaires</h5>
<i load-hicon="chevron-right"></i>
</div>
<div id="collapseOne_destination" class="collapse " data-bs-parent="#destination" >
<ul class="mb-0 text-capitalize initiale-list" style="
overflow-y: scroll;
scrollbar-width: none;
height: 136px;">
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Paris</span><span class="nbr-tag">14</span>
</div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Marrakech</span><span class="nbr-tag">12</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Marbelia</span><span
class="nbr-tag">16</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Essaouira</span> <span
class="nbr-tag">8</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Dubai</span><span
class="nbr-tag">16</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Tangier</span> <span
class="nbr-tag">8</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Seville</span><span
class="nbr-tag">16</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>London</span> <span
class="nbr-tag">8</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Lyon</span><span
class="nbr-tag">11</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Madrid</span><span class="nbr-tag">14</span>
</div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Bali</span><span class="nbr-tag">12</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Essaouira</span><span
class="nbr-tag">16</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Rome</span> <span
class="nbr-tag">8</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Barcelona</span><span
class="nbr-tag">11</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
</ul>
<div class="d-flex justify-content-center">
<button onclick="scrollDown()" class="d-flex justify-content-center scroll-btn"><i load-hicon="circle-chevron-down"></i></button>
<button onclick="scrollToTop()" class="d-flex justify-content-center scroll-btn"><i load-hicon="circle-chevron-up"></i></button>
</div>
</div>
</div>
<div class="filter_type mt-3 px-2">
<div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#age" href="#collapseOne_age">
<h5 class="text-sm xl:text-base font-semibold mb-2">Les catégories d'âge</h5>
<i load-hicon="chevron-right"></i>
</div>
<div id="collapseOne_age" class="collapse " data-bs-parent="#age">
<ul class="mb-0 text-capitalize">
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Enfants (0-12 ans)</span><span
class="nbr-tag">14</span></div>
<input type="radio" name="radio1">
<span class="custom-radio"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Adolescents (13-19 ans)</span><span
class="nbr-tag">21</span></div>
<input type="radio" name="radio1">
<span class="custom-radio"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Adultes (20-59 ans)</span><span
class="nbr-tag">19</span></div>
<input type="radio" name="radio1">
<span class="custom-radio"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Personnes âgées (60+ ans)</span><span
class="nbr-tag">15</span></div>
<input type="radio" name="radio1">
<span class="custom-radio"></span>
</label>
</li>
</ul>
</div>
</div>
<div class="filter_type mt-3 px-2">
<div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#langue" href="#collapseOne_langue">
<h5 class="text-sm xl:text-base font-semibold mb-2">Langue d'instruction</h5>
<i load-hicon="chevron-right"></i>
</div>
<div id="collapseOne_langue" class="collapse " data-bs-parent="#langue">
<ul class="mb-0 text-capitalize">
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Francais</span><span>12</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Anglais</span><span class="nbr-tag">14</span></div>
<input type="radio">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Espagnol</span><span class="nbr-tag">16</span></div>
<input type="radio">
<span class="checkmark"></span>
</label>
</li>
</ul>
</div>
</div>
<div class="filter_type mt-3 px-2">
<div class="d-flex justify-content-between accordion-toggle" data-bs-toggle="collapse" data-bs-parent="#niveau" href="#collapseOne_niveau">
<h5 class="text-sm xl:text-base font-semibold mb-2">Niveau de compétence</h5>
<i load-hicon="chevron-right"></i>
</div>
<div id="collapseOne_niveau" class="collapse " data-bs-parent="#niveau">
<ul class="mb-0 text-capitalize">
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Débutant</span><span class="nbr-tag">14</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Intermédiaire</span><span class="nbr-tag">17</span>
</div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="container_check">
<div class="d-flex justify-content-between"><span>Avancé</span><span class="nbr-tag">11</span></div>
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
<div class="block xl:flex filters-btn py-2 justify-center items-center mb-3 ">
<a class="btn1 my-2 mx-1 lg:mx-2 sm:mx-0 sm:mr-2 sm:mb-0 d-flex justify-content-center whitespace-nowrap block">Recherche</a>
<a class="btn2 btn-anuller my-2 mx-2 sm:mx-0 d-flex justify-content-center whitespace-nowrap hidden sm:block" >Annuler</a>
<a class="btn2 btn-anuller my-2 mx-2 sm:mx-0 d-flex justify-content-center whitespace-nowrap block sm:hidden" id="annuler">Annuler</a>
</div>
<!--End collapse -->
<!--End filters col-->
<div class="box_style_2 d-none d-sm-block">
<i class="icon_set_1_icon-57"></i>
<h4>Need <span>Help?</span></h4>
<a href="tel://004542344599" class="phone">+45 423 445 99</a>
<small>Monday to Friday 9.00am - 7.30pm</small>
</div>
</aside>
<div class="col-lg-9 col-md-8">
<div class="result-search d-flex justify-content-between align-items-center mb-3" >
<p class="text-sm font-light">Affichage de 1 à 30 sur 62 résultats</p>
<div class="hidden sm:flex w-70 z-30">
<div class="relative w-full">
<button id="btn-sort" class="text-sm d-flex align-items-center p-2 rounded-xl w-full flex justify-between text-left dark:text-gray-200 bg-white dark:bg-gray-700 border border-solid border-gray-300 dark:border-gray-500 undefined">
<div>Recommended </div><span class="text-gray-300"><svg width="1.5rem" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg></span>
</button>
<div class="right-0 top-full undefined p-2 rounded-xl shadow-xl absolute mt-2 min-w-full z-50 overflow-hidden bg-white dark:bg-gray-700 dark:shadow-gray-900 opacity-100" id="filter-sort" style="display: none;">
<ul class="flex flex-col" >
<li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Recommandé</li>
<li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Prix, moins cher</li>
<li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Prix, plus cher</li>
<li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Plus élevé</li>
<li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Plus bas</li>
<li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Durée, plus longue</li>
<li class="p-2 py-3 text-sm rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 sort-choix">Durée, plus courte</li>
</ul>
</div>
</div>
</div>
<div class="filter-mb block sm:hidden flex items-center">
<i load-hicon="filter"></i>
<p class="text-base font-light">Filter</p>
</div>
</div>
<div class="tags-searchs d-flex mb-3 flex-wrap">
<div class="desktopFilterChipContainer__2E0F me-2 my-2 sm:my-0">
<button role="button" type="button"
class="filterChip__ffnz border border-solid border-gray-300 dark:border-gray-500">Développement
Professionnel
<i load-hicon="x"></i>
</button>
</div>
<div class="desktopFilterChipContainer__2E0F me-2 my-2 sm:my-0">
<button role="button" type="button"
class="filterChip__ffnz border border-solid border-gray-300 dark:border-gray-500">Relations et Communication
<i load-hicon="x"></i>
</button>
</div>
<div class="desktopFilterChipContainer__2E0F me-2 my-2 sm:my-0">
<button role="button" type="button"
class="filterChip__ffnz border border-solid border-gray-300 dark:border-gray-500">Parentalité et
Famille
<i load-hicon="x"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6">
<article class="visibility-tracking-container"></article>
<div class="vertical-activity-card__content-wrapper"><a
class="vertical-activity-card__container gtm-trigger__card-interaction">
<div class="vertical-activity-card__top-wrapper">
<div class="vertical-activity-card__top">
<div class="vertical-activity-card__photo">
<picture>
<div class="location flex bg-white py-1 px-3" s>
<i load-hicon="map-drop"></i>
<span class="location text-black">Marrakech</span>
</div>
<source type="image/webp" fetchpriority="auto" class="relative">
<div class="heart-icon">
<i load-hicon="heart"></i>
</div>
<img src="{{ asset('dev/images/annie-spratt-upJFoyr7BBA-unsplash.jpg') }}"
alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
</picture>
</div>
</div>
<div class="vertical-activity-card__header sticky">
<div class="vertical-activity-card__activity-type-wrapper">
<span
class="c-classifier-badge vertical-activity-card__activity-type text-slate-300 font-light text-uppercase "
style="color: #2A2A2A;">Entry ticket</span>
</div>
<h3 class="vertical-activity-card__title text-base font-semibold py-1">NYC: Top of the Rock
Observation Deck Ticket</h3>
<div class="litle-text text-sm font-light">
<span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
</div>
<div class="review-ftr d-flex text-sm pt-1 text-xs">
<div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
<span class="mx-1 font-medium">4.5 </span>
<span class="font-normal">(1732 reviews) </span>
</div>
<div class="price d-flex align-items-center pb-3 pt-2">
<p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
<span class="text-xs font-normal px-1"> par personne</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<article class="visibility-tracking-container"></article>
<div class="vertical-activity-card__content-wrapper"><a
class="vertical-activity-card__container gtm-trigger__card-interaction">
<div class="vertical-activity-card__top-wrapper">
<div class="vertical-activity-card__top">
<div class="vertical-activity-card__photo">
<picture>
<div class="location flex bg-white py-1 px-3" >
<i load-hicon="map-drop"></i>
<span class="location text-black">Marrakech</span>
</div> <source type="image/webp" fetchpriority="auto" class="relative">
<div class="heart-icon">
<i load-hicon="heart"></i>
</div>
<div class="location flex">
<i load-hicon="map-drop"></i>
<span class="location text-black">Marrakech</span>
</div>
<img src="{{ asset('dev/images/annie-spratt-RCmr0Pe9Uxg-unsplash.jpg') }}"
alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
</picture>
</div>
</div>
<div class="vertical-activity-card__header sticky">
<div class="vertical-activity-card__activity-type-wrapper">
<span
class="c-classifier-badge vertical-activity-card__activity-type text-slate-300 font-light text-uppercase "
style="color: #2A2A2A;">Entry ticket</span>
</div>
<h3 class="vertical-activity-card__title text-base font-semibold py-1">NYC: Top of the Rock
Observation Deck Ticket</h3>
<div class="litle-text text-sm font-light">
<span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
</div>
<div class="review-ftr d-flex text-sm pt-1 text-xs">
<div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
<span class="mx-1 font-medium">4.5 </span>
<span class="font-normal">(1732 reviews) </span>
</div>
<div class="price d-flex align-items-center pb-3 pt-2">
<p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
<span class="text-xs font-normal px-1"> par personne</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<article class="visibility-tracking-container"></article>
<div class="vertical-activity-card__content-wrapper"><a
class="vertical-activity-card__container gtm-trigger__card-interaction">
<div class="vertical-activity-card__top-wrapper">
<div class="vertical-activity-card__top">
<div class="vertical-activity-card__photo">
<picture>
<div class="location flex bg-white py-1 px-3" style="
position: absolute;
bottom: 0px;
right: 0;
border-radius: 20px 0px 0px 20px;
">
<i load-hicon="map-drop"></i>
<span class="location text-black">Marrakech</span>
</div>
<source type="image/webp" fetchpriority="auto" class="relative">
<div class="heart-icon">
<i load-hicon="heart"></i>
</div>
<img src="{{ asset('dev/images/ben-ostrower-OFHbBkE1f1I-unsplash.jpg') }}"
alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
</picture>
</div>
</div>
<div class="vertical-activity-card__header sticky">
<div class="vertical-activity-card__activity-type-wrapper">
<span
class="c-classifier-badge vertical-activity-card__activity-type text-slate-300 font-light text-uppercase "
style="color: #2A2A2A;">Entry ticket</span>
</div>
<h3 class="vertical-activity-card__title text-base font-semibold py-1">NYC: Top of the Rock
Observation Deck Ticket</h3>
<div class="litle-text text-sm font-light">
<span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
</div>
<div class="review-ftr d-flex text-sm pt-1 text-xs">
<div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
<span class="mx-1 font-medium">4.5 </span>
<span class="font-normal">(1732 reviews) </span>
</div>
<div class="price d-flex align-items-center pb-3 pt-2">
<p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
<span class="text-xs font-normal px-1"> par personne</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<article class="visibility-tracking-container"></article>
<div class="vertical-activity-card__content-wrapper"><a
class="vertical-activity-card__container gtm-trigger__card-interaction">
<div class="vertical-activity-card__top-wrapper">
<div class="vertical-activity-card__top">
<div class="vertical-activity-card__photo">
<picture>
<div class="location flex bg-white py-1 px-3" style="
position: absolute;
bottom: 0px;
right: 0;
border-radius: 20px 0px 0px 20px;
">
<i load-hicon="map-drop"></i>
<span class="location text-black">Marrakech</span>
</div>
<source type="image/webp" fetchpriority="auto" class="relative">
<div class="heart-icon">
<i load-hicon="heart"></i>
</div>
<img src="{{ asset('dev/images//dimitrie-stanescu-Z3ziDZPl1D0-unsplash.jpg') }}"
alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
</picture>
</div>
</div>
<div class="vertical-activity-card__header sticky">
<div class="vertical-activity-card__activity-type-wrapper">
<span
class="c-classifier-badge vertical-activity-card__activity-type text-slate-300 font-light text-uppercase "
style="color: #2A2A2A;">Entry ticket</span>
</div>
<h3 class="vertical-activity-card__title text-base font-semibold py-1">NYC: Top of the Rock
Observation Deck Ticket</h3>
<div class="litle-text text-sm font-light">
<span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
</div>
<div class="review-ftr d-flex text-sm pt-1 text-xs">
<div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
<span class="mx-1 font-medium">4.5 </span>
<span class="font-normal">(1732 reviews) </span>
</div>
<div class="price d-flex align-items-center pb-3 pt-2">
<p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
<span class="text-xs font-normal px-1"> par personne</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<article class="visibility-tracking-container"></article>
<div class="vertical-activity-card__content-wrapper"><a
class="vertical-activity-card__container gtm-trigger__card-interaction">
<div class="vertical-activity-card__top-wrapper">
<div class="vertical-activity-card__top">
<div class="vertical-activity-card__photo">
<picture>
<div class="location flex bg-white py-1 px-3" style="
position: absolute;
bottom: 0px;
right: 0;
border-radius: 20px 0px 0px 20px;
">
<i load-hicon="map-drop"></i>
<span class="location text-black">Marrakech</span>
</div>
<source type="image/webp" fetchpriority="auto" class="relative">
<div class="heart-icon">
<i load-hicon="heart"></i>
</div>
<img src="{{ asset('dev/images/kyriacos-georgiou-CMmgfHQiYsc-unsplash.jpg') }}"
alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
</picture>
</div>
</div>
<div class="vertical-activity-card__header sticky">
<div class="vertical-activity-card__activity-type-wrapper">
<span
class="c-classifier-badge vertical-activity-card__activity-type text-slate-300 font-light text-uppercase "
style="color: #2A2A2A;">Entry ticket</span>
</div>
<h3 class="vertical-activity-card__title text-base font-semibold py-1">NYC: Top of the Rock
Observation Deck Ticket</h3>
<div class="litle-text text-sm font-light">
<span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
</div>
<div class="review-ftr d-flex text-sm pt-1">
<div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
<span class="mx-1 font-medium">4.5 </span>
<span class="font-normal">(1732 reviews) </span>
</div>
<div class="price d-flex align-items-center pb-3 pt-2">
<p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
<span class="text-xs font-normal px-1"> par personne</span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<article class="visibility-tracking-container"></article>
<div class="vertical-activity-card__content-wrapper"><a
class="vertical-activity-card__container gtm-trigger__card-interaction">
<div class="vertical-activity-card__top-wrapper">
<div class="vertical-activity-card__top">
<div class="vertical-activity-card__photo">
<picture>
<source type="image/webp" fetchpriority="auto" class="relative">
<div class="heart-icon">
<i load-hicon="heart"></i>
</div>
<img src="{{ asset('dev/images/toa-heftiba-szzPU6ae1Bc-unsplash.jpg') }}"
alt="NYC: Top of the Rock Observation Deck Ticket" class="" fetchpriority="auto">
</picture>
</div>
</div>
<div class="vertical-activity-card__header sticky">
<div class="vertical-activity-card__activity-type-wrapper">
<span
class="c-classifier-badge vertical-activity-card__activity-type text-slate-300 font-light text-uppercase "
style="color: #2A2A2A;">Entry ticket</span>
</div>
<h3 class="vertical-activity-card__title text-base font-semibold py-1">NYC: Top of the Rock
Observation Deck Ticket</h3>
<div class="litle-text text-sm font-light">
<span>2 days </span><span><strong>•</strong> </span><span>Groupe privée</span>
</div>
<div class="review-ftr d-flex text-sm pt-1 text-xs">
<div class="stars d-flex align-items-center "><i load-hicon="star"></i><i
load-hicon="star"></i><i load-hicon="star"></i><i load-hicon="star"></i></div>
<span class="mx-1 font-medium">4.5 </span>
<span class="font-normal">(1732 reviews) </span>
</div>
<div class="price d-flex align-items-center pb-3 pt-2">
<p class="text-lg font-semibold pe-2" style="color: #ff7f00;">From 200$</p>
<span class="text-xs font-normal px-1"> par personne</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="paggination d-flex justify-content-center">
<a class="btn-round-acive d-flex align-items-center justify-content-center mx-2 text-lg font-medium rounded-circle" href="#" >1</a>
<a class="btn-round d-flex align-items-center justify-content-center mx-2 text-lg font-medium rounded-circle" href="#" >2</a>
<a class="btn-round d-flex align-items-center justify-content-center mx-2 text-lg font-medium rounded-circle" href="#" >3</a>
</div>
</div>
</div>
</div>
<!-- End col lg-9 -->
</div>
<!-- End row -->
</div>
<!-- End container -->
</main>
<!-- End main -->
{% endblock %}
{% block javascripts %}
<script src="{{ asset('dev/js/home.js')}}" type="module"></script>
<script src="{{ asset('dev/js/search-listing.js')}}" type="module"></script>
<script src="{{ asset('dev/js/hicon.min.js')}}"></script>
<script> hicon.replace();</script>
<script src="{{ asset('dev/js/datepicker.min.js')}}"></script>
{% endblock %}