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.file ~ '/' ~ offer.slug ~ '/' ~ offer.img )}}" alt="Golden Western Trail" 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-green 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-green 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 fw-bold mb-1">Durée & dates</h3>
  56.           <p class="small text-muted mb-0"> - {{ circuit.duration|default('11J/10N') }} <br> {{ circuit.dates|default('05→15 août 2026') }}</p>
  57.         </div></div>
  58.       </div>
  59.       <div class="col">
  60.         <div class="card h-100 border-0 shadow-sm rounded-4"><div class="card-body">
  61.           <h3 class="h6 fw-bold mb-1">Vols</h3>
  62.           <p class="small text-muted mb-0">{{ circuit.flights_short|default('PTP↔LAX via MIA — retour SFO↔PTP via MIA') }}</p>
  63.         </div></div>
  64.       </div>
  65.       <div class="col">
  66.         <div class="card h-100 border-0 shadow-sm rounded-4"><div class="card-body">
  67.           <h3 class="h6 fw-bold mb-1">Rythme & repas</h3>
  68.           <p class="small text-muted mb-0">{{ circuit.meals|default('Petits-déj US/continentaux · 8 déj · 6 dîners') }}</p>
  69.         </div></div>
  70.       </div>
  71.       <div class="col">
  72.         <div class="card h-100 border-0 shadow-sm rounded-4"><div class="card-body">
  73.           <h3 class="h6 fw-bold mb-1">Tarif dès</h3>
  74.           <p class="small text-muted mb-0">{{ circuit.price_from|default('3390€') }} <span class="opacity-75">(base 31 pax)</span></p>
  75.         </div></div>
  76.       </div>
  77.     </div>
  78.   </div>
  79. </section>
  81. {# =====================================================
  82.    2) POINTS FORTS — 3 à 6 cartes icônes
  83. ===================================================== #}
  84. <section class="py-5 bg-white">
  85.   <div class="container">
  86.     <div class="row">
  87.     <div class="col-md-6 p-5">
  88.     <h2 class="h3 txt-ot-green fw-bold mb-3">Les incontournables de votre voyage</h2>
  89.            <p class="text-muted">
  90.           Chaque étape de ce circuit a été pensée pour vous offrir une immersion
  91.           authentique et des souvenirs inoubliables. Entre paysages iconiques,
  92.           découvertes culturelles et activités exclusives, voici ce qui rend ce voyage unique.
  93.         </p>
  94.     </div>
  95.     <div class="col-md-6">
  96.     <div class="row g-3">
  97.   <div class="d-flex flex-column gap-3">
  98.   {% for h in highlight %}
  99.     <div class="card border-0 shadow-sm rounded-4">
  100.       <div class="card-body">
  101.         <h3 class="h6 fw-semibold mb-1">{{ h.title }}</h3>
  102.         {% if h.details %}
  103.           <p class="small text-muted mb-0">{{ h.details}}</p>
  104.         {% endif %}
  105.       </div>
  106.     </div>
  107.   {% endfor %}
  108. </div>
  109.     </div>
  110. </div>
  111.   </div>
  112. </section>
  116. {# =====================================================
  117.    4) ITINÉRAIRE — Timeline jour par jour (collapses)
  118. ===================================================== #}
  119. <section class="py-5 bg-white" id="itineraire">
  120.   <div class="container">
  121.     <div class="row align-items-center g-4"> {# align-items-center = centrage vertical #}
  123.       {# COLONNE GAUCHE — CAROUSEL #}
  124.       <div class="col-12 col-lg-6 d-flex">
  125.         <div class="w-100 d-flex align-items-center">
  126.           <div id="circuitCarousel"
  127.                class="carousel slide rounded-4 overflow-hidden shadow-sm w-100"
  128.                data-bs-ride="carousel"
  129.                data-bs-interval="5000"
  130.                data-bs-pause="hover"
  131.                data-bs-touch="true"
  132.                aria-label="Galerie circuit">
  134.             <div class="carousel-inner">
  135.               {% for p in photoItinerary %}
  136.                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  137.                   <div class="ratio ratio-4x3">
  138.                     <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 }}">
  139.                   </div>
  140.                 </div>
  141.               {% endfor %}
  142.             </div>
  144.             <button class="carousel-control-prev" type="button" data-bs-target="#circuitCarousel" data-bs-slide="prev">
  145.               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  146.               <span class="visually-hidden">Précédent</span>
  147.             </button>
  148.             <button class="carousel-control-next" type="button" data-bs-target="#circuitCarousel" data-bs-slide="next">
  149.               <span class="carousel-control-next-icon" aria-hidden="true"></span>
  150.               <span class="visually-hidden">Suivant</span>
  151.             </button>
  153.             <div class="carousel-indicators">
  154.               {% for p in photoItinerary %}
  155.                 <button type="button"
  156.                         data-bs-target="#circuitCarousel"
  157.                         data-bs-slide-to="{{ loop.index0 }}"
  158.                         class="{% if loop.first %}active{% endif %}"
  159.                         aria-current="{{ loop.first ? 'true' : 'false' }}"
  160.                         aria-label="Slide {{ loop.index }}"></button>
  161.               {% endfor %}
  162.             </div>
  163.           </div>
  164.         </div>
  165.       </div>
  167.       {# COLONNE DROITE — ITINÉRAIRE #}
  168.       <div class="col-12 col-lg-6">
  169.         <h2 class="h3 txt-ot-green fw-bold mb-3">Itinéraire jour par jour</h2>
  171.         <div class="list-group list-group-flush">
  172.           {% for it in itinerary %}
  173.             <div class="list-group-item px-0">
  174.               <button class="btn w-100 d-flex justify-content-between align-items-center text-start"
  175.                       data-bs-toggle="collapse" data-bs-target="#day{{ loop.index }}" aria-expanded="false">
  176.                 <span class="fw-bold">Jour {{loop.index}} - {{it.title }}{% if it.kmLabel %} <span class="text-muted fw-normal"> ({{ it.kmLabel }}) km</span>{% endif %}</span>
  177.                 <i class="bi bi-chevron-down"></i>
  178.               </button>
  179.               <div id="day{{ loop.index }}" class="collapse mt-2">
  180.                 <p class="small text-muted mb-0">{{ it.details }}</p>
  181.               </div>
  182.             </div>
  183.           {% endfor %}
  184.         </div>
  185.       </div>
  187.     </div>
  188.   </div>
  189. </section>
  190. {% if hebergementOffer %}
  191. {# =====================================================
  192.    5) HÔTELS — liste ou tableau simple
  193. ===================================================== #}
  194. <section class="py-5 bg-body-tertiary" id="hotels">
  195.   <div class="container">
  196.     <h2 class="h3 txt-ot-green fw-bold mb-3">Hébergements prévus (ou similaires)</h2>
  197.     <ul class="list-group">
  198.       {% for h in hebergementOffer %}<li class="list-group-item">{{ h.name }}</li>{% endfor %}
  199.     </ul>
  200.   </div>
  201. </section>
  202. {% endif %}
  204. {% if included %}
  205. {# =====================================================
  206.    6) INCLUS / NON INCLUS — deux colonnes
  207. ===================================================== #}
  208. <section class="py-5 bg-white" id="inclus">
  209.   <div class="container">
  210.     <div class="row g-4">
  211.       <div class="col-12 col-lg-6">
  212.         <div class="card border-0 shadow-sm rounded-4 h-100">
  213.           <div class="card-body">
  214.             <h2 class="h5 fw-bold txt-ot-green">Inclus</h2>
  215.             <ul class="small mb-0 list-unstyled">
  216.            
  217.             {% for i in included|filter(i => i.type == 'in') %}
  218.             <li>✔️ {{ i.label }}</li>
  219.              {% endfor %}
  220.             </ul>
  221.           </div>
  222.         </div>
  223.       </div>
  224.       <div class="col-12 col-lg-6">
  225.         <div class="card border-0 shadow-sm rounded-4 h-100">
  226.           <div class="card-body">
  227.             <h2 class="h5 fw-bold txt-ot-green">Non inclus</h2>
  228.             <ul class="small mb-0 list-unstyled">
  229.               {% for e in included|filter(e => e.type == 'out') %}
  230.                  <li>— {{ e.label }}</li>
  231.              {% endfor %}
  232.             </ul>
  233.           </div>
  234.         </div>
  235.       </div>
  236.     </div>
  237.   </div>
  238. </section>
  239. {% endif %}
  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-green 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>
  264.       <div class="col-12 col-lg-6">
  265.         <div class="card border-0 shadow-sm rounded-4 h-100">
  266.           <div class="card-body">
  267.             <h3 class="h6 fw-bold mb-2">Retour</h3>
  268.             <ul class="small mb-0">
  269.               {% for f in flight %}                
  270.                  {% if f.type == '2' %}
  271.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  272.             {% endif %}
  273.               {% endfor %}
  274.             </ul>
  275.           </div>
  276.         </div>
  277.       </div>
  278.     </div>
  279.     <p class="small text-muted mt-3 mb-0">Horaires et compagnies susceptibles d’évolution. À confirmer à l’émission des billets.</p>
  280.   </div>
  281. </section>
  282.   {% endif %}
  284. {# =====================================================
  285.    8) TARIFS — tableau + bases pax
  286. ===================================================== #}
  287. {#<section class="py-5 bg-white" id="tarifs">
  288.   <div class="container">
  289.     <h2 class="h3 txt-ot-green fw-bold mb-3">Tarifs</h2>
  290.     <div class="table-responsive">
  291.       <table class="table align-middle">
  292.         <thead><tr><th>Occupation</th><th>Tarif</th><th>Base</th></tr></thead>
  293.         <tbody>
  294.           {% set prices = circuit.prices|default([
  295.             {label:'Double', price:'3390€', base:'31 pax'},
  296.             {label:'Triple', price:'3860€', base:'31 pax'},
  297.             {label:'Quad', price:'3840€', base:'31 pax'},
  298.             {label:'Single', price:'3890€', base:'31 pax'}
  299.           ]) %}
  300.           {% for p in prices %}
  301.           <tr><td>{{ p.label }}</td><td>{{ p.price }}</td><td>{{ p.base }}</td></tr>
  302.           {% endfor %}
  303.         </tbody>
  304.       </table>
  305.     </div>
  306.     <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>
  307.   </div>
  308. </section> #}
  309. {% if infos %}
  310. {# =====================================================
  311.    9) FACILITÉS DE PAIEMENT — encart
  312. ===================================================== #}
  313. <section class="py-5 bg-body-tertiary" id="paiement">
  314.   <div class="container">
  315.   <div class="row g-4">
  316.     <div class="col-12 col-lg-6">
  317.     <div class="card border-0 shadow-sm rounded-4">
  318.       <div class="card-body">
  319.         <h2 class="h5 fw-bold txt-ot-green">Facilités de paiement</h2>
  320.         <ul class="small mb-0">
  321.           {% for pay in infos|filter(pay => pay.type == 'paiement') %}
  322.             <li>{{ pay.title }}</li>
  323.           {% endfor %}
  324.         </ul>
  325.       </div>
  326.     </div>
  327.     </div>
  329.       <div class="col-12 col-lg-6">
  330.     <div class="card border-0 shadow-sm rounded-4">
  331.       <div class="card-body">
  332.         <h2 class="h5 fw-bold txt-ot-green">Formalités</h2>
  333.         <ul class="small mb-0">
  334.           {% for f in infos|filter(f => f.type == 'formalites') %}
  335.             <li>{{ f.title }}</li>
  336.           {% endfor %}
  337.         </ul>
  338.       </div>
  339.     </div>
  341.      </div> 
  342. </div>
  343.   </div>
  344. </section>
  345. {% endif %}
  348. {# =====================================================
  349.    11) CTA FINAL — devis & contact
  350. ===================================================== #}
  351. <section class="py-5 bg-ot-green text-white text-center">
  352.   <div class="container">
  353.     <h2 class="h4 fw-bold mb-2">Envie de rejoindre le {{offer.title}} ?</h2>
  354.     <p class="mb-4">Parlez à un conseiller Otropik : on s’occupe de tout.</p>
  355.     <div class="d-flex gap-2 justify-content-center flex-wrap">
  356.       <a href="{{ path('o.devis') }}" class="btn btn-light rounded-pill">Demander un devis</a>
  357.       <a href="tel:0590505134" class="btn btn-outline-light rounded-pill">Appeler</a>
  358.     </div>
  359.   </div>
  360. </section>
  362. {% endblock %}