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

Open in your IDE?
  1. {# templates/escapade/show.html.twig #}
  2. {% extends 'base.html.twig' %}
  4. {% block title %}O'Escapade — {{ offer.title }}{% endblock %}
  6. {# Header standard ou overlay si besoin sur le hero #}
  7. {% block header_classes %}header-overlay{% endblock %}
  8. {% block navbar_theme %}navbar-dark{% endblock %}
  10. {% block body %}
  12. {# -----------------------------
  13.    HERO Escapade (avec inclus)
  14. ------------------------------ #}
  15. <section class="position-relative text-white">
  16.   <div class="ratio ratio-21x9">
  17.   {% if offer.img %}
  18.       <img src="{{asset('img/offer/' ~ offer.img)}}" alt="Carnaval St Lucie" class="object-fit-cover w-100 h-100">
  19.   {% else %}
  20.       <img src="{{asset('img/destination/' ~ offer.destination.slug  ~ '/' ~ offer.destination.img)}}" alt="Carnaval St Lucie" class="object-fit-cover w-100 h-100">
  21.   {% endif %}
  22.   </div>
  24.   <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center">
  25.     <div class="container">
  26.       <div class="bg-white text-dark p-4 p-md-5 rounded-4 shadow-sm" style="max-width: 600px;">
  27.         <h1 class="display-5 fw-bold txt-ot-green mb-3">{{offer.title}}</h1>
  28.         <p class="mb-3">{{offer.subtitle}}</p>
  30.         <div>
  31.         {% if offer.includedText %}
  32.           <h6 class="fw-bold txt-ot-green mb-2">Inclus :</h6>
  33.           <ul class="list-unstyled mb-0">
  34.             {% for line in offer.includedText|split("\n") %}
  35.                 {% if line|trim != '' %}
  36.                    <li class="mb-1">✔️ {{ line }}</li>
  37.                 {% endif %}
  38.             {% endfor %}
  39.           </ul>
  40.         {% endif %}
  41.         </div>
  42.       </div>
  43.     </div>
  44.   </div>
  45. </section>
  47. {# Fil d'Ariane #}
  48. <nav class="container my-4" aria-label="breadcrumb">
  49.   <ol class="breadcrumb small">
  50.     <li class="breadcrumb-item"><a href="{{ path('app') }}">Accueil</a></li>
  51.     <li class="breadcrumb-item"><a href="{{ path('o.escapade') }}">O'escapade</a></li>
  52.     <li class="breadcrumb-item active" aria-current="page">{{offer.destination.name}}</li>
  53.   </ol>
  54. </nav>
  56. {% if formules %}
  57. {# -----------------------------
  58.    Formules
  59. ------------------------------ #}
  60. <section class="container py-5">
  62.   <h2 class="display-6 lh-1 fw-bold txt-ot-green mb-4">Nos formules O’Escapade</h2>
  64.   <div class="row row-cols-1 row-cols-md-2 g-4">
  65.   {% for f in formules %}
  66.     {# Formule 1 #}
  67.     <div class="col">
  68.       <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
  69.         <div class="card-body p-4">
  70.           <span class="badge bg-ot-green text-white mb-3">{{f.durationLabel}}</span>
  71.           <h3 class="h5 fw-bold mb-3">{{f.title}}</h3>
  73.           <p class="small text-muted mb-2"><i class="bi bi-calendar-week"></i> Départs :</p>
  74.           <ul class="small mb-3">
  75.             {% for line in f.departuresText|split("\n") %}
  76.                 {% if line|trim != '' %}
  77.                    <li class="mb-1">{{ line }}</li>
  78.                 {% endif %}
  79.             {% endfor %}
  80.           </ul>
  82.           <p class="small text-muted mb-2"><i class="bi bi-airplane"></i> Transports :</p>
  83.           <ul class="small mb-3">
  84.             {% for line in f.transportText|split("\n") %}
  85.                 {% if line|trim != '' %}
  86.                    <li class="mb-1">{{ line }}</li>
  87.                 {% endif %}
  88.             {% endfor %}
  89.           </ul>
  91.           <p class="text-muted small mb-4">{{f.description}}</p>
  92.           <a href="{{ path('o.devis') }}" class="btn btn-outline-ot-green rounded-pill">Demander un devis</a>
  93.         </div>
  94.       </div>
  95.     </div>
  96.     {% endfor %}
  97. </section>
  98.   {% endif %}
  100. {# -----------------------------
  101.    SECTION 1 — Hébergement (SÉLECTION D'HÔTELS)
  102. ------------------------------ #}
  103. <section class="container py-4 py-md-5">
  104.   <div class="row g-4">
  105.     <div class="col-12 col-lg-6">
  106.       <p class="text-muted small mb-1">{{offer.title}}</p>
  107.       <h2 class="display-6 lh-1 fw-bold txt-ot-green mb-3">Hébergement</h2>
  108.       <p class="text-muted">
  109.         Notre sélection d’hôtels partenaires pour une escapade sans fausse note : confort, localisation idéale et accueil au top.
  110.       </p>
  111.     </div>
  112.   </div>
  114.   <div class="row g-3 g-md-4 mt-2">
  115.     {% for h in offerHebergement %}
  116.       <div class="col-12 col-sm-6 col-lg-4">
  117.         <article class="card hotel-card border-0 shadow-sm h-100 rounded-4 overflow-hidden">
  118.           <a href="{#{ h.url }#}" class="stretched-link text-decoration-none">
  119.             <div class="ratio ratio-4x3">
  120.               <img src="{{asset('img/hotels/' ~ h.hebergement.country.slug ~ '/' ~ h.hebergement.slug ~ '/' ~ h.hebergement.img)}}" alt="{{ h.hebergement.name }} — photo de l’hôtel" class="object-fit-cover w-100 h-100">
  121.             </div>
  122.             <div class="card-body">
  123.               <h3 class="h6 mb-1 d-flex justify-content-between align-items-baseline">
  124.                 <span class="hotel-name">{{ h.hebergement.name }}</span>
  125.                 <span class="hotel-price">à partir de {{ h.priceFrom }}€</span>
  126.               </h3>
  127.               <p class="small text-muted mb-0">{{ h.blurb }}</p>
  128.             </div>
  129.           </a>
  130.         </article>
  131.       </div>
  132.     {% endfor %}
  133.   </div>
  134. </section>
  136. {% if offer.widget %}
  137. <div class="container">
  138.   <h2 class="h3 txt-ot-green fw-bold mb-3">Activités</h2>
  139. <div class="widget">
  140.   {{offer.widget|raw}}
  141. </div>
  142. </div>
  143. {% endif %}
  145. {# -----------------------------
  146.    SECTION 2 — Parade (texte gauche, image droite)
  147. ------------------------------ 
  148. <section class="container py-4 py-md-5">
  149.   <div class="row g-4 align-items-center">
  150.     <div class="col-12 col-lg-6 order-1 order-lg-0">
  151.       <p class="text-muted small mb-1">{{ escapade.kicker|default('Carnaval St Lucie') }}</p>
  152.       <h2 class="display-6 lh-1 fw-bold text-ot-green mb-3">Parade</h2>
  153.       <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry…</p>
  154.     </div>
  155.     <div class="col-12 col-lg-6 order-0 order-lg-1">
  156.       <div class="ratio ratio-4x3 rounded-4 overflow-hidden shadow-sm">
  157.         <img src="{{ asset(escapade.parade_img|default('img/escapade/parade.jpg')) }}" alt="Parade" class="object-fit-cover w-100 h-100">
  158.       </div>
  159.     </div>
  160.   </div>
  161. </section>#}
  163. {# -----------------------------
  164.    SECTION 3 — Activités (image gauche, texte droite)
  165. ------------------------------ 
  166. <section class="container py-4 py-md-5">
  167.   <div class="row g-4 align-items-center">
  168.     <div class="col-12 col-lg-6">
  169.       <div class="ratio ratio-4x3 rounded-4 overflow-hidden shadow-sm">
  170.         <img src="{{ asset(escapade.activites_img|default('img/escapade/activity.jpg')) }}" alt="Activités" class="object-fit-cover w-100 h-100">
  171.       </div>
  172.     </div>
  173.     <div class="col-12 col-lg-6">
  174.       <p class="text-muted small mb-1">{{ escapade.kicker|default('Carnaval St Lucie') }}</p>
  175.       <h2 class="display-6 lh-1 fw-bold text-ot-green mb-3">Activités</h2>
  176.       <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry…</p>
  177.     </div>
  178.   </div>
  179. </section> #}
  181. {# -----------------------------
  182.    OFFRES DU MOMENT — réutilisation grille cartes maquette
  183. ------------------------------ #}
  184. <section class="py-5 bg-white">
  185.   <div class="container">
  186.     <header class="mb-3">
  187.       <h2 class="h3 txt-ot-green mb-1 fw-bold">Nos O'offres du moment</h2>
  188.       <p class="text-muted mb-0">Découvrez nos dernières expériences en immersion !</p>
  189.     </header>
  191.     <div class="row g-3 g-md-4">
  192.       {% set offres = [
  193.         { title: 'Carnaval St Lucie', img: 'carnaval.jpg', url: '#' },
  194.         { title: 'Croisière Caraïbes', img: 'caraibes.jpg', url: '#' },
  195.         { title: 'Spring Break Cancun', img: 'cancun.jpg', url: '#' },
  196.         { title: 'Road trip Route 66', img: 'road-66.jpg', url: '#' }
  197.       ] %}
  198.       {% for o in offres %}
  199.       <div class="col-12 col-sm-6 col-lg-3">
  200.         <article class="card card-offer border-0 shadow-sm h-100 overflow-hidden rounded-4">
  201.           <a href="{{ o.url }}" class="stretched-link text-decoration-none text-white">
  202.             <div class="ratio ratio-4x5">
  203.               <img src="{{ asset('img/offre/' ~ o.img) }}" alt="{{ o.title }}" class="object-fit-cover w-100 h-100">
  204.             </div>
  205.             <div class="card-img-overlay d-flex flex-column justify-content-end p-3 p-md-4">
  206.               <h3 class="h5 fw-bold text-white text-shadow-sm mb-3">{{ o.title }}</h3>
  207.               <div>
  208.                 <span class="btn btn-outline-light btn-sm">Découvrir</span>
  209.               </div>
  210.             </div>
  211.           </a>
  212.         </article>
  213.       </div>
  214.       {% endfor %}
  215.     </div>
  217.     <div class="section-divider mx-auto my-5"></div>
  218.   </div>
  219. </section>
  221. {% endblock %}
  223. {% block extra_head %}
  224.   {{ parent() }}
  225.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  226.   <style>
  227.     .text-shadow-sm{ text-shadow:0 2px 4px rgba(0,0,0,.35); }
  228.     .text-ot-green{ color: var(--ot-primary, #2ea37a); }
  229.   </style>
  230. {% endblock %}