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/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 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 mb-1">Vols</h6>
  37.         <p class="mb-0 text-muted">
  38.         {% for line in offer.summaryFlights|split("\n") %}
  39.                 {% if line|trim != '' %}
  40.                  <li>{{ line }}</li> 
  41.                 {% endif %}
  42.         {% endfor %}
  43.       </p>
  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 mb-1">Rythme & repas</h6>
  49.         <p class="mb-0 text-muted">
  50.           {% for line in offer.summaryPaceMeals|split("\n") %}
  51.                 {% if line|trim != '' %}
  52.                  <li>{{ line }}</li> 
  53.                 {% endif %}
  54.         {% endfor %}
  55.       </p>
  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 mb-1">Tarif dès</h6>
  61.         <p class="mb-0 text-muted">{{ 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-green mb-2">Nos coups de cœur</p>
  71.       <h2 class="h4 fw-bold mb-3 txt-ot-green">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 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 txt-ot-green">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-green 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 included %}
  173. {# =====================================================
  174.    6) INCLUS / NON INCLUS — deux colonnes
  175. ===================================================== #}
  176. <section class="py-5 bg-white" id="inclus">
  177.   <div class="container">
  178.     <div class="row g-4">
  179.       <div class="col-12 col-lg-6">
  180.         <div class="card border-0 shadow-sm rounded-4 h-100">
  181.           <div class="card-body">
  182.             <h2 class="h5 fw-bold txt-ot-green">Inclus</h2>
  183.             <ul class="small mb-0 list-unstyled">
  184.            
  185.             {% for i in included|filter(i => i.type == 'in') %}
  186.             <li>✔️ {{ i.label }}</li>
  187.              {% endfor %}
  188.             </ul>
  189.           </div>
  190.         </div>
  191.       </div>
  192.       <div class="col-12 col-lg-6">
  193.         <div class="card border-0 shadow-sm rounded-4 h-100">
  194.           <div class="card-body">
  195.             <h2 class="h5 fw-bold txt-ot-green">Non inclus</h2>
  196.             <ul class="small mb-0 list-unstyled">
  197.               {% for e in included|filter(e => e.type == 'out') %}
  198.                  <li>— {{ e.label }}</li>
  199.              {% endfor %}
  200.             </ul>
  201.           </div>
  202.         </div>
  203.       </div>
  204.     </div>
  205.   </div>
  206. </section>
  207. {% endif %}
  208. {#
  209.       <div class="card border-0 shadow-sm rounded-4">
  210.         <div class="card-body">
  211.           <h3 class="h6 fw-bold mb-2">Tarifs</h3>
  212.           {% set roomPrices = offer.roomPrices|default([
  213.             {label:'Double', price:4730},
  214.             {label:'Triple', price:4410},
  215.             {label:'Quadruple', price:4140},
  216.             {label:'Single', price:null}
  217.           ]) %}
  218.           <div class="row row-cols-2 g-2">
  219.             {% for r in roomPrices %}
  220.               <div class="col">
  221.                 <div class="border rounded-3 p-2 small h-100 d-flex justify-content-between">
  222.                   <span class="text-muted">{{ r.label }}</span>
  223.                   <strong>{% if r.price %}{{ r.price }}€{% else %}—{% endif %}</strong>
  224.                 </div>
  225.               </div>
  226.             {% endfor %}
  227.           </div>
  228.           <p class="small text-muted mb-0 mt-2">Tarifs/personne, sous réserve de dispo & modifs. :contentReference[oaicite:3]{index=3}</p>
  229.         </div>
  230.       </div> #}
  232. {% if flight %}
  233. {# =====================================================
  234.    7) VOLS & HORAIRES — bloc détaillé
  235. ===================================================== #}
  236. <section class="py-5 bg-body-tertiary" id="vols">
  237.   <div class="container">
  238.     <h2 class="h3 txt-ot-green fw-bold mb-3">Vols & horaires (indicatifs)</h2>
  239.     <div class="row g-4">
  240.       <div class="col-12 col-lg-6">
  241.         <div class="card border-0 shadow-sm rounded-4 h-100">
  242.           <div class="card-body">
  243.             <h3 class="h6 fw-bold mb-2">Aller</h3>
  244.             <ul class="small mb-0">
  245.             {% for f in flight %}
  246.               {% if f.type == '1' %}
  247.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  248.               {% endif %}
  249.             {% endfor %}
  250.             </ul>
  251.           </div>
  252.         </div>
  253.       </div>
  254.       <div class="col-12 col-lg-6">
  255.         <div class="card border-0 shadow-sm rounded-4 h-100">
  256.           <div class="card-body">
  257.             <h3 class="h6 fw-bold mb-2">Retour</h3>
  258.             <ul class="small mb-0">
  259.             {% for f in flight %}
  260.               {% if f.type == '2' %}
  261.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  262.               {% endif %}
  263.             {% endfor %}
  264.             </ul>
  265.           </div>
  266.         </div>
  267.       </div>
  268.     </div>
  269.     <p class="small text-muted mt-3 mb-0">Horaires et compagnies susceptibles d’évolution. À confirmer à l’émission des billets.</p>
  270.   </div>
  271. </section>
  272. {% endif %}
  274. {% if infos %}
  275. {# =====================================================
  276.    9) FACILITÉS DE PAIEMENT — encart
  277. ===================================================== #}
  278. <section class="py-5 bg-body-tertiary" id="paiement">
  279.   <div class="container">
  280.   <div class="row g-4">
  282.     <div class="col-12 col-lg-6">
  283.     <div class="card border-0 shadow-sm rounded-4">
  284.       <div class="card-body">
  285.         <h2 class="h5 fw-bold txt-ot-green">Facilités de paiement</h2>
  286.         <ul class="small mb-0">
  287.           {% for pay in infos|filter(pay => pay.type == 'paiement') %}
  288.             <li>{{ pay.title }}</li>
  289.           {% endfor %}
  290.         </ul>
  291.       </div>
  292.     </div>
  293.     </div>
  295.       <div class="col-12 col-lg-6">
  296.     <div class="card border-0 shadow-sm rounded-4">
  297.       <div class="card-body">
  298.         <h2 class="h5 fw-bold txt-ot-green">Formalités</h2>
  299.         <ul class="small mb-0">
  300.           {% for f in infos|filter(f => f.type == 'formalites') %}
  301.             <li>{{ f.title }}</li>
  302.           {% endfor %}
  303.         </ul>
  304.       </div>
  305.     </div>
  306.      </div> 
  307. </div>
  308.   </div>
  309. </section>
  310. {% endif %}
  312. {# =====================================================
  313.    11) CTA FINAL — devis & contact
  314. ===================================================== #}
  315. <section class="py-5 bg-ot-green text-white text-center">
  316.   <div class="container">
  317.     <h2 class="h4 fw-bold mb-2">Envie de rejoindre le {{offer.title}} ?</h2>
  318.     <p class="mb-4">Parlez à un conseiller Otropik : on s’occupe de tout.</p>
  319.     <div class="d-flex gap-2 justify-content-center flex-wrap">
  320.       <a href="{{ path('o.devis') }}" class="btn btn-light rounded-pill">Demander un devis</a>
  321.       <a href="tel:0590505134" class="btn btn-outline-light rounded-pill">Appeler</a>
  322.     </div>
  323.   </div>
  324. </section>
  326. {% endblock %}