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