templates/default/roadtrip-destination.html.twig line 1

Open in your IDE?
  1. {# templates/offer/roadtrip_show.html.twig #}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}{{ offer.title }} — O’Roadtrip{% endblock %}
  5. {% block body %}
  6. {# HERO #}
  7. <section class="position-relative text-white">
  8.   <div class="ratio ratio-21x9">
  9.     <img src="{{ asset('img/offer/road/' ~ offer.slug  ~ '/' ~ offer.img ?? 'img/offres/namibie/hero.jpg') }}" class="w-100 h-100 object-fit-cover" alt="{{ offer.title }}">
  10.   </div> 
  11.   <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-center bg-opacity-40">
  12.     <div class="px-3">
  13.       <h1 class="display-5 fw-bold mb-2">{{ offer.title }}</h1>
  14.       {% if offer.subtitle %}<p class="lead mb-0">{{ offer.subtitle }}</p>{% endif %}
  15.       {% if offer.brochure %}
  16.   <a href="{{ asset(offer.brochure) }}" target="_blank" class="btn btn-outline-primary">
  17.     📄 Télécharger la brochure
  18.   </a>
  19. {% endif %}
  20.     </div>
  21.   </div>
  22. </section>
  24. <section class="container py-5">
  26.   <div class="row g-3 g-lg-4 mb-4">
  27.     <div class="col-12 col-md-6 col-lg-3">
  28.       <div class="card rounded-4 shadow-sm h-100"><div class="card-body">
  29.         <h6 class="fw-bold txt-ot-brown mb-1">Durée & dates</h6>
  30.         <p class="mb-0 text-muted">{{ offer.summaryDuration }}</p>
  31.         <p class="mb-0 text-muted">{{ offer.dateText }}</p>
  32.       </div></div>
  33.     </div>
  34.     <div class="col-12 col-md-6 col-lg-3">
  35.       <div class="card rounded-4 shadow-sm h-100"><div class="card-body">
  36.         <h6 class="fw-bold txt-ot-brown mb-1">Vols</h6>
  37.         <ul class="list-unstyled mb-0">
  38.         {% for line in offer.summaryFlights|split("\n") %}
  39.                 {% if line|trim != '' %}
  40.                  <li class="mb-1">{{ line }}</li> 
  41.                 {% endif %}
  42.         {% endfor %}
  43.       </ul>
  44.       </div></div>
  45.     </div>
  46.     <div class="col-12 col-md-6 col-lg-3">
  47.       <div class="card rounded-4 shadow-sm h-100"><div class="card-body">
  48.         <h6 class="fw-bold txt-ot-brown mb-1">Rythme & repas</h6>
  49.         <ul class="list-unstyled mb-0">
  50.           {% for line in offer.summaryPaceMeals|split("\n") %}
  51.                 {% if line|trim != '' %}
  52.                  <li>{{ line }}</li> 
  53.                 {% endif %}
  54.         {% endfor %}
  55.       </ul>
  56.       </div></div>
  57.     </div>
  58.     <div class="col-12 col-md-6 col-lg-3">
  59.       <div class="card rounded-4 shadow-sm h-100"><div class="card-body">
  60.         <h6 class="fw-bold txt-ot-brown mb-1">Tarif dès</h6>
  61.          <p class="small text-muted mb-0">{{ offer.priceFrom }}€</p>
  62.       </div></div>
  63.     </div>
  64.   </div>
  66.   {# ————— Points forts ————— #}
  67.     {% if highlight %}
  68.   <div class="row mb-4">
  69.     <div class="col-12 col-lg-6">
  70.       <p class="text-uppercase small fw-bold text-ot-brown mb-2">Nos coups de cœur</p>
  71.       <h2 class="h4 fw-bold mb-3 txt-ot-brown">Les incontournables de votre roadtrip</h2>
  72.       <p class="text-muted">Déserts, dunes, faune sauvage et sites rupestres : une immersion totale dans les grands espaces namibiens. </p>
  73.     </div>
  74.     <div class="col-12 col-lg-6">
  75.       <div class="d-flex flex-column gap-3">
  76.         {% for h in highlight %}
  77.           <div class="card border-0 shadow-sm rounded-4 w-100">
  78.             <div class="card-body d-flex align-items-start gap-2">
  79.               <i class="bi bi-check-circle-fill text-ot-green mt-1"></i>
  80.               <h3 class="h6 fw-semibold mb-0">{{ h.title }}</h3>
  81.             </div>
  82.           </div>
  83.         {% endfor %}
  84.       </div>
  85.     </div>
  86.   </div>
  87.   {% endif %}
  89.   {# ————— Itinéraire jour par jour ————— #}
  90.   <div class="row g-4">
  91.     <div class="col-12 col-lg-6">
  92.       <div class="card border-0 shadow-sm rounded-4 h-100">
  93.         <div class="card-body">
  94.           <h2 class="h5 txt-ot-brown fw-bold mb-3">Itinéraire — jour par jour</h2>
  95.           <div class="list-group list-group-flush">
  96.             {% for it in itinerary %}
  97.               <div class="list-group-item px-0">
  98.                 <button class="btn w-100 d-flex justify-content-between align-items-center text-start" data-bs-toggle="collapse" data-bs-target="#day{{ loop.index }}" aria-expanded="false">
  99.                   <span class="fw-bold ">Jour {{loop.index}} - {{it.title }}{% if it.kmLabel %} <span class="text-muted fw-normal"> ({{ it.kmLabel }}) km</span>{% endif %}</span>
  100.                   <i class="bi bi-chevron-down"></i>
  101.                 </button>
  102.                 <div id="day{{ loop.index }}" class="collapse mt-2">
  103.                   <p class="small text-muted mb-0">{{ it.details }}</p>
  104.                 </div>
  105.               </div>
  106.             {% endfor %}
  107.           </div>
  108.           <p class="small text-muted mt-3 mb-0">Données synthétisées de la brochure.</p>
  109.         </div>
  110.       </div>
  111.     </div>
  113.       {#  — CAROUSEL #}
  114.       <div class="col-12 col-lg-6 d-flex">
  115.         <div class="w-100 d-flex align-items-center">
  116.           <div id="circuitCarousel"
  117.                class="carousel slide rounded-4 overflow-hidden shadow-sm w-100"
  118.                data-bs-ride="carousel"
  119.                data-bs-interval="5000"
  120.                data-bs-pause="hover"
  121.                data-bs-touch="true"
  122.                aria-label="Galerie circuit">
  124.             <div class="carousel-inner">
  125.               {% for p in photoItinerary %}
  126.                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  127.                   <div class="ratio ratio-4x3">
  128.                     <img src="{{asset('img/' ~ p.offer.file  ~ '/' ~ p.offer.slug  ~ '/itinerary/' ~ p.img)}}" class="d-block w-100 h-100 object-fit-cover" alt="Photo circuit {{ loop.index }}">
  129.                   </div>
  130.                 </div>
  131.               {% endfor %}
  132.             </div>
  134.             <button class="carousel-control-prev" type="button" data-bs-target="#circuitCarousel" data-bs-slide="prev">
  135.               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  136.               <span class="visually-hidden">Précédent</span>
  137.             </button>
  138.             <button class="carousel-control-next" type="button" data-bs-target="#circuitCarousel" data-bs-slide="next">
  139.               <span class="carousel-control-next-icon" aria-hidden="true"></span>
  140.               <span class="visually-hidden">Suivant</span>
  141.             </button>
  143.             <div class="carousel-indicators">
  144.               {% for p in photoItinerary %}
  145.                 <button type="button"
  146.                         data-bs-target="#circuitCarousel"
  147.                         data-bs-slide-to="{{ loop.index0 }}"
  148.                         class="{% if loop.first %}active{% endif %}"
  149.                         aria-current="{{ loop.first ? 'true' : 'false' }}"
  150.                         aria-label="Slide {{ loop.index }}"></button>
  151.               {% endfor %}
  152.             </div>
  153.           </div>
  154.         </div>
  155.       </div>
  156.   </div>
  157. </section>
  158. {% if hebergementOffer %}
  159. {# =====================================================
  160.    5) HÔTELS — liste ou tableau simple
  161. ===================================================== #}
  162. <section class="py-5 bg-body-tertiary" id="hotels">
  163.   <div class="container">
  164.     <h2 class="h3 txt-ot-brown fw-bold mb-3">Hébergements prévus (ou similaires)</h2>
  165.     <ul class="list-group">
  166.       {% for h in hebergementOffer %}<li class="list-group-item">{{ h.name }}</li>{% endfor %}
  167.     </ul>
  168.   </div>
  169. </section>
  170. {% endif %}
  172. {% if offer.widget %}
  173. <div class="container">
  174.   <h2 class="h3 txt-ot-brown fw-bold mb-3">Activités</h2>
  175. <div class="widget">
  176.   {{offer.widget|raw}}
  177. </div>
  178. </div>
  179. {% endif %}
  181. {% if included %}
  182. {# =====================================================
  183.    6) INCLUS / NON INCLUS — deux colonnes
  184. ===================================================== #}
  185. <section class="py-5 bg-white" id="inclus">
  186.   <div class="container">
  187.     <div class="row g-4">
  188.       <div class="col-12 col-lg-6">
  189.         <div class="card border-0 shadow-sm rounded-4 h-100">
  190.           <div class="card-body">
  191.             <h2 class="h5 fw-bold txt-ot-brown">Inclus</h2>
  192.             <ul class="small mb-0 list-unstyled">
  193.            
  194.             {% for i in included|filter(i => i.type == 'in') %}
  195.             <li>✔️ {{ i.label }}</li>
  196.              {% endfor %}
  197.             </ul>
  198.           </div>
  199.         </div>
  200.       </div>
  201.       <div class="col-12 col-lg-6">
  202.         <div class="card border-0 shadow-sm rounded-4 h-100">
  203.           <div class="card-body">
  204.             <h2 class="h5 fw-bold txt-ot-brown">Non inclus</h2>
  205.             <ul class="small mb-0 list-unstyled">
  206.               {% for e in included|filter(e => e.type == 'out') %}
  207.                  <li>— {{ e.label }}</li>
  208.              {% endfor %}
  209.             </ul>
  210.           </div>
  211.         </div>
  212.       </div>
  213.     </div>
  214.   </div>
  215. </section>
  216. {% endif %}
  217. {#
  218.       <div class="card border-0 shadow-sm rounded-4">
  219.         <div class="card-body">
  220.           <h3 class="h6 fw-bold mb-2">Tarifs</h3>
  221.           {% set roomPrices = offer.roomPrices|default([
  222.             {label:'Double', price:4730},
  223.             {label:'Triple', price:4410},
  224.             {label:'Quadruple', price:4140},
  225.             {label:'Single', price:null}
  226.           ]) %}
  227.           <div class="row row-cols-2 g-2">
  228.             {% for r in roomPrices %}
  229.               <div class="col">
  230.                 <div class="border rounded-3 p-2 small h-100 d-flex justify-content-between">
  231.                   <span class="text-muted">{{ r.label }}</span>
  232.                   <strong>{% if r.price %}{{ r.price }}€{% else %}—{% endif %}</strong>
  233.                 </div>
  234.               </div>
  235.             {% endfor %}
  236.           </div>
  237.           <p class="small text-muted mb-0 mt-2">Tarifs/personne, sous réserve de dispo & modifs. :contentReference[oaicite:3]{index=3}</p>
  238.         </div>
  239.       </div> #}
  241. {% if flight %}
  242. {# =====================================================
  243.    7) VOLS & HORAIRES — bloc détaillé
  244. ===================================================== #}
  245. <section class="py-5 bg-body-tertiary" id="vols">
  246.   <div class="container">
  247.     <h2 class="h3 txt-ot-brown fw-bold mb-3">Vols & horaires (indicatifs)</h2>
  248.     <div class="row g-4">
  249.       <div class="col-12 col-lg-6">
  250.         <div class="card border-0 shadow-sm rounded-4 h-100">
  251.           <div class="card-body">
  252.             <h3 class="h6 fw-bold mb-2">Aller</h3>
  253.             <ul class="small mb-0">
  254.             {% for f in flight %}
  255.               {% if f.type == '1' %}
  256.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  257.               {% endif %}
  258.             {% endfor %}
  259.             </ul>
  260.           </div>
  261.         </div>
  262.       </div>
  263.       <div class="col-12 col-lg-6">
  264.         <div class="card border-0 shadow-sm rounded-4 h-100">
  265.           <div class="card-body">
  266.             <h3 class="h6 fw-bold mb-2">Retour</h3>
  267.             <ul class="small mb-0">
  268.             {% for f in flight %}
  269.               {% if f.type == '2' %}
  270.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  271.               {% endif %}
  272.             {% endfor %}
  273.             </ul>
  274.           </div>
  275.         </div>
  276.       </div>
  277.     </div>
  278.     <p class="small text-muted mt-3 mb-0">Horaires et compagnies susceptibles d’évolution. À confirmer à l’émission des billets.</p>
  279.   </div>
  280. </section>
  281. {% endif %}
  283. {% if infos %}
  284. {# =====================================================
  285.    9) FACILITÉS DE PAIEMENT — encart
  286. ===================================================== #}
  287. <section class="py-5 bg-body-tertiary" id="paiement">
  288.   <div class="container">
  289.   <div class="row g-4">
  291.     <div class="col-12 col-lg-6">
  292.     <div class="card border-0 shadow-sm rounded-4">
  293.       <div class="card-body">
  294.         <h2 class="h5 fw-bold txt-ot-brown">Facilités de paiement</h2>
  295.         <ul class="small mb-0">
  296.           {% for line in offer.paymentMethod|split("\n") %}
  297.               <li class="mb-1">✔️ {{ line }}</li>
  298.             {% endfor %}
  299.         </ul>
  300.       </div>
  301.     </div>
  302.     </div>
  304.       <div class="col-12 col-lg-6">
  305.     <div class="card border-0 shadow-sm rounded-4">
  306.       <div class="card-body">
  307.         <h2 class="h5 fw-bold txt-ot-brown">Formalités</h2>
  308.         <ul class="small mb-0">
  309.               {% for line in offer.formalities|split("\n") %}
  310.               <li class="mb-1">✔️ {{ line }}</li>
  311.             {% endfor %}
  312.         </ul>
  313.       </div>
  314.     </div>
  315.      </div> 
  316. </div>
  317.   </div>
  318. </section>
  319. {% endif %}
  321. {# =====================================================
  322.    11) CTA FINAL — devis & contact
  323. ===================================================== #}
  324. <section class="py-5 bg-ot-green text-white text-center">
  325.   <div class="container">
  326.     <h2 class="h4 fw-bold mb-2">Envie de rejoindre le {{offer.title}} ?</h2>
  327.     <p class="mb-4">Parlez à un conseiller Otropik : on s’occupe de tout.</p>
  328.     <div class="d-flex gap-2 justify-content-center flex-wrap">
  329.       <a href="{{ path('o.devis') }}" class="btn btn-light rounded-pill">Demander un devis</a>
  330.       <a href="tel:0590505134" class="btn btn-outline-light rounded-pill">Appeler</a>
  331.     </div>
  332.   </div>
  333. </section>
  335. {% endblock %}