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

Open in your IDE?
  1. {# templates/circuit/golden-western.html.twig #}
  2. {% extends 'base.html.twig' %}
  4. {% block title %}O'Circuit - {{offer.title}}{% endblock %}
  6. {# Si tu veux header overlay blanc sur photo hero : #}
  7. {% block header_classes %}header-overlay{% endblock %}
  8. {% block navbar_theme %}navbar-dark{% endblock %}
  10. {% block body %}
  12. {# =====================================================
  13.    1) HERO — Titre, sous-titre, prix/CTA, bloc inclus
  14. ===================================================== #}
  15. <section class="position-relative text-white">
  16.   <div class="ratio ratio-21x9">
  17.     <img src="{{asset('img/offer/' ~ offer.file ~ '/' ~ offer.slug ~ '/' ~ offer.img )}}" alt="{{ offer.title}}" class="object-fit-cover w-100 h-100">
  18.   </div>
  19.   <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center">
  20.     <div class="container">
  21.       <div class="bg-white text-dark p-4 p-md-5 rounded-4 shadow-sm" style="max-width: 760px;">
  22.         <h1 class="display-5 fw-bold txt-ot-yellow mb-1">{{ offer.title}}</h1>
  23.         <p class="mb-3">{{ offer.subtitle}}</p>
  24.         <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
  25.           <span class="badge bg-ot-green">{{ offer.durationText}}</span>
  26.           <span class="badge text-bg-light">{{ offer.dateText }}</span>
  27.           <span class="badge text-bg-light">À partir de {{ offer.priceFrom}}€</span>
  28.         </div>
  29.         <div class="mb-3">
  30.           <h6 class="fw-bold txt-ot-yellow mb-2">Inclus :</h6>
  31.           <ul class="list-unstyled mb-0">
  32.             {% for line in offer.includedText|split("\n") %}
  33.               <li class="mb-1">✔️ {{ line }}</li>
  34.             {% endfor %}
  35.           </ul>
  36.         </div>
  37.         <div class="d-flex gap-2 flex-wrap">
  38.           <a href="{{ path('o.devis') }}" class="btn btn-primary rounded-pill">Demander un devis</a>
  39.           {% if offer.brochure %}
  40.           <a href="{{ asset(offer.brochure) }}" target="_blank"  class="btn btn-outline-ot-green rounded-pill">Télécharger la brochure</a>
  41.           {% endif %}
  42.         </div>
  43.       </div>
  44.     </div>
  45.   </div>
  46. </section>
  47. {# =====================================================
  48.    3) INFOS CLÉS — Durée/Dates · Vols · Rythme · Prix
  49. ===================================================== #}
  50. <section class="py-5 bg-body-tertiary">
  51.   <div class="container">
  52.     <div class="row g-3 g-md-4 row-cols-1 row-cols-md-2 row-cols-lg-4">
  53.       <div class="col">
  54.         <div class="card h-100 border-0 shadow-sm rounded-4"><div class="card-body">
  55.           <h3 class="h6 txt-ot-yellow fw-bold mb-1">Durée & dates</h3>
  56.           <p class="mb-0 text-muted">{{ offer.summaryDuration }}</p>
  57.         <p class="mb-0 text-muted">{{ offer.dateText }}</p>
  58.         </div></div>
  59.       </div>
  60.       <div class="col">
  61.         <div class="card h-100 border-0 shadow-sm rounded-4"><div class="card-body">
  62.           <h3 class="h6 txt-ot-yellow fw-bold mb-1">Vols</h3>
  63.            <ul class="list-unstyled mb-0">
  64.         {% for line in offer.summaryFlights|split("\n") %}
  65.                 {% if line|trim != '' %}
  66.                  <li class="mb-1">{{ line }}</li> 
  67.                 {% endif %}
  68.         {% endfor %}
  69.       </ul>
  70.         </div></div>
  71.       </div>
  72.       <div class="col">
  73.         <div class="card h-100 border-0 shadow-sm rounded-4"><div class="card-body">
  74.           <h3 class="h6 txt-ot-yellow fw-bold mb-1">Rythme & repas</h3>
  75.             <ul class="list-unstyled mb-0">
  76.           {% for line in offer.summaryPaceMeals|split("\n") %}
  77.                 {% if line|trim != '' %}
  78.                  <li>{{ line }}</li> 
  79.                 {% endif %}
  80.         {% endfor %}
  81.       </ul>
  82.         </div></div>
  83.       </div>
  84.       <div class="col">
  85.         <div class="card h-100 border-0 shadow-sm rounded-4"><div class="card-body">
  86.           <h3 class="h6 txt-ot-yellow fw-bold mb-1">Tarif dès</h3>
  87.           <p class="small text-muted mb-0">{{ offer.priceFrom }}€</p>
  88.         </div></div>
  89.       </div>
  90.     </div>
  91.   </div>
  92. </section>
  94. {# =====================================================
  95.    2) POINTS FORTS — 3 à 6 cartes icônes
  96. ===================================================== #}
  97. <section class="py-5 bg-white">
  98.   <div class="container">
  99.     <div class="row">
  100.     <div class="col-md-6 p-5">
  101.     <h2 class="h3 txt-ot-yellow fw-bold mb-3">Les incontournables de votre voyage</h2>
  102.            <p class="text-muted">
  103.           Chaque étape de ce circuit a été pensée pour vous offrir une immersion
  104.           authentique et des souvenirs inoubliables. Entre paysages iconiques,
  105.           découvertes culturelles et activités exclusives, voici ce qui rend ce voyage unique.
  106.         </p>
  107.     </div>
  108.     <div class="col-md-6">
  109.     <div class="row g-3">
  110.   <div class="d-flex flex-column gap-3">
  111.   {% for h in highlight %}
  112.     <div class="card border-0 shadow-sm rounded-4">
  113.       <div class="card-body">
  114.         <h3 class="h6 fw-semibold mb-1">{{ h.title }}</h3>
  115.         {% if h.details %}
  116.           <p class="small text-muted mb-0">{{ h.details}}</p>
  117.         {% endif %}
  118.       </div>
  119.     </div>
  120.   {% endfor %}
  121. </div>
  122.     </div>
  123. </div>
  124.   </div>
  125. </section>
  129. {# =====================================================
  130.    4) ITINÉRAIRE — Timeline jour par jour (collapses)
  131. ===================================================== #}
  132. <section class="py-5 bg-white" id="itineraire">
  133.   <div class="container">
  134.     <div class="row align-items-center g-4"> {# align-items-center = centrage vertical #}
  136.       {# COLONNE GAUCHE — CAROUSEL #}
  137.       <div class="col-12 col-lg-6 d-flex">
  138.         <div class="w-100 d-flex align-items-center">
  139.           <div id="circuitCarousel"
  140.                class="carousel slide rounded-4 overflow-hidden shadow-sm w-100"
  141.                data-bs-ride="carousel"
  142.                data-bs-interval="5000"
  143.                data-bs-pause="hover"
  144.                data-bs-touch="true"
  145.                aria-label="Galerie circuit">
  147.             <div class="carousel-inner">
  148.               {% for p in photoItinerary %}
  149.                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  150.                   <div class="ratio ratio-4x3">
  151.                     <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 }}">
  152.                   </div>
  153.                 </div>
  154.               {% endfor %}
  155.             </div>
  157.             <button class="carousel-control-prev" type="button" data-bs-target="#circuitCarousel" data-bs-slide="prev">
  158.               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  159.               <span class="visually-hidden">Précédent</span>
  160.             </button>
  161.             <button class="carousel-control-next" type="button" data-bs-target="#circuitCarousel" data-bs-slide="next">
  162.               <span class="carousel-control-next-icon" aria-hidden="true"></span>
  163.               <span class="visually-hidden">Suivant</span>
  164.             </button>
  166.             <div class="carousel-indicators">
  167.               {% for p in photoItinerary %}
  168.                 <button type="button"
  169.                         data-bs-target="#circuitCarousel"
  170.                         data-bs-slide-to="{{ loop.index0 }}"
  171.                         class="{% if loop.first %}active{% endif %}"
  172.                         aria-current="{{ loop.first ? 'true' : 'false' }}"
  173.                         aria-label="Slide {{ loop.index }}"></button>
  174.               {% endfor %}
  175.             </div>
  176.           </div>
  177.         </div>
  178.       </div>
  180.       {# COLONNE DROITE — ITINÉRAIRE #}
  181.       <div class="col-12 col-lg-6">
  182.         <h2 class="h3 txt-ot-yellow fw-bold mb-3">Itinéraire jour par jour</h2>
  184.         <div class="list-group list-group-flush">
  185.           {% for it in itinerary %}
  186.             <div class="list-group-item px-0">
  187.               <button class="btn w-100 d-flex justify-content-between align-items-center text-start"
  188.                       data-bs-toggle="collapse" data-bs-target="#day{{ loop.index }}" aria-expanded="false">
  189.                 <span class="fw-bold">Jour {{loop.index}} - {{it.title }}{% if it.kmLabel %} <span class="text-muted fw-normal"> ({{ it.kmLabel }}) km</span>{% endif %}</span>
  190.                 <i class="bi bi-chevron-down"></i>
  191.               </button>
  192.               <div id="day{{ loop.index }}" class="collapse mt-2">
  193.                 <p class="small text-muted mb-0">{{ it.details }}</p>
  194.               </div>
  195.             </div>
  196.           {% endfor %}
  197.         </div>
  198.       </div>
  200.     </div>
  201.   </div>
  202. </section>
  203. {% if hebergementOffer %}
  204. {# =====================================================
  205.    5) HÔTELS — liste ou tableau simple
  206. ===================================================== #}
  207. <section class="py-5 bg-body-tertiary" id="hotels">
  208.   <div class="container">
  209.     <h2 class="h3 txt-ot-yellow fw-bold mb-3">Hébergements prévus (ou similaires)</h2>
  210.     <ul class="list-group">
  211.       {% for h in hebergementOffer %}<li class="list-group-item">{{ h.name }}</li>{% endfor %}
  212.     </ul>
  213.   </div>
  214. </section>
  215. {% endif %}
  217. {% if offer.widget %}
  218. <div class="container">
  219.   <h2 class="h3 txt-ot-yellow fw-bold mb-3">Activités</h2>
  220. <div class="widget">
  221.   {{offer.widget|raw}}
  222. </div>
  223. </div>
  224. {% endif %}
  226. {% if included %}
  227. {# =====================================================
  228.    6) INCLUS / NON INCLUS — deux colonnes
  229. ===================================================== #}
  230. <section class="py-5 bg-white" id="inclus">
  231.   <div class="container">
  232.     <div class="row g-4">
  233.       <div class="col-12 col-lg-6">
  234.         <div class="card border-0 shadow-sm rounded-4 h-100">
  235.           <div class="card-body">
  236.             <h2 class="h5 fw-bold txt-ot-yellow">Inclus</h2>
  237.             <ul class="small mb-0 list-unstyled">
  238.              {% for line in offer.included|split("\n") %}
  239.               <li class="mb-1">✔️ {{ line }}</li>
  240.             {% endfor %}
  241.             </ul>
  242.           </div>
  243.         </div>
  244.       </div>
  245.       <div class="col-12 col-lg-6">
  246.         <div class="card border-0 shadow-sm rounded-4 h-100">
  247.           <div class="card-body">
  248.             <h2 class="h5 fw-bold txt-ot-yellow">Non inclus</h2>
  249.             <ul class="small mb-0 list-unstyled">
  250.             {% for line in offer.notIncluded|split("\n") %}
  251.               <li class="mb-1">- {{ line }}</li>
  252.             {% endfor %}
  253.             </ul>
  254.           </div>
  255.         </div>
  256.       </div>
  257.     </div>
  258.   </div>
  259. </section>
  260. {% endif %}
  262. {% if flight %}
  263. {# =====================================================
  264.    7) VOLS & HORAIRES — bloc détaillé
  265. ===================================================== #}
  266. <section class="py-5 bg-body-tertiary" id="vols">
  267.   <div class="container">
  268.     <h2 class="h3 txt-ot-yellow fw-bold mb-3">Vols & horaires (indicatifs)</h2>
  269.     <div class="row g-4">
  270.       <div class="col-12 col-lg-6">
  271.         <div class="card border-0 shadow-sm rounded-4 h-100">
  272.           <div class="card-body">
  273.             <h3 class="h6 fw-bold mb-2">Aller</h3>
  274.             <ul class="small mb-0">
  275.               {% for f in flight %}
  276.               {% if f.type == '1' %}
  277.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  278.             {% endif %}
  279.               {% endfor %}
  280.             </ul>
  281.           </div>
  282.         </div>
  283.       </div>
  285.       <div class="col-12 col-lg-6">
  286.         <div class="card border-0 shadow-sm rounded-4 h-100">
  287.           <div class="card-body">
  288.             <h3 class="h6 fw-bold mb-2">Retour</h3>
  289.             <ul class="small mb-0">
  290.               {% for f in flight %}                
  291.                  {% if f.type == '2' %}
  292.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  293.             {% endif %}
  294.               {% endfor %}
  295.             </ul>
  296.           </div>
  297.         </div>
  298.       </div>
  299.     </div>
  300.     <p class="small text-muted mt-3 mb-0">Horaires et compagnies susceptibles d’évolution. À confirmer à l’émission des billets.</p>
  301.   </div>
  302. </section>
  303.   {% endif %}
  305. {# =====================================================
  306.    8) TARIFS — tableau + bases pax
  307. ===================================================== #}
  308. {#<section class="py-5 bg-white" id="tarifs">
  309.   <div class="container">
  310.     <h2 class="h3 txt-ot-yellow fw-bold mb-3">Tarifs</h2>
  311.     <div class="table-responsive">
  312.       <table class="table align-middle">
  313.         <thead><tr><th>Occupation</th><th>Tarif</th><th>Base</th></tr></thead>
  314.         <tbody>
  315.           {% set prices = circuit.prices|default([
  316.             {label:'Double', price:'3390€', base:'31 pax'},
  317.             {label:'Triple', price:'3860€', base:'31 pax'},
  318.             {label:'Quad', price:'3840€', base:'31 pax'},
  319.             {label:'Single', price:'3890€', base:'31 pax'}
  320.           ]) %}
  321.           {% for p in prices %}
  322.           <tr><td>{{ p.label }}</td><td>{{ p.price }}</td><td>{{ p.base }}</td></tr>
  323.           {% endfor %}
  324.         </tbody>
  325.       </table>
  326.     </div>
  327.     <p class="small text-muted mb-0">Base modifiable : ex. <strong>+245€</strong>/pers si 29–20 pax. Sous réserve de disponibilité & modifications.</p>
  328.   </div>
  329. </section> #}
  330. {% if infos %}
  331. {# =====================================================
  332.    9) FACILITÉS DE PAIEMENT — encart
  333. ===================================================== #}
  334. <section class="py-5 bg-body-tertiary" id="paiement">
  335.   <div class="container">
  336.   <div class="row g-4">
  337.     <div class="col-12 col-lg-6">
  338.     <div class="card border-0 shadow-sm rounded-4">
  339.       <div class="card-body">
  340.         <h2 class="h5 fw-bold txt-ot-yellow">Facilités de paiement</h2>
  341.         <ul class="small mb-0">
  342.             {% for line in offer.paymentMethod|split("\n") %}
  343.               <li class="mb-1">✔️ {{ line }}</li>
  344.             {% endfor %}
  345.         </ul>
  346.       </div>
  347.     </div>
  348.     </div>
  350.       <div class="col-12 col-lg-6">
  351.     <div class="card border-0 shadow-sm rounded-4">
  352.       <div class="card-body">
  353.         <h2 class="h5 fw-bold txt-ot-yellow">Formalités</h2>
  354.         <ul class="small mb-0">
  355.             {% for line in offer.formalities|split("\n") %}
  356.               <li class="mb-1">✔️ {{ line }}</li>
  357.             {% endfor %}
  358.         </ul>
  359.       </div>
  360.     </div>
  362.      </div> 
  363. </div>
  364.   </div>
  365. </section>
  366. {% endif %}
  369. {# =====================================================
  370.    11) CTA FINAL — devis & contact
  371. ===================================================== #}
  372. <section class="py-5 bg-ot-green text-white text-center">
  373.   <div class="container">
  374.     <h2 class="h4 fw-bold mb-2">Envie de rejoindre le {{offer.title}} ?</h2>
  375.     <p class="mb-4">Parlez à un conseiller Otropik : on s’occupe de tout.</p>
  376.     <div class="d-flex gap-2 justify-content-center flex-wrap">
  377.       <a href="{{ path('o.devis') }}" class="btn btn-light rounded-pill">Demander un devis</a>
  378.       <a href="tel:0590505134" class="btn btn-outline-light rounded-pill">Appeler</a>
  379.     </div>
  380.   </div>
  381. </section>
  383. {% endblock %}